GridButtonColumn Not Shown After Client-Side Binding

[Online .Net Developers]

I'm using AJAX call to dynamically add rows to my RadGrid on the Client-Side.  The data is initially loaded on the Server Side.

If there were X rows when the grid was initialized, adding the (X+1)th row, the GridButtonColumns are not rendered.

What the grid looks like before the Add

What the grid looks like Afterward

After the AJAX call adds the record to the appropriate SQL Table, I use a WebMethod in the page's Code Behind to retrieve all the data that should be in the grid.

I then bind that result to the grid (AGPermissions is the ID of the RadGrid):

        function updateGrid(result)
        {
            var masterTableView = GetMasterTableView("<%=AGPermissions.ClientID %>");
            if (result)
            {
                masterTableView.set_dataSource(result);
                masterTableView.dataBind();

                ToggleDivVisibility('ShowGridClient',true);
               var grid = $find("<%= AGPermissions.ClientID %>");
               grid.repaint();

While tracing through the code, the correct data is stored within "result".

Here's the RadGrid definition:

    <telerik:RadGrid ID="AGPermissions" EnableViewState="false" runat="server"
        AllowPaging="false" AllowSorting="false" AllowFilteringByColumn="false" GridLines="None"
        EnableEmbeddedSkins="false" Skin="IMCGridStyle" ImagesPath="Grid"
        OnNeedDataSource="AGPermissions_NeedDataSource">
        <ItemStyle Wrap="false" />
        <MasterTableView
            AllowMultiColumnSorting="true"
            TableLayout="Auto"
            EnableNoRecordsTemplate="false"
            ClientDataKeyNames="AssetGroupID,AssetGroupPermissionType"
            AutoGenerateColumns="false"
            ShowHeadersWhenNoRecords="false">
            <Columns>
                    <telerik:GridBoundColumn DataField="AssetGroupID" Display="false" HeaderText="Asset Group ID" />
                    <telerik:GridBoundColumn DataField="AssetGroupName" HeaderText="Asset Group" />
                    <telerik:GridBoundColumn DataField="AssetGroupPermissionType" Display="false" HeaderText="Asset Group Permission Type" />
                    <telerik:GridBoundColumn DataField="AssetGroupPermissionTypeText" HeaderText="Permission Type" />
                    <telerik:GridButtonColumn  UniqueName="1MakeGroupMaster"  Visible="true" ButtonType="ImageButton" ImageUrl="Grid/btnMakeGM.jpg" CommandName="1MakeGroupMaster" Text="Make Group Master"></telerik:GridButtonColumn>
                    <telerik:GridButtonColumn  UniqueName="2MakeGroupReader" ButtonType="ImageButton" ImageUrl="Grid/btnMakeGR.jpg" CommandName="2MakeGroupReader" Text="Make Group Reader"></telerik:GridButtonColumn>
                    <telerik:GridButtonColumn  ConfirmText="Remove access to this Asset Group?" ButtonType="ImageButton" ImageUrl="Grid/btnRemove.jpg" CommandName="RemoveAccess" Text="Remove Access"></telerik:GridButtonColumn>
            </Columns>
            <NoRecordsTemplate>
                <div>There are no records to display.</div>
            </NoRecordsTemplate>
        </MasterTableView>

        <ClientSettings>
            <ClientEvents
                OnCommand="RadGridCommand"

                OnDataBound="TestThis"/>
        </ClientSettings>
        <PagerStyle AlwaysVisible="true" />

    </telerik:RadGrid>

If I do a refresh of the page, the Server Side methods load and display the grid properly.  Any help on why this is happening would be appreciated.

I'm using the Q3 2008 version.

Thanks.

[Nikolay Rusev]

Hello,

This is expected behavior of RadGrid. If you have any GridButtonColumn, GridTemplateColumns and add item more than page size you should handle recreating of that controls.
You can listen for OnRowDataBound client-side event and recreate the markup for GridButtonColumn.

All the best,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Online .Net Developers]

Thanks for the prompt response Nikolay.  I'm starting to play with the OnRowDataBound event and have a few follow-up questions.

I attached to IE and saw that the InnerHTML of the GridButtonColumns was of the following format:

<INPUT title="Make Group Master"
style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px"
onclick="if(!$find('ctl00_dwp_cph_mctctl0_AGPermissions_ctl00').fireCommand('1MakeGroupMaster','1')) return false;"
tabIndex=-1
type=image
alt="Make Group Master"
src="Grid/btnMakeGM.jpg"
name=ctl00$dwp$cph$mct$_ctl0$AGPermissions$ctl00$ctl06$ctl00>

1.  How do I get the current row index to include in the fireCommand() call?
2. How do I build the "name" property?

Thanks.

[Online .Net Developers]

I figured out #1.

$find("<%=AGPermissions.ClientID%>").get_masterTableView().get_dataItems().length;

Still stumped on #2.

Thanks.

[Online .Net Developers]

Let me add another question:

3.  If I use onclick="if(!$find('<%= AGPermissions.ClientID %>').fireCommand('1MakeGroupMaster','1')) return false;", I get the ID field of the DIV wrapper (e.g. ctl00_dwp_cph_mct__ctl0_AGPermissions), not the Table element's ID (e.g. tl00_dwp_cph_mctctl0_AGPermissions_ctl00).  It's the latter that the server-side generated buttons use.

It also looks like I can do some string manipulation on the Table ID to generate the "name" fields (Question #2).

How do I get this ID?

Thanks.

[Nikolay Rusev]

Hi,

Below is sample code which demonstrates how to add extra GridClientDeleteColumn when bound more than PageSize records:

<script>
function RowDataBound(sender, args)
        {
            if (args.get_item().get_owner().get_pageSize() <= args.get_item()._itemIndexHierarchical)
            {
                var cell = args.get_item().get_owner().getCellByColumnUniqueName(args.get_item(), "DeleteColumn");
                var element = document.createElement("a");
                element = cell.appendChild(element);
                element.onclick = "if (!$find('" + args.get_item().get_owner().get_id() + "').fireCommand('', '" + args.get_item()._itemIndexHierarchical + "')) return false;$find('" + args.get_item().get_owner().get_id() + "')._clientDelete(event); return false;";
                element.setAttribute("href", "");
                element.innerText = "Delete";
            }

        }
    </script>

I  hope this helps.

All the best,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.