Want a setting dropdown menu in RadGrid

[Kiresh]

Hello Everyone,

i want to create one drop-down menu like shown in image on all row of RadGrid where i can click on individual link to perform task like edit,delete etc,


can anyone have idea about this?

Thanks

[Princy]

Hi Kiresh,

I'm not sure if this is your requirement.Please  try the following code snippet.

ASPX:

<telerik:RadGrid ID="radgrid1" runat="server" >
    <MasterTableView>
        <Columns>
            <telerik:GridTemplateColumn>
                <HeaderTemplate>
                    <telerik:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true"
                        ExpandAnimation-Type="None" CollapseAnimation-Type="None" ExpandDelay="0" CollapseDelay="0">
                        <Items>
                            <telerik:RadMenuItem Text="Operations" Selected="false">
                                <GroupSettings ExpandDirection="Right" />
                                <Items>
                                    <telerik:RadMenuItem Text="Edit">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Insert">
                                    </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Delete">
                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenu>
                </HeaderTemplate>
            </telerik:GridTemplateColumn>
          . . . . . . .   <%--  Your Columns --%>. . . . . . . .
        </Columns>
    </MasterTableView>
    <ClientSettings Selecting-AllowRowSelect="true">
    </ClientSettings>
</telerik:RadGrid>

Thanks,
Princy

[Kiresh]

Hi Princy

that's great , and i want exactly you have posted .
i need one more help

i want grid rowid  given in MasterTableView using Javascript when click on any item

<MasterTableView DataKeyNames="Id" ClientDataKeyNames="Id" >


can you help me ?

Thanks,

[Princy]

Hi Kiresh,

Please try the following code snippet.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server">
    <MasterTableView DataKeyNames="OrderId">
        <Columns>
           . . . . . . . . . . . . .
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <ClientEvents OnRowClick="OnRowClick" />
    </ClientSettings>
</telerik:RadGrid>

JS:

<script type="text/javascript">
    function OnRowClick(sender, eventArgs) {
        var grid = sender;
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
        var cell = MasterTable.getCellByColumnUniqueName(row, "OrderID");
        alert(cell.innerHTML);
        //here cell.innerHTML holds the value of the cell
    }
</script>

Thanks,
Princy

[Kiresh]

Hi Princy,

That's the case when i click on row i get id as per your code ,

now  i want that row id on click of RadMenu that is in

<telerik:GridTemplateColumn>

             


</telerik:GridTemplateColumn>

you posted first time.


is that possible ?

Thanks,

[Princy]

Hi Kiresh ,

For your requirement,may i suggest you try setting AJAX-Enabled Context Menu.Please check the DEMO. In its right click event we can set the edit,insert or delete function.
Hope this helps.

Thanks,
Princy

[Viktor Tachev]

Hello Kiresh,

You could use a combination of the first approach suggested by Princy and the approach illustrated in the demo.

You could set a GridTemplateColumn for the RadGrid with RadMenu in its ItemTemplate:

<telerik:GridTemplateColumn>
    <ItemTemplate>
        <telerik:RadMenu ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true" OnItemClick="RadMenu1_ItemClick"
            ExpandAnimation-Type="None" CollapseAnimation-Type="None" ExpandDelay="0" CollapseDelay="0">
            <Items>
                <telerik:RadMenuItem Text="Select Option" Selected="false">
                    <GroupSettings ExpandDirection="Right" />
                    <Items>
                        <telerik:RadMenuItem Text="Edit">
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Delete">
                        </telerik:RadMenuItem>
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
    </ItemTemplate>
</telerik:GridTemplateColumn>

The RadMenu1_ItemClick handler would look similar to this:

protected void RadMenu1_ItemClick(object sender, Telerik.Web.UI.RadMenuEventArgs e)
{
    GridDataItem dataItem = ((GridDataItem)((sender as RadMenu).Parent.Parent));

    switch (e.Item.Text)
    {
        case "Edit":
            dataItem.Edit = true;
            RadGrid1.Rebind();
            break;
        case "Delete":
            RadGrid1.MasterTableView.PerformDelete(dataItem);
            break;
    }
}

This way you could have the menu options for each row of the RadGrid.

I hope this would be helpful to you.

Regards,
Viktor Tachev
Telerik