Blogs

PHP and Kendo UI

by | Comments 2

If you've been following me on Twitter you've probably watched a few of my trials and successes in getting PHP up and running on my computer. It's been fun digging in to something that I haven't used in 13+ years. PHP has certainly changed a lot since then, and the community of PHP developers has gone above my expectations in helping me get back in to it.

But more importantly than my own curiosity and love of working with great communities, I'm digging in to PHP this for a reason related to Kendo UI.

A Sneak Peak At Our DataSource Wrappers

The engineering team has been hard at work on building out the PHP wrappers for Kendo UI, and I want to show you a sneak peak of what this is shaping up to be. The gist of it is that they will allow you to use server-side PHP code to generate your client-side JavaScript for Kendo UI, much the same way that our ASP.NET MVC and JSP (beta) wrappers work.

Here, for example, is a snippet of what it will look like to create a kendo.data.DataSource using our new PHP wrappers:

DataSource Example

$model
  ->id('ProductID')
  ->addField(
    $productIDField, 
    $productNameField, 
    $unitPriceField, 
    $unitsInStockField, 
    $discontinuedField
  );

$schema = new \Kendo\Data\DataSourceSchema();
$schema
  ->data('data')
  ->errors('errors')
  ->model($model)
  ->total('total');

$dataSource = new \Kendo\Data\DataSource();

$dataSource->transport($transport)
  ->batch(true)
  ->pageSize(30)
  ->schema($schema);

This, along with a few details I’ve left out, and combined with the Kendo UI Grid wrapper, will produce the following JavaScript in your page:

PHP Wrapper Output

jQuery("#grid").kendoGrid({
  "columns": [
    // ...
  ],
  "dataSource": {
    "transport": {
      // ...
    },
    "batch": true,
    "pageSize": 30,
    "schema": {
      "data": "data",
      "errors": "errors",
      "model": {
        "id": "ProductID",
        "fields": [ /* ... */ ]
      },
      "total": "total"
    }
  },
  "toolbar": [
    { "name": "create" }, 
    { "name": "save" }, 
    { "name": "cancel" }
  ],
  "height": 400,
  "navigatable": true,
  "editable": true,
  "pageable": true
});

I've omitted a few of the lengthier details here, to keep the code more readable. The result, though, is a fully functioning Kendo UI Grid. It's the same grid we all know and love, still running in the browser. The difference is that we're building the resulting JavaScript with server side PHP.

More PHP, Please!

Now I know the DataSource may not be the most exciting piece of our framework, but it is a critical one. Nearly every Kendo UI widget and control can take advantage of the DataSource to provide 2-way binding in and out of a backing data store. This makes it a foundation for many other PHP wrappers that we will be providing.

Ultimately, this is just a quick preview of what's to come, using an early version of what has been built. There's a good chance that the details I'm showing here will change before the final release, so don't take this blog post as the gospel of what will be. There is also a lot more to the PHP side of things than I'm able to show at this time, and a lot more to come!

If you want to know more, if you want to see the suite of PHP wrappers in action and possibly get a discount on them when they are released, sign up for the 2013 Spring Release keynote!

 

KendoUI_blogs_sign_banner.jpg

 

About the Author
is a Developer Advocate for Kendo UI, a developer, speaker, trainer, screen-caster and much more. He's been slinging code since the late 80’s and doing it professionally since the mid 90's. These days, Derick spends his time primarily writing javascript with back-end languages of all types, including Ruby, NodeJS, .NET and more. Derick blogs at DerickBailey.LosTechies.com, produces screencasts at WatchMeCode.net, tweets as @derickbailey and provides support and assistance for JavaScript, BackboneJS, MarionetteJS and much more around the web.

2 Comments

  1. 1 Mike 14 Feb 2013
    Which version of PHP is required for the wrappers? (PHP 5.3+ ?) Which protocol does it use to exchange data between KendoUI controls and PHP? (JSON?)
  2. 2 Derick Bailey 09 Apr 2013
    Hi Mike,

    It should work with PHP 5.3+, yes. I've mostly used it with 5.4 because I wanted to get the built in web server, but simple testing showed it working with 5.3 as well.

    As for the communication protocol - the PHP wrappers themselves don't communicate with the server. They are processed on the server, directly, and they only produce the needed JavaScript for the browser to run the standard Kendo UI control suite in the browser.

    This might sound a little odd when written out, but I have a small series of screencasts that show this in more detail, and hopefully explain it better:

    http://www.youtube.com/watch?v=2Kpgp_nocEI&list=PLLGlTD7u3kMrneSblzDOn-KDuzzSwjTca

    Hope that helps.

      -Derick

Comment

  1.