GridButtonColumn and client function

[Markus]

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

[Yavor]

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

[Markus]

Hello Yavor,

thanks for the hint, I get it work now!

Regards
Markus

[The Oracle]

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

[Sebastian]

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

[The Oracle]

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

[Sebastian]

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

[The Oracle]

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

[Sebastian]

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

[The Oracle]

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

[Sebastian]

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

[Sebastian]

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

[The Oracle]

[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

[The Oracle]

[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

[The Oracle]

[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

[The Oracle]

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

[Sebastian]

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

[The Oracle]

Thanks Stephens! :-)

Graeme