Grid initialisation with remote access

[David]

Hello,

First and foremost - great to see that Telerik is also providing this set of widgets.  It looks as if we will certainly be interested in purchasing this.

I do have a question though for setting up a datagrid.  

Our widgets are usually set up as html entities that have a specific class assigned to them, and have data attributes that we can interprete in javascript to set up the widget.  this has one major and obvious advantage: we have 1 javascript file we include in the headers that contain ALL initialisation code.

So, our grid would look like this:

<table class="fx-grid"
data-datasource-url="json.php?blablabla"
> <!-- some code can go here still -->
</table>

And in javascript, we usually initialise everything as follows:

$('table.fx-grid').livequery(function() {
$(this)
.removeClass('fx-grid')           // We do this to make sure this widget can only be selected and processed ONCE
.kendoGrid({
// configuration settings go here!
});
});

The major advantage is that when I retrieve a new grid through ajax to be displayed in a tab for instance, that ajax call won't need to send along additional javascript code, and we only need the html (the livequery plugin does just what we need: detect that new widget is added to the dom, and trigger the method...)

As you notice, we would need all settings as data- parameters defined so that in javascript, we can easily interprete them using $(this).attr('data-datasource-url') and pass them along to the kendoGrid feature.

I'm just not sure at this time what the minimal configuration is for setting up a remote datasource, and in what format we need to have json.php return the data.  I've been looking at your examples, but I don't see what the minimal setup is you require.

[Rosen]

Hi David,

The minimal grid configuration to use remote data will be similar to the following:

$("#grid").kendoGrid({
    dataSource: {
        transport: {
            read: "MY_DATA_URL"
        }
    }
});

Regarding the server response. The DataSource requires an array of data records in order to function correctly. Therefore, here is how the structure of a basic response for binding to a JSON data should look like:

{
   data: [ { foo: "foo", bar: "bar" }, ...... ], // the array of data records
   total: 100 // total number of records
}

Note that schema option can be use to instruct DataSource where to find different attributes in the server response.All the best,
Rosen
the Telerik team

[David]

Hi 

Thanks for the feeback - much appreciated.
I already found out to set up the grid to work with some demo data.

Basically, as I don't want to render javascript initialisation code (because we want that to remain in a centralised location, also considering we need to be able to render new grids through ajax, and I don't want the javascript code required to do that to always go over the line, hence lowering my footprint there...), I still need some way to have all meta data stored in the <table data-xxx tags...

1. For the columns, I already use the <th> tags to define all the columns, which works great (I'm a bit concerned though that the grid doesn't render at all if the returned ajax data does not contain a field for each column...  Why can't it render an empty cell for that, just to eliminate empty grids when just one column doesn't match (theoretically, this is not possible, but I just noticed it...)

2. Is it possible to have the data contain html?  On our server, we have logic in place to add an icon and a hyperlink to the cell data, which is then returned as a bit of html code.  When I do that, the html is shown in the grid.  Can we fix tis somehow?

Thanks very much for your feedback!  We're doing some testing, and if all goes well, we'll purchase the license for sure (have been waiting on some decent progress on the jQuery UI library too long now, so we need another solution...)

[Rosen]

Hello David,

Up to your questions:

1 . I'm afraid that this is not possible. Records shown in the grid should have same number of  properties.
2. In order to render the html contained in a field's value, you should set the appropriate column's encoded option to false. By default this option is true, thus html field value will be encoded.

Regards,
Rosen
the Telerik team