paging numbers are not displayed

[SHAWN]

I have a grid that I am filling via javascript. When I initially fill the grid, the paging numbers are not displayed. However after I sort a column on the grid they appear.

Here is a short video demonstrating the issue, in both IE and FF.

http://screencast.com/t/i3iXWy9v

The sample project is here:(kendogridtest.zip)
https://skydrive.live.com/redir.aspx?cid=80ce78240aa8df49&resid=80CE78240AA8DF49!1296&parid=80CE78240AA8DF49!657&authkey=!AH-nIxcIUDGzY54

[Dimo]

Hello Shawn,

The problem is caused by missing total count information in the returned JSON. As a result, the Grid does not know how many pages it has and does not render any page numbers. For further information please refer to:

http://www.kendoui.com/forums/ui/grid/am-i-doing-something-wrong-or-is-it-a-pageable-bug.aspx#1954476

Greetings,
Dimo
the Telerik team

[SHAWN]

I made the following changes, however it is still not working correctly, all I get is the spinny thing. Sample project here (KendoGridTest2.zip)
https://skydrive.live.com/redir.aspx?cid=80ce78240aa8df49&resid=80CE78240AA8DF49!1297&parid=80CE78240AA8DF49!657&authkey=!APRvDeeTxox-24E

Thank you!

1) added data & total elements to the schema

$("#datagrid").kendoGrid({

            dataSource: {

                schema: {

                    data: "data",

                    total: "total",

                    model: {

                        fields: {

                            FirstName: { type: "string" },

                            LastName: { type: "string" }

                        }

                    }

                },

                pageSize: 15

            },

            columns: [

                {

                    field: "FirstName",

                    title: "First Name"

                },

                {

                    field: "LastName",

                    title: "Last Name"

                }],

                pageable: true,

                sortable: true

        });

2) wrapped my json putting the data in the data and adding a total

var customers = new List<Customer>();

 

for (int i = 0; i < 100; i++)

{

    customers.Add(new Customer()

                      {

                          FirstName = string.Format("foo {0} - {1}", i, DateTime.Now.ToLongTimeString()),

                          LastName = string.Format("bar {0}", i)

                      });   

}

 

var wrapped = new {data = customers, total = customers.Count};

 

return Json(wrapped, JsonRequestBehavior.AllowGet);

now my json looks like this:

{ "data" : [ { "FirstName" : "foo 0 - 4:54:20 AM",

        "LastName" : "bar 0"

      },

      { "FirstName" : "foo 1 - 4:54:20 AM",

        "LastName" : "bar 1"

      },

      { "FirstName" : "foo 2 - 4:54:20 AM",

        "LastName" : "bar 2"

      },

      { "FirstName" : "foo 3 - 4:54:20 AM",

        "LastName" : "bar 3"

      },

      { "FirstName" : "foo 4 - 4:54:20 AM",

        "LastName" : "bar 4"

      },

      { "FirstName" : "foo 5 - 4:54:20 AM",

        "LastName" : "bar 5"

      },

      { "FirstName" : "foo 6 - 4:54:20 AM",

        "LastName" : "bar 6"

      },

      { "FirstName" : "foo 7 - 4:54:20 AM",

        "LastName" : "bar 7"

      },

      { "FirstName" : "foo 8 - 4:54:20 AM",

        "LastName" : "bar 8"

      },

      { "FirstName" : "foo 9 - 4:54:20 AM",

        "LastName" : "bar 9"

      }

    ],

  "total" : 10

}

 

[Dimo]

Hello Shawn,

The Grid's datasource requires either data to be specified directly (local datasource), or a read URL to be defined (remote datasource).

If you want to bind the Grid manually as a result of a button click and supply different search parameters, then you can do the following:

1. Define the search URL in the Grid datasource transport
2. Set autoBind for the Grid to false to prevent data binding upon initialization
3. define a parameterMap for the Grid transport, which will define the query string key-value pair of the request

Note that you also need to set serverPaging to true in the dataSource, in order to support the scenario in which you click on the Search button and then page the Grid. Currently there is an issue in the datasource, which prevents you from using remote datasource with client-side paging. This will be resolved for the next release.

$(document).ready(function () {

    function getSearchParam() {
        return Math.random();
    }

    $("#search").click(function () {
        var grid = $("#datagrid").data("kendoGrid");
        grid.dataSource.read();
    });

    $("#datagrid").kendoGrid({
        dataSource: {
            transport: {
                read: "/Home/GetData/",
                parameterMap: function(options, operation) {
                    if (operation == "read") {
                        return { rnd: getSearchParam() }
                    }
                }
            },
            serverPaging: true,
            schema: {
                data: "data",
                total: "total",
                model: {
                    fields: {
                        FirstName: { type: "string" },
                        LastName: { type: "string" }
                    }
                }
            },
            pageSize: 15
        },
        columns: [
            {
                field: "FirstName",
                title: "First Name"
            },
            {
                field: "LastName",
                title: "Last Name"
            }],
        pageable: true,
        sortable: true,
        autoBind: false
    });
});

Greetings,
Dimo
the Telerik team

[SHAWN]

I am getting a bit closer to a fully working proof of concept. However when I turn filtering on I get an " 'dataSource': object is null or undefined" exception.

here is a downloadable code sample:
https://skydrive.live.com/redir.aspx?cid=80ce78240aa8df49&resid=80CE78240AA8DF49!1298&parid=80CE78240AA8DF49!657&authkey=!ANmAnKBI4vrfJJU

<script type="text/javascript">

    $(document).ready(function () {

 

        function convertSort(original) {

            var converted = "";

            if (original) {

                var sortIndex;

                for (sortIndex = 0; sortIndex < original.length; sortIndex += 1) {

                    if (sortIndex > 0) {

                        converted += ", ";

                    }

                    converted += original[sortIndex].field + " " + original[sortIndex].dir;

                }

            }

            return converted;

        };

 

        function getSearchParam() {

            return Math.random();

        }

 

        $("#search").click(function () {

            var grid = $("#datagrid").data("kendoGrid");

            grid.dataSource.read();

        });

 

        $("#datagrid").kendoGrid({

            dataSource: {

                transport: {

                    read: "/Home/GetData/",

                    parameterMap: function (options, operation) {

                        if (operation == "read") {

                            return {

                                pageIndex: options.page,

                                size: options.pageSize,

                                orderBy: convertSort(options.sort),

                                rnd: getSearchParam()

                            };

                        }

                        else return null;

                    }

                },

                schema: {

                    data: "data",

                    total: "total",

                    model: {

                        fields: {

                            FirstName: { type: "string" },

                            LastName: { type: "string" }

                        }

                    }

                },

                pageSize: 15,

                serverPaging: true,

                serverFiltering: true,

                serverSorting: true

            },

            columns: [

            {

                field: "FirstName",

                title: "First Name"

            },

            {

                field: "LastName",

                title: "Last Name"

            }],

            pageable: true,

            sortable: true,

            filterable: true

        });

    });

</script>

[Dimo]

Hello Shawn,

Kendo UI requires jQuery 1.7.1, as stated in the documentation.

The problem is caused by non-supported jQuery prop() method in jQuery 1.5.1

Greetings,
Dimo
the Telerik team

[SHAWN]

ended up abandoning my custom data filters, and binding to an odata data source, thanks for the help