NestedViewTemplate Disabling Postbacks

[Moon]

I have a radgrid with a NestedViewTemplate which contains a custom user control, which contains another grid.

I have turned off all click events on the nested grid, but still when I click anywhere on the nested grid, it still runs the grd_Init and reinitializes everything.

I want it to just sit there and do absolutely nothing if someone clicks the child grid. My NestedView is setup like so. Keep in mind, I do all my databinding and initialization and everything else in the code behind.

<telerik:RadGrid ID="grdComponent" runat="server">
         <MasterTableView GroupLoadMode="Server">
               <NestedViewTemplate>
                   <uc:ReviewerGrid ID="ReviewerGrid" runat="server" ReviewId='<%# Eval("ReviewId") %>' />
               </NestedViewTemplate>
            <DetailTables>
            </DetailTables>
           </MasterTableView>
</telerik:RadGrid>

For my child grid, I specifically set these commands on my grid init, so I thought this should take care of any clicks, but it doesn't.

            With grdReviewer

                .ClientSettings.EnablePostBackOnRowClick = False
                .AllowSorting = False
                .ClientSettings.Selecting.AllowRowSelect = False

            End With

I still need the parent row to have the click event, just not the embedded grid.

Any ideas?

thanks.

[Iana Tsolova]

Hi Moon,

Please find the answer to your questions in the other thread you opened on the same subject.

Regards,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Karim]

I am having the same issue. Could you please post the link to the other thread that you mention, the one that answers the question? I searched for the other thread, but was unable to find it.

Thanks.

[Iana Tsolova]

Hello Karim,

You can download the sample I prepared for Nannette in the mentioned thread from here. However, I was not able to replicate the issue there. Check it out and let me know what differs in your case.

Kind regards,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Karim]

Hello Iana,

I don't know what the other thread is, so I can't tell you how my problem differs. Also, the provided solution didn't seem to work in my case. My problem is very similar to Moon's problem (mentioned above) or the problem posted at http://www.telerik.com/community/forums/aspnet-ajax/grid/itemcommand-of-nested-grid.aspx

Basically, I have a radgrid with its EnablePostBackOnRowClick and AllowRowSelect properties set to true. This grid has a nested view template, which contains another grid. The inner grid's EnablePostBackOnRowClick and AllowRowSelect properties are set to false. The inner grid also has an Edit column. The postbacks from this Edit column work correctly.

Here's an example of the markup:

<radgrid id="outerGrid" OnItemCommand="outerGrid_ItemCommand" ...>
    <ClientSettings EnablePostBackOnRowClick="true">
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
    <MasterTableView>
        <NestedViewTemplate>
            <radgrid id="innerGrid" ...>
                <ClientSettings EnablePostBackOnRowClick="false">
                    <Selecting AllowRowSelect="false" />
                </ClientSettings>
                <MasterTableView>
                    <GridEditCommandColumn ... />
                </MasterTableView>
            </radgrid>
        </NestedViewTemplate>
    </MasterTableView>
</radgrid>

The problem is that when I click on a row in the inner grid, several things happen:

• The page posts back. It actually should not post back since the PostBack and RowSelect properties for this inner grid are set to false.
• On the postback, the ItemCommand event handler for the outer grid is called. Why is an event on the inner grid calling the event handler of the outer grid?
• After the postback, the outer grid's expanded row is collapsed (and so the nested view and inner grid is hidden again). Additionally, a random row on the outer grid is selected. What I believe is going on is that the when you click on a row on the inner grid, it takes that selected index and applies it to the outer grid. So if you clicked the third row in the inner grid, then after the postback, the third row will be selected on the outer grid.

Clearly, this is incorrect behavior. It seems like the entire nested view template is just being treated like an expansion of the parent row and the properties set on the controls inside the template are not being respected properly. Is there a way to get around/fix these issues?

Thanks.

[Iana Tsolova]

Hello Karim,

In order to overcome the described behavior, I suggest that you handle the inner grid OnRowClick client-side event as shown below:

<ClientSettings>
    <ClientEvents OnRowClick="innerRowClick" />
</ClientSettings>

<script type="text/javascript">
    function innerRowClick(sender, eventArgs) {
        eventArgs.get_domEvent().preventDefault();
        eventArgs.get_domEvent().stopPropagation();
    }
</script>

I hope this works for you.

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Karim]

Thanks, Iana. That worked. Hopefully, in future releases, this will be fixed in the grid itself so that such 'intercepting' functions are not required.

Thanks.

[Luke]

Hi! I got the same issue, but the solution shown above seems to not work for the GridTemplateColumn.

This is my problem: I set the attribute EnablePostBackOnRowClick on true in ClientSettings of RadGrid, then I had to create a GridTemplateColumn with ItemTemplate and EditTemplate. Finally inside ItemTemplate I got asp:buttons, but every time I try to click on them, the row-click event is fired and I'm not able to stop the propagation of the event. I tried your method using javascript, but nothing changes.

Any advice?

[Iana Tsolova]

Hello Luke,

Could you please try setting the CommandName property of the BUtton to a value different than "RowClick" and see if it makes any difference?

Sincerely yours,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Prateek]

Hello!!

I Have also this problem. i have a nested radgrid inside a RadPageView of RadMultiPage  of radtabstrip. RadtabStrip is inside parent RadGrid.
I want to fire ItemCommand of Nested RadGrid when click on Row and on CommandItem of Nested RadGrid. RowClick and EveryThing is working fine when clicking on Row of Parent Grid. But The Problem is that Nested RdGrid is not working On RowClick and MouseHover and anyThing else..                                                              I am using seperate OnItemCommand for Both grid. 'EnablePostBackOnRowClick="true" ' is for both grids. And Nested Grid is also have RadContextMenu and OnRowDrop that is not working.... One Another Thing is that I am opening Different RadWindow on RowClick of Nested Grid in Different Conditions. ..... Any Help Will be Appreciated..   Thanks...

[Kostadin]

Hi Prateek,

Could you please provide a small runnable sample where the issue could be observe in order to investigate it further? Meanwhile could you please verify that a postback occurs when you click some of the inner grid's row.

Regards,
Kostadin
Telerik

 

 

[Prateek]

Hi Kostadin,
Nothing happen when click on inner grid.....
my sample project is same as given project in this ticket....

Thanks!!!!

[Kostadin]

Hello Prateek,

In case you need to fire the ItemCommand on row click then you have to enable EnablePostBackOnRowClick property. Here I attached a small sample based on the previously provided code which demonstrates that on my side it works correctly.

Regards,
Kostadin
Telerik

 

 

[Prateek]

Hi! Kostadin,

You havn't fire ItemCommand for Both Grid inner and outer as well.
In my Situation both grid should fire itemCommand. And I have already enabled EnablePostBackOnRowClick property of both grids. So Plz send me a sample in which both grid are working well with their ItemCommand Event..... Thanks!!!!

[Prateek]

Hi Kostadin

