Question

I have a question about Telerik. I have a RadGrid where inside the MasterTableView I have a DetailTables tag (so I have a hierarchy) and I also have a CommandItemTemplate tag inside my MasterTableView tag. Everything is fine when it runs from markup, but I’ve tried to build this programmatically from code behind. Unfortunately I was not successful. Everything works, except that my CommandItemTemplate is nowhere.

My approach:
I had this CommandItemTemplate inside my MasterTableView:

        <CommandItemTemplate>
            <div class="cmdItem">
                <asp:LinkButton ID="btnAddShift" runat="server" CommandName="AddShift" OnClientClick="return fireCommand('AddShift', '');">
                    <img alt="" src="../../Images/Icons/AddRecord.png" />Add Shift</asp:LinkButton>&#160;&#160;&#160;
                <asp:LinkButton ID="btnExportCSV" runat="server" CommandName="Export CSV" OnClientClick="return exportGrid('CSV');"><img alt="" src="../../Images/Icons/ExportCSV.png" />Export to CSV</asp:LinkButton>&#160;&#160;&#160;
                <asp:LinkButton ID="btnManageShiftColumns" runat="server" CommandName="ManageShiftColumns" OnClientClick="return fireCommand('ManageShiftColumns', '');">
                    <img alt="" src="../../Images/Icons/Columns.png" />Manage Shift Columns</asp:LinkButton>&#160;&#160;&#160;
                <asp:LinkButton ID="btnManageJobColumns" runat="server" CommandName="ManageJobColumns" OnClientClick="return fireCommand('ManageJobColumns', '');">
                    <img alt="" src="../../Images/Icons/Columns.png" />Manage Job Columns</asp:LinkButton>&#160;&#160;&#160;
                <%--<asp:LinkButton ID="btnDetailedExportCSV" runat="server" CommandName="Export CSV Detailed"
                    OnClientClick="return exportGrid('CSVDetailed');"><img alt="" src="../../Images/Icons/ExportCSV.png" />Detailed Export to CSV</asp:LinkButton>&#160;&#160;&#160;
                <asp:LinkButton ID="btnExportPDF" runat="server" CommandName="Export PDF" OnClientClick="return exportGrid('PDF');"><img alt="" src="../../Images/Icons/ExportPDF.png" />Export to PDF</asp:LinkButton>&#160;&#160;&#160;--%>
            </div>
        </CommandItemTemplate>

I’ve got rid of that markup and I’ve created a helper class:

Private Class RadGridHeaderTemplate
    Implements ITemplate


    Public Sub New()
    End Sub

    Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) Implements System.Web.UI.ITemplate.InstantiateIn
        Dim div As HtmlGenericControl = New HtmlGenericControl("div")
        div.Attributes.Add("class", "cmdItem")

        Dim addShiftButton As LinkButton = New LinkButton With {.ID = "btnAddShift", .CommandName = "AddShift", .OnClientClick = "return fireCommand('AddShift', '');"}
        Dim addShiftButtonImage As HtmlGenericControl = New HtmlGenericControl("img")
        addShiftButtonImage.Attributes.Add("alt", "")
        addShiftButtonImage.Attributes.Add("src", "../../Images/Icons/AddRecord.png")
        addShiftButton.Controls.Add(addShiftButtonImage)
        addShiftButton.Text = "Add Shift"

        Dim exportCSVButton As LinkButton = New LinkButton With {.ID = "btnExportCSV", .CommandName = "Export CSV", .OnClientClick = "return exportGrid('CSV');"}
        Dim exportCSVButtonImage As HtmlGenericControl = New HtmlGenericControl("img")
        exportCSVButtonImage.Attributes.Add("alt", "")
        exportCSVButtonImage.Attributes.Add("src", "../../Images/Icons/ExportCSV.png")
        exportCSVButton.Controls.Add(exportCSVButtonImage)
        exportCSVButton.Text = "Export to CSV"

        Dim manageShiftColumnButton As LinkButton = New LinkButton With {.ID = "btnManageShiftColumns", .CommandName = "ManageShiftColumns", .OnClientClick = "return fireCommand('ManageShiftColumns', '');"}
        Dim manageShiftColumnButtonImage As HtmlGenericControl = New HtmlGenericControl("img")
        manageShiftColumnButtonImage.Attributes.Add("alt", "")
        manageShiftColumnButtonImage.Attributes.Add("src", "../../Images/Icons/Columns.png")
        manageShiftColumnButton.Controls.Add(manageShiftColumnButtonImage)
        manageShiftColumnButton.Text = "Manage Shift Columns"

        Dim manageJobColumnButton As LinkButton = New LinkButton With {.ID = "btnManageJobColumns", .CommandName = "ManageJobColumns", .OnClientClick = "return fireCommand('ManageJobColumns', '');"}
        Dim manageJobColumnButtonImage As HtmlGenericControl = New HtmlGenericControl("img")
        manageJobColumnButtonImage.Attributes.Add("alt", "")
        manageJobColumnButtonImage.Attributes.Add("src", "../../Images/Icons/Columns.png")
        manageJobColumnButton.Controls.Add(manageJobColumnButtonImage)
        manageJobColumnButton.Text = "Manage Job Columns"

        div.Controls.Add(addShiftButton)
        div.Controls.Add(exportCSVButton)
        div.Controls.Add(manageShiftColumnButton)
        div.Controls.Add(manageJobColumnButton)

        container.Controls.Add(div)
    End Sub
End Class

I’m using this class inside my CreateGrid method where I create my RadGrid programmatically and adding it to the controls of the page. I’m using it this way:

Protected Sub CreateGrid()
        RadGrid1 = New RadGrid With {.ID = "RadGrid1", .AutoGenerateColumns = True, .AllowCustomPaging = True, .AllowMultiRowSelection = True}
'...
        Dim template As RadGridHeaderTemplate = New RadGridHeaderTemplate()
        template.InstantiateIn(RadGrid1.MasterTableView)
'...
End Sub

Unfortunately this approach doesn’t work. I don’t have any errors, but my CommandItemTemplate is nowhere, my LinkButtons don’t appear on the UI, they are not part of the generated markup.

Any help is appreciated.

Best regards,

Lajos Arpad.

Answer 1

In my source code the following part was missing:

RadGrid1.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top

Since RadGrid1.MasterTableView.CommandItemDisplay is initialized I can see my item command template and I can use the features provided by my item command template.