Server side binding for initial load, but ajax binding for page changes

Hello Gavin,

You should pass all the 100 records to the Grid constructor - the Grid will automatically apply paging and serialize just 20 records and display them.

If you want to continue and pass only 20 records, specify the Total count manually, then you should consider implementing the Custom Binding.

Kind Regards,
Petur Subev
the Telerik team

Hi
Kind of defeats the purpose of paging if you have to supply the entire collection to the binder.

Here's how I solved it:

 @(Html.Kendo().Grid<CallsViewData>()
              .Name("CallsGrid")
              .Columns(c =>
                  {
                      c.Bound(m => m.TestResultId).Groupable(false).Title(@Html.Resource("HeadTestResultId"));
                      c.Bound(m => m.RunType).Title(@Html.Resource("HeadType"));
                      c.Bound(m => m.CallFlow).Title(@Html.Resource("HeadDirection"));
                      c.Bound(m => m.PhoneNo).Title(@Html.Resource("HeadCalledNo"));
                      c.Bound(m => m.ActualStart).Title(@Html.Resource("HeadStartDate"));
                      c.Bound(m => m.Connected).Title(@Html.Resource("HeadConnectedDate"));
                      c.Bound(m => m.Disconnected).Title(@Html.Resource("HeadDisconnectedDate"));
                      c.Bound(m => m.Duration).Title(@Html.Resource("HeadDuration"));
                      c.Bound(m => m.Duration).Title(@Html.Resource("HeadMinutes"));
                  })
              .Resizable(s => s.Columns(true))
              .Pageable(p => p.PageSizes(MvcApplication.Settings.PageSizesList))
              .Scrollable()
              .EnableCustomBinding(true)
              .BindTo(Model.Calls)
              .DataSource(dataSource => dataSource.Server().Total(Model.CollectionSize.Value))
              .DataSource(dataSource => dataSource
                                            .Ajax()
                                            .Read(read => read.Action("clientcalls", "report").Data("$.proxy(CallsGridExt.attachFormFields, CallsGridExt)").Type(HttpVerbs.Post))
                                            .PageSize(MvcApplication.Settings.DefaultPageSize)
                                            .Events(e => e.RequestStart("$.proxy(CallsGridExt.surpressInitialAjax, CallsGridExt)").Error("$.proxy(CallsGridExt.handleError,CallsGridExt)"))
              ))
        <script type="text/javascript">
            var CallsGridExt = new KendoGridExtensions({ form: '#callsreport' });
        </script>


function KendoGridExtensions(args) {
    this._firstRequest = true;
    this._args = args;
};
KendoGridExtensions.prototype = {
    handleError: function(e) {
        alert(e.errors.join('\n'));
    },
    surpressInitialAjax: function(e) {
        if (this._firstRequest) {
            this._firstRequest = false;
            e.preventDefault();
        }
    },
    attachFormFields: function(parameters) {
        $(this._args.form).serializeObject(parameters);
    }
};

Hi Gavin,

I have the exact same requirement and I am sure most of the people who use grid would want to take the same approach. Can you share your (cshtml) if possible.?

Thanks,
Venkat

This post is old but I thought I would share that I accomplished intial server databinding with ajax binding on page request simply by putting the grid into CustomBinding. 

Basically the code provided here but no need put in the initial check for first request. 
Because the grid was server databound to list the autobinding does not occur so no need to check that.

A later release may have enabled this functionality after this post was made but thought I would share none the less.