Getting grid properties?

[Nick]

The documentation doesn't seem to mention anywhere which properties of the grid are available.  I'm trying to find out the current page number the grid is on so I can add it to a cookie or something.  I need to be able to put users back on the grid page they left.

In an ideal world, I'd like to be able to use the current page number in a column template, something like

$("#articleList").kendoGrid({

  columns: [

    {

      field: "ArticleId",

      title: "ID",

      template: "<a href='"+appRoot+"/Home/Detail/${ArticleId}/${ArticleVersion}/${gridPageNumber}'>${ArticleId}</a>",

      width: 75

    },

    ....

Thanks,
Nick

[Alexander Valchev]

Hello Nick,

To retrieve the current page I suggest to use the page method of the dataSource.

$("#grid").data("kendoGrid").dataSource.page()

The same method could be used to put back the grid to a specific dataSource page.
I hope this helps.

Kind regards,
Alexander Valchev
the Telerik team

[Nick]

Ok, so I can get the page number from the data source in the dataBound event but this seems too late for the grid when it builds the url in my column.

This code is fine for the initial page but if you select a different page in the grid the page value in the templated column urls stick with the initial value, not the current value of pageNum.

/// <reference path="../jquery-1.7.2.js" />

/// <reference path="../kendo/2012.1.322/kendo.web.min.js" />

/// <reference path="../jquery.url.js" />

/// <reference path="../../Views/Home/Index.cshtml" />

 

var pageNum = 1;  // set the default page number

 

$(document).ready(function () {

 

  // look in the querystring to see if there is a specific page required.

  var urlPageNum = $.url().param("page");

  if (urlPageNum) pageNum = urlPageNum;

 

  $("#articleList").kendoGrid({

    columns: [

      {

        field: "ArticleId",

        title: "ID",

        template: "<a href='" + appRoot + "/Home/Detail/${ArticleId}/${ArticleVersion}/" + pageNum + "'>${ArticleId}</a>",

        width: 75

      },

 

      {

        field: "ArticleName",

        title: "Name"

      },

 

      {

        field: "ArticleVersion",

        title: "Version",

        width: 75

      },

 

      {

        field: "TemplateType",

        title: "Template"

      },

 

      {

        field: "Category",

        title: "Category",

        width: 150

      },

 

      {

        field: "AlertName",

        title: "Alert Name"

      }

 

    ],

    dataSource: {

      type: "json",

      serverPaging: true,

      pageSize: 20,

      page: pageNum,

      transport: {

        read: {

          url: appRoot + "/Home/GetArticles",

          dataType: "json"

        }

      },

      schema: {

        data: "Data",

        total: "TotalCount"

      }

    },

    pageable: true,

    dataBound: function (e) {

      // update the page number to the current page

      pageNum = this.dataSource.page(); 

    }

  });

 

});

Is there an earlier event that I can use to update the pageNum variable before the data is bound to the grid?  Can I get the urls in the first column to have the current page number?

Thanks,
Nick

[Alexander Valchev]

Hi Nick,

The pageNum variable should be changed on the dataBound event, the problem is that at this time the templates are already set up and does not take the into account the value modification.
As a solution I would recommend to call a function within the template definition that returns the current page number - for example:

{field:"foo", template: kendo.template("foo: #= foo # <> Page: #= getCurrentPage() #")}

function getCurrentPage() {
    return $("#grid").data("kendoGrid").dataSource.page();
}

For convenience I created a small example that uses this approach in action. I hope this helps.

Greetings,
Alexander Valchev
the Telerik team

[Nick]

Thanks Alexander , that's perfect.

It's this kind of awesome support that makes me love Telerik controls so much  :D


Just for the record in case other people find it useful my template call is now:

$("#articleList").kendoGrid({

  columns: [

    {

      field: "ArticleId",

      title: "ID",

      template: kendo.template("<a href='" + appRoot + "/Home/Detail/#= ArticleId #/#= ArticleVersion #/#= getCurrentPageNumber() #'>#= ArticleId #</a>"),

      width: 75

    },

    ...