My page Demo is something like this.
This page is content page of a master page.
Plz take a look at this..

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NestedViewTemplateGrid.aspx.cs"
    Inherits="RadGrid_Hierarchy_NestedViewTemplateGrid" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        //Put your JavaScript code here.
        </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <telerik:RadGrid ID="outerGrid" Width="100%" AllowSorting="True" runat="server" GridLines="both"
        AutoGenerateColumns="False" CellSpacing="0" ShowFooter="True" PageSize="10" Skin="Sunset"
        OnItemCommand="outerGrid_ItemCommand" AllowPaging="True" OnNeedDataSource="outerGrid_NeedDataSource"
        OnItemDataBound="outerGrid_ItemDataBound">
        <clientsettings enablepostbackonrowclick="true">
                <Selecting AllowRowSelect="true" />
            </clientsettings>
        <mastertableview width="100%" datakeynames="IDL" groupsdefaultexpanded="true" grouploadmode="Client"
            showheaderswhennorecords="true" editmode="InPlace">
            <column>
            // my column are here...
            </column>
                <NestedViewTemplate>
                <asp:Panel ID="NestedViewPanel" runat="server">
                <telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1"
                                            Skin="Default" SelectedIndex="1" OnTabClick="RadTabStrip1_TabClick">
                                            <Tabs>
                                                <telerik:RadTab Text="Order" Font-Bold="true" Font-Size="14px" ForeColor="Black"
                                                    Selected="True">
                                                </telerik:RadTab>
                                                <telerik:RadTab Text="Notification" Font-Bold="true" Font-Size="14px" ForeColor="Black">
                                                </telerik:RadTab>
                                                </Tabs>
                                                </telerik:RadTabStrip>
                                                <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" CssClass="innerMultiPage">
                                            <telerik:RadPageView runat="server" ID="PageView1">
                                             <telerik:RadGrid ID="innerGrid" OnNeedDataSource="innerGrid_NeedDataSource" OnItemCommand="innerGrid_ItemCommand" runat="server" AutoGenerateColumns="false" AllowPaging="True"
                AllowSorting="True" OnItemDataBound="innerGrid_ItemDataBound"
                Skin="Sunset" OnRowDrop="innerGrid_RowDrop">

                        <ClientSettings ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True"
                    AllowRowsDragDrop="true" EnablePostBackOnRowClick="true">
                    <Selecting AllowRowSelect="True" EnableDragToSelectRows="false"></Selecting>
                    <Resizing ResizeGridOnColumnResize="True" AllowColumnResize="True"></Resizing>
                    <ClientEvents OnRowDropping="onRowDropping" OnRowContextMenu="RowContextMenu1"></ClientEvents>
                </ClientSettings>

                        <MasterTableView DataKeyNames="ID" Width="100%" CommandItemDisplay="Top" GroupsDefaultExpanded="true"
                    GroupLoadMode="Client" EditMode="EditForms" AllowAutomaticDeletes="true" AllowAutomaticInserts="true"
                    AllowAutomaticUpdates="true">
                    <column>
                    // my column are here....
                    </column>
                    <EditFormSettings UserControlName="AddNew.ascx" EditFormType="WebUserControl">
                        <EditColumn UniqueName="EditCommandColumn1">
                        </EditColumn>
                    </EditFormSettings>
                    </MasterTableView>
                    </telerik:RadGrid>
                                            </telerik:RadPageView>
                                            </telerik:RadMultiPage>
                   
                    </asp:Panel>
                </NestedViewTemplate>
            </mastertableview>
    </telerik:RadGrid>
    <telerik:RadContextMenu ID="RadContextMenu_GrdLoadEquip" runat="server" EnableRoundedCorners="true"
        EnableShadows="true" Skin="Sunset" OnItemClick="RadContextMenu_GrdLoadEquip_ItemClick">
        <items>
                    <telerik:RadMenuItem Text="Add  Here">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Add  Below">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Delete ">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Update " Enabled="false">
                    </telerik:RadMenuItem>
                </items>
    </telerik:RadContextMenu>
    </form>
</body>
</html>



Thanks.....

[Kostadin]

Hello Prateek,

In the previously provided sample you can notice that after clicking the row the appropriate ItemCommand event handler is fired. For instance if you click a row of the outer grid it will fire its ItemCommand event handler. On the other hand if you click an item of the inner grid it will fire its ItemCommand event. Keep in mind that you cannot click the inner grid item and fire the outer grid ItemCommand event handler or vice versa.

Regards,
Kostadin
Telerik

 

 

[Prateek]

Hi Kostadin,

Inner grid itemCommand event is not firing on rowclick at my end...

[Kostadin]

Hi Prateek,

I attached a modified sample where I enabled the postback on row click. After you expand some of the MasterTableView items and click on an item of the detail table view you will noticed that ItemCommand is fired for the inner grid. Please give it a try and let me know how it differs from your real setup.

Regards,
Kostadin
Telerik