Columns don't auto size

[David Price]

Hello,

In the example I have provided on load the grid will load with 5 columns. In the test text box, I then change this to 3 and click on submit and bind the new data to the grid.

           this.Grid1.DataSource = PDataLST;

            this.Grid1.DataBind();

Now 3 columns have been populated but its still showing 5 columns 2 empty.

I only want 3 columns to show. Should it not resize on the new data bind?

Attachment: Test.aspx_3063d611.zip

[Sathyanarayanamoorthy Eswararao]

Hi David, 

Thanks for contacting Syncfusion support. 

Since the columns are autogenerated in your grid if the dataSource is refreshed the columns will not be rebind to the grid. So, we suggest you to empty the grid columns in the Client side button click as in the below code example. 

 

<div class="body-section-design">                               

                                    <div class="col-sm-3 col-md-3 col-lg-2 left-padding">  

                                           <div class="left-sidebar"> 

 

                                <asp:Button ID="cmdSubmit" Style="background: #002662; border: 1px solid #002662; width: 100%; height: 40px; line-height: 40px; text-transform: capitalize; font-size: 16px; margin-bottom: 4px; border-radius: 2px; font-weight: normal; color: #fff;" 

                                    runat="server" Text="Submit Search" OnClick="cmdSubmit_Click" OnClientClick="cmd_Click()"/> 

                                <asp:TextBox runat="server"  ID="Input" Text="5" ></asp:TextBox> 

                                <div class="panel-group" id="accordion"> 

                                </div> 

                            </div> 

                                    </div> 

                                           <div class="col-lg-10 col-md-9 col-sm-9 right-padding competitors-right"> 

                                                  <div class="rightbar"> 

                                                          <ul class="nav nav-tabs">   

                                                          </ul> 

                                                          <div class="tab-content toshiba-content "> 

                                                                 <div id="home" class="tab-pane fade in active"> 

                                                                 <div class="table_content-div">                            

 

                                        <ej:Grid ID="Grid1" runat='server' MinWidth="400" AllowScrolling="true" EnableRowHover="false" OnServerEditRow="EditEvents_ServerEditRow"  AllowTextWrap="true" AllowSelection="true"  AllowResizing="true" IsResponsive="true">                                           

                                            <SelectionSettings SelectionMode="column" />  

                                            <EditSettings AllowEditing="True"></EditSettings> 

                                            <ToolbarSettings ShowToolbar="True" ToolbarItems="edit,update,cancel"></ToolbarSettings>                                             

                                        </ej:Grid>                                                       

                                                                 </div>                               

                                                                 </div>         

                                                          </div> 

                                                  </div> 

                                           </div>  

                             </div> 

                      </div> 

              </div> 

       </div> 

       <footer class="footer"> 

              <div class="container"> 

                      <div class="row"> 

                             <img src="images/footer-logo.png"class="img-responsive"> 

 

                      </div> 

              </div> 

       </footer> 

 

    <script> 

        function cmd_Click() { 

 

            var obj = $(".e-grid").ejGrid("instance"); 

 

            obj.model.columns = []; 

        } 

    </script> 

If you need any further assistance please get back to us. 

Regards, 

Sathyanarayanamoorthy