RowContextMenu GridTemplateColumn cellIndex

[Robert]

I have a RadGrid and am using the OnRowContextMenu="RowContextMenu".  I am trying to get the cellindex.  It works perfect for
GridBoundColumn but it comes back undefined for all the GridTemplateColumn. 

function RowContextMenu(sender, eventArgs) {

 var menu = $find("<%=RadMenu1.ClientID %>");
 var evt = eventArgs.get_domEvent();

 if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
  return;
 }

 
 var index = eventArgs.get_itemIndexHierarchical();
 document.getElementById("radGridClickedRowIndex").value = index;

 var value = eventArgs.get_domEvent().target.innerHTML;
 document.getElementById("radGridClickedCellValue").value = value;

 var masterTable = sender.get_masterTableView();
 var cIndex = eventArgs.get_domEvent().target.cellIndex;
 var colName = masterTable.getColumnUniqueNameByCellIndex(getHeaderRow(sender), cIndex)
 document.getElementById("radGridClickedColName").value = colName;

 sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);

 menu.show(evt);

 evt.cancelBubble = true;
 evt.returnValue = false;

 if (evt.stopPropagation) {
  evt.stopPropagation();
  evt.preventDefault();
 }

}

function getHeaderRow(sender) {
 var masterTable = sender.get_masterTableView();
        masterTable.HeaderRow == null ? sender.get_masterTableViewHeader().get_element() : masterTable.HeaderRow;
}

Any help is appreciated.  Thanks

 

[Yavor]

Hello Robert,

Basically, there is no straightforward potion to determine the cellindex here. One possible option is to use for all cells an approach similar to this one:

http://www.telerik.com/help/aspnet-ajax/grdselectingcells.html

I hope this gets you started properly.

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.

[David Simmonds]

I have the same problem and the solution proposed does not provide any help. In my case I have this.

                <telerik:GridTemplateColumn DataField="RequestedCompanyName"
                    DefaultInsertValue="" SortExpression="RequestedCompanyName"
                    HeaderText="Member Requested"
                    UniqueName="RequestedCompanyName">
                    <ItemTemplate>
                        <asp:Panel ID="PanelLink" runat="server">
                            <asp:LinkButton ID="LinkButton1" runat="server" CommandName="RequestedCompanyName"><%# DataBinder.Eval(Container.DataItem, "RequestedCompanyName") %></asp:LinkButton>
                        </asp:Panel>
                        <asp:Panel ID="PanelLabel" runat="server" Visible="false">
                            <%# DataBinder.Eval(Container.DataItem, "RequestedCompanyName") %>
                        </asp:Panel>
                    </ItemTemplate>
                </telerik:GridTemplateColumn>

In the ItemDataBound event handler, I either hide PanelLink or PanelLabel depending on the value of another cell in the row. When I right-click the cell I need to present a context menu. I have this javascript code.

        function RowContextMenu1(sender, eventArgs) {
            var menu1 = $find("<%= RadContextMenu1.ClientID %>");
            var menu2 = $find("<%= RadContextMenu2.ClientID %>");

            var domEvent = eventArgs.get_domEvent();
            var source = domEvent.target || domEvent.srcElement;
            var index = eventArgs.get_itemIndexHierarchical();
            var masterTable = sender.get_masterTableView();

            // clear all of the selections
            masterTable.clearSelectedItems();

            var cellIndex;

            //select the current row
            masterTable.selectItem(masterTable.get_dataItems()[index].get_element());

            cellIndex = domEvent.target.cellIndex;
            if (cellIndex == null) {
                $telerik.cancelRawEvent(domEvent);
                return false;
            }

            var column = masterTable.get_columns()[cellIndex];
            var uniqueName = column.get_uniqueName();

            var DataItem = masterTable.get_dataItems()[index];
            var cell = DataItem.get_cell("RequestedCompanyID");
            var nRequestedCompanyID = cell.outerText;

            if (uniqueName == "CompanyName") {
                menu1.show(domEvent);
            }
            else if (uniqueName == "RequestedCompanyName") {
                if (nRequestedCompanyID == "0") {
                    var item = menu2.findItemByValue("GIP");
                    item.disable();
                }
                menu2.show(domEvent);
            }
            else {
                menu1.hide();
                menu2.hide();
                eventArgs.set_cancel(true);
                $telerik.cancelRawEvent(domEvent);
                return false;
            }
            $telerik.cancelRawEvent(domEvent);
        }

The problem is that cellIndex is undefined. I need to obtain the uniquename of the column to figure out which context menu to display. How can I get that without the cellindex?

[David Simmonds]

Here is the solution that I found. I think it is pretty lame but it does work. If a better way is to be suggested, please someone suggest it. The lame part is the looping through all of the columns and checking the value of the uniqueName of the column.

        function RowContextMenu1(sender, eventArgs) {
            var menu1 = $find("<%= RadContextMenu1.ClientID %>");
            var menu2 = $find("<%= RadContextMenu2.ClientID %>");

            var domEvent = eventArgs.get_domEvent();
            var source = domEvent.target || domEvent.srcElement;
            var index = eventArgs.get_itemIndexHierarchical();
            var masterTable = sender.get_masterTableView();

            // clear all of the selections
            masterTable.clearSelectedItems();

            var cellIndex = domEvent.target.cellIndex;

            //select the current row
            masterTable.selectItem(masterTable.get_dataItems()[index].get_element());
            if (domEvent.target.id.indexOf("LinkButton1") > 0 ||
                domEvent.target.id.indexOf("PanelLabel") > 0) {
                var columns = masterTable.get_columns();
                for (cellIndex = 0;
                     cellIndex != columns.length && columns[cellIndex].get_uniqueName() != "RequestedCompanyName";
                     cellIndex++);
            }
            if (cellIndex == null) {
                $telerik.cancelRawEvent(domEvent);
                return false;
            }

            var column = masterTable.get_columns()[cellIndex];
            var uniqueName = column.get_uniqueName();

            var DataItem = masterTable.get_dataItems()[index];
            var cell = DataItem.get_cell("RequestedCompanyID");
            var nRequestedCompanyID = cell.outerText;

            if (uniqueName == "CompanyName") {
                menu1.show(domEvent);
            }
            else if (uniqueName == "RequestedCompanyName") {
                var item = menu2.findItemByValue("GIP");
                if (nRequestedCompanyID == "0")
                    item.disable();
                else
                    item.enable();
                menu2.show(domEvent);
            }
            else {
                menu1.hide();
                menu2.hide();
                eventArgs.set_cancel(true);
                $telerik.cancelRawEvent(domEvent);
                return false;
            }
            $telerik.cancelRawEvent(domEvent);
        }