This is a migrated thread and some comments may be shown as answers.

MVC grid: Client-side pagination with CustomBinding not implemented at page load

0 Answers 96 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Dave
Top achievements
Rank 1
Dave asked on 10 Jan 2012, 11:32 AM
Good day

I'm quite new to Telerik and to a project at a client where the Telerik grid for MVC is employed quite extensively. I have a problem with a grid with custom binding which receives the full dataset at page load and doesn't implement the client-side pagination on page load: all results from the dataset are shown. However, the paging controls are correct (showing 5 pages) and when a page number or pagination arrow (or, indeed, the refresh button) is clicked, pagination seems to start working correctly again.

We're using 2011.Q3 code and, as far as I'm aware, this problem didn't exist in Q2 (but I may well be wrong here).

I've worked around the issue with some client-side javascript, but I'm quite sure that I shouldn't need to :/

Ok, no query is complete without code, so here goes: server-side code in the razor view:

@* start razor code *@
            @(Html.Telerik().Grid(Model)
            .Name("VariableParameters")
            .DataKeys(keys =>
            {
                keys.Add(vp => vp.KEY);
            })
            .DataBinding(dataBinding =>
                {
                    dataBinding.Ajax()//.OperationMode(GridOperationMode.Client)
                        .Select("SelectAjaxEditing", "VariableParameter", new { searchText = ViewBag.SearchText });
                })
            .Columns(columns =>
            {
                columns.Bound(vp => vp.KEY).ReadOnly(true).Width(100).Title("Key");
                columns.Bound(vp => vp.DESCRIPTION).Width(300).Title("Description");
                columns.Bound(vp => vp.SHORTDESCRIPTION).Hidden(true);
                columns.Bound(vp => vp.CONTROLMIN).Width(100).Title("Min");
                columns.Bound(vp => vp.CONTROLMAX).Width(100).Title("Max");
                columns.Bound(vp => vp.AVAILABLEFLG).Hidden(true);
                columns.Bound(vp => vp.FORMULAFLG).Hidden(true);
                columns.Bound(vp => vp.TIMEOFFSET).Hidden(true);
                columns.Bound(vp => vp.AVGZEROSFLG).Hidden(true);
                columns.Bound(vp => vp.OperatingUnitID).Hidden(true);
                columns.Bound(vp => vp.DECIMALS).Hidden(true);
                columns.Bound(vp => vp.MULFACTOR).Hidden(true);
                columns.Bound(vp => vp.DIVFACTOR).Hidden(true);
                columns.Bound(vp => vp.CONTROLTARGET).Hidden(true);
                columns.Bound(vp => vp).Hidden(true);
                columns.Bound(vp => vp.GRAPHMIN).Hidden(true);
                columns.Bound(vp => vp.GRAPHMAX).Hidden(true);
                columns.Bound(vp => vp.INPUTMIN).Hidden(true);
                columns.Bound(vp => vp.INPUTMAX).Hidden(true);
                columns.Bound(vp => vp.GRAPHINTERVAL).Hidden(true);
                columns.Bound(vp => vp.LOWERWARNING).Hidden(true);
                columns.Bound(vp => vp.UPPERWARNING).Hidden(true);
                columns.Bound(vp => vp.TIMEFLAGS).Hidden(true);
                columns.Bound(vp => vp.IMS_ID).Hidden(true);
                columns.Bound(vp => vp.ISRFTVAR).Hidden(true);
                columns.Bound(vp => vp.VariableParamterID).CanUserDo(LabOperation.CanEditLabVariableParameters).Title("").Format(Html.ActionLink("Edit", "Edit", new { id = "{0}" }, new { @class = "Btn_Default" }).ToHtmlString()).Encoded(false).Width(50);
            })
        .Pageable(settings => settings.Total((int)ViewData["total"]).PageSize(10))
        .Sortable(sorting => sorting.SortMode(GridSortMode.MultipleColumn))
        .Resizable(resize => resize.Columns(true))
        .EnableCustomBinding(true)
        .ClientEvents(events => events.OnDataBound("onGridDataBound"))


)

@* end of razor code *@

and the javascript to work around the issue:

// start javascript code
    $(window).load(function () {
        $("#VariableParameters").data("tGrid").pageTo(1);
    });
// end javascript code

Note that the workaround must be triggers on the window load event as the document DOM is ready too early so $(document).ready() causes an error with the above: $("#VariableParameters").data is undefined.

Thanks for any assistance.
Tags
General Discussions
Asked by
Dave
Top achievements
Rank 1
Share this question
or