How To Access Grid Page Property inside a Kendo Grid in Code

[Kangming]

I have a HTML page that contains a kendo grid showing many pages.  I need remember the grid page number inside the kendo grid in code so that I can go back to the grid page from other HTML pages.  How can I access the grid page property when the grid page number is clicked?

Thanks in advance.

[Alexander Valchev]

Hi Kangming,

I suggest using the page method of the grid's dataSource - it will retrieve current page index or request a page with specified index. For example:

var grid = $("#grid").data("kendoGrid")
grid.dataSource.page(); // get current page
grid.dataSource.page(3); // request page with index 3

I hope this information helps.

Regards,
Alexander Valchev
the Telerik team

[Ajay]

Alex,
I have 'AJAX' bound Kendo Grid as below

 @(Html.Kendo().Grid(Model.CommitteeMembers)
                    .Name("AllCmteMembersGrid")
                    
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.VolunteerID).Title("VOLUNTEER ID").Hidden();
                        columns.Bound(o => o.LastName).Title("LAST NAME");
                        columns.Bound(o => o.FirstName).Title("FIRST NAME");
                        columns.Bound(o => o.BusinessName).Title("BUSINESS NAME").Width(90);
                        columns.Bound(o => o.OfficePhone).Title("Work Phone");
                        columns.Bound(o => o.PrimaryEmail).Title("Email").Width(100);
                       // columns.Command(command => { command.Edit().UpdateText("Save"); }).Width(74);
                       
                        columns.Command(command =>
                        {

                               command.Custom("Edit").Text("Edit").Click("showDetails").HtmlAttributes(new { id = "EditBtn", @class = "t-state-disabled" });
                           
                               //command.Custom("View").Text("View").Click("showDetails").HtmlAttributes(new { id = "ViewBtn",@class="t-state-disabled" });

                               //columns.Bound(o => o.LastName).Title("LAST NAME").Visible(false);             

                        }).Width(80);
                                
                    })
                    //.CellAction(cell =>
                    
                    //{
                    //    if (cell.Column.Title == null && cell.DataItem.LastName=="Beiber")
                    //    {
                    //        //Hides Void button rendering it uneditable
                    //        cell.HtmlAttributes["ViewBtn"] = "visibility:hidden";
                    //    }
                    //}) 
                    .Editable(editable => editable.Mode(GridEditMode.PopUp))
                    .Pageable()
                    .Sortable()
                    .Scrollable()                
                    .Selectable()
                    //.Events(e => e.Change("onfilterChange"))
                    .Events(e => e.DataBound("onDataBound").Change("onfilterChange"))
                    .Filterable(filterable => filterable
                        .Extra(false)
                        .Operators(operators => operators
                         .ForString(str => str.Clear()
                         .StartsWith("Starts with")
                        .IsEqualTo("Is equal to")
                        .IsNotEqualTo("Is not equal to")
                    )))
                    .HtmlAttributes(new { style = "width:510px;Height:600px;" })

                    .DataSource(dataSource => dataSource
                        .Ajax()
                        //.Server()
                        //.ServerOperation(true)
                        .Read(read => read.Action("Members_Read", "Committee"))
                        .Update(update => update.Action("SaveEditedCommitteeMember", "Committee"))
                        .Model(model => model.Id(o => o.VolunteerID))
                        .PageSize(20))
                        )

I refresh the page with the Grid to show the changes .My Users want  them to go back to the Page from they edited a record through Popup.  


In the 'Onbound' event and in the '$(document).ready(function ()  I do 

grid.select($("tr:contains('" + uid + "')")); 

but the page is different . 


To goto  the page I use ethe

grid.dataSource.page('@TempData["gridPage"]');


My problem is when i do that I go to the Record and the page but everything else freezes or when you click all the other page buttons nothing Happens .


Can you help me out  by telling me what to do to get the other pages working , since  I am going nuts over this .


Regards,


Ajay Suryadewara

[Alexander Valchev]

Hello Ajay,

I am afraid that the provided information is not sufficient enough in order to determine where exactly the problem comes from. Generally speaking your code looks OK. The correct way to change Grid's page is through the page method of the DataSource.

Do you see any JavaScript errors in the console? Could you please send me a small but runnable sample which isolates the issue? In this way I would be able to examine your exact configuration in details and assist you further.
Thank you in advance for the cooperation.

Regards,
Alexander Valchev
Telerik