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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

add/remove columns to grid based on java script result

Thread ID:

Created:

Updated:

Platform:

Replies:

143424 Mar 20,2019 04:14 AM UTC Mar 21,2019 01:13 PM UTC ASP.NET MVC 1
loading
Tags: Grid
sateesh kumar
Asked On March 20, 2019 04:14 AM UTC

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 [Syncfusion]
Replied On March 21, 2019 01:13 PM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon