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

add/remove columns to grid based on java script result

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


1 Reply

VN Vignesh Natarajan Syncfusion Team March 21, 2019 08:13 AM

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 
 
 
Refer the below link for your reference 
 
 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan. 


Loader.
Live Chat Icon For mobile
Up arrow icon