MVC.Grid paging issue returning model data back to actionresult

Question

I have an action result like this where I take dropdown values to limit query results:

public ActionResult RequestList(OrdersViewModel obj)
    {
        var source = from i in db.RequestsWithHours select i;

        if (obj.SubmittorName != null )
        {
            source = source.Where(z => z.RequesterID == obj.SubmittorName);
        }

This works fine for page 1, but when I press page 2, obj is null and the query reverts to all records.

View:

@Html.Grid(Model.Data).Columns(columns =>
{
    columns.Add(o =>o.RequestNum).Titled("Number")
    columns.Add(z => z.Status).Sortable(true);
}).WithPaging(15)

How do I preserve the obj values from the paging actionresult?

Answer 1

Actually the best way to filter in Grid.Mvc is to use its filtering capability. The paging links issue GET requests, so of course, the value in your dropdown is not provided and you will get null in the controller action. The filtering capability is demonstrated here and here .

Let's see how will you modify your code to create a custom filtering widget.

1. Render your dropdown in a hidded element with a known ID like so:

    <div id="dropDownContainer" style="display: none"> @* Razor code that renders the dropdown *@ </div> 

2. Write the JavaScript code for the widget. If it will be used in multiple pages, it's better to keep it in a file and include it, otherwise, you may write it inline within your Razor view:

    function SubmittorFilterWidget() { this.getAssociatedTypes = function () { return ["SubmittorFilterWidget"]; }; this.showClearFilterButton = function () { return true; }; this.onRender = function (container, lang, typeName, values, cb, data) { this.value = values.length > 0 ? values[0] : { filterType: 1, filterValue: "" }; // Clone the dropdown list and append the cloned instance to the filter panel. We do so because Grid.MVC distroys the viewe when the filter panel is closed var dropdown = document.getElementById("dropDownContainer").firstElementChild.cloneNode(true); container[0].appendChild(dropdown); dropdown.addEventListener("change", function () { cb([{ filterValue: this.value, filterType: 1 /* Equals */ }]); }); }; } 

3. Rename your column to SubmittorName and bind it to the filter widget:

    columns.Add(o =>o.RequestNum, "SubmittorName").Titled("Number").SetFilterWidgetType("SubmittorFilterWidget"); 

This way, the filter will appear above RequestNum column but will actually filter based on SubmittorName

4. Register the filter widget (put this script at the bottom of your view after the above JS code):

    <script> $(function () { pageGrids.gridName.addFilterWidget(new SubmittorFilterWidget()); }); </script> 

Where gridName is the name of the grid you gave while rendering it. You may need to modify your first line to @Html.Grid(Model.Data).Named("gridName").Columns(columns =>

Tell me what results you got with these modifications.

As for other grid components suggestions: I see that Grid.Mvc is not mature and stopped getting contributions for years. I suggest if this is an enterprise level project that you go to Syncfusion Grid . Their components are free per a community edition licence similar to this of Visual Studio. If this is a small project or a single page, you may continue with Grid.MVC.