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 dynamic columns after server response

I am using standard JS grid with this code:
var dm = ej.DataManager({
    url: "/Home/get", crossDomain: true,
    updateUrl: '/Home/update',
    adaptor: new ej.UrlAdaptor()
});


$("#Grid").ejGrid({
    dataSource: dm,
    allowScrolling: true,
    allowVirtualScrolling: true,
    filterSettings: {
        filterType: "menu"
    },
    pageSettings: { enableQueryString: true, pageSize: 10 },
    columns: [
        { field: "data", headerText: "Data", isPrimarykey: true },
        { field: "value", headerText: "Value" },
    ]

});
Now data that is returned from the server is like that {result: data, count:10...} for the example, but I will make code to return data like this {result: result, count:count, columns{name: "Column 1", name: "Column 2"}}
and in this example I want to set grid with columns - Column 1 and Column 2,

or even better way to use Object.keys(json.result)

Is there way to set Dynamic columns with 1 request/response and after the response ?
Or I need to use 2 requests - 1 for columns and another for grid content, something like that:

$.get("URL TO GET COLUMNS", function(data){
var columnsVariable = $.ParseJSON(data);
$("#Grid").ejGrid({
        dataSource: dm,
        allowScrolling: true,
        allowVirtualScrolling: true,
        filterSettings: {
            filterType: "menu"
        },
        pageSettings: { enableQueryString: true, pageSize: 10 },
        columns: columnsVariable

    });
})
If there is a way with Object.keys(json.result) will be the best solution.


3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 5, 2017 07:18 AM UTC

Hi Customer, 
 
Thanks for contacting Syncfusion Support.  
 
As per your request, we have collected the Grid columns in a POST and rendered the Grid in its success event. Refer to the following code example.  
 
<div id="elem"> 
    <div id="Grid"></div> 
</div> 
 
<script type="text/javascript"> 
 
    $(function () { 
        $("#elem").ejWaitingPopup({ 
            showOnInit: true, 
            text: "Loading Grid....!!!" 
        }); 
        var collectColumns = ej.DataManager({ 
            url: "/Home/collectColumns", 
            adaptor: new ej.UrlAdaptor() 
        }) 
        var promise = collectColumns.executeQuery(new ej.Query()); 
        promise.done(function (e) { 
            var fields = e.result.cols, cols = []; 
            for (var c = 0; c < fields.length; c++) { 
                cols.push({ field: fields[c] }); 
            } 
            $("#elem").ejWaitingPopup("hide"); 
            $("#Grid").ejGrid({ 
                dataSource: ej.DataManager({ 
                    url: "/Home/DataSource", 
                    adaptor: new ej.UrlAdaptor() 
                }), 
               . . .. 
                        . . . 
                columns: cols 
            }); 
        }) 
    }); 
</script> 
 
        public ActionResult collectColumns() { 
            List<string> cols = new List<string>() { "OrderID", "Freight", "CustomerID" }; 
            return Json(new { cols = cols }, JsonRequestBehavior.AllowGet);  
        } 
  
We have prepared a sample that can be downloaded from the following location.  
 
 
Regards,  
Seeni Sakthi Kumar s. 
 
 
 
 



NO noName September 5, 2017 10:18 PM UTC

Hi, thx for the answer. Everything works. 

Are here 2 requests - 1 for columns and 1 for the data ? Is there way with one request ? And the response something like {result:results, columns: columns} to be used.



SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 6, 2017 07:24 AM UTC

Hi Customer,  
 
As per your request, we have collected the Grid columns as well as the dataSource in a single POST. Refer to the following code example.  
 
<div id="elem"> 
    <div id="Grid"></div> 
</div> 
 
