1. Home
  2. Forum
  3. ASP.NET MVC
  4. Add/Remove Columns To ASP.NET MVC Grid Using BatchDatasource With Additional Parameters

Add/Remove Columns To ASP.NET MVC Grid Using BatchDatasource With Additional Parameters

I am using a Grid which uses a BatchDatasource that requires an additional parameter to query the data.

The majority of the grid columns are fixed - however, there will be about half a dozen or so columns that will be unique every time - so I would like to remove the previously added columns and add the new ones. I have a sample of the code that I have tried. In the sample code my 'unique' columns have an underscore in the name.

var dataManger = ej.DataManager({
    url: settings.myBatchDataSourceUrl,
    adaptor: new ej.UrlAdaptor()
});

settings.$backtestResultGrid
    .ejGrid({
        dataSource: dataManger,
        query: new ej.Query().addParams("Id", Id)
    });

var gridObj = settings.$backtestResultGrid.data("ejGrid");
var gridInstance = settings.$backtestResultGrid.ejGrid("instance");
if (gridInstance.model.currentViewData.length > 0) {
    for (var field in gridInstance.model.currentViewData[0]) {
        if (field.indexOf("_") >= 0) {
            gridObj.columns(field, "add");
        }
    }
}

The above code doesn't work (the columns don't appear until this code is called a second time, and it looks like theBatchDataSource is called as every column is added).

How can I get this to work?

Thanks, Jeff

3 Replies
SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 21, 2016 12:35 PM UTC

Hi Jeff, 

We are unable to reproduce the issue with the code example. We are able to update the columns in the Grid after checking the currentViewData and we have updated it in the button click event. Refer to the following code example. 

@*adds set of columns in single shot triggers myBatchDataSourceUrl one time*@ 
@Html.EJ().Button("btn1").Text("AddBulk").ClientSideEvents(events => events.Click("click1")); 
     
@*adds each column one by one triggers the myBatchDataSourceUrl same number of time*@ 
@Html.EJ().Button("btn2").Text("AddOnebyOne").ClientSideEvents(events => events.Click("click2")); 
 
@(Html.EJ().Grid<object>("FlatGrid") 
        .AllowPaging() 
        .Datasource(ds => ds.URL("/Home/DataSource").Adaptor(AdaptorType.UrlAdaptor)) 
            .Columns(col => 
            { 
             . . . . 
            }) 
) 
 
<script> 
    function click1(args) { 
        var gridObj = $("#FlatGrid").ejGrid("instance"); 
        if (gridObj.model.currentViewData.length > 0) { 
            var fields = []; 
            for (var field in gridObj.model.currentViewData[0]) { 
                if (field.indexOf("ID") >= 0) { 
                    fields.push(field); 
                } 
            } 
            //array of strings/field Names pushed into the fields  
            gridObj.columns(fields, "add");//adds set of columns in single shot it is recommended 
 
        } 
    } 
    function click2(args) { 
        var gridObj = $("#FlatGrid").ejGrid("instance"); 
        if (gridObj.model.currentViewData.length > 0) { 
            for (var field in gridObj.model.currentViewData[0]) { 
                if (field.indexOf("ID") >= 0) { 
                    // this method will send multiple request 
                    gridObj.columns(field, "add"); 
                } 
            } 
        } 
    } 
 
</script> 


Note: We have tried both methods, and able to update the Grid with those columns.  

In your code example, to add several number of columns, you have called the columns() same number of time which triggers the “myBatchDataSourceUrl” which is the cause of the problem. To avoid this, push the several fields into an array and update them using the columns method(refer the above code example-highlighed). 

To remove the previously added columns use the following code example. 

 
var obj = $("#FlatGrid").ejGrid("instance"); 
obj.columns("EmployeeID", "remove") 
 
//or 
 
var obj = $("#FlatGrid").ejGrid("instance"); 
obj.columns(["OrderID", "EmployeeID"], "remove")//recommended for more than one column 

We have also prepared a sample that can be downloaded from the following location. 


If you are still facing any issue, please share the following information to analyze the issue. 

1)      Sample code example of Grid 
2)      Stacktrace of browser console (if any error) 
3)      If possible, replicate the issue in the attached sample 

