Split button inside GridTemplateColumn binding

[Cristian]

 

Hi guys.

 

I'm new implementing radsplitbutton, I have my splitbutton inside a gridtemplateColumn declared as follows:

<telerik:GridTemplateColumn  DataField="Portal_Id" UniqueName="templateCol">
                           <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                      <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                      <ItemTemplate>
                            <asp:Label runat="server" ID="labelss" Text='<%# Bind("Portal_Id") %>' ></asp:Label>
       <telerik:RadButton runat="server"  ID="splitButton" EnableSplitButton="true" Text="Selecionar" Skin="Bootstrap" Width="200px" AutoPostBack="false" OnClientClicked="OnClientClicked" OnClientLoad="storeSplitButtonReference"></telerik:RadButton >
                           <telerik:RadContextMenu ID="RadContextMenu1" runat="server" Skin="Bootstrap"  OnClientLoad="storeContextMenuReference" >
                  <Items>
                      <telerik:RadMenuItem Text="Detalles" Value='<%# Eval("Portal_Id")%>'  NavigateUrl='<%# FriendlyUrl.Href("~/Portales/Details", DataBinder.Eval(Container,"Portal_Id"))%>' >

                      </telerik:RadMenuItem>
                      <telerik:RadMenuItem Text="Editar" Value='<%# Eval("Portal_Id") %>'  NavigateUrl='<%# FriendlyUrl.Href("~/Portales/Edit",  Eval("Portal_Id"))%>' >
                      </telerik:RadMenuItem>
                      <telerik:RadMenuItem Text="Eliminar"  NavigateUrl='<%# FriendlyUrl.Href("~/Portales/Delete", Eval("Portal_Id"))%>'>

                      </telerik:RadMenuItem>
                  </Items>
              </telerik:RadContextMenu>

                      </ItemTemplate>
                  </telerik:GridTemplateColumn>

What I want to do is to navigate through the navigateUrl Property of the radmenuItem and passing the portal_id wich is in a gridboundcolumn but when I click an item it redirects to the page without the portal_id, this behavior only occurs with radcontextmenu, as you can see I placed a label before the  button and bind the text property to the portal_id value and it is set correctly.

 

Can you help me to get the correct redirection with the portal_id parameter.

 

Best Regards

Cristian.

[Danail Vasilev]

Hello Cristian,

You can find below a fully runnable sample on this regards. I have also highlighted the most important pieces of the code.

<script>

    function storeSplitButtonReference() {

    }

    function storeContextMenuReference() {

    }

    var portalId;
    function OnClientClicked(sender, args) {

        if (args.IsSplitButtonClick()) {
            var parentEl = args.get_domEvent().target.parentNode.parentNode.parentNode;
            var rowIndex = parentEl.id.split("__")[1];
            var masterTable = $find("<%=RadGrid1.ClientID%>").get_masterTableView();
            portalId = masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[rowIndex], "Portal_Id").innerHTML;
            var menu = $find($telerik.$(parentEl).find(".RadMenu")[0].id.replace("_detached", ''));
            menu.showAt(1, 1);
        }
    }

    function OnClientItemClicking(sender, args) {
        var item = args.get_item();
        item.set_navigateUrl(item.get_navigateUrl() + "?" + portalId);
    }
</script>
<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView AutoGenerateColumns="false">
        <Columns>
            <telerik:GridBoundColumn DataField="ID" UniqueName="ID" HeaderText="ID"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Portal_Id" UniqueName="Portal_Id" HeaderText="Portal_Id"></telerik:GridBoundColumn>
            <telerik:GridTemplateColumn UniqueName="templateCol">
                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                <ItemTemplate>
                    <%# String.Format("http://www.telerik.com/?{0}", Eval("Portal_Id") ) %>
                    <asp:Label runat="server" ID="labelss" Text='<%# Bind("Portal_Id") %>'></asp:Label>
                    <telerik:RadButton runat="server" ID="splitButton" EnableSplitButton="true" Text="Selecionar" Skin="Bootstrap" Width="200px" AutoPostBack="false" OnClientClicked="OnClientClicked" OnClientLoad="storeSplitButtonReference"></telerik:RadButton>
                    <telerik:RadContextMenu ID="RadContextMenu1" runat="server" Skin="Bootstrap" OnClientLoad="storeContextMenuReference" OnClientItemClicking="OnClientItemClicking">
                        <Items>
                            <telerik:RadMenuItem Text='<%# Eval("Portal_Id")%>' Value='<%# Eval("Portal_Id")%>' NavigateUrl='http://www.telerik.com'>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Editar" Value='<%# Eval("Portal_Id") %>' NavigateUrl='http://www.telerik.com'>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Eliminar" NavigateUrl='http://www.telerik.com'>
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadContextMenu>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#:

protected DataTable GetData()
{
    DataTable dt = new DataTable();

    dt.Columns.Add("ID", typeof(int));
    dt.Columns.Add("Portal_Id", typeof(int));

    dt.Rows.Add(1, 2);
    dt.Rows.Add(2, 5);
    dt.Rows.Add(3, 6);
    dt.Rows.Add(4, 4);
    dt.Rows.Add(5, 7);

    return dt;
}
protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = GetData();
}

Regards,
Danail Vasilev
Telerik