Integrating Kendo Grid with Coldfusion

Question

We're looking to switch from our current grids (JQWidgets) to KendoUI grids and I'm working on a proof of concept. Our biggest requirement is server-side paging/sorting/filtering, and that's where I'm running into issues.

Our existing grids are XML-based, so I've created a Kendo grid that does the same:

$(document).ready(function(){
    var xmlDataRemote = new kendo.data.DataSource({
        transport: {
            read: { url: "/KendoDashboard/KendoController.cfc?method=getGrid" }
        }, 
        pageSize: 20, 
        serverPaging: true, 
        serverSorting: true,
        serverFiltering: true,
        schema: {
            type: "xml",
            data: "/Items/Item",
            total: "/Items/Item/TotalRows",
            model: {
                id: "ID",
                fields: {
                    Name: { field: "Name/text()", type: "string" },
                    Status: { field: "Status/text()", type: "string" },
                    Type: { field: "Type/text()", type: "string" }
                }
            }
        }
    });

    var grid = $("#grid").kendoGrid({
        dataSource: xmlDataRemote,
        pageable: true,
        sortable: true, 
        filterable: true,
        columns: [
            { title: "Name", field: "Name" },
            { title: "Status", field: "Status" },
            { title: "Type", field: "Type" }    
        ]
    });
});

Example XML:

<Items>           
    <Item>
        <ID>1</ID>
        <Name>First Item Name</Name>
        <Status>Active</Status>
        <Type>Online</Type>   
    </Item>           
    <Item>
        <ID>2</ID>
        <Name>Second Item Name</Name>
        <Status>Inactive</Status>
        <Type>External</Type>
    </Item>
    <TotalRows>22</TotalRows>
</Items>

My issue w/ paging: The total being set on the datasource doesnt appear to be working. The grid footer has "No items to display" instead of "1-20 of 22 items" and no paging options. I'm also not sure what the "take" and "skip" parameters passed from the grid (see below) are for.

My issue w/ sorting/filtering: The sorting and filtering parameters being passed are some oddly formatted strings:

/KendoDashboard/KendoController.cfc?method=getCoursesGrid&take=20&skip=0&page=1&pageSize=20&sort%5B0%5D%5Bfield%5D=Name&sort%5B0%5D%5Bdir%5D=desc&filter%5Blogic%5D=and&filter%5Bfilters%5D%5B0%5D%5Bfield%5D=Name&filter%5Bfilters%5D%5B0%5D%5Boperator%5D=eq&filter%5Bfilters%5D%5B0%5D%5Bvalue%5D=test

If I look at it in Firebug, the parameters are listed as:

filter[filters][0][field]   Name
filter[filters][0][operator]    eq
filter[filters][0][value]   test
filter[logic]   and
method  getCoursesGrid
page    1
pageSize    20
skip    0
sort[0][dir]    desc
sort[0][field]  Name
take    20

Setting up a cfargument with a name of "filter" and a type of string and then dumping it out just returns a zero (0). And of course Coldfusion won't take an argument name of "filter[filters]", so I'm at a bit of a loss as to how to proceed.

Regarding the totals issue should the value of total in the schema object not be "/Items/TotalRows", rather than "/Items/Item/TotalRows",? — Michael
I think the take and skip parameters are useful when using LINQ. When I have used a Kendo grid with an SQL database backend I have just used the pageSize and page parameters to achieve server-side pagination. pageSize and page can be used in the LIMIT clause of a MySQL query. — Michael
@Michael - You're right, I've corrected it but still no luck. Thanks for the tip on LIMIT, I'll take a look. — shimmoril

layonez layonez · Accepted Answer · 2015-09-23T20:54:19

You can set total as

total: function(response) {
  return response.Items.TotalRows;
}

And watch at response variable if something is wrong

Integrating Kendo Grid with Coldfusion

1 Answers