Telerik RadGrid not visible

[Samuel]

Randomly we are having issues with the all RadGrids inside a RadSplitter becoming invisible to the user.Each of the grids are inside a RadPane. 
We have added the suggested resolution for a similar bug as below on the onClientLoaded event. Any suggestions?

sender.get_element().style.visibility = 'inherit';

[Kostadin]

Hello Samuel,

Without your code declaration it will be hard to pinpoint the reason for that behavior. Could you please confirm that the RadGrid is properly rendered on the page? It will be best if you could provide you code declaration and the related code behind in order to investigate the issue further.

Regards,
Kostadin
Telerik

[Samuel]

Thanks Kostadin,

Here is the code declaration for the grids. The whole panel becomes invisible when the issue happens.

<asp:Panel ID="docGridPanel" runat="server">

        <telerik:RadSplitter ID="udMainSplitter" runat="server" Skin="Outlook" OnClientLoaded="mainSplitter_OnClientLoaded"
            Width="100%" Height="425" BorderSize="0" PanesBorderSize="0" Orientation="Vertical" VisibleDuringInit="false">
            <telerik:RadPane ID="udMainSplitterFolderPane" runat="server" CssClass="dpMainSplitterFolderPane"
                Width="180" Scrolling="None">
                <div class="dpPnlHdr">
                    Folders</div>
                <div class="dpFolderSplitterFolderPane" style="overflow: auto; width: 100%; height: 400px">
                    <telerik:RadTreeView ID="udFolders" ondragenter="cancelEvent()" ondragover="cancelEvent()"
                        EnableDragAndDrop="true" runat="server" EnableEmbeddedSkins="false" Skin="myFile"
                        EnableViewState="true" OnNodeClick="udFolders_NodeClick">
                    </telerik:RadTreeView>
                </div>
            </telerik:RadPane>
            <telerik:RadSplitBar ID="radSplitBar" runat="server" CollapseMode="None" />
            <telerik:RadPane ID="udMainSplitterDocumentPane" runat="server" CssClass="dpMainSplitterDocumentPane"
                Scrolling="None" OnClientResized="udMainSplitterDocumentPane_ResizeGrid">
                <div class="dpPnlHdr">
                    Document Selection</div>

                <div class="dpDocGridDiv">
                    <telerik:RadGrid ID="dgUDDocuments" runat="server" EnableEmbeddedSkins="false" Skin="myFile"
                        EnableAJAX="true" OnItemDataBound="dgUDDocuments_ItemDataBound" OnNeedDataSource="dgUDDocuments_NeedDataSource"
                        AutoGenerateColumns="false" AllowSorting="true" AllowPaging="true" ShowStatusBar="false"
                        AllowMultiRowSelection="true" GridLines="None" Height="375" PageSize="20">
                          <MasterTableView ClientDataKeyNames="SubmissionID,PolicyNumber,Symbol,DocID,Source">
                            <NoRecordsTemplate>
                                No documents to display</NoRecordsTemplate>
                            <Columns>

                        .........

                                </Columns>
                        </MasterTableView>
                        <ClientSettings>
                            <Selecting AllowRowSelect="True" />
                            <ClientEvents OnGridCreated="ud_docGridCreated" OnRowDblClick="ud_docGridRowDblClick"
                                OnRowCreated="ud_documentGridRowCreated" OnRowDeselected="ud_documentGridRowDeselected"
                                OnRowSelected="ud_documentGridRowSelected" />
                            <Scrolling AllowScroll="true" ScrollHeight="370" />
                        </ClientSettings>
                        <PagerStyle Mode="NextPrevNumericAndAdvanced" />
                    </telerik:RadGrid>
                </div>
            </telerik:RadPane>
        </telerik:RadSplitter>
    </asp:Panel>

[Kostadin]

Hello Samuel,

I was not able to replicate the issue locally. I prepared a small sample based on your code and attached it for your reference. Could you please give it a try and let me know how it differs from your real setup? Additionally I would suggest you to check your project for JavaScript errors which could cause the visibility issue of the panel.

Regards,
Kostadin
Telerik

[Samuel]

Thanks for your prompt followup.

The sample runs fine and does my code. It only becomes invisible very randomly. That is our challenge. The issue can not be reproduced at will.
The javascript error is one thing I was able to catch when this happens. Inside our.aspx page we have an html form element as so:

<form id="htmForm" name="htmForm" method="post" target="targetpage">
   <input id="txtSubID" type="hidden" name="txtSubId" />
   <input id="txtCustomerNumber" type="hidden" name="txtCustomerNumber" />
   <input id="txtAccountID" name="txtAccountID" type="hidden" />
   <input id="txtBranch" name="txtBranch" type="hidden" />
 </form>

the panel containing the telerik grids that we have issues with is in a custom ascx control which is dynamically loaded inside the aspx page.
The script error happens on the grids "OnGridCreated" function which tries to set values for one of the hidden htmForm input boxes above.
The error says the input element is undefined or null as if the <form> is not visible inside the custom contorl.

So, if the OnGridCreated has a javascript error, the panel wouldn't load? Why would a script inside a ascx control wouldn't be able to access the html input element on the parent form? Any suggestion would be greatly appreciated. I can send you the complete code for the control and the aspx page if that helps. Below is the <clientSetting> section in the grid.

<ClientSettings AllowDragToGroup="true" AllowRowsDragDrop="true" AllowGroupExpandCollapse="true">
                   <Selecting AllowRowSelect="True" />
                   <ClientEvents OnGridCreated="fileGridCreated" OnRowClick="ud_fileGridRowSelected"
                       OnRowDblClick="ud_fileGridRowSelected" />
</ClientSettings>

[Kostadin]

Hi Samuel,

Could you prepare a small runnable sample where the issue could be observed in order to inestigate it further? I notice that the input element are placed in a form. Is that another form on the page and why you do not wrapped them in a Panel?

Regards,
Kostadin
Telerik

[Samuel]

Hi Kostadin,

The form is another "html" form on the same aspx page. The html form contains hidden input fields only and is not visible to the user. It is used to submit it to different site with those input values.
It would not be easy to create a sample similar to what we have in our system,for your testing since the data for those grids are coming from other web services calls. 
Even with our setup the issue doesn't seem to happen quite often, may be once in a 10,000 request.

[Kostadin]

Hello Samuel,
 
In this case we will continue trying reproducing the issue and let you know if we have some progress on it.

Regards,
Kostadin
Telerik