ItemCommands for nested RadGrid

33 posts, 0 answers
  1. Pako
    Pako avatar
    16 posts
    Member since:
    Oct 2010

    Posted 14 Feb 2011 Link to this post

    Hi

    For long time I've been trying to achieve simple functionality: nest one rad grid into another, to get something similar to PanelBar. I simply want to be able to click on a row, which would then expand and show inner rad grid. This I've managed to do. However, I'm having really big problem with using this mechanism since all commands from nested grid are transferred automatically to master grid. This way I cannot select nested grid's row because each click collapses my master row.

    I've tried already setting inner grid's ItemCommand event,but with no success, still incorrect (in my opinion) behavior occurs.

    Below I'm posting snippet with aspx and some code to manage those grid. Could you help me resolving this issue? How can I be able to select row from nested grid? Or process any item command for nested grid?

    <telerik:RadGrid ID="gridNodes" runat="server"
     AutoGenerateColumns="false"
     ShowHeader="false"
     GridLines="None">
        <ClientSettings EnablePostBackOnRowClick="true"
    EnableRowHoverStyle="true" />
        <MasterTableView GroupLoadMode="Server"
     DataKeyNames="NodeId"
     AutoGenerateColumns="false"
     Name="master">
            <NestedViewTemplate>
                <asp:Panel ID="pnlStatements" runat="server">
                    <telerik:RadGrid ID="gridStatements" runat="server"
     AutoGenerateColumns="false"
     ShowHeader="false">
                        <MasterTableView Name="inner">
                            <Columns>
                                <telerik:GridNumericColumn DataField="Id" Visible="false" />
                                <telerik:GridBoundColumn DataField="Value" />
                            </Columns>
                        </MasterTableView>
                    </telerik:RadGrid>
                </asp:Panel>
            </NestedViewTemplate>
            <Columns>
                <telerik:GridBoundColumn UniqueName="NodeName"
     HeaderText="Node name"
     DataField="NodeName" />
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
     and code behind:

    Protected Sub gridNodes_NeedDataSource(ByVal sender As Object, ByVal e As GridNeedDataSourceEventArgs) _
        Handles gridNodes.NeedDataSource
        Me.gridNodes.DataSource = Me.ConsumptionContextViewModel.GetNodeWithParents()
    End Sub
     
    Protected Sub gridNodes_DataBound(ByVal sender As Object, ByVal e As EventArgs) _
        Handles gridNodes.DataBound
        If (gridNodes.Items.Count > 0) Then
            gridNodes.Items(0).Expanded = True
        End If
    End Sub
     
    Protected Sub gridNode_ItemCreated(ByVal sender As Object, ByVal e As GridItemEventArgs) _
        Handles gridNodes.ItemCreated
        If (TypeOf (e.Item) Is GridNestedViewItem) Then
            Dim typeContent = DirectCast(e.Item.FindControl("gridStatements"), RadGrid)
            AddHandler typeContent.NeedDataSource, AddressOf Me.gridStatements_NeedDataSource
            AddHandler typeContent.ItemCommand, AddressOf Me.gridStatements_ItemCommand
        End If
    End Sub
     
    Protected Sub gridStatements_NeedDataSource(ByVal sender As Object, ByVal e As GridNeedDataSourceEventArgs)
        Dim grid = DirectCast(sender, RadGrid)
        Dim nodeId = DirectCast(grid.NamingContainer, GridNestedViewItem).ParentItem.GetDataKeyValue("NodeId")
        grid.DataSource = Me.ConsumptionContextViewModel.GetTextsForNode(CInt(nodeId))
    End Sub
     
    Protected Sub gridNode_ItemCommand(ByVal sender As Object, ByVal e As GridCommandEventArgs) _
        Handles gridNodes.ItemCommand
        Select Case e.CommandName
            Case RadGrid.ExpandCollapseCommandName
                If (Not TypeOf (e.Item) Is GridDataItem) Then
                    Return
                End If
     
                ' close all items except current. e.Item.Expanded will be expanded after leaving ItemCommand method
                For Each item As GridItem In gridNodes.MasterTableView.Items
                    If item.Expanded AndAlso item IsNot e.Item Then
                        item.Expanded = False
                    End If
                Next
     
                ' select expanded row
                e.Item.FireCommandEvent(RadGrid.SelectCommandName, e)
                ' explicitly rebind inner container
                If (e.Item.Expanded = False) Then
                    Dim dataItem = DirectCast(e.Item, GridDataItem)
                    Dim innerContainer = DirectCast(dataItem.ChildItem.FindControl("gridStatements"), RadGrid)
                    innerContainer.Rebind()
                End If
            Case "RowClick"
                ' manually fire expand event
                e.Item.FireCommandEvent(RadGrid.ExpandCollapseCommandName, New GridExpandCommandEventArgs(e.Item, sender, e))
            Case Else
                ' do nothing
        End Select
    End Sub

    Regards,

    Pako

  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 15 Feb 2011 Link to this post

    Hello Pako,

    If you want to select row in inner grid, you can atatch ClientSettings to inner grid like below.
    ASPX:
    <NestedViewTemplate>
        <asp:Panel ID="pnlStatements" runat="server">
            <telerik:RadGrid ID="gridStatements" runat="server" AutoGenerateColumns="false" ShowHeader="false">
                <MasterTableView Name="inner">
                    <Columns>
                        <telerik:GridNumericColumn DataField="Id" Visible="false" />
                        <telerik:GridBoundColumn DataField="Value" />
                    </Columns>
                </MasterTableView>
                <ClientSettings Selecting-AllowRowSelect="true" EnablePostBackOnRowClick="true">
                </ClientSettings>
            </telerik:RadGrid>
        </asp:Panel>
    </NestedViewTemplate>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pako
    Pako avatar
    16 posts
    Member since:
    Oct 2010

    Posted 15 Feb 2011 Link to this post

    Ok, this allows me to select row in inner grid, but still command gets called and expands/collapses master grid's row, e.g. if I click on third row in first inner grid, this will expand third row of master grid. If I click on first row in first inner grid, it will collapse first row of master grid. This is for sure not expected behavior. And I'm not able to filter out commands that gets called from inner grid, because their sender parameter (or command source from event args) indicates, that command was triggered by master's gird row.

  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Feb 2011 Link to this post

    Hello Pako,

    In order to achieve this you can attach 'ItemCommand' event to inner grid(gridStatements) and perform corresponding operation there.

    VB.NET:
    Protected Sub gridStatements_ItemCommand(sender As Object, e As GridCommandEventArgs)
        Select Case e.CommandName
            Case "RowClick"
                e.Item.FireCommandEvent(RadGrid.ExpandCollapseCommandName, New GridExpandCommandEventArgs(e.Item, sender, e))
                Exit Select
            Case Else
                Exit Select
        End Select
    End Sub

    Thanks,
    Princy.
  6. Pako
    Pako avatar
    16 posts
    Member since:
    Oct 2010

    Posted 16 Feb 2011 Link to this post

    I tried doing that, but with no success - ItemCommand event for inner grid was never called, all item commands were called on master grid and all source properties (i.e. sender parameter of event and e.CommandSource) were indicating master grid's rows, not inner grid rows (on which command was actually performed).
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Feb 2011 Link to this post

    Hello Pako,

    The code is working fine at my end. Can you please attach the ItemCommand event for inner grid directly from ASPX and check if it works now.

    ASPX:
    <NestedViewTemplate>
               <asp:Panel ID="pnlStatements" runat="server">
                   <telerik:RadGrid ID="gridStatements" runat="server"
                            OnItemCommand="gridStatements_ItemCommand">
                           .     .     .     .      .     .
                   </telerik:RadGrid>
               </asp:Panel>
     </NestedViewTemplate>

    C#:
    Protected Sub gridStatements_ItemCommand(sender As Object, e As GridCommandEventArgs)
       .    .    .    .    .
    End Sub

    Thanks,
    Princy.
  8. Pako
    Pako avatar
    16 posts
    Member since:
    Oct 2010

    Posted 17 Feb 2011 Link to this post

    Tried that too, with no success. Even tried assigning event handler from aspx AND code (yea, I know it's stupid thing to do). Still no success.

    I've created sample vs2010 project that demonstrates this behavior, maybe you could take a look and point out what I'm doing wrong. Where could I post it, so you could download it? Forum prohibits attaching zip files.

    Regards,

    Pako

  9. ControlledKhaos
    ControlledKhaos avatar
    10 posts
    Member since:
    Jun 2012

    Posted 18 Feb 2011 Link to this post

    I am experiencing the same issues with nested grid.  I have tried all of the suggestions above and none of them work.  The ItemCommand fires for the master grid only.  This appears to be a major bug.
  10. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 21 Feb 2011 Link to this post

    Hi ControlledKhaos,

    Which version of our AJAX controls you used when you encountered the malady? I tested the last suggestion posted by Princy using the latest release 2010.3.1317 of the suite and the ItemCommand event was raised properly for the inner grid.

    Greetings,
    Sebastian
    the Telerik team
  11. Pako
    Pako avatar
    16 posts
    Member since:
    Oct 2010

    Posted 21 Feb 2011 Link to this post

    I'm having this problem on version 2010.3.1109.40 and I would like not to update it to newest version, since this may introduce some new problems, and this app is complicated enough before next release. I've used RadListView as inner container, since I didn't need most of grid's features, but I've created this thread to get info, whether there is workaround for this problem or not.
  12. ControlledKhaos
    ControlledKhaos avatar
    10 posts
    Member since:
    Jun 2012

    Posted 21 Feb 2011 Link to this post

    Hi Sebastian,

    Thanks for getting back to me on this issue.  I am using version 2010.3.1109.35.  I did not realize that version 2010.3.1317 was available.  I will install it today and see if that resolves my issue.


  13. ControlledKhaos
    ControlledKhaos avatar
    10 posts
    Member since:
    Jun 2012

    Posted 21 Feb 2011 Link to this post

    Sebastian,

    I have downloaded and installed version 2010.3.1317. My master grid is wired up to respond to client settings

    and events. 

    <ClientSettings EnablePostBackOnRowClick="True" Selecting-AllowRowSelect="True" >
        <Selecting AllowRowSelect="True" />
    </ClientSettings> 

    I have used the declarative methed of wiring up the RadGrid ItemCommand for the child grid and wired up the
    client settings and events. 

    OnItemCommand="ContractReservationHistoryGrid_ItemCommand"
    <ClientSettings EnablePostBackOnRowClick="True" Selecting-AllowRowSelect="True">
        <Scrolling AllowScroll="True" ScrollHeight="115px" UseStaticHeaders="True" SaveScrollPosition="True"></Scrolling>
    </ClientSettings>



    In this configuration, when a row was clicked in the child grid, the ItemCommand for the master grid is fired.

    To get the ItemCommand in the child grid to fire, I had to remove the ClientSettings for the master grid.

    This is not acceptable as I need the ClientSettings for the master grid also.



  14. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 22 Feb 2011 Link to this post

    Hello,

    I made a sample web site for you. It demonstrates how the ItemCommand is fired on row click even with enabled row selection for both child and main RadGrid. It is working fine with 2010.3.1317 version of RadControls for ASP.NET AJAX.

    All the best,
    Vasil
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  15. ControlledKhaos
    ControlledKhaos avatar
    10 posts
    Member since:
    Jun 2012

    Posted 22 Feb 2011 Link to this post

    Vasil,

    Nice try, but no cigar.  I ran your test project and sometimes the ItemCommand for the InnerGrid fires and sometimes it does not.  If I remove the ClientSettings for the MasterGrid, the ItemCommand for the InnerGrid will fire perfectly everytime.
  16. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 24 Feb 2011 Link to this post

    Hello,

    I am unable to replicate it here. Can you give us more information when ItemCommand is not fired? Does this happen every time after performing given steps? Or it happens randomly?
    You can even record a video using Jing and share it online. This could help us to spot if something strange is going on.

    Best wishes,
    Vasil
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  17. ControlledKhaos
    ControlledKhaos avatar
    10 posts
    Member since:
    Jun 2012

    Posted 25 Feb 2011 Link to this post

    If you simply take the page that you sent to me, run it in debug and put a break point in the InnerRadGrid ItemCommand handler and then click on the items in the InnerGrid, you will see that it does not fire every time.  Then once you see that it does not fire, remove or comment out the ClientSettings for RadGrid1 and then run the same test.  The ItemCommand for the InnerGrid will fire everytime that you click on an item in the grid.
  18. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 28 Feb 2011 Link to this post

    Hi ControlledKhaos,

    I did exactly the same. I clicked on one item many times then clicked on different items from the inner grid and on main grid and back again on inner grid, and so on. Also expanded and collapsed main grid items and click on inner grid a few times. However the ItemCommand is still fired every time when I click on inner grid. I confirm one more time that I am using 2010.3.1317 version. And in the client settings for the outer grid I have: EnablePostBackOnRowClick="True" with Selecting-AllowRowSelect="True"

    Could you put a break point in Page_Load and see if the page actually makes post-back when you click on the inner grid?

    Regards,
    Vasil
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  19. ControlledKhaos
    ControlledKhaos avatar
    10 posts
    Member since:
    Jun 2012

    Posted 28 Feb 2011 Link to this post

    Vasil,

    Good morning.  I hope that you had a good weekend.  I am using 2010.3.1317 version of your controls.  I created a new project and added the following page:

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TestGrid._Default" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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">
        </telerik:RadScriptManager>
        <div>
            <telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" OnItemCreated="RadGrid1_ItemCreated">
                <ClientSettings EnablePostBackOnRowClick="True" Selecting-AllowRowSelect="True" />
                <MasterTableView HierarchyDefaultExpanded="true">
                    <NestedViewTemplate>
                        InnerGrid:
                        <telerik:RadGrid ID="InnerRadGrid" runat="server" OnItemCommand="InnerRadGrid_ItemCommand">
                            <ClientSettings EnablePostBackOnRowClick="True" Selecting-AllowRowSelect="True" />
                            <MasterTableView>
                              <Columns>
                                <telerik:GridTemplateColumn UniqueName="Column1">
                                  <ItemTemplate>
                                    Some text
                                  </ItemTemplate>
                                </telerik:GridTemplateColumn>
                              </Columns>
                            </MasterTableView>
                        </telerik:RadGrid>
                    </NestedViewTemplate>
                </MasterTableView>
            </telerik:RadGrid>
            <label id="Label1" runat="server" style="color#FF0000font-weightbold">
            </label>
        </div>
        </form>
    </body>
    </html> 

     


    Here is the code behind:
    Imports Telerik.Web.UI
     
    Public Class _Default
    	Inherits System.Web.UI.Page
     
    	Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgsHandles Me.Load
    		Label1.InnerText = ""
    	End Sub
     
    	Protected Sub RadGrid1_ItemCreated(ByVal sender As ObjectByVal e As Telerik.Web.UI.GridItemEventArgsHandles RadGrid1.ItemCreated
    		If TypeOf e.Item Is GridNestedViewItem Then
    			Dim view As GridNestedViewItem = TryCast(e.Item, GridNestedViewItem)
     
    			Dim innerGrid = view.FindControl("InnerRadGrid")
     
    			If Not innerGrid Is Nothing Then
    				TryCast(innerGrid, RadGrid).DataSource = New String() { "1""2""3" }
    			End If
     
    		End If
    	End Sub
     
    	Protected Sub RadGrid1_NeedDataSource(ByVal sender As ObjectByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgsHandles RadGrid1.NeedDataSource
    		RadGrid1.DataSource = New String() { "a""b""c" }
    	End Sub
     
    	Protected Sub InnerRadGrid_ItemCommand(ByVal sender As ObjectByVal e As Telerik.Web.UI.GridCommandEventArgsHandles InnerRadGrid.ItemCommand
    		Label1.InnerText = "InnerRadGrid_ItemCommand is handled"
    	End Sub
    End Class

     

    I set a breakpoint in Page_Load and InnerRadGrid_ItemCommand. When I click on an item
    in the InnerGrid, the breakpoint for Page_Load works as expected. However, I only got
    the InnerRadGrid_ItemCommand to fire only twice out of about 15 clicks. If I remove

     

    the ClientSettings for the MasterGrid, the ItemCommand for the InnerGrid will fire
    perfectly everytime. This is becoming extremely frustrating. I find it extremely
    difficult to comprehend that the same markup and code is responding as polar opposites
    on two different machines.






  20. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 02 Mar 2011 Link to this post

    I am running the latest version of the Telerik AJAX controls and am having this exact same issue.

    I ran into this same problem about 4-5 months ago and found a workaround by setting a hidden field to determine if the inner grid was being clicked and posted that workaround in a support ticket here:
    http://www.telerik.com/account/support-tickets/view-ticket.aspx?threadid=362548

    I'm trying to find a way to get it working without resorting that kludgy method and I cannot get the inner grid's ItemCommand event to fire at all.  It's always the parent grid's event that fires.  Perhaps this would work better with the Master/Detail tables approach but it *should* work out-of-the-box with the NestedViewTemplate, as well, but it's not.

    The exampleSite from Vasil below does work for me but I wonder if it's because that uses the NeedDataSource instead of being bound to an object data source.

    Also, I see from Vasil's example that there is no ItemCommand event for the parent grid and that the ItemCreated event for the parent is binding the data for the nested grid.  That would NOT work in my case as I don't want to bind the nested data for each row in the parent data when the grid is first loaded.  It takes more than a few seconds and that's way too long considering the data with which I'm working.  My current design binds the data to the nested grids after a user clicks a row in the parent grid to expand it.


    **** EDIT ****

    I setup a SelectedIndexChanged event for the nested grid and moved the code I had in its ItemCommand event and now it's working.  It's still firing the parent's ItemCommand event but I believe I can setup a test in there to ignore it if the inner grid was expanded.

    Sooo...anyone trying to get a nested RadGrid's ItemCommand event to fire, try using the SelectedIndexChanged event instead.

    Here's the code I have in that event that worked for me:
    Dim rgServiceAreaAffiliates As RadGrid = DirectCast(sender, RadGrid)
    Dim gdi As GridDataItem = rgServiceAreaAffiliates.MasterTableView.Items(rgServiceAreaAffiliates.SelectedItems(0).ItemIndex)
    Dim ni As GridNestedViewItem = DirectCast(gdi.ChildItem, GridNestedViewItem)
    Dim rgAffiliateFleet As RadGrid = DirectCast(ni.FindControl("rgAffiliateFleet"), RadGrid)
    Dim rgAffiliateRates As RadGrid = DirectCast(ni.FindControl("rgAffiliateRates"), RadGrid)
    'Collapse all other rows and expand row user just clicked
    For Each gdi2 As GridDataItem In rgServiceAreaAffiliates.Items
        If (gdi2.ItemIndex <> gdi.ItemIndex) Then
            gdi2.Expanded = False
        End If
    Next
    gdi.Expanded = Not gdi.Expanded
    rgAffiliateFleet.DataSourceID = "odsGetAffiliateFleet"
    rgAffiliateRates.DataSourceID = "odsGetAffiliateRates"
    rgAffiliateFleet.DataBind()
    rgAffiliateRates.DataBind()
  21. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 02 Mar 2011 Link to this post

    Hello,

    You are actually right and there is a bug. It happens only in IE and not in other browsers.

    The browser is making two post-backs instead of one.
    First make a post-back for the inner grid and ItemCommand for the inner grid is fired. And in the same time it makes another post-back and fires ItemCommand for the main grid. After that IE is loading the data from the second post-back in which the label's text is not changed.

    We will do our best to fix this in the next release. If you need it badly you can use simple workaround. Disable EnablePostBackOnRowClick for the main grid. And handle client selection. On client selection you can perform post-back on which to select the given row in server side.

    Greetings,
    Vasil
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  22. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 03 Mar 2011 Link to this post

    Vasil,

    If you could also alert the developers that the CLIENT-SIDE event defined for ClientEvents-OnRowClick fires for the parent grid, too, when the nested grid is clicked?  That is causing just as much of a problem as the ItemCommand event firing due to the postback.

    Thanks.

    Jerry
  23. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 07 Mar 2011 Link to this post

    Hello Jerry,

    Thank you for your feedback. Our developers are already notified for this.

    All the best,
    Vasil
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  24. Evgeny Grigoryev
    Evgeny Grigoryev avatar
    10 posts
    Member since:
    Apr 2010

    Posted 04 Apr 2011 Link to this post

    Any workaround!? How to add new record to the inner-grid?
  25. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 04 Apr 2011 Link to this post

    Hello Evgeny,

    When you click on insert for the inner grid, InsertCommand is fired only for the inner grid and yes, the ItemCommand is called for both grids. However this should not be a problem because the e.Item argument holds the proper insert item. But you can handle InsertCommand for the inner grid and make your database inserts in there.  I am attaching a sample project that demonstrates that. Please also check this online demo.
    Another approach is in the ItemCommand event handler to check to which grid does the item fired the command belong.

    All the best,
    Vasil
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  26. Evgeny Grigoryev
    Evgeny Grigoryev avatar
    10 posts
    Member since:
    Apr 2010

    Posted 04 Apr 2011 Link to this post

    Hello Vasil,

    Thank you so much for your quick response to my question.

    Best regards,
    Evgeny.
  27. Srujana
    Srujana avatar
    38 posts
    Member since:
    Jan 2011

    Posted 13 Jul 2011 Link to this post

    Hello Telerik team,

    was this issue addressed in any of the latest releases, I am having the same issue, I don't need to trigger anything when I the nested grid is triggered, on Master grid, when I click on Row it should do the same as Expand and collapse, this works fine, but the same event(itemcommand) gets fired when the rows clicked on nested grid, which is wierd, please let me know if there is a work around or fix. I am using version 2011.1.315.40.

    Thanks,
    SC.
  28. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 14 Jul 2011 Link to this post

    Hello Srujana,

    Here is a sample workaround.

    You could check if the element that is clicked is for the inner grid. And if it is not, then fireCommand for the "RowClick". This will prevent the RowClick to be fired for the nested grid. Also make sure that you have set EnablePostBackOnRowClick="false" (the default value) in the client settings of the grids.

    Aspx:
    <script type="text/javascript">
      function RowClicked(sender, args)
      {
        if ((args.get_id()).indexOf("InnerRadGrid") == -1)
        {
          sender.get_masterTableView().fireCommand("RowClick", args.get_itemIndexHierarchical());
        }
      }
    </script>
    <div>
      <telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"
        OnItemCreated="RadGrid1_ItemCreated" OnItemCommand="RadGrid1_ItemCommand">
        <MasterTableView>
          <NestedViewTemplate>
            InnerGrid:
            <telerik:RadGrid ID="InnerRadGrid" runat="server">
              <MasterTableView CommandItemDisplay="Top">
                <Columns>
                  <telerik:GridTemplateColumn UniqueName="Column1">
                    <ItemTemplate>
                      Some text
                    </ItemTemplate>
                  </telerik:GridTemplateColumn>
                </Columns>
              </MasterTableView>
            </telerik:RadGrid>
          </NestedViewTemplate>
        </MasterTableView>
        <ClientSettings>
          <ClientEvents OnRowClick="RowClicked" />
        </ClientSettings>
      </telerik:RadGrid>
    </div>

    C# code for expand/collapse the row:
    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
    {
        if (e.CommandName == "RowClick")
        {
            GridDataItem item = RadGrid1.MasterTableView.Items[e.CommandArgument as string];
            item.Expanded = !item.Expanded;
     
        }
    }

    C# code for binding the sample grid:
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        RadGrid1.DataSource = new string[] { "a", "b", "c" };
    }
     
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridNestedViewItem)
        {
            GridNestedViewItem view = e.Item as GridNestedViewItem;
     
            var innerGrid = view.FindControl("InnerRadGrid");
     
            if (innerGrid != null)
            {
                (innerGrid as RadGrid).DataSource = new string[] { "1", "2", "3" };
            }
     
        }
    }


    Best wishes,
    Vasil
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  29. Srujana
    Srujana avatar
    38 posts
    Member since:
    Jan 2011

    Posted 28 Jul 2011 Link to this post

    Thanks for your response Vasil.

    I tried you solution, it seems to return correct commandargument from javascript function, but on the serverside event, it is not working as it supposed to,  I used adnaced binding(needdatasoure) on both parent and nestedview grids. I am checking for e.CommandArgument as string != "" before executing logic for rowclick expand/collapse to see if the row from parent table is clicked, it seems to be working fine, its just that the grid is not expanding/collapsing on rowclick. Same logic seems to work when
    e.commandName is "ExpandCollapse". 

    here is the code snippet from Itemcommand event.

    protected void RadGridStops_ItemCommand(object source, GridCommandEventArgs e) //parent grid
      
    if (e.CommandName == "RowClick" && e.CommandArgument as string != "")
                {
      
                    GridDataItem item = RadGridStops.MasterTableView.Items[e.CommandArgument as string];
                    if (!item.Expanded)
                    {
                        RadGrid rg = item.ChildItem.FindControl("RadGridSlots") as RadGrid; //grid from nestedview
                        RadGridStops.MasterTableView.Items[e.CommandArgument as string].Expanded = true;
                        rg.Rebind();
                         
                //to expand only one row at a time, collpase all other rows that were previously expanded
                        foreach (GridItem item1 in e.Item.OwnerTableView.Items)
                        {
                              
                            if (item1.Expanded && item1 != item)
                            {
      
                                item1.Expanded = false;
      
                                  
      
                            }
                            else if (item1 == item)
                                item1.Expanded = true;
        
                        }
                    }
                    else
                    {
      
                        item.Expanded = !item.Expanded;
                       // RadGridStops.Rebind();    -- I tried to rebind the grid as well, didn't make any difference
      
                    }
                }
                
      
            }
    }
    Please let me know if you see anything missing.

    Thanks in advance,
    SC.
  30. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 29 Jul 2011 Link to this post

    Hi,

    Here is solution that works for expand/collapse for both RowClick and click on the expand column.

    Aspx:
    <script type="text/javascript">
    function RowClicked(sender, args)
    {
      if ((args.get_id()).indexOf("InnerRadGrid") == -1)
      {
        sender.get_masterTableView().fireCommand("RowClick", args.get_itemIndexHierarchical());
      }
    }
    </script>
    <telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource"
      OnItemCommand="RadGrid1_ItemCommand">
      <MasterTableView>
        <NestedViewTemplate>
          InnerGrid:
          <telerik:RadGrid ID="InnerRadGrid" runat="server" OnNeedDataSource="InnerRadGrid_NeedDataSource">
          </telerik:RadGrid>
        </NestedViewTemplate>
      </MasterTableView>
      <ClientSettings>
        <ClientEvents OnRowClick="RowClicked" />
      </ClientSettings>
    </telerik:RadGrid>

    C#:
    protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
    {
        GridDataItem item = null;
        bool expanding = false;
     
        if (e.CommandName == "ExpandCollapse")
        {
            //the item will be expanded automatically
            item = e.Item as GridDataItem;
            expanding = !item.Expanded;
        }
        else if (e.CommandName == "RowClick")
        {
            item = RadGrid1.MasterTableView.Items[e.CommandArgument as string];
            expanding = !item.Expanded;
            //expand it manually
            item.Expanded = !item.Expanded;
        }
     
        if (item != null && expanding)
        {
            RadGrid innerGrid = item.ChildItem.FindControl("InnerRadGrid") as RadGrid;
            innerGrid.Rebind();
            foreach (GridItem item1 in item.OwnerTableView.Items)
            {
                if (item1.Expanded && item1 != item)
                {
                    //collapse all other items.
                    item1.Expanded = false;
                }
            }
        }
    }
     
     
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        RadGrid1.DataSource = new string[] { "a", "b", "c" };
    }
     
    protected void InnerRadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
     
        (sender as RadGrid).DataSource = new string[] { "1", "2", "3" };
    }

    Kind regards,
    Vasil
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  31. Srujana
    Srujana avatar
    38 posts
    Member since:
    Jan 2011

    Posted 29 Jul 2011 Link to this post

    Hello, Thank you very much for the quick response.  While debugging the code, I do see that the code is doing what it is supposed to do.

    ExpandCollapse works just fine, but when it comes to RowClick, it is hitting the right lines of code, but the final effect is not shown on the screen(expand and collapse doesn't happen and nothing happens visually). I just put alert in the javascript code to see whats going on, after clicking ok on alert expand/collapse works fine.

    I really don't see why it does that, I can't have alert statement for sure.  I do have an ajax setting for RadGridStop which seems to update the grid properly, just wondering what else could be missing.

    any input on this is greately appreciated.

     

     

    <telerik:AjaxSetting AjaxControlID="RadGridStops">

     

     

     

    <UpdatedControls>

     

     

     

    <telerik:AjaxUpdatedControl ControlID="RadGridStops" LoadingPanelID="RadAjaxLoadingPanel1" />

     

     

     

    <telerik:AjaxUpdatedControl ControlID="RadWindowManager1" />

     

     

     

    </UpdatedControls>

     

     

     

    </telerik:AjaxSetting>

     



    function RowClicked(sender, args)
    {
      if ((args.get_id()).indexOf("InnerRadGrid") == -1)
      {
        sender.get_masterTableView().fireCommand("RowClick", args.get_itemIndexHierarchical());
         alert('Hi')
      }
    }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017