Grid doesn't allow sorting, filtering, etc

[Richard Dublon]

Hi,

I have a grid that for some reason isn't allowing me to sort or filter, or even highlight alternate rows when I hover over it. I have plenty of other grids that do not have this problem.

Here is my code...

View:

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

.ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>

{

items.AddTool(ToolBarItems.ExcelExport);

}))

.Mappers(map => map.ExportToExcelAction("ExportResponseCountyGrid"))

.Datasource(ds => ds.URL(@Url.Action("ResponseRateByStateCounty"))

.Adaptor(AdaptorType.UrlAdaptor))

.AllowPaging()

.AllowSorting()

.AllowFiltering()

.FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

.EnableAltRow()

.Columns(col =>

{

col.Field("Campaign").HeaderText("Campaign").Add();

col.Field("County").HeaderText("County").Add();

col.Field("LeadCount").HeaderText("Lead Count").Add();

col.Field("OrderCount").HeaderText("Order Count").Add();

col.Field("ResponseRate").HeaderText("Response Rate").Format("{0:P2}").Add();

})

.ClientSideEvents(eve => eve.ActionBegin("begincounty"))

)

Controller:

public ActionResult ResponseRateByStateCounty(Syncfusion.JavaScript.DataManager dm, string state, string campaign, string scandatefrom, string scandateto,string maildate)

{

DataResult result = new DataResult();

DataTable dtResult = new DataTable();

int count = 0;

query = dm;

if (maildate != null)

{

dtResult = GetResponseRateByStateCountyGridData("spGetResponseRateByStateCounty",state, campaign, scandatefrom, scandateto,maildate);

IEnumerable Data = (from DataRow row in dtResult.Rows

select new DKDatabaseModelClass.ResponseRatesByStateCounty

{

Campaign = row["Campaign"].ToString(),

State = row["State"].ToString(),

County = row["County"].ToString(),

MailDate = Convert.ToDateTime(row["MailDate"]),

LeadCount = (int)row["LeadCount"],

OrderCount = (int)row["OrderCount"],

ResponseRate = (decimal)row["ResponseRate"]

}).ToList();

Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations();

if (dm.Search != null)

Data = operation.PerformSearching(Data, dm.Search);

if (dm.Where != null)

Data = operation.PerformWhereFilter(Data, dm.Where, dm.Where[0].Condition); //perform filtering

//if (dm.Aggregates != null)

//{

// for (var i = 0; i < dm.Aggregates.Count; i++)

// aggregateFields.Add(dm.Aggregates[i].Field);

// result.aggregate = operation.PerformSelect(Data, aggregateFields);

//} //perform aggregation.

//result.count = Data.AsQueryable().Count();

if (dm.Skip != null && dm.Skip != 0)//skiped while rendering checkbox

Data = operation.PerformSkip(Data, dm.Skip);

if (dm.Take != null && dm.Take != 0)//skiped while rendering checkbox

Data = operation.PerformTake(Data, dm.Take);

result.result = Data;//passed the whole dataSource directly for checkbox rendering

return Json(result, JsonRequestBehavior.AllowGet);

}

else

{

return View();

}

// return Json(new { result = Data, count = count }, JsonRequestBehavior.AllowGet);

}

[Mani Sankar Durai]

Hi Richard, 

Thanks for contacting Syncfusion support.  

We have analyzed your query and found that you have not performed server side sorting when using URL Adaptor in grid. When using URL adaptor (Load on Demand basis) we have to perform the grid actions like paging, sorting, filtering, grouping etc.., in server side. 

We have also prepared a sample with URLAdaptor and biding dataTable to the grid, that can be downloaded from the below link 

Link: http://www.syncfusion.com/downloads/support/forum/134808/ze/MvcApplication66849586081 

Please refer the below code example 

