NestedViewTemplate Disabling Postbacks

18 posts, 0 answers
  1. Moon
    Moon avatar
    249 posts
    Member since:
    Oct 2012

    Posted 21 Oct 2009 Link to this post

    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.
  2. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 22 Oct 2009 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Karim
    Karim avatar
    18 posts
    Member since:
    Feb 2009

    Posted 29 Oct 2009 Link to this post

    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.
  5. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 03 Nov 2009 Link to this post

    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.
  6. Karim
    Karim avatar
    18 posts
    Member since:
    Feb 2009

    Posted 04 Nov 2009 Link to this post

    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.
  7. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 05 Nov 2009 Link to this post

    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.
  8. Karim
    Karim avatar
    18 posts
    Member since:
    Feb 2009

    Posted 05 Nov 2009 Link to this post

    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.
  9. Luke
    Luke avatar
    15 posts
    Member since:
    Nov 2009

    Posted 12 Nov 2009 Link to this post

    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?
  10. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 16 Nov 2009 Link to this post

    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.
  11. Prateek
    Prateek avatar
    13 posts
    Member since:
    Feb 2014

    Posted 16 Oct 2014 Link to this post

    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...
  12. Kostadin
    Admin
    Kostadin avatar
    1709 posts

    Posted 21 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. Prateek
    Prateek avatar
    13 posts
    Member since:
    Feb 2014

    Posted 22 Oct 2014 in reply to Kostadin Link to this post

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

    Thanks!!!!
  14. Kostadin
    Admin
    Kostadin avatar
    1709 posts

    Posted 24 Oct 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  15. Prateek
    Prateek avatar
    13 posts
    Member since:
    Feb 2014

    Posted 06 Nov 2014 in reply to Kostadin Link to this post

    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!!!!

  16. Prateek
    Prateek avatar
    13 posts
    Member since:
    Feb 2014

    Posted 06 Nov 2014 in reply to Prateek Link to this post

    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.....
  17. Kostadin
    Admin
    Kostadin avatar
    1709 posts

    Posted 10 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  18. Prateek
    Prateek avatar
    13 posts
    Member since:
    Feb 2014

    Posted 14 Nov 2014 in reply to Kostadin Link to this post

    Hi Kostadin,

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


  19. Kostadin
    Admin
    Kostadin avatar
    1709 posts

    Posted 18 Nov 2014 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017