This is a migrated thread and some comments may be shown as answers.

GridButtonColumn and client function

17 Answers 577 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Markus
Top achievements
Rank 1
Markus asked on 26 Feb 2008, 03:22 PM
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

17 Answers, 1 is accepted

Sort by
0
Accepted
Yavor
Telerik team
answered on 29 Feb 2008, 07:13 AM
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
0
Markus
Top achievements
Rank 1
answered on 29 Feb 2008, 10:14 AM
Hello Yavor,

thanks for the hint, I get it work now!

Regards
Markus
0
The Oracle
Top achievements
Rank 1
answered on 27 Jun 2008, 06:02 PM
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
0
Sebastian
Telerik team
answered on 30 Jun 2008, 06:38 AM
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
0
The Oracle
Top achievements
Rank 1
answered on 30 Jun 2008, 06:44 PM
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
0
Sebastian
Telerik team
answered on 01 Jul 2008, 07:22 AM
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
0
The Oracle
Top achievements
Rank 1
answered on 01 Jul 2008, 02:30 PM
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
0
Sebastian
Telerik team
answered on 01 Jul 2008, 03:42 PM
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
0
The Oracle
Top achievements
Rank 1
answered on 01 Jul 2008, 04:16 PM
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
0
Sebastian
Telerik team
answered on 02 Jul 2008, 07:54 AM
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
0
Sebastian
Telerik team
answered on 04 Jul 2008, 07:12 AM
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
0
The Oracle
Top achievements
Rank 1
answered on 08 Jul 2008, 07:21 PM
[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
0
The Oracle
Top achievements
Rank 1
answered on 08 Jul 2008, 07:22 PM
[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
0
The Oracle
Top achievements
Rank 1
answered on 08 Jul 2008, 07:23 PM
[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
0
The Oracle
Top achievements
Rank 1
answered on 08 Jul 2008, 07:27 PM
To all--

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

function HighlightActiveRow(grid, rowIndex)  
{  
    if (grid)  
    {  
        //clear any selected rows  
        clearSelected(grid);   
          
        if (rowIndex.indexOf("_") > -1) //grid is a hierarchy with detail tables  
        {  
//                          debugger;  
              
            //find the correct DetailTable  
            var index = getDetailIndex(grid, rowIndex);  
            var detailTable = grid.get_detailTables()[index];  
              
            //select current row  
            detailTable.selectItem(rowIndex);    //function accepts ItemIndexHierarchical or Row object  
        }  
        else //grid has only one level, or we are at level 0 of a hierarchy  
        {  
            var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();   
            grid.get_masterTableView().selectItem(rowControl, true);  
        }  
    }  
}  
 
function clearSelected(grid)  
{  
    var details = grid.get_detailTables();  
    for (var i = 0; i < details.length; i++)  
    {  
        var detailTable = details[i];  
        //clear current selection(s)  
        detailTable.clearSelectedItems();      
    }  
}  
 
function getDetailIndex(grid, rowIndex)  
{  
    var useDetailIndex = -1;  
    var details = grid.get_detailTables();  
    var maxIndex = details.length - 1; //The number of DetailTables listed under the grid.  
    var isFound = false;  
 
    //prepare var for compare  
    var arr = new Array();  
    arr = rowIndex.split(':');  
 
    for (var i = 0; i < details.length; i++)  
    {  
        var detailTable = details[i];  
        var viewName = detailTable.get_name();  //the OwnerTableView.Name  
        var items = detailTable.get_dataItems();  
        var numRecs = items.length;  //the # recs at this level  
        if (numRecs > 0)  
        {  
            var currIndex = items[0]._itemIndexHierarchical;  
            var currIndexHierArray = currIndex.split(':');  
            if (currIndexHierArray.length == arr.length)    //same depth  
            {  
                var maxj = arr.length - 2; //don't look at the last segment  
                for (var j = maxj; j >= 0; j--)  
                {  
                    if (currIndexHierArray[j] != arr[j])  
                    {  
                        //it's not this one  
                        break;  
                    }  
                      
                    //if so, return the correct DetailTable  
                    if (j == 0)  
                    {  
                        isFound = true;  
                        break;  
                    }  
                }  
                if (isFound)  
                {  
                    useDetailIndex = i; //index from the last time  
                    break;  
                }  
            }  
        }  
    }  
    if (!isFound)  
    {  
        useDetailIndex = maxIndex;  //use the latest detail table?  
    }  
      
    return useDetailIndex;  
      
}  
 

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

Graeme
0
Sebastian
Telerik team
answered on 09 Jul 2008, 08:19 AM
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
0
The Oracle
Top achievements
Rank 1
answered on 09 Jul 2008, 01:23 PM
Thanks Stephens! :-)

Graeme
Tags
Grid
Asked by
Markus
Top achievements
Rank 1
Answers by
Yavor
Telerik team
Markus
Top achievements
Rank 1
The Oracle
Top achievements
Rank 1
Sebastian
Telerik team
Share this question
or