GridButtonColumn and client function

18 posts, 1 answers
  1. Markus
    Markus avatar
    196 posts
    Member since:
    Dec 2007

    Posted 26 Feb 2008 Link to this post

    I add GridButtonColumns to a grid at runtime. In the "ItemCreated" event of grid I assign client function to the buttons. Now I wonder how I can find out the clicked row when clicking on a button and how to select that row. Hope you can help.

    Thanks in advance
  2. Answer
    Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 29 Feb 2008 Link to this post

    Hello Markus,

    You can pass the item index, from the code-behind to the client side function. This will look something like this:

    button.Attributes.Add("onclick", "clientHandler('" + e.Item.ItemIndex + "');");

    Additionally, you can select an item, by using the client side api, and more precisely a function like selectItem.

    I hope this information helps.

    Sincerely yours,
    Yavor
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Markus
    Markus avatar
    196 posts
    Member since:
    Dec 2007

    Posted 29 Feb 2008 Link to this post

    Hello Yavor,

    thanks for the hint, I get it work now!

    Regards
    Markus
  5. The Oracle
    The Oracle avatar
    46 posts
    Member since:
    Aug 2012

    Posted 27 Jun 2008 Link to this post

    OK, this is kind of what I'm looking for, but what if you are "somewhere" in the hierarchy?  Then it's not the MasterTableView, but some other sub-sub-sub DetailTable.Row.  I want to highlight that row.

    I need to be able to figure out which detail table and row the user just clicked a button. 

    Thank you so much for your assistance.  You guys are incredible!

    Graeme
  6. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 30 Jun 2008 Link to this post

    Hi The Oracle,

    You can use the Name property of the corresponding GridTableView instance inside the ItemCreated event handler of the grid to determine the level of the hierarchy to which the item belongs. Review the following article from the online documentation for more details:

    http://www.telerik.com/help/aspnet-ajax/grddistinguishgridrowsinhierarchyonitemdatabound.html (the last paragraph)

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  7. The Oracle
    The Oracle avatar
    46 posts
    Member since:
    Aug 2012

    Posted 30 Jun 2008 Link to this post

    Hi, Stephen--

    My bad.  I should be more specific.  What I want to do is highlight the row the user clicked an edit link in from Javascript.

    I received this information off of a support ticket I have open, from Stephen Rahnev (are you the same Stephen?):
    http://www.telerik.com/DEMOS/ASPNET/Prometheus/Controls/Examples/Integration/GridAndWindow/DefaultCS.aspx?product=grid

    However, the javascript in the example works with a flat grid.  How do I make that approach work for a hierarchical grid?  Can I pass in dataItem.ItemIndexHierarchical to the function ShowEditForm(id, rowIndex) to find the row that contains the link and highlight it?

    Thanks,
    Graeme
  8. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 01 Jul 2008 Link to this post

    Hi The Oracle,

    Mr.Stephen Rahnev is the Technical Support Director here at Telerik. If you do not mind I will make the communication through the support ticket you opened on this subject public in this forum post. Thus other community members will be able to find it, too.

    Here is the answer you received in it:

    Concerning your question about highlighting of records in hierarchical grid:
    The 
    selectItem client method receive index argument (as well as actual GridDataItem) and if you pass the ItemIndexHierarchical
    value to that method the corresponding row in the hierarchy should become selected.

    Hence you can modify the code as follows:


            protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)    
            {    
                if (e.Item is GridDataItem)    
                {    
                    HyperLink editLink = (HyperLink)e.Item.FindControl("EditLink");    
                    editLink.Attributes["href"] = "#";    
                    editLink.Attributes["onclick"] = String.Format("return ShowEditForm('{0}','{1}');", e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["EmployeeID"], e.Item.ItemIndexHierarchical);    
                }    
            }   
     

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">    
                <script type="text/javascript">    
                function ShowEditForm(id, rowIndex)    
                {    
                    var grid = $find("<%= RadGrid1.ClientID %>");    
                        
                    grid.get_masterTableView().selectItem(rowIndex);    
                                
                    window.radopen("EditFormCS.aspx?EmployeeID=" + id, "UserListDialog");    
                    return false;     
                }    
               </script>    
    </telerik:RadCodeBlock>   
     

    Give it a spin and let me know how it goes.

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  9. The Oracle
    The Oracle avatar
    46 posts
    Member since:
    Aug 2012

    Posted 01 Jul 2008 Link to this post

    Hi, Stephen--

    I put the code he provided into place, but it doesn't highlight the row.  I responded to his solution, with the following code example:

    function HighlightActiveRow(grid, rowIndex, isHierarchical)  
    {  
        if (grid)  
        {  
            if (isHierarchical) //grid is a hierarchy with detail tables  
            {  
                grid.get_masterTableView().selectItem(rowIndex);    //function accepts ItemIndexHierarchical or Row object  
            }  
            else //grid has only one level  
            {  
                var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();   
                grid.get_masterTableView().selectItem(rowControl, true);  
            }  
        }  
    }  
     

    I can let you know what comes of this.

    Thanks,
    Graeme
  10. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 01 Jul 2008 Link to this post

    Hello The Oracle,

    I will quote once again the response you received from the support ticket:

    I do not think you need this part of the implementation:

     else //grid has only one level     
            {     
                var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();      
                grid.get_masterTableView().selectItem(rowControl, true);     
            }    
     

    since the previous code snippet should be universal (both for master and detail table row highlight). Please debug your code to check whether a valid hierarchical index is passed as argument - this should ensure that the corresponding grid item will be highlighted when having ClientSettings -> AllowRowSelect set to true.

    Kind regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  11. The Oracle
    The Oracle avatar
    46 posts
    Member since:
    Aug 2012

    Posted 01 Jul 2008 Link to this post

    My turn, Stephen!  My response to the Support Ticket:

    Dear Stephen,

    Yes, I noticed that, and both versions work for flat grids.  However, I'm making changes to all code, once I have a line that works.

    I am indeed passing in the ItemIndexHierarchical (e.g., "1:0_11"), but the row does not highlight.

    What other extraneous objects could be foiling the grid's attempt to highlight the row?

    Thanks again,
    Graeme
  12. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 02 Jul 2008 Link to this post

    Hi The Oracle,

    It seems that it is my turn now :)

    Unfortunately I am not sure where the exact source of the issue can be in this case since you said that the code is executed successfully and works for a flat grid. Generally, if the index passed as argument does not correspond to item of type GridDataItem, the next GridDataItem (immediately below the item with argument index) will be selected.

    At this point I suggest you isolate a small working version of your project and send it enclosed to this support ticket. I will test/debug it locally and will get back to you with my findings.

    Thank you in advance for your cooperation.

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  13. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 04 Jul 2008 Link to this post

    Hi The Oracle,

    Here is another portion of information taken from your support ticket:

    Your logic was a bit mixed-up and I modified part of your client/server code logic in order to attain the functionality you are searching for. The updated version of the example is enclosed to this support ticket for further reference.

    I am attaching the new version of the example to this forum post as thus other community members can take a look at it, too - let me know whether this is OK with you.

    Best regards,

    Stephen
    the Telerik team


    Instantly find answers to your questions at the new Telerik Support Center
  14. The Oracle
    The Oracle avatar
    46 posts
    Member since:
    Aug 2012

    Posted 08 Jul 2008 Link to this post

    [From the Support Ticket]

    Dear Stephen,

    Oops!  That was a typo for sure.  I was concentrating on simplifying--sorry to waste time.  Thank you for your efforts in my behalf. 

    Just to confirm, however: If I know in advance that I am at level 0, I can send the ItemIndex.  However, based on your javascript mods, if I simply send the ItemIndexHierarchical, I can use the "_" search to differentiate that I am beyond level 0, right?

    Why can't I simply send in the ItemIndexHierarchical and have the all-knowing grid ;-) figure it out?

    Graeme
  15. The Oracle
    The Oracle avatar
    46 posts
    Member since:
    Aug 2012

    Posted 08 Jul 2008 Link to this post

    [From the Support Ticket]

    Hello Graeme,

    I am glad that my directions were helpful. Your assumption about the underscore check in the javascript code is correct. We will consider exposing a global selectItem client method (intercepting itemHierarchicalIndex) for the grid object which will expose the functionality you depicted.

    If this appears to be a possible enhancement, you may see it included in a future version of the product.
       
    Best,
    Stephen Rahnev,
    Technical Support Director, Telerik
  16. The Oracle
    The Oracle avatar
    46 posts
    Member since:
    Aug 2012

    Posted 08 Jul 2008 Link to this post

    [From the Support Ticket]

    Dear Stephen,

    I made a modification to the Master page Javascript to accommodate deeper hierarchies.  I have a number of grids like this in my 'real' project.

    It works, but I am depending on an internal property that may disappear:
     
    grid.get_detailTables()[i].get_dataItems()[0]._itemIndexHierarchical;  
     

    Can you shed some light on this?  Or, is there a more efficient way?

    ...

    Thanks VERY much for your help.

    Graeme
  17. The Oracle
    The Oracle avatar
    46 posts
    Member since:
    Aug 2012

    Posted 08 Jul 2008 Link to this post

    To all--

    This is my resulting script, to highlight grid rows in hierarchies of arbitrary depth (GridTableView.HierarchyLoadMode="ServerOnDemand"):

    1 function HighlightActiveRow(grid, rowIndex)  
    2 {  
    3     if (grid)  
    4     {  
    5         //clear any selected rows  
    6         clearSelected(grid);   
    7           
    8         if (rowIndex.indexOf("_") > -1) //grid is a hierarchy with detail tables  
    9         {  
    10 //                          debugger;  
    11               
    12             //find the correct DetailTable  
    13             var index = getDetailIndex(grid, rowIndex);  
    14             var detailTable = grid.get_detailTables()[index];  
    15               
    16             //select current row  
    17             detailTable.selectItem(rowIndex);    //function accepts ItemIndexHierarchical or Row object  
    18         }  
    19         else //grid has only one level, or we are at level 0 of a hierarchy  
    20         {  
    21             var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();   
    22             grid.get_masterTableView().selectItem(rowControl, true);  
    23         }  
    24     }  
    25 }  
    26  
    27 function clearSelected(grid)  
    28 {  
    29     var details = grid.get_detailTables();  
    30     for (var i = 0; i < details.length; i++)  
    31     {  
    32         var detailTable = details[i];  
    33         //clear current selection(s)  
    34         detailTable.clearSelectedItems();      
    35     }  
    36 }  
    37  
    38 function getDetailIndex(grid, rowIndex)  
    39 {  
    40     var useDetailIndex = -1;  
    41     var details = grid.get_detailTables();  
    42     var maxIndex = details.length - 1; //The number of DetailTables listed under the grid.  
    43     var isFound = false;  
    44  
    45     //prepare var for compare  
    46     var arr = new Array();  
    47     arr = rowIndex.split(':');  
    48  
    49     for (var i = 0; i < details.length; i++)  
    50     {  
    51         var detailTable = details[i];  
    52         var viewName = detailTable.get_name();  //the OwnerTableView.Name  
    53         var items = detailTable.get_dataItems();  
    54         var numRecs = items.length;  //the # recs at this level  
    55         if (numRecs > 0)  
    56         {  
    57             var currIndex = items[0]._itemIndexHierarchical;  
    58             var currIndexHierArray = currIndex.split(':');  
    59             if (currIndexHierArray.length == arr.length)    //same depth  
    60             {  
    61                 var maxj = arr.length - 2; //don't look at the last segment  
    62                 for (var j = maxj; j >= 0; j--)  
    63                 {  
    64                     if (currIndexHierArray[j] != arr[j])  
    65                     {  
    66                         //it's not this one  
    67                         break;  
    68                     }  
    69                       
    70                     //if so, return the correct DetailTable  
    71                     if (j == 0)  
    72                     {  
    73                         isFound = true;  
    74                         break;  
    75                     }  
    76                 }  
    77                 if (isFound)  
    78                 {  
    79                     useDetailIndex = i; //index from the last time  
    80                     break;  
    81                 }  
    82             }  
    83         }  
    84     }  
    85     if (!isFound)  
    86     {  
    87         useDetailIndex = maxIndex;  //use the latest detail table?  
    88     }  
    89       
    90     return useDetailIndex;  
    91       
    92 }  
    93  

    I've asked Stephen for a more efficient way, if it exists.

    Graeme
  18. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 09 Jul 2008 Link to this post

    Hi The Oracle,

    I am pasting the last reply from the support ticket here:

    This is an internal property which will be surely kept for the next versions of the control. The other solution is to get the hierarchical index of the item from the eventArgs argument passed in the grid row client handlers (see the implementation from this code library thread) which, however, is not applicable for your particular case.

    Best regards,
    Stephen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  19. The Oracle
    The Oracle avatar
    46 posts
    Member since:
    Aug 2012

    Posted 09 Jul 2008 Link to this post

    Thanks Stephens! :-)

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