public ActionResult DataSource(Syncfusion.JavaScript.DataManager dm) 

        { 

            IEnumerable Data = GridData; 

            Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations(); 

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 

            { 

                Data = operation.PerformSorting(Data, dm.Sorted); 

            } 

            if (dm.Where != null && dm.Where.Count > 0) //Filtering 

            { 

                Data = operation.PerformWhereFilter(Data, dm.Where, dm.Where[0].Operator); 

            } 

            int count = Data.AsQueryable().Count(); 

            if (dm.Skip != 0) 

            { 

                Data = operation.PerformSkip(Data, dm.Skip); 

            } 

            if (dm.Take != 0) 

            { 

                Data = operation.PerformTake(Data, dm.Take); 

            } 

            return Json(new { result = Data, count = count }, JsonRequestBehavior.AllowGet); 

        } 

Refer the KB link 

Link:  https://www.syncfusion.com/kb/4300/server-side-api-for-datamanager-operations 

If you still face the issue please get back to us with the following details, 

1.       Share the screenshot/ video of the issue that you have faced.  

2.       If possible please reproduce the issue in the above attached sample.  

3.       Share the Syncfusion Essential studio version details that you are using.  

The provided information will help us to analyze the issue and provide you the response as early as possible  

Regards, 

Manisankar Durai. 

[Richard Dublon]

Hi,

This doesn't appear to fix the problem.  I think the problem stems from the wrapping if statement.  I don't want the grid to load when the view loads so I have my code wrapped in an if statement that checks for a specific value.  Is there a way to only have the grid load when my search button is pressed?  If I remove that if statement, the grid behaves correctly.

Here is my code...

View:

<div id="divStateGrid" style="visibility:hidden">

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

        .ToolbarSettings(toolBar => toolBar.ShowToolbar().ToolbarItems(items =>

        {

            items.AddTool(ToolBarItems.ExcelExport);

        }))

        .Mappers(map => map.ExportToExcelAction("ExportResponseStateGrid"))

        .Datasource(ds => ds.URL(@Url.Action("ResponseRateByState"))

        .Adaptor(AdaptorType.UrlAdaptor))

        .AllowPaging()

        .AllowSorting()

        .AllowFiltering()

        .FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

        .EnableAltRow()

        .Columns(col =>

        {

            col.Field("Campaign").HeaderText("Campaign").Add();

            col.Field("State").HeaderText("State").Add();

            col.Field("MailDate").HeaderText("Mail Date").Format("{0:M/d/yyyy}").Add();

            col.Field("LeadCount").HeaderText("Lead Count").Add();

            col.Field("OrderCount").HeaderText("Order Count").Add();

            col.Field("ResponseRate").HeaderText("Response Rate").Format("{0:P2}").Add();

        })

          .ClientSideEvents(eve => { eve.RowSelected("rowSelected"); })

          .ClientSideEvents(eve => eve.ActionBegin("beginstate"))

          .ClientSideEvents(evt => evt.ToolbarClick("OnStateToolbarClick"))

        )

    </div>

Controller:

        public ActionResult ResponseRateByState(Syncfusion.JavaScript.DataManager dm,string gridload,string state,string campaign, string scandatefrom, string scandateto)

        {

            DataResult result = new DataResult();

            DataTable dtResult = new DataTable();

            int count = 0;

            if (gridload == "Load")

            {

                dtResult = GetResponseRateByStateGridData("spGetResponseRateByState", state, campaign, scandatefrom, scandateto);

                IEnumerable Data = (from DataRow row in dtResult.Rows

                                    select new DKDatabaseModelClass.ResponseRatesByState

                                    {

                                        Campaign = row["Campaign"].ToString(),

                                        State = row["State"].ToString(),

                                        MailDate = Convert.ToDateTime(row["MailDate"]),

                                        LeadCount = (int)row["LeadCount"],

                                        OrderCount = (int)row["OrderCount"],

                                        ResponseRate = (decimal)row["ResponseRate"]

                                    }).ToList();

                Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations();

                // List<string> aggregateFields = new List<string>();

                if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 

                {

                    Data = operation.PerformSorting(Data, dm.Sorted);

                }

                if (dm.Where != null && dm.Where.Count > 0) //Filtering 

                {

                    Data = operation.PerformWhereFilter(Data, dm.Where, dm.Where[0].Operator);

                }

                    //if (dm.Aggregates != null)

                    //{

                    //    for (var i = 0; i < dm.Aggregates.Count; i++)

                    //        aggregateFields.Add(dm.Aggregates[i].Field);

                    //    result.aggregate = operation.PerformSelect(Data, aggregateFields);

                    //}           //perform aggregation. 

                    //result.count = Data.AsQueryable().Count();

                    if (dm.Skip != null && dm.Skip != 0)//skiped while rendering checkbox 

                    Data = operation.PerformSkip(Data, dm.Skip);

                if (dm.Take != null && dm.Take != 0)//skiped while rendering checkbox 

                    Data = operation.PerformTake(Data, dm.Take);

                result.result = Data;//passed the whole dataSource directly for checkbox rendering 

                return Json(result, JsonRequestBehavior.AllowGet);

            }

            else

            {

                return View();

            }

        }

[Mani Sankar Durai]

Hi Richard, 

We have analyzed your query and we have prepared a sample based on your requirement by showing the grid with dataSource when the search key contains “Load” and that can be downloaded from the below link 

Link: http://www.syncfusion.com/downloads/support/forum/134808/ze/MvcApplication662114751836 

Please refer the code example 

<button id="btn" onclick="myFunc()">Search  button</button>   

<div id="divStateGrid" style="visibility:hidden"> 

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

       .AllowPaging() 

    .AllowSorting() 

    .AllowFiltering() 

    .FilterSettings(filter => { filter.FilterType(FilterType.Excel); }) 

        .Columns(col => 

        { 

            ... 

        }) 

    ) 

    </div> 

 

<script> 

    function myFunc() { 

        $("#divStateGrid").css('visibility', 'visible'); 

        var dataManagerObj = ej.DataManager({ url: "/Home/DataSource", adaptor: "UrlAdaptor" }); 

        var grid = $("#Grid").ejGrid({query:new ej.Query().search("Load")});  //passing search key word using ej.Query  

        var grid = $("#Grid").ejGrid("instance"); 

        grid.dataSource(dataManagerObj); //binding the datasource for the grid using dataSource method. 

    } 

</script> [HomeController.cs] 

public ActionResult DataSource(Syncfusion.JavaScript.DataManager dm) 

       { 

           if (dm.Search.Count > 0 && dm.Search[0].Key =="Load")   //grid will bind the data only if the key word contains “Load” 

           { 

               IEnumerable Data = GridData; 

               Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations(); 

               if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 

               { 

                   Data = operation.PerformSorting(Data, dm.Sorted); 

               } 

               if (dm.Where != null && dm.Where.Count > 0) //Filtering 

               { 

                   Data = operation.PerformWhereFilter(Data, dm.Where, dm.Where[0].Operator); 

               } 

               int count = Data.AsQueryable().Count(); 

               if (dm.Skip != 0) 

               { 

                   Data = operation.PerformSkip(Data, dm.Skip); 

               } 

               if (dm.Take != 0) 

               { 

                   Data = operation.PerformTake(Data, dm.Take); 

               } 

               return Json(new { result = Data, count = count }, JsonRequestBehavior.AllowGet); 

           } 

           else 

           { 

               return View(); 

           } 

        } 

Here initially we have hide the grid when the page loads and after clicking the button we have shown the grid with the data source only the search key contains “Load”. This key word has been passed using ej.Query through grid model. Since we are passing the search keyword “Load” using ejQuery it will maintain in the data manager at server side so that we can able to perform grid actions in grid. 

Please let us know if you need further assistance.  

Regards, 

Manisankar Durai.