RadContextMenu with a RadGridView

[Yogesh]

Hi,

I am using RadGrid to display records, RadContextMenu is associated with it, the application is developed in ASP.NET.
Which event shouid i use to get the griddataitem object or how can i get the rowindex/coulumn name or cell which is clicked.

I tried using the GetClickedElement but it does not support asp.net i guess. Please help.

Thanks in advance.

[Shinu]

Hi,

I guess you want the row index on RadContextMenu click.Please try the following code snippet.

C#:

protected void RadContextMenu1_ItemClick(object sender, RadMenuEventArgs e)
{
        RadContextMenu rmenu = (RadContextMenu)sender;
        GridDataItem ditem = (GridDataItem)rmenu.NamingContainer;
        int  RowIndex=ditem.ItemIndex;
}

Thanks,
Shinu.

[Yogesh]

Hi Shinu,

Thanks for the quick reply. But i am getting following error.

"Unable to cast object of type 'System.Web.UI.WebControls.ContentPlaceHolder' to type 'Telerik.Web.UI.GridDataItem'."

Note: 'rmenu' is Radcontextmenu id.

Thanks,
- Yogesh

[Shinu]

Hi,

Unfortunately i couldn't replicate the issue. Can you please provide your code.

Thanks,
Shinu.

[Yogesh]

Hi Shinu,

I am trying to get a column index actually along with the row index. I have written a javascript which gives me a row index. The assignment is to find out the exact cell which is clicked so i am trying to get column index as well so i can locate a cell.

Please have a look at the row index script.

function RowContextMenu(sender, eventArgs) {
            alert("Context menu on row: " + eventArgs.get_itemIndexHierarchical());
            }

and i am calling the function on ClientSettings ClientEvents

<ClientEvents OnRowContextMenu="RowContextMenu"/>

Please help, how can i get the column index.

Thanks,
- Yogesh

[Shinu]

Hello Yogesh,

Please try the following javascript code to get the column index.

ASPX:

<MasterTableView CommandItemDisplay="Top" DataKeyNames="EmployeeID">
              <Columns>
                  <telerik:GridBoundColumn DataField="EmployeeID" UniqueName="EmployeeID" HeaderText="EmployeeID">
                  </telerik:GridBoundColumn>
                  <telerik:GridBoundColumn DataField="FirstName" UniqueName="FirstName" HeaderText="FirstName">
                  </telerik:GridBoundColumn>
                  <telerik:GridBoundColumn DataField="LastName" UniqueName="LastName" HeaderText="LastName">
                  </telerik:GridBoundColumn>
              </Columns>
          </MasterTableView>
          <ClientSettings>
              <ClientEvents OnRowContextMenu="RowContextMenu" />
          </ClientSettings>

Java Script:-

<script type="text/javascript">
    function RowContextMenu(sender, eventArgs) {
        var masterTable = sender.get_masterTableView();
        var cIndex = eventArgs.get_domEvent().target.cellIndex;
        alert("Cell index " + cIndex);
    }
</script>

Thanks,
Shinu.

[Yogesh]

Hello Shinu,

Thanks a ton. I have written following javascript which gives me the rowindex as well as column index. Problem i am facing is if some of the columns are hidden the column index i got can not relate with the original dataset.

Is there way i can modify the below scipt or add some more lines to get the columnname/UniqueName?

Javascript:

function RowContextMenu(sender, eventArgs) {
            var masterTable = sender.get_masterTableView();
            var cIndex = eventArgs.get_domEvent().target.cellIndex;
            var rowIndex = eventArgs.get_itemIndexHierarchical();
            var columnIndex = cIndex;
}

Thanks,
- Yogesh

[Shinu]

Hello Yogesh,

You can set the Display property of the boundcolumn as false and access it using the following javascript.
ASPX:

<telerik:GridBoundColumn UniqueName="EmployeeID" Display="false" DataField="EmployeeID" HeaderText="EmployeeID"></telerik:GridBoundColumn>

JS:

function RowContextMenu(sender, eventArgs)
{
 var masterTable = sender.get_masterTableView();
 var row = masterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
 var cIndex = eventArgs.get_domEvent().target.cellIndex;
 alert("Cell index " + cIndex);
 alert(masterTable.getCellByColumnUniqueName(row, "EmployeeID").innerHTML);
}

Thanks,
Shinu.

[Yogesh]

Thanks a lot Shinu. Problem solved. :-)

[Nishant]

Hi,

I'm trying to Dynamically generate the RadContextMenu based on the contents of the Cell in RadGrid on which the user clicks. The menu items are stored in the SQL Sever database. Below is my client side code :

