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 : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add dynamic columns after server response

Thread ID:

Created:

Updated:

Platform:

Replies:

132478 Sep 4,2017 07:00 PM UTC Sep 6,2017 07:24 AM UTC JavaScript 3
loading
Tags: ejGrid
noName
Asked On September 4, 2017 11:45 PM UTC

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.


Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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. 
 
 
 
 


noName
Replied On 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.


Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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. 
 


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.

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

;