This is a migrated thread and some comments may be shown as answers.

Grid sorting and filtering with remote data

2 Answers 323 Views

Grid

This is a migrated thread and some comments may be shown as answers.

gregory asked on 18 Feb 2015, 10:25 PM

telerikfilter.png

Hello,
I sucessfully built a grid using ColdFusion and am binding it using a remote backend with a ColdFusion cfc. However, the grid filtering dropdown options are greyed out. Underneath 'Show items with value that:' should have options, but they are greyed out. Here is an example: http://dojo.telerik.com/#@korchev/UYEta.

I tried using varius arguments, but everything I have tried to far does not seem to address the problem. Here is my code on the front end:

<!DOCTYPE html>
<html>
<head>
    <title>Kendo Grid Example</title>
    <meta charset="utf-8">
    <link href="/cssweb/common/frameworks/kendoUi/examples/content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="/cssweb/common/frameworks/kendoUi/styles/kendo.common.min.css" rel="stylesheet">
    <link href="/cssweb/common/frameworks/kendoUi/styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="/cssweb/common/frameworks/kendoUi/styles/kendo.default.min.css" rel="stylesheet">
    <link href="/cssweb/common/frameworks/kendoUi/styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="/cssweb/common/frameworks/kendoUi/styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="/cssweb/common/frameworks/kendoUi/js/jquery.min.js"></script>
    
    <script src="/cssweb/common/frameworks/kendoUi/js/kendo.all.min.js"></script>
    <script src="/cssweb/common/frameworks/kendoUi/examples/content/shared/js/console.js"></script>


</head>
<body>

        <div id="example">
            <div id="grid"></div>
            <script>
                $(document).ready(function() {

     // Create the datasource
                    dataSource = new kendo.data.DataSource({
      dataType: "json",
      transport: {
       read: {
        url: "/cssweb/test/kendo/grid.cfc?method=getUsers", // the cfc component which processes the query and returns a json string.
        dataType: "json" // jsonp is used for cross domain reads.
       },
      },
            batch: true,
      pageSize: 10, // make sure to include a pageSize, or you will get a NaN of NaN of total records on the bottom of the grid.
      schema: {
       data: "data", // the handle coming from the json respons.
       total: "total", // total is returned in the "total" field of the response.
       model: {
        fields: {
         user_id: { editable: false, nullable: true },
         user_name: { type: "varchar", validation: { required: false, nullable: true, filterable: true} },
         first_name: { type: "varchar", validation: { required: true, nullable: false } },
         last_name: { type: "varchar", validation: { required: true, nullable: false } },
         email: { type: "varchar", validation: { required: false, nullable: true } }
        }
       }
      }
     } );

     // Instantiate the grid
     var grid = $("#grid").kendoGrid({
      autoBind: true,
      dataSource: dataSource, // the datasource above.
      height: 550,
                        filterable: true,
                        sortable: true,
                        pageable: true,
      selectable: "row",
                        columns: [{
                                field:"user_id",
                                filterable: false,
        hidden:true
                            }, {
                                field: "user_name",
                                title: "User Name"
                            }, {
                                field: "first_name",
                                title: "First Name"
                            }, {
                                field: "last_name",
                                title: "Last Name"
                            }, {
                                field: "email",
                                title: "Email"
       }],
       // Open the detail window on row click
       change: function (arg) {
        var selected = jQuery.map(this.select(), function (item) {
         return jQuery(item).find('td').first().text();
        });
        //alert(selected);
        createWindow(selected);
       },                  } );
    } );

    // Window script
    function createWindow(id) {

       jQuery(document.body).append('<div id="myDynamicWindow"></div>');
      jQuery('#myDynamicWindow').kendoWindow({
      title: "Order Details",
      modal: true,
      resizable: true,
      width: 400,
      content: "window.cfm?Id=" + id,
      close: function() {
       setTimeout(function() {
        jQuery('#myDynamicWindow').kendoWindow('destroy');
       }, 200);
      }
     }).data('kendoWindow').center();
    }
  </script>
</div>


</body>
</html>

And this is my ColdFusion cfc object:

<cfcomponent displayname="kendoGrid" hint="Creates a serialized json string to a kendo grid" name="kendoGrid">
    <cffunction name="getUsers" access="remote" returnformat="json" output="false">

        <cfobject component="common.cfc.json.cfjson" name="cfJson">
        <cfobject component="common.cfc.json.arrayCollection" name="arrayCollection">
        <cfobject component="common.cfc.db.cssweb.Users" name="UsersTableObj">

        
        <cfquery name="users" datasource="#thisDatasource#">
        SELECT
            User_Id, User_Name, First_Name, Last_Name, Email
            FROM dbo.Users
            WHERE User_Id < 500
        </cfquery>

        <cfinvoke component="#arrayCollection#" method="init" returnvariable="jsonString">

        <cfset jsonString.setData(users) />
        <cfset jsonString.setDataHandle(true) />
       <cfreturn jsonString.$renderdata() />

   </cffunction>
</cfcomponent>

Any help would be greatly appreciated!

Thanks!

2 Answers, 1 is accepted

Accepted

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Grid sorting and filtering with remote data

2 Answers, 1 is accepted