add/remove columns to grid based on java script result

[sateesh kumar]

Hi team,

am successfully loading data to grid based on user drop down selection.

by default my grid does not have any data. loading data throw java script.

here my code

 @Html.EJ().DropDownList("departments").Datasource(Model.FileViewType).CssClass("flat-saffron").DropDownListFields(df => df.Text("Name").Value("Name")).WatermarkText("Select file type").Width("100%").ClientSideEvents(e => e.Change("deptChange"))                     

@(Html.EJ().Grid<object>("departmentGrid").AllowPaging(true).PageSettings(page => page.PageSize(40))                                           

                                            .GridLines(GridLines.Both)                                            

                                            .Columns(col =>

                                            {

                                                col.Type("checkbox").Width("5").Add();

                                                col.Field("Id").IsPrimaryKey(true).AllowEditing(false).Visible(false).Add();

                                                col.Field("EmpName").HeaderText("File Name").Width("40").AllowEditing(false).Add();

                                                col.Field("EmpDate").HeaderText("File Path").Width("40").AllowEditing(true).Add();                                                

                                            }).ClientSideEvents(e => e.ActionComplete("onActionComplete").ActionBegin("onActionBegin"))

    )      

java script

 function getFiles() {

var deportmentType= $("#departments").data("ejDropDownList").getSelectedValue();

var query = ej.Query().addParams("type", deportmentType)

var dataManager = ej.DataManager({ url: '@Url.Action("ShowFiles", "Department")', adaptor: new ej.UrlAdaptor() });

                var promise = dataManager.executeQuery(query);

                promise.done(function (e) {

                    var gridObj = $("#departmentGrid").ejGrid("instance");

                    gridObj.dataSource(e.result);

                }); 

}

Query 1

For each drop down selection, few grid columns fixed. those column initially created grid.

now based e.result source need to add columns after that need to assign the data source.

ex: initially  grid having, Checkbox,id,Name , date

after selection drop down grid should have this, Check box,id,Name,Date, DOB,Place,JoiningDate

Query 2

based on drop down selection value/text need remove or add  check box column from grid.

Thanks for the advance

[Vignesh Natarajan]

Hi Sai Tanuj, 

 

Thanks for contacting Syncfusion Support. 

 

Query#1:- now based e.result source need to add columns after that need to assign the data source. 

 

As per your requirement, we have updated the new columns for the ejGrid by comparing the fields from the datasource and the previous columns of the grid model using columns method. 

 

Please refer to the cod example:- 

 

<label>Render DataSource</label> 

@(Html.EJ().DropDownList("dropdown").Datasource((IEnumerable<object>)ViewBag.data).DropDownListFields(df => df.Text("text").Value("value")).Width("100").ClientSideEvents(eve => eve.Change("change"))) 

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

                   .AllowPaging(true).PageSettings(page => page.PageSize(40)) 

                    .Columns(col =>{ 

                                        col.Type("checkbox").Width(50).Add(); 

                                             .   .     . 

                  })) 

<script type="text/javascript"> 

    function change(args) { 

            var query = new ej.Query().addParams("ID", args.text) 

                var dataManager = ej.DataManager({ url: '@Url.Action("UrlDataSource", "Grid")', adaptor: new ej.UrlAdaptor() }); 

                var promise = dataManager.executeQuery(query); 

                promise.done(function (e) { 

                   var gridObj = $("#FlatGrid").ejGrid("instance"); 

                    var newcols = [], j = 0; 

                    var keys = [], cols = gridObj.model.columns; 

                    for (var key in e.result[0]) { 

                        keys.push(key); 

                    } 

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

                        for (var j = 0; j < cols.length; j++) { 

                            if (keys[i] !== cols[j].field) { 

                                newcols.push({ "field": keys[i] }) 

                            } 

                        } 

                    } 

                    gridObj.columns(newcols, "add") 

                    gridObj.dataSource(e.result); 

 

 

                }); 

        } 

</script> 

 

Query#2:- Based on drop down selection value/text need remove or add  check box column from grid. 

 

As per your requirement, we have hide and show checkbox columns using hideColumns  and showColumns method through index while on dropdown change. 

 

Please refer to the code example:- 

 

<label>Show/Hide column</label> 

@(Html.EJ().DropDownList("dropdown1").Datasource((IEnumerable<object>)ViewBag.data1).DropDownListFields(df => df.Text("text").Value("value")).Width("100").ClientSideEvents(eve => eve.Change("change1"))) 

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

                                   .AllowPaging(true).PageSettings(page => page.PageSize(40)) 

                                    .Columns(col => 

                                    { 

                                        col.Type("checkbox").Width(50).Add(); 

                                        col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 

                                           .    .   . 

                                   })) 

 

<script type="text/javascript"> 

    function change1(args) { 

        var gridObj = $("#FlatGrid").ejGrid("instance") 

        if (args.text == "hide") 

            gridObj.hideColumns(0) 

        else if (args.text == "show") 

            gridObj.showColumns(0) 

 

    } 

</script> 

 

For your reference, we have prepared a sample which can be downloaded from below link 

 

Sample Link:-  http://www.syncfusion.com/downloads/support/forum/143424/ze/Sample145862-1674408641 

 

Refer the below link for your reference 

 

https://help.syncfusion.com/api/js/ejgrid#methods:showcolumns  

 

https://help.syncfusion.com/api/js/ejgrid#methods:hidecolumns  

 

https://help.syncfusion.com/api/js/ejgrid#methods:columns  

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan.