RadNavigation in CommandItemTemplate of RadGrid

[Craig]

Hi,

I have an error when I use RadNavigation in the CommandItemTemplate of a RadGrid. I'm using NodeTemplates to nest RadButtons and RadCheckboxes. It works perfectly in desktop mode, but as soon as I reduce the browser to collapse to mobile mode, the nested controls will fire their codebehind okay but then the RadNavigation hangs open and a second click reports a JSON error. I have a couple of days of brain-fade on this now so any help would be greatly appreciated before I start looking for a different approach. It would be a shame if there isn't a way to get this to work because I love the responsiveness of the RadNavigation control. Please see below:

 

My CommandItemTemplate:

</Columns>
<CommandItemTemplate>
<table style="width: 100%">
<tr>
<td style="padding-right: 20px; padding-left: 5px">
<span style="font-size: 16pt"><strong><asp:Label ID="Label2" runat="server" Text="<%$Resources:Resource, PagePackagingTitle %>"></asp:Label></strong></span>
</td>
<td style="width: 100%; text-align: right;">
<telerik:RadNavigation ID="RadNavigation2" runat="server" RenderMode="Auto" Skin="Bootstrap">
<Nodes>
<telerik:NavigationNode ID="NavigationNode10" runat="server">
<NodeTemplate>
<telerik:RadButton ID="RadButton1" runat="server" Text="Refresh" CommandName="RebindGrid" Skin="Bootstrap" Width="120px" Icon-PrimaryIconUrl="~/images/site/new2/Refresh.png"></telerik:RadButton>
</NodeTemplate>
</telerik:NavigationNode>
<telerik:NavigationNode ID="NavigationNode11" runat="server">
<NodeTemplate>
<telerik:RadCheckBox ID="RadCheckBox1" runat="server" BackColor="<%$ AppSettings:bcCurrent %>" Text="Current" Width="120px" Checked="True" OnCheckedChanged="RadCheckBox1_CheckedChanged">
</telerik:RadCheckBox>
</NodeTemplate>
</telerik:NavigationNode>
<telerik:NavigationNode ID="NavigationNode12" runat="server">
<NodeTemplate>
<telerik:RadCheckBox ID="RadCheckBox2" runat="server" BackColor="<%$ AppSettings:bcObsolete %>" Text="Obsolete" Width="120px" OnCheckedChanged="RadCheckBox2_CheckedChanged">
</telerik:RadCheckBox>
</NodeTemplate>
</telerik:NavigationNode>
<telerik:NavigationNode ID="NavigationNode13" runat="server">
<NodeTemplate>
<telerik:RadCheckBox ID="RadCheckBox3" runat="server" BackColor="<%$ AppSettings:bcPkgCancelled %>" Text="Cancelled" Width="120px" OnCheckedChanged="RadCheckBox3_CheckedChanged">
</telerik:RadCheckBox>
</NodeTemplate>
</telerik:NavigationNode>
</Nodes>
</telerik:RadNavigation>
</td>
</tr>
</table>
</CommandItemTemplate>
</MasterTableView>

 

My Error:

Invalid JSON primitive: .Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: System.ArgumentException: Invalid JSON primitive: .

Source Error: 

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.
Stack Trace: 

[ArgumentException: Invalid JSON primitive: .] System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializePrimitiveObject() +578 System.Web.Script.Serialization.JavaScriptObjectDeserializer.DeserializeInternal(Int32 depth) +235 System.Web.Script.Serialization.JavaScriptObjectDeserializer.BasicDeserialize(String input, Int32 depthLimit, JavaScriptSerializer serializer) +79 System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit) +37 Telerik.Web.UI.RadButton.LoadPostData(String postDataKey, NameValueCollection postCollection) +184 Telerik.Web.UI.RadWebControl.System.Web.UI.IPostBackDataHandler.LoadPostData(String postDataKey, NameValueCollection postCollection) +16 System.Web.UI.Page.ProcessPostData(NameValueCollection postData, Boolean fBeforeLoad) +758 System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2570

 

Thanks,

Craig

[Veselin Tsvetanov]

Hi Craig,

Unfortunately, we were not able to reproduce the issue observed. Attached you will find our test page that implements your scenario. Could you, please modify it so it reproduces the error observed and post her the modifications applied?

Regards,
Veselin Tsvetanov
Telerik

[Craig]

Hi Veselin,

Here is the broken grid as requested.

N.B. I was only allowed to attach jpg, jpeg, gif and png files to my reply so I had to change the zip extension to png to get it to you - am I missing something? Please change it back to zip, extract it and you'll see my error.

Regards,

Craig

[Veselin Tsvetanov]

Hi Craig,

Thank you for the additional information provided.

Based on that we have reproduced the problem. After a careful investigation of the case, we can confirm that there is a bug in the functionality of the RadNavigation control. More specifically, the control does not dispose itself appropriately.

We have added the bug to our backlog, so you can track its status in our Feedback portal. As a temporary workaround you could implement the following override of the RadNavigation dispose() client side object method:

(function () {
    Telerik.Web.UI.RadNavigation.prototype.dispose = function () {
        this._collapseSandwich();
        var element = $telerik.$(this._sandwichAnimationcontainer);
        element.parent().remove();
        $find('grid1_ctl00_ctl02_ctl00_ctl00_RadButton1').dispose();
        this._detachEvents();
        Telerik.Web.UI.RadNavigation.callBaseMethod(this, 'dispose');
    }
}());

Attached you will find a simple implementation of your scenario, including the above override.

As a token of gratitude for the reported bug we have updated your Telerik points.

Regards,
Veselin Tsvetanov
Telerik

[Craig]

Hi Veselin,

Thanks for the suggested workaround. Unfortunately it did not work for me as none of my AJAX postbacks work now and my grid just hangs with the spinning gif ad infinitum. Any ideas?

Regards,

Craig

[Craig]

Okay, I've discovered that if I remove the line "$find('RadGrid1_ctl00_ctl02_ctl00_ctl00_RadButton1').dispose();" from your function then the RadNavigation seems to work okay, BUT the function also collapses the Bootstrap navbar in the master page (at all viewport sizes). Is there any way it can be modified to ignore the master page? If this is possible, it will probably provide a good enough workaround until the bug is fixed.

Regards,

Craig

[Craig]

My last post was misleading. It turned out that some custom CSS I had in my master page was causing a problem so sorry about that. After modifying my master page CSS, your function, minus the line mentioned above, seems to be doing a good interim job.

Thanks,

Craig

[Veselin Tsvetanov]

Hi Craig,

I should have explained it a bit more in detail. The following line:

$find('grid1_ctl00_ctl02_ctl00_ctl00_RadButton1').dispose();

disposes the control with ID RadButton1, which is located within the NodeTemplate of the RadNavigation control. This was applicable to my test project. In your case, you may have to dispose other controls (for example the Checkboxes), that are placed within the NodeTemplate. However, this is not 100% necessary and it depends on your specific scenario. I would recommend you to test carefully how those controls behave and, if needed, to dispose them.

Regards,
Veselin Tsvetanov
Telerik