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

Adding columns programmatically


My grid columns are not fixed, i have to add some additional columns based on the data returned from my datasource, so i have added columns programmatically on server side. I have placed grid control inside update panel. I works fine on page load and when i click on button to reload data, it show following script error:

Uncaught Error: Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing the request on the server. The status code returned from the server was: 500
    at Function.Error$create [as create] (ScriptResource.axd:237)
    at Sys$WebForms$PageRequestManager$_createPageRequestManagerServerError [as _createPageRequestManagerServerError] (ScriptResource.axd:656)
    at Sys$WebForms$PageRequestManager$_onFormSubmitCompleted [as _onFormSubmitCompleted] (ScriptResource.axd:1311)
    at Array.<anonymous> (ScriptResource.axd:47)
    at ScriptResource.axd:3484
    at Sys$Net$WebRequest$completed [as completed] (ScriptResource.axd:6376)
    at XMLHttpRequest.Sys$Net$XMLHttpExecutor._onReadyStateChange (ScriptResource.axd:5996)

I have attached sample source which will help you to reproduce the error at your end.
Kindly help!

Attachment: syncfusiondemo_327cefdd.zip

3 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team January 2, 2017 12:44 PM UTC

Hi Abhishek,  
Adding/Removing of the Columns in the Grid can be achieved even in the client-end which will avoid the anonymous POST-Back in the application. Using the columns method of the Grid, Columns in the Grid can be added/removed. Refer to the following Help Document. 
Seeni Sakthi Kumar S. 

AS Abhishek Shandilya January 2, 2017 04:53 PM UTC

Kindly go through my question once again. I am using asp.net grid control, so why are you providing me js grid code.
I have attached sample source code for reference.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team January 3, 2017 12:05 PM UTC

Hi Abhishek, 
We analyzed the reported query and found that the script throws because of the HTML Elements in the Grid an ASP Control. In the Grid, you have given HTML Elements in the Template (of Columns). By default, all the ASP controls will show this error when they are bound with an HTML Element. It is the root cause of the problem which prevents the server event (of ASP Button) and throws an exception.  
To overcome this problem, we suggest you to set the validateRequest property of pages as false and requestvalidationMode as “2.0” (of httpRunTime) in web.config file. Please refer to the below code example.   
    <httpRuntime requestValidationMode="2.0" /> 
    <pages validateRequest="false"/> 
Please refer to the below online links where this query has been discussed.   
We have modified the sample that can be downloaded from the following location. 
If you are not willing to reconfigure the web.config page, you can assign an ID to the Template (of Columns) as shown in the following code example. 
    <form id="form1" runat="server"> 
            <script type="text/template" id="Template"> 
                <a rel='nofollow' href='market.aspx?id={{:id}}'>{{:name}}</a> 
            <asp:ScriptManager ID="scrpt" runat="server"></asp:ScriptManager> 
                    <asp:Button ID="btn" runat="server" Text="Click to reload" /> 
                    <ej:Grid ID="dg" runat="server" EnableViewState="true"><Columns> 
                            <ej:Column Field="name" Template="#Template" /> 
You can able to remove the columns at the server end once after updating the recommended changes. 
We can also provide the columns method to add/remove the respective columns in the client-end. Refer to the following code example. 
    <form id="form1" runat="server"> 
            <asp:ScriptManager ID="scrpt" runat="server"></asp:ScriptManager> 
            <asp:UpdatePanel ID="panel" runat="server"> 
                    <ej:Button ID="btn1" Type="Button" runat="server" Text="Remove Column" ClientSideOnClick="onClick" /> 
                    <ej:Grid ID="dg" runat="server"><Columns> 
                            <ej:Column Field="id" Width="50" HeaderText="SNo" TextAlign="Center" AllowSorting="false" /> 
                               . . . 
                            <ej:Column Field="substate" HeaderText="Sub-State" Width="150" /> 
        <script type="text/javascript"> 
            function onClick(args){ 
                var obj = $("#dg").ejGrid("instance"); 
In the Click event of the Button, an instance has been created using ASP Grid ID which calls the columns method to remove the mentioned column from the Grid. 
Seeni Sakthi Kumar S. 

Live Chat Icon For mobile
Up arrow icon