Regards, 
Seeni Sakthi Kumar S. 


JS Jeffrey Stone July 21, 2016 10:48 PM UTC

Hi Seeni,

I appreciate your quick response. 

I believe the reason why it works for you and it does not work for me is for 2 reasons: 
  • I am using using a BatchDataSource and you are using a Url
  • You are adding the columns after a click event where the grid has already been loaded with data - in, my case, I need an event that executes after the grids data has been updated.
After further testing, it appears that it is getting to the logic to add the new fields before the data has been returned to the grid. I also tried putting the logic of adding the new fields into the grid's DataBound and Load properties but that didn't appear to work (as they appear to be fired when the grid is created and not everytime the grid's data/datasource is updated. Is there some other event that is called when the grid's data/datasource is updated?)

Here is the code again with a few additional comments highlighted in yellow:

// this is the Child grid in a Master Child relationship and I am updating the grid due to a change in the selected row on the master grid.
// I need to use a batch data source as the size of the data can be 100,000's of rows or more
var dataManger = ej.DataManager({
    url: settings.myBatchDataSourceUrl,
    adaptor: new ej.UrlAdaptor()
});

settings.$backtestResultGrid
    .ejGrid({
        dataSource: dataManger,
        query: new ej.Query().addParams("Id", Id)
    });

// I just requested the new data above; however, it executes the following code before the data is returned to the grid
var gridObj = settings.$backtestResultGrid.data("ejGrid");
var gridInstance = settings.$backtestResultGrid.ejGrid("instance");
if (gridInstance.model.currentViewData.length > 0) {
    for (var field in gridInstance.model.currentViewData[0]) {
        if (field.indexOf("_") >= 0) {
            // nothing will be logged
            console.log(field);
            gridObj.columns(field, "add");
        }
    }
}

Let me know if this clarifies my problem.

Regards, Jeff

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team July 22, 2016 10:34 AM UTC

Hi Jeffrey, 

We could see that you are rendering master/detail Grid and on row selection of the Master Grid, populating the details Grid. While repopulating the Grid you are unable to add/remove the columns. You can add the columns in the ActionComplete event of the details Grid as shown in the following code example and it will be triggered after updating the dataSource. Refer to the following code example. 

<div class="label1"> 
    Master Grid 
</div> 
@(Html.EJ().Grid<EmployeeView>("MasterGrid") 
        .Datasource(ds => ds.URL("/Home/masterData").Adaptor(AdaptorType.UrlAdaptor)) 
        .SelectedRowIndex(0) 
            . . .  
        .ClientSideEvents(eve => { eve.RowSelected("rowSelected"); }) 
) 
<div class="label1"> 
    Detail Grid 
</div> 
@(Html.EJ().Grid<OrdersView>("DetailGrid") 
             . . .  
        .ClientSideEvents(e => e.ActionComplete("onActionComplete")) 
) 
 
<script> 
    var flag = false; 
    function rowSelected(args) {//master Grid  
        flag = true; 
        var employeeID = args.data.EmployeeID; 
        $("#DetailGrid").ejGrid({ 
            query: new ej.Query().where("EmployeeID", "equal", employeeID) 
        }); 
        var gridObj = $("#DetailGrid").ejGrid("instance"); 
        gridObj.dataSource(ej.DataManager({//use dataSource method update the Grid Records - Recommended 
            url: "/Home/childData", 
            adaptor: new ej.UrlAdaptor() 
        })) 
    } 
    function onActionComplete(args) {//child Grid actionComplete event 
        //flag allows the Grid to add the columns only after rowSelection  
        if (args.requestType == "refresh" && !ej.isNullOrUndefined(this.model.currentViewData) && flag) { 
            flag = false; 
            if (this.model.currentViewData.length > 0) { 
                var fields = []; 
                for (var field in this.model.currentViewData[0]) { 
                    if (field.indexOf("ID") >= 0) { 
                        fields.push(field); 
                    } 
                } 
                this.columns(fields, "add"); 
            } 
        } 
    } 
</script> 

Use dataSource method to update the Grid Records. Refer to the following code example. 


We have also prepared a sample that can be downloaded from the following location. 


Regards, 
Seeni Sakthi Kumar S.  


Loader.
Up arrow icon