- Home
- Forum
- ASP.NET MVC
- How to add filtering to multiple row selection using a checkbox in a grid
How to add filtering to multiple row selection using a checkbox in a grid
Thanks for contacting Syncfusion support.
We need to add the additional Boolean type column to dataSource. Because field name is mandatory to perform the filtering operation, if filed name is not included in column filter bar will be in disabled state.
Please share the following information to us, it will help us to provide the prompt solution,
Regards,
Sellappandi R
Thanks for the update.
We have achieved the filter option of template column using load, databound, actionComplete and recordClick events. In load event we have added the dummy CheckBox field dynamically to grid dataSource for perform the filter operation. Filter bar will be in disabled mode, if field name does not exist in columns. So we have used this name as field name for template column. In dataBound event we have render the check box and wire check box change event.
Please refer to the code example, sample and online help documentation for grid events,
|
<script type="text/x-jsrender" id="checkboxTemplate"> <input type="checkbox" class="rowCheckbox" /> </script> <div id="checkboxheader"> <input type="checkbox" class="rowCheckbox" /> </div> @(Html.EJ().Grid<object>("Grid") .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource) .UpdateURL("/Grid/Update").InsertURL("/Grid/Insert").RemoveURL("/Grid/Delete").Adaptor(AdaptorType.RemoteSaveAdaptor)) .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); items.AddTool(ToolBarItems.Cancel); })) .ShowColumnChooser() .SelectionType(SelectionType.Multiple) .AllowResizing() .AllowTextWrap() .AllowGrouping() .AllowFiltering() .FilterSettings(d => d.FilterType(FilterType.FilterBar)) .GroupSettings(group => { group.ShowGroupedColumn(false).EnableDropAreaAnimation(false); }) .Columns(col => { col.Field("CheckBox").HeaderTemplateID("#checkboxheader").Template(true).TemplateID("#checkboxTemplate").TextAlign(TextAlign.Center).Width(50).Add(); . . . .
}).ClientSideEvents(e => e.Load("load").DataBound("bound").ActionComplete("complete").RecordClick("recordClick"))) <script type="text/javascript"> function load(args) { var data = []; $.extend(true, data, this.model.dataSource.dataSource.json); window.gridDataSource = data; for (var i = 0; i < this.model.dataSource.dataSource.json.length; i++) { this.model.dataSource.dataSource.json[i].CheckBox = false; } } function bound(args) { $("#Grid .e-templatecell .rowCheckbox").ejCheckBox({ "change": checkChange }); $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox({ "change": checkHeaderChange }); } function checkChange(e) { var trueCheckBox = $("#Grid .e-templatecell .rowCheckbox").parent("span[aria-checked='true']").parent("td"); var falseCheckBox = $("#Grid .e-templatecell .rowCheckbox").parent("span[aria-checked='false']").parent("td"); trueCheckBox.addClass("e-selectionbackground e-active"); trueCheckBox.siblings().addClass("e-selectionbackground e-active"); falseCheckBox.removeClass("e-selectionbackground e-active"); falseCheckBox.siblings().removeClass("e-selectionbackground e-active"); if ($("#Grid .e-templatecell .rowCheckbox").parent("span[aria-checked='false']").length == 0) $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox({ "checked": true }); else $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox({ "checked": false }); } function checkHeaderChange(e) { gridObj = $("#Grid").data("ejGrid"); if (e.isChecked) { $("#Grid .e-templatecell .rowCheckbox").ejCheckBox({ "checked": true }); gridObj.selectRows(0, gridObj.model.currentViewData.length - 1); for (var i = 0; i < gridObj.model.dataSource.dataSource.json.length; i++) { gridObj.model.dataSource.dataSource.json[i].CheckBox = true; } } else { $("#Grid .e-templatecell .rowCheckbox").ejCheckBox({ "checked": false }); gridObj.clearSelection(); for (var i = 0; i < gridObj.model.dataSource.dataSource.json.length; i++) { gridObj.model.dataSource.dataSource.json[i].CheckBox = false; } } } function recordClick(args) { checkChange(); if (args.row.find(".e-templatecell span").attr("aria-checked") == "true") this.model.dataSource.dataSource.json[args.rowIndex].CheckBox = true else this.model.dataSource.dataSource.json[args.rowIndex].CheckBox = false } function complete(args) { if (args.requestType == "filtering" && args.currentFilteringColumn == "CheckBox") { var filterBarVal = $("#" + args.currentFilteringColumn + "_filterBarcell").val(); if (filterBarVal.toLowerCase() == "true") { $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox({ change: "checkHeaderChange", "checked": true }); this.selectRows(0, this.model.currentViewData.length - 1); $("#Grid .e-templatecell .rowCheckbox").ejCheckBox({ "change": checkChange, "checked": true }); } else if (filterBarVal.toLowerCase() == "false") { $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox({ change: "checkHeaderChange", "checked": false }); $("#Grid .e-templatecell .rowCheckbox").ejCheckBox({ "change": checkChange }); } else { var selectedData = ej.DataManager(this.model.dataSource.dataSource.json).executeLocal(ej.Query().where("CheckBox", ej.FilterOperators.equal, true, false)); if (selectedData.length == $("#Grid .e-templatecell .rowCheckbox").length) $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox({ change: "checkHeaderChange", "checked": true }); else $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox({ change: "checkHeaderChange", "checked": false }); selectMaintain(); } } else if (args.requestType == "filtering") { var selectedData = ej.DataManager(this.model.dataSource.dataSource.json).executeLocal(ej.Query().where("CheckBox", ej.FilterOperators.equal, true, false)); if (selectedData.length == $("#Grid .e-templatecell .rowCheckbox").length) $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox({ change: "checkHeaderChange", "checked": true }); else $("#Grid .e-headertemplate .rowCheckbox").ejCheckBox({ change: "checkHeaderChange", "checked": false }); selectMaintain(); } } function selectMaintain() { var selectedRowIndex = []; gridObj = $("#Grid").data("ejGrid"); for (var i = 0; i < gridObj.model.currentViewData.length; i++) { if (gridObj.model.currentViewData[i].CheckBox) { $("#Grid .e-templatecell .rowCheckbox").eq(i).ejCheckBox({ "change": checkChange, "checked": true }); selectedRowIndex.push(i); } else $("#Grid .e-templatecell .rowCheckbox").eq(i).ejCheckBox({ "change": checkChange, "checked": false }); } gridObj.selectRows(selectedRowIndex); } |
Sample: http://www.syncfusion.com/downloads/support/forum/121846/ze/MVCGrid_121846-1080870445
Document: http://help.syncfusion.com/js/api/ejgrid#events
We have added video demo of attached sample in below,
Demo: http://www.syncfusion.com/downloads/support/forum/121846/ze/Demo-715909351
Regards,
Sellappandi R
Thanks for your update.
We analyzed the reported issue. We have discussed on a similar issue in our following knowledge base link.
https://www.syncfusion.com/kb/3018/null-exception-while-exporting
Since we have dynamically bound the “CheckBox” field column (actually not present in database table) to the grid dataSource at client side for filtering purpose, the reported exception has occurred while exporting. So we suggest you to pass the IsTemplateColumnInclude paramter of the Export method as false at server side. Please refer to the below code example.
|
public void ExportToExcel(string GridModel) {
. . . . exp.Export(gridPropert, (IEnumerable)data, "Export.xlsx", ExcelVersion.Excel2010, false, false, "flat-lime");
|
The IsTemplateColumnInclude parameter is used to include a field bound template column upon exporting.
For your convenience, we have modified the previously updated sample with exporting enabled, which can be downloaded from below location.
Sample Link: http://www.syncfusion.com/downloads/support/forum/121846/ze/MVCGrid-1931761711
Regards,
Ragavee U S.
Since we have added the “CheckBox” field to Grid dataSource in the client side (Javascript) for filtering purpose and it is not available at server end (C#) dataSource, while exporting after filtering the Checkbox column, the exception has been thrown.
So we suggest you to add an additional property (gridDataSource) in Grid model to pass the client side dataSource (with CheckBox field) and deserialize it at server side while exporting to resolve the issue.
We have achieved your requirement to export filtered records using the below workaround.
|
//toolbar click event of the grid function toolbarClick(args) { if (args.itemName == "Excel Export") { this.model.gridDataSource = this.model.dataSource.dataSource.json;//getting the grid dataSource and storing it in grid model } private GridProperties ConvertGridObject(string gridProperty) { . . . . foreach (KeyValuePair<string, object> ds in div) { . . . .
//Check and retrieve additional property here if (ds.Key == "gridDataSource") { string serialize = serializer.Serialize(ds.Value); gridProp.DataSource = serializer.Deserialize<List<ExportData>>(serialize); //Deserialize the grid dataSource with checkbox field continue; } . . . . public void ExportToExcel(string GridModel) { GridProperties gridPropert = ConvertGridObject(GridModel); ExcelExport exp = new ExcelExport(); exp.Export(gridPropert, (IEnumerable)gridPropert.DataSource, "Export.xlsx", ExcelVersion.Excel2010, false, false, "flat-lime");//pass the obtained data from client to the export method
|
We have modified the sample with the above solution, which can be downloaded from below location.
Sample Link: http://www.syncfusion.com/downloads/support/forum/121846/ze/Modified_MVCGrid-1498264692
Regards,
Ragavee U S.
Thanks for your update.
We are happy that your requirement is achieved.
Regards,
Ragavee U S.
Ligne 60 : GridProperties gridPropert = ConvertGridObject(GridModel); Ligne 61 : ExcelExport exp = new ExcelExport(); Ligne 62 : exp.Export(gridPropert, (IEnumerable)gridPropert.DataSource , "Export.xlsx", ExcelVersion.Excel2010, false, false, "flat-lime"); Ligne 63 : Ligne 64 : }
[FormatException: La chaîne doit avoir une longueur d'un et un seul caractère.] System.Convert.ToChar(String value, IFormatProvider provider) +12271516 Syncfusion.XlsIO.Implementation.ApplicationImpl..ctor(ExcelEngine excelEngine) +1685 Syncfusion.XlsIO.ExcelEngine..ctor() +46 Syncfusion.EJ.Export.GridExcelExport.InitializeExcel(GridProperties model, IWorkbook book) +40 Syncfusion.EJ.Export.GridExcelExport.ExecuteResult(GridProperties GridModel, Object dataSource) +410 Syncfusion.EJ.Export.GridExcelExport.ExportHelper(GridProperties gridModel, Object dataSource) +599 Syncfusion.EJ.Export.GridExcelExport.Export(GridProperties gridModel, Object dataSource, Boolean multipleExport) +18 Syncfusion.EJ.Export.ExcelExport.Export(GridProperties gridmaodel, Object datasource, String excelname, ExcelVersion excelversion, Boolean isHideColumnIncude, Boolean isTemplateColumnIclude, String theme) +101 Syncfusion.EJ.Export.ExcelExport.Export(GridProperties gridmaodel, IEnumerable datasource, String excelname, ExcelVersion excelversion, Boolean isHideColumnIncude, Boolean isTemplateColumnIclude, String theme) +30 MVCGrid.Controllers.GridController.ExportToExcel(String GridModel) in C:\Users\clément\Desktop\Apprentissage cours\MVCGrid\Controllers\GridController.cs:62 lambda_method(Closure , ControllerBase , Object[] ) +104 System.Web.Mvc.<>c__DisplayClass1.<WrapVoidAction>b__0(ControllerBase controller, Object[] parameters) +14 System.Web.Mvc.ActionMethodDispatcher.Execute(ControllerBase controller, Object[] parameters) +14 System.Web.Mvc.ReflectedActionDescriptor.Execute(ControllerContext controllerContext, IDictionary`2 parameters) +157 System.Web.Mvc.ControllerActionInvoker.InvokeActionMethod(ControllerContext controllerContext, ActionDescriptor actionDescriptor, IDictionary`2 parameters) +27 System.Web.Mvc.Async.AsyncControllerActionInvoker.<BeginInvokeSynchronousActionMethod>b__36(IAsyncResult asyncResult, ActionInvocation innerInvokeState) +22 System.Web.Mvc.Async.WrappedAsyncResult`2.CallEndDelegate(IAsyncResult asyncResult) +29 System.Web.Mvc.Async.WrappedAsyncResultBase`1.End() +49 System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeActionMethod(IAsyncResult asyncResult) +32 System.Web.Mvc.Async.AsyncInvocationWithFilters.<InvokeActionMethodFilterAsynchronouslyRecursive>b__3c() +50 System.Web.Mvc.Async.<>c__DisplayClass45.<InvokeActionMethodFilterAsynchronouslyRecursive>b__3e() +225 System.Web.Mvc.Async.<>c__DisplayClass30.<BeginInvokeActionMethodWithFilters>b__2f(IAsyncResult asyncResult) +10 System.Web.Mvc.Async.WrappedAsyncResult`1.CallEndDelegate(IAsyncResult asyncResult) +10 System.Web.Mvc.Async.WrappedAsyncResultBase`1.End() +49 System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeActionMethodWithFilters(IAsyncResult asyncResult) +34 System.Web.Mvc.Async.<>c__DisplayClass28.<BeginInvokeAction>b__19() +26 System.Web.Mvc.Async.<>c__DisplayClass1e.<BeginInvokeAction>b__1b(IAsyncResult asyncResult) +100 System.Web.Mvc.Async.WrappedAsyncResult`1.CallEndDelegate(IAsyncResult asyncResult) +10 System.Web.Mvc.Async.WrappedAsyncResultBase`1.End() +49 System.Web.Mvc.Async.AsyncControllerActionInvoker.EndInvokeAction(IAsyncResult asyncResult) +27 System.Web.Mvc.Controller.<BeginExecuteCore>b__1d(IAsyncResult asyncResult, ExecuteCoreState innerState) +13 System.Web.Mvc.Async.WrappedAsyncVoid`1.CallEndDelegate(IAsyncResult asyncResult) +29 System.Web.Mvc.Async.WrappedAsyncResultBase`1.End() +49 System.Web.Mvc.Controller.EndExecuteCore(IAsyncResult asyncResult) +36 System.Web.Mvc.Controller.<BeginExecute>b__15(IAsyncResult asyncResult, Controller controller) +12 System.Web.Mvc.Async.WrappedAsyncVoid`1.CallEndDelegate(IAsyncResult asyncResult) +22 System.Web.Mvc.Async.WrappedAsyncResultBase`1.End() +49 System.Web.Mvc.Controller.EndExecute(IAsyncResult asyncResult) +26 System.Web.Mvc.Controller.System.Web.Mvc.Async.IAsyncController.EndExecute(IAsyncResult asyncResult) +10 System.Web.Mvc.MvcHandler.<BeginProcessRequest>b__4(IAsyncResult asyncResult, ProcessRequestState innerState) +21 System.Web.Mvc.Async.WrappedAsyncVoid`1.CallEndDelegate(IAsyncResult asyncResult) +29 System.Web.Mvc.Async.WrappedAsyncResultBase`1.End() +49 System.Web.Mvc.MvcHandler.EndProcessRequest(IAsyncResult asyncResult) +28 System.Web.Mvc.MvcHandler.System.Web.IHttpAsyncHandler.EndProcessRequest(IAsyncResult result) +9 System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +9765121 System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +155
Attachment: MVCGridWithError_5710da6a.rar
Farveen sulthana T.
- 14 Replies
- 5 Participants
-
TM Todd M
- Jan 31, 2016 03:59 PM UTC
- Feb 22, 2017 03:56 AM UTC