function RowContextMenu(sender, eventArgs) {

                var evt = eventArgs.get_domEvent();

  

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

                    return;

                }

  

                var index = eventArgs.get_itemIndexHierarchical();

                var row = sender.get_masterTableView().get_dataItems()[index];

  

                var current_status = sender.get_masterTableView().getCellByColumnUniqueName(row, "Current_Status").innerHTML;

                var process_status = sender.get_masterTableView().getCellByColumnUniqueName(row, sender.get_masterTableView().get_columns()[evt.target.cellIndex].get_uniqueName()).innerHTML;


                var process_area = //write code to get the column header of the selected cell
  

                document.getElementById("radGridClickedRowIndex").value = index;

                sender.get_masterTableView().selectItem(row.get_element(), true);

  

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

                menu.show(evt);

  

                evt.cancelBubble = true;

                evt.returnValue = false;

  

                if (evt.stopPropagation) {

                    evt.stopPropagation();

                    evt.preventDefault();

                }

            }

Now i want to pass the values current_Status, process_status and process_area to SQL server and get the list of actions to populate in the context menu.

Below are some snippets of the ASPX code:

<asp:SqlDataSource ID="ActionsDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:MetadataCS %>"
    ProviderName="<%$ ConnectionStrings:MetadataCS.ProviderName %>" SelectCommand="SELECT [Action] FROM [FileStatusActions] WHERE (([Process_Area] = @Process_Area) AND ([Current_Status] = @Current_Status) AND ([Process_Status] = @Process_Status))">
    <SelectParameters>
        <asp:Parameter Name="Process_Area" Type="String" />
        <asp:Parameter Name="Current_Status" Type="String" />
        <asp:Parameter Name="Process_Status" Type="String" />
    </SelectParameters>
</asp:SqlDataSource>
<telerik:RadContextMenu ID="RadMenu1" runat="server" OnItemClick="RadMenu1_ItemClick" OnClientShowing="showContextMenu"
    DataSourceID="ActionsDataSource" DataTextField="Action" DataValueField="Action" AppendDataBoundItems="true"
    EnableRoundedCorners="true" EnableShadows="true">
    <Items>
        <telerik:RadMenuItem Text="Dynamic Menu" />
    </Items>
</telerik:RadContextMenu>

Please help me achieve the desired functionality using either client side/server side code ? I am also willing to use XML files to load menu instead of database if feasible/possible.

Thanks,
Nishant

[Eyup]

Hello Nishant,

For generating the menu items dynamically on client-side please refer to the following demo:
 Menu / Add/Remove/Disable Items

You could use a Web Service to get the new menu items as demonstrated in the demo below:
 Menu / Web Service

You could also declare the menu items from an XML source:
 Menu / XML Definition

Actually, it is little difficult to determine your exact desired scenario from the provided information so far. Could you please elaborate some more on your specific case? If applicable, please send us some screenshots demonstrating what the menu should look like. It would be best if you could open a support ticket and provide us a runnable sample of your project. That way, we will get familiar with your exact databinding preferences and provide a more-to-point approach for implementing the requested feature.

All the best,
Eyup
the Telerik team

[Nishant]

Hi Eyup,

Thanks for your response and the links you have provided. This gives me the idea to load the context menu items from an XML file instead of SQL Server Database. which can be done completely on client side. I'll use the RadMenu1.LoadXML method with an XML expression filtered using an XPath expression. if you can provide me a link to such a sample, it would be great.

Thanks,
Nishant

[Eyup]

Hello Nishant,

I am afraid loading xml on client-side is not a supported scenario. Below you can find the data bindings that we currently support:
 Loading items from XML

However, we will appreciate if you have a more appropriate implementation and share it with us.

All the best,
Eyup
the Telerik team

[Yogesh]

Dear Team,

I have an assignment to check the rad grid cell and if the cell has expected value then assign a context menu to the cell. Can anyone help me with the following:

1) attach the context menu on required cells only
2) Create separate context menu object for every cell which qualify the value.

I have written a below code, but its not working.

C#:

RadContextMenu oRadContextMenu = (RadContextMenu)RadContextMenu;
                    ContextMenuControlTarget oMenuTarget = new ContextMenuControlTarget();

GridTableCell gtcPreviousCell = (GridTableCell)e.Item.Cells[(e.Item.Cells.GetCellIndex(radCell)) - 1];
                            if (sColumnName == gtcPreviousCell.Column.UniqueName.ToString())
                            {
                                gtcPreviousCell.ID = sCellValue;
                                oMenuTarget.ControlID = gtcPreviousCell.ID;
                                oRadContextMenu.Targets.Add(oMenuTarget);
                            }

Thanks and Regards,
- Yogesh

[Eyup]

Hello Yogesh,

You could achieve your described scenario by canceling the menu display if the cell's content does not meets the defined requirements. I have created a sample RadGrid web site where I implemented the described approach. The context menu is only being displayed for the Freight column with value greater than 50 and is being populated with new items depending on the clicked cell.

Please check out the attached application and try to make best avail out of it according to your specific scenario.

In addition, you could give a look at the following demo which demonstrates creating and adding menu items on client-side:
 Menu / Add/Remove/Disable Items

I hope this will prove helpful.

Regards,
Eyup
the Telerik team

[Yogesh]

Hello Eyup,

It worked perfectly.

Thanks and Regards,
- Yogesh