Adding columns programmatically

[Abhishek Shandilya]

Hi,

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

[Seeni Sakthi Kumar Seeni Raj]

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. 

 

https://help.syncfusion.com/api/js/ejgrid#methods:columns 

 

Regards, 

Seeni Sakthi Kumar S. 

[Abhishek Shandilya]

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.

[Seeni Sakthi Kumar Seeni Raj]

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.   

  

  <system.web> 

    <httpRuntime requestValidationMode="2.0" /> 

    <pages validateRequest="false"/> 

  </system.web> 

 

Please refer to the below online links where this query has been discussed.   

  

http://stackoverflow.com/questions/81991/a-potentially-dangerous-request-form-value-was-detected-from-the-client 

    

http://stackoverflow.com/questions/5942300/a-potentially-dangerous-request-form-value-was-detected-from-the-client?rq=1 

  

We have modified the sample that can be downloaded from the following location. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/128077/ze/syncfusiondemo576191398.zip 

 

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"> 

        <div> 

            <script type="text/template" id="Template"> 

                <a rel='nofollow' href='market.aspx?id={{:id}}'>{{:name}}</a> 

            </script> 

            <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" /> 

                        </Columns> 

                    </ej:Grid> 

        </div> 

    </form> 

 

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"> 

        <div> 

            <asp:ScriptManager ID="scrpt" runat="server"></asp:ScriptManager> 

            <asp:UpdatePanel ID="panel" runat="server"> 

                <ContentTemplate> 

                    <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" /> 

                        </Columns> 

                    </ej:Grid> 

                </ContentTemplate> 

            </asp:UpdatePanel> 

        </div> 

        <script type="text/javascript"> 

            function onClick(args){ 

                var obj = $("#dg").ejGrid("instance"); 

                obj.columns("substate","remove"); 

            } 

        </script> 

    </form> 

 

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. 

 

Regards, 

Seeni Sakthi Kumar S.