We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to initialize filtered columns in grid using MVC helpers

With the ejGrid, how do you initialize the filtered columns using the MVC helpers?

When using the MVC helpers to create a grid in a view, you can pass a List<SortedColumn> to the SortSettings method to set an initial sort on the grid, like

.SortSettings(s => s.SortedColumns(Model.SortedColumns))

(where Model.SortedColumns is a List<SortedColumn>)

However, to initialize filters, there is no such analog. It would seem there should be a 

.FilterSettings(f => f.FilteredColumns(Model.FilteredColumns))

in the same fashion, but there is no FilteredColumns method on the FilterOptionsBuilder.

Currently, I am serializing Model.FilteredColumns to JSON and using javascript to set the filteredColumns array in the Load event, but it is pretty kludgy and does not directly work without some additional logic because, for instance, in the MVC helper FilteredColumn.Operator can be "FilterOperatorType.Equals", whereas in the javascript control it must be the string "equal" (without the s).

Is there some way to initialize page filters in the MVC helpers that I have missed?

thanks


1 Reply

RU Ragavee U S Syncfusion Team August 18, 2015 10:05 AM UTC

Hi Scott,

Query: how do you initialize the filtered columns using the MVC helpers?

We have analyzed the reported query and we have considered this query “Setting filteredColumns using MVC helpers” as a bug and a support incident has been created under your account to track the status of this issue. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents
As of now, we can achieve your requirement by getting the filteredColumns from the server side and pushing it to the grid filterCollections in the Load event of the grid. Please refer the below code snippet.

<div style="margin-top:30px">

    @(Html.EJ().Grid<object>("Grid")                     

            .Datasource(Model.data)

            .AllowFiltering()

            . . . .

            .PageSettings(page=>page.CurrentPage(3).PageSize(6).PageCount(5)) //for customizing the paging functionality

            .SortSettings(sort=>sort.SortedColumns(so=>so.Field("Freight").Add()))//for initial sorting

            .GroupSettings(group => group.ShowGroupedColumn(false).GroupedColumns(co =>

            {

                co.Add("EmployeeID");               

            })) //for initial grouping

            . . . .

           .ClientSideEvents(eve=>eve.Load("load"))

    )

</div>



<script type="text/javascript">

//load event of the grid

    function load(args){

        var filterData = @Html.Raw(Json.Encode(Model.FilteredColumns)); //get the filterCollections from the server side

        var filterOp;

        for(var i=0;i<filterData.length;i++){

            switch(filterData[i].Operator){ //code to convert the filter operator

                case 0:

                    filterOp = "startswith"

                    break;

                . . . .                  

                    }

            this.model.filterSettings.filteredColumns.push({ field: filterData[i].Field, operator: filterOp, value: filterData[i].Value, matchcase: filterData[i].MatchCase, predicate: filterData[i].Predicate }); //pushing the filter list from server side to the grid filterCollections

        }

    }   
</script>


Query: in the MVC helper FilteredColumn.Operator can be "FilterOperatorType.Equals", whereas in the javascript control it must be the string "equal" (without the s).

Since we have set the FilterOperatorType as Enum type, the corresponding string value would be serialized with the help of ‘StringEnumConverter’ JsonConverter. Once we have provided the support for FiltereredColumns under FilterSettings, you can use it directly under FilterSettings where the filterOperator will be serialized and processed within accordingly.

For your convenience, we have created a sample with the above workaround and the same can be downloaded from the below location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/119942/ze/Sample-464094018

Please get back to us if you need any further assistance.

Regards
Ragavee U S

Loader.
Live Chat Icon For mobile
Up arrow icon