Selecting detail table rows when selecting master table row (Client side)

12 posts, 0 answers
  1. idwaikat
    idwaikat avatar
    25 posts
    Member since:
    Mar 2009

    Posted 28 Jul 2009 Link to this post

    Hello all

    I have the following issue, I searched the demos and the forum and I didn't find what I want:

    I have a grid with master table, and this grid have a detailed table which bounded on demand using DetailTableDataBind, ie when the user clicks expand button the detail table appears filled with data.

    Also I have GridClientSelectColumn for the master and the detail (all the columns are coded in ASPX page NOT AutoGenerated)

    <telerik:GridClientSelectColumn UniqueName="selColumn"
    </telerik:GridClientSelectColumn> 



    what I need is when the user clicks the Select checkbox for the master table, ALL rows in the detail table must be selected, and when the user clears (deselect) the checkbox of the master table, ALL the rows in the detail table must be cleared. Of course this must happen in client side functions or APIs (JavaScript).

    Please help me ASAP..

    Thanks in advance

    Regards..
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 Jul 2009 Link to this post

    Hello,

    Give a try with the following client side code in order to select the detail table rows on selecting the MasterTableview row.

    ASPX:
     
      . . . 
    <ClientSettings> 
        <Selecting AllowRowSelect="true" /> 
        <ClientEvents OnRowSelected="OnRowSelected" OnRowDeselected="OnRowDeselected" OnRowCreated="OnRowCreated" /> 
    </ClientSettings> 
      . . . 

    JavaScript:
     
    <script type="text/javascript"
    function OnRowSelected(sender, args) 
        var mt = sender.get_masterTableView(); 
        var item = args.get_gridDataItem(); 
        if(item.get_nestedViews()[0] != null
        { 
            item.get_nestedViews()[0].selectAllItems(); 
        } 
    function OnRowCreated(sender, args) 
     
    function OnRowDeselected(sender, args) 
         var mt = sender.get_masterTableView(); 
        var item = args.get_gridDataItem(); 
        if(item.get_nestedViews()[0] != null
        { 
            item.get_nestedViews()[0].clearSelectedItems(); 
        } 
    </script> 
    Note: get_gridDataItem() is not directly available on the client unless OnRowCreating/OnRowCreated events are hooked up.

    -Shinu.
  3. idwaikat
    idwaikat avatar
    25 posts
    Member since:
    Mar 2009

    Posted 28 Jul 2009 Link to this post

    Thanks alot Shinu, it worked like charm.

    Regards
  4. idwaikat
    idwaikat avatar
    25 posts
    Member since:
    Mar 2009

    Posted 10 Aug 2009 Link to this post

    I am trying to select the parent row when selecting the row of the detail table, (you can say the inverse of the above issue)... when selecting, I used the following snippet:

    1 function rowSelecting(sender, eventArgs) {                
    2                 var masterTable = $find("<%= grid.ClientID %>").get_masterTableView(); 
    3                 var detailTableView = eventArgs.get_tableView(); 
    4                 if (detailTableView.get_name() == "detailTableLevel2")  //Name of DetailTable 
    5                 { 
    6                     masterTable.selectItem(detailTableView.get_parentRow()); 
    7                 } 
    8                 
    9                if (detailTableView.get_name() == "detailTableLevel3")  //Name of DetailTable 
    10                 { 
    11                     detailTableView.selectItem(detailTableView.get_parentView().get_parentRow());                     
    12                 } 
    13                 
    14             } 

    A problem appeared that when combining this code with the code you mentioned above, the problem is that selecting a row in the 2nd level selects all the siblings rows for that row, and the same for the 3rd level.

    This happen because the function "OnRowSelected" is called when the function "selectItem" is called.

    Please let me know if you need more clarification

    Thanks in advance.




  5. idwaikat
    idwaikat avatar
    25 posts
    Member since:
    Mar 2009

    Posted 16 Aug 2009 Link to this post

    Any help please...
  6. idwaikat
    idwaikat avatar
    25 posts
    Member since:
    Mar 2009

    Posted 17 Aug 2009 Link to this post

    Ticket ID is : 235628

    waiting response ASAP
  7. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 27 Aug 2009 Link to this post

    Hello idwaikat,

    The ticket in question has been addressed, and a sample is attached. Please, refer to it for additional information.

    All the best,
    Yavor
    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. The Wire
    The Wire avatar
    21 posts
    Member since:
    Jan 2010

    Posted 24 May 2010 Link to this post

    I, too, am trying to select the parent row when selecting a row in the detail table without selecting all the other detail table rows. 
    Can you post the solution in this thread too or how can I view Ticket ID: 235628?

    Thanks
  9. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 25 May 2010 Link to this post

    Hi,

    Attached to this message, is a small application, handling the required functionality. I hope it gets you started properly!

    All the best,
    Yavor
    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.
  10. The Wire
    The Wire avatar
    21 posts
    Member since:
    Jan 2010

    Posted 25 May 2010 Link to this post

    Perfect, thanks a lot!
  11. The Wire
    The Wire avatar
    21 posts
    Member since:
    Jan 2010

    Posted 25 May 2010 Link to this post

    wait, I ran into one issue.  It worked as expected except I can click anywhere in the mastertable row to select that row.  All the detailtable rows in the nestedview of that mastertable row are selected as expected.  But if I click that same mastertable row again to deselect it, I get this error: Error: 'this._owner._selectedItemsInternal[...].id' is null or not an object.  The mastertable row and all detailtable rows under it are deselected after the error occurs.  How can I get rid of this error? or maybe better yet, how can I prevent a user from selecting the row by clicking anywhere in the row?  Instead the user has to click the checkbox to select it.

    Thanks

    Here is my script:
    var RadGrid;  
    function GridCreated(sender, args) {  
        RadGrid = sender;  
        var dataItems = RadGrid.get_masterTableView().get_dataItems();  
        var detailTables = RadGrid.get_detailTables();  
     
        for (var i = 0; i < RadGrid.get_detailTables().length; i++) {  
            var temp = RadGrid.get_detailTables()[0].get_dataItems();  
        }  
     
    }  
    function RowSelecting(sender, args) {  
        if (args._domEvent.type == "click") {  
            var masterTable = RadGrid.get_masterTableView();  
            var detailTableView = args.get_tableView();  
            if (detailTableView.get_name() == "Template")  //Name of MasterTable  
            {  
                args.get_gridDataItem().set_expanded(true);  
                var nestedView = args.get_gridDataItem().get_nestedViews();  
                nestedView[0].selectAllItems();  
            }  
            else if (detailTableView.get_name() == "TemplateRows")  //Name of DetailTable    
            {  
                masterTable.selectItem(detailTableView.get_parentRow());  
            }  
        }  
    }  
    function RowDeSelecting(sender, args) {  
        if (args._domEvent.type == "click") {  
            var masterTable = RadGrid.get_masterTableView();  
            var detailTableView = args.get_tableView();  
            if (detailTableView.get_name() == "Template")  //Name of MasterTable  
            {  
                args.get_gridDataItem().set_expanded(false);  
                var nestedView = args.get_gridDataItem().get_nestedViews();  
                nestedView[0].clearSelectedItems();  
            }  
        }  
  12. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 26 May 2010 Link to this post

    Hi,

    I double-tested the application in question. Clicking on a master row selected all detail rows, as expected. Clicking on this row again, however, did not produce any errors/exceptions.
    Have you altered the original code/setup in any way? If this is the case, you can open a formal support ticket, and supply a small project, reflecting the most recent code which you have, along with the exception which you mentioned. We will review it locally, and advise you further.

    All the best,
    Yavor
    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.
Back to Top