Can I limit the contents of the ViewBag.datasource for a given grid?

[Garry Grierson]

I have two almost identical grids but I want each to display a subset of the currentViewBag.datasource.

Is there a simple way to do this given the following grid structure, or would I have to use partial views (which seems a bit overkill for what I want to do).

@(Html.EJ().Grid("DryFlatGrid")
.Datasource((IEnumerable)ViewBag.datasource)
.AllowPaging()
.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
});
})
.Columns(col =>
{
col.Field("DeviationReason").HeaderText("Deviation Reason").Width("60%").AllowEditing(true).Add();
col.Field("WetRun").HeaderText("W").Width("5%").AllowEditing(true).Add();
col.Field("Run1").HeaderText("1").Width("5%").Add();
col.Field("Run2").HeaderText("2").Width("5%").Add();
col.Field("Run3").HeaderText("3").Width("5%").Add();
col.Field("Run4").HeaderText("4").Width("5%").Add();
col.Field("Run5").HeaderText("5").Width("5%").Add();
col.Field("Factor").HeaderText("Factor").Width("10%").Add();
})
)

The datasource holds a 'WetChem' Boolean type, that is not shown in the grid.

I simply want one grid to show the rows where this value it true, and the other to show those where the value is false.

[Padmavathy Kamalanathan]

Hi Garry, 

Thanks for contacting Syncfusion Forums. 

QUERY: Limit content of ViewBag.datasource for grid 

 

From your query we understand that you are having a viewbag data whose one of the column is Boolean(say “BooleanColumn” - having both true and false values). You are trying to render two grids with the same data source , but first grid’s data should be data whose “BooleanColumn” value is “true” and another grid with data whose “BooleanColumn” is “false”. You can achieve this requirement by using “Initial Filtering” of grid. By using the initial filtering, you can filter the data source and render grid with that filtered data. 

Please check the below code snippet, 

@(Html.EJ().Grid<object>("Grid1").Datasource((IEnumerable<object>)ViewBag.data) 

            .AllowFiltering() 

            .FilterSettings(filter => 

             { 

             filter.FilteredColumns((List<FilteredColumn>)ViewBag.fcols1); 

             }).Columns(col => 

              { 

                 col.Field("OrderID").HeaderText("Order ID").Add(); 

                 col.Field("CustomerID").HeaderText("Customer ID").Add(); 

                 col.Field("Freight").Format("{0:C}").Add(); 

                 col.Field("ShipCity").HeaderText("Ship City").Add(); 

                        })) 

 

@(Html.EJ().Grid<object>("Grid2").Datasource((IEnumerable<object>)ViewBag.data) 

            .AllowFiltering().FilterSettings(filter => 

            { 

                filter.FilteredColumns((List<FilteredColumn>)ViewBag.fcols2); 

            }) 

            .Columns(col => 

            { 

              ----- 

            })) 

 

        public ActionResult Index() 

        { 

           ----------- 

            List<FilteredColumn> fCols1 = new List<FilteredColumn>(); 

            fCols1.Add(new FilteredColumn() 

            { 

                Field = "BooleanColumn", 

                Operator = FilterOperatorType.Equals, 

                Predicate = "and", 

                Value = "true" 

            }); 

            ViewBag.fcols1 = fCols1; 

            List<FilteredColumn> fCols2 = new List<FilteredColumn>(); 

            fCols2.Add(new FilteredColumn() 

            { 

                Field = "BooleanColumn", 

                Operator = FilterOperatorType.Equals, 

                Predicate = "and", 

                Value = "false" 

            }); 

            ViewBag.fcols2 = fCols2; 

            return View(); 

        } 

Please check the below help documentation, 

https://help.syncfusion.com/api/js/ejgrid#members:filtersettings-filteredcolumns 

Please check the below sample, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/MVCSample-151252336924954.zip 

If you have further queries, please get back to us. 

Regards, 

Padmavathy Kamalanathan 

[Garry Grierson]

Thanks, I got that to work.

But is there a way to get rid of the filter boxes from showing above the columns?

[Padmavathy Kamalanathan]

Hi Garry, 

Thanks for your update. 

QUERY: How to get rid of filter boxes above the columns 

From your query we understand that you don’t want to display the filter boxes above the columns of the grid. We suggest you to use query in order to filter the Boolean column with value true for one grid and false for another grid instead of using grid’s filtering feature. 

Please check the below code snippet, 

@(Html.EJ().Grid<object>("Grid1").Datasource((IEnumerable<object>)ViewBag.data) 

           .Query("ej.Query().where(ej.Predicate('BooleanColumn', 'equal', true, true))") 

             .Columns(col => 

             { 

              ------- 

             })) 

 

@(Html.EJ().Grid<object>("Grid2").Datasource((IEnumerable<object>)ViewBag.data) 

            Query("ej.Query().where(ej.Predicate('BooleanColumn', 'equal', false, true))") 

            .Columns(col => 

            { 

            -------- 

            })) 

Please check the below sample, 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/MVCSample1-151252-550136918.zip 

In this way you can filter data and bind that filtered data to grid. Also you need not to set AllowFiltering to true (which displays that filter boxes above grid columns). 

If you have further queries, please get back to us. 

Regards, 

Padmavathy Kamalanathan 

[Garry Grierson]

Thanks, this works as I wanted.

[Padmavathy Kamalanathan]

Hi Garry, 

We are happy to hear that you have achieved your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Padmavathy Kamalanathan