Setting lost after hide and show

[Huifei Rao]

I have a webform grid as shown below. It has a search toolbar, custom paging and four columns (only the first column is made visible).

This grid need to be shown or hidden according to user selections.  I use server side code "pnlDevIDList.Visible = true" and "pnlDevIDList.Visible= false" to show or hide the grid.  The problem is, once the grid has been hidden, it lost all the settings when it is shown next time. 

Attached are two photos for your reference.  "1.png" is when the grid is shown for the first time, which is the expected appearance. "2.png" is when it has been hidden and shown again. As you can see, the toolbar and pager are missing. The 3 columns which should be invisible are also visible.

Any idea how to make it work? Thanks.

---------------------------------------------------------------------------------------------------------------------------------------------------------------------

              <asp:Panel ID="pnlDevIDList" runat="server" >
                    <asp:HiddenField ID="SelectedRecordsConfig" runat="server" />
                    <div style = "position: absolute; top: 0px; left: 0px; width: 240px;">
                        <ejw:Grid GridLines="None" ID="lstDevicesConfig" runat="server" AllowPaging="true" AllowSelection="true" Selectiontype="Multiple" Height="190"
                         DataSourceCachingMode="Session">
                            <SelectionSettings SelectionMode="row"/>   
                            <ToolbarSettings ShowToolbar="true" ToolbarItems="search"></ToolbarSettings>    
                            <SearchSettings Fields="DeviceID" Operator="startsWith"/>
                            <ClientSideEvents ActionComplete="complete" />
                            <PageSettings ShowDefaults="false" PageSize="20" EnableTemplates="true" Template="#pagerTemplate" />
                            <Columns>
                                <ej:Column Field="DeviceID" HeaderText="Device ID" Width="100"  AllowEditing="false"/>
                                <ej:Column Field="SatTypeCode" HeaderText="SatTypeCode" Width="50" AllowEditing="false" Visible="false"/>
                                <ej:Column Field="SpecialCode" HeaderText="SpecialCode" Width="50" AllowEditing="false" Visible="false"/>
                                <ej:Column Field="Expired" HeaderText="Expired" Width="50" AllowEditing="false" Visible="false"/>
                            </Columns>
                        </ejw:Grid>
                    </div>
                </asp:Panel>

Attachment: Pictures_739d72cf.rar

[Sathyanarayanamoorthy Eswararao]

Hi Huifei, 

Thanks for contacting Syncfusion support. 

Before proceeding to your query we need some more clarifications and additional details. 

1. Share the video demonstration of the reported issue.
2. Share full Grid code example and also the code example of hiding/showing Grid.
3. Given code example you have mention the Grid as “<ejw:Grid></ejw:Grid>”. This is not the recommended way to render the Grid control in ASP.NET Webfroms. We need to use <ej:Grid></ej:Grid>
4. Share Essential Studio version and browser version details.

Regards, 

Sathyanarayanamoorthy 

[Huifei Rao]

1. Video attached. Please check.

2. Grid is within an asp panel "pnlDevIDList" as shown below. On server side code(C#), when I want to show the grid, "pnlDevIDList.Visible = true" is called; otherwise, "pnlDevIDList.Visible = false" is called to hide it.

   For data binding, the following code is called

     lstDevicesConfig.DataSource = dt;  //dt is a DataTable
     lstDevicesConfig.DataBind();

               <asp:Panel ID="pnlDevIDList" runat="server" >
                    <asp:HiddenField ID="SelectedRecordsConfig" runat="server" />
                    <div style = "position: absolute; top: 0px; left: 0px; width: 240px;">
                        <ej:Grid GridLines="None" ID="lstDevicesConfig" runat="server" AllowPaging="true" AllowSelection="true" Selectiontype="Multiple" Height="190"
                         DataSourceCachingMode="Session">
                            <SelectionSettings SelectionMode="row"/>   
                            <ToolbarSettings ShowToolbar="true" ToolbarItems="search"></ToolbarSettings>    
                            <SearchSettings Fields="DeviceID" Operator="startsWith"/>
                            <ClientSideEvents ActionComplete="complete" />
                            <PageSettings ShowDefaults="false" PageSize="20" EnableTemplates="true" Template="#pagerTemplate" />
                            <Columns>
                                <ej:Column Field="DeviceID" HeaderText="Device ID" Width="100"  AllowEditing="false"/>
                                <ej:Column Field="SatTypeCode" HeaderText="SatTypeCode" Width="50" AllowEditing="false" Visible="false"/>
                                <ej:Column Field="SpecialCode" HeaderText="SpecialCode" Width="50" AllowEditing="false" Visible="false"/>
                                <ej:Column Field="Expired" HeaderText="Expired" Width="50" AllowEditing="false" Visible="false"/>
                            </Columns>
                        </ej:Grid>
                    </div>
                </asp:Panel>

3. I changed the prefix to ej.

4. Essential Studio version: 16.1.0.24

    I tried both Firefox 60.0.2 and Chrome 38.0.2125.111 dev-m. Results are the same.

Attachment: VID_20180615_124542_b541c1f0.rar

[Manivannan Padmanaban]

Hi Huifei, 

Thanks for the update. 

Based on your update. We could see that you have shown and hide the grid dynamically in that case the grid settings are lost. We are unable to reproduce the reported issue at our end. 

For your convenience we have created the sample, please refer the below link. 

http://www.syncfusion.com/downloads/support/directtrac/general/7z/visible-895850624.7z  

After referring the sample still facing the issue please provide the following details, 

1. Reproduce the issue in the provided sample.
2. Share the complete grid code example (both view and controller page)

Regards, 

Manivannan Padmanaban.