how to catch PageSizeChanged event of telerik MVC Grid (NOT KENDO GRID)

Question

I am working on asp.net MVC 4 application in which i am using telerik MVC Grid (NOT KENDO GRID).

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api-and-events.html

in my page (cshtml) i am having the grid using the common partial page. in the page, i am also having other input elements ( which acts as filter criteria for grid data).User selects the values from input elements and click on submit button and data in grid is filled accordingly (using post requst in MVC code).

I am using paging in grid and user may select the page size. Grid set up

Html.Telerik().Grid(Model)
            .Name("Employees")
            .Columns(cols =>
            {
                cols.Bound(e => e.FirstName).Title("First Name");
                cols.Bound(e => e.LastName).Title("Last Name");
                cols.Bound(e => e.SSN).Title("SSN");
                cols.Bound(e => e.HireDate).Format("{0:MM/dd/yyyy}").Title("Hire Date");
                cols.Bound(e => e.GroupName).Title("Department GROUP");               

            })
                .Groupable()
                .Sortable(x => x.OrderBy(z=>z.GetType()))
                .Pageable(p => p.PageSize(5).Style(GridPagerStyles.PageSizeDropDown | GridPagerStyles.NextPreviousAndNumeric).PageTo((Model.Any()&&!string.IsNullOrWhiteSpace(Model.First().PageNumber)?Convert.ToInt32(Model.First().PageNumber):1)))
                .Filterable()
                .Render();

the POST method in employee controller returns the filtered data by accepting the model values and querying the database.

now when changes the page size of the grid,request is sent to GET method of the controller instead of post.

How to catch PageSizeChanged like event of grid in JavaScript, so that i can manually post the form wherever user change page size?

EDIT : I have written following code to get click event whenever user clicks on number in page size dropdown

 $(document).on('click', 'ul.t-reset > li.t-item', function (e) {

//how to avoid default functionality of server call?
//tried following
//event.unbind();
                //event.preventDefault();
                //alert("Was preventDefault() called: " + event.isDefaultPrevented());
                //event.stopImmediatePropagation()
//return false;


});

Greg Greg · Accepted Answer · 2015-12-16T12:32:40

MVC Grids just get turned into Kendo Grid javascript, so all the API methods/events and so on can be used with the MVC Grid.

Check out the kendo grid page change event and just use that.

http://docs.telerik.com/kendo-ui/api/javascript/ui/pager#events-change

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

Now you have the grid, you can do whatever you wish to it. Subscribe to the page event change like the example from Kendo API documentation;

<div id="pager"></div>

<script>
    function pager_change() {
      console.log("pager change event");
    }

    var dataSource = new kendo.data.DataSource({
      data: [
        { productName: "Tea", category: "Beverages" },
        { productName: "Coffee", category: "Beverages" },
        { productName: "Ham", category: "Food" },
        { productName: "Bread", category: "Food" }
      ],
      pageSize: 2
    });

    dataSource.read();

    var pager = $("#pager").kendoPager({
      dataSource: dataSource
    }).data("kendoPager");

    pager.bind("change", pager_change);
</script>

I like to set up the grid with MVC and if I need to get into its workings and do a lot of client side magic I'll just grab it as a Kendo grid.

how to catch PageSizeChanged event of telerik MVC Grid (NOT KENDO GRID)

1 Answers