<script type="text/javascript"> 
 
 
    $(function () { 
        $("#elem").ejWaitingPopup({ 
            showOnInit: true, 
            text: "Loading Grid....!!!" 
        }); 
        var collectColumns = ej.DataManager({ 
            url: "/Home/GridData", 
            adaptor: new ej.UrlAdaptor() 
        }) 
        var promise = collectColumns.executeQuery(new ej.Query()); 
        promise.done(function (e) { 
            var fields = e.result.colums, cols = []; 
            for (var c = 0; c < fields.length; c++) { 
                if (fields[c] == "OrderID") 
                    cols.push({ field: fields[c], isPrimaryKey: true }); 
                else 
                    cols.push({ field: fields[c] }); 
            } 
            $("#elem").ejWaitingPopup("hide"); 
            $("#Grid").ejGrid({ 
                dataSource: e.result.result, 
                columns: cols 
            }); 
        }) 
    }); 
</script> 
 
        public ActionResult GridData(DataManager dm) 
        { 
            IEnumerable Data = OrderRepository.GetAllRecords().Take(30).ToList(); 
            DataOperations operation = new DataOperations(); 
            int count = Data.AsQueryable().Count(); 
            List<string> cols = new List<string>() { "OrderID", "Freight", "CustomerID" }; 
            return Json(new { result = Data, count = count, colums = cols }, JsonRequestBehavior.AllowGet); 
        } 
 
 
Please make a note that the Grid is bound with a local data.  
 
If you would like to continue with the remote data for the Grid, you can use the custom adaptor concept of the DataManager. Refer to the following Help Document.  
 
 
Using the custom adaptor, we have extended the processResponse method of the UrlAdaptor. Later, we have rebound the Grid with the columns.  
 
<div id="Grid"></div> 
<script type="text/javascript"> 
 
 
    $(function () { 
        var customadaptor = new ej.UrlAdaptor().extend({//extend the adaptor 
            processResponse: function (data, ds, query, xhr, request, changes) { 
                var fields = data.colums, cols = []; 
                if (fields.length) { 
                    for (var c = 0; c < fields.length; c++) { 
                        if (fields[c] == "OrderID") 
                            cols.push({ field: fields[c], isPrimaryKey: true }); 
                        else 
                            cols.push({ field: fields[c] }); 
                    } 
                    //extend the Grid Columns 
                    ej.createObject("columns", cols, $("#Grid").ejGrid("model")); 
                    //Refresh the Grid header 
                    $("#Grid").ejGrid("refreshHeader"); 
                } 
                return this.base.processResponse.apply(this, [data, ds, query, xhr, request, changes]); 
            } 
        }); 
 
        $("#Grid").ejGrid({ 
            dataSource: ej.DataManager({ 
                url: "/Home/GridData", 
                adaptor: new customadaptor() 
            }), 
            load: function (args) { 
                //update headers for column 
                this.model.dataSource.dataSource.headers = [{ requiresCols: true }]; 
            }, 
            dataBound: function (args) { 
                //update headers for column 
                this.model.dataSource.dataSource.headers = [{ requiresCols: false }]; 
            }, 
            //demo column 
            columns: ["demo"] 
        }); 
    }); 
</script> 
 
        public ActionResult GridData(DataManager dm) 
        { 
            IEnumerable Data = OrderRepository.GetAllRecords().Take(30).ToList(); 
            DataOperations operation = new DataOperations(); 
            int count = Data.AsQueryable().Count(); 
            if (dm.Skip != 0) //Paging 
            { 
                Data = operation.PerformSkip(Data, dm.Skip); 
            } 
            if (dm.Take != 0) //Paging 
            { 
                Data = operation.PerformTake(Data, dm.Take); 
            } 
            List<string> cols = new List<string>(); 
            bool isTrue = bool.Parse(Request.Headers["requiresCols"].ToString()); 
            if (isTrue) 
                cols = new List<string>() { "OrderID", "Freight", "CustomerID" }; 
            return Json(new { result = Data, count = count, colums = cols }, JsonRequestBehavior.AllowGet); 
        } 
 
We have prepared a sample that can be downloaded from the following location.  
 
 
Regards,  
Seeni Sakthi Kumar S. 
 


Loader.
Up arrow icon