Getting grid properties?

5 posts, 1 answers
  1. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 12 Jun 2012 Link to this post

    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
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 12 Jun 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 12 Jun 2012 Link to this post

    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

  5. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 14 Jun 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 14 Jun 2012 Link to this post

    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
        },
        ...


Back to Top
Kendo UI is VS 2017 Ready