GridButtonColumn does not render after 10th row when using Client side binding

[Chase Huber]

I have a rad grid and am using client side binding. In the grid is a GridButtonColumn whose ButtonType is set to "ImageButton".
When the page loads, there are no items in the grid, it is in a div that is hidden.
There is a button on the page that allows the user to add items, after which the grid is bound to those items.
After the 10th item is added, the rendering on the GridButtonColumn goes haywire.
The correctly rendered image button looks like: 

<input type="image" name="ctl00$PlaceHolderMain$CreateForm$DetailsGrid$ctl00$ctl14$gbcDeleteCommandColumn" id="ctl00_PlaceHolderMain_CreateForm_DetailsGrid_ctl00_ctl14_gbcDeleteCommandColumn" title="Delete" src="/WebResource.axd?d=GpOX6CklTui-WvsX3ntJX3ScZbvlRAVY8vywfIml9JItkz7GRkBph6JGqEfC9c79Y_0WJH4Nno_X46fOq0MjDPt_LMglkeRc-eqk2sIgYglxd1EFqxUP8l5AE_GCCW7O8haJNpYIJYTP71JNlw-cuq-QZUhJ-Wl0sZgdku0-h-F4-g8fvnFhBcx7J8a4kUhHArGx1g2&amp;amp;t=634419269737817546" alt="Delete" onclick="if(!confirm('Are you sure you want to delete this entry?'))return false;if(!$find('ctl00_PlaceHolderMain_CreateForm_DetailsGrid_ctl00').fireCommand('Delete','5')) return false;" style="border-width:0px;">

The incorrectly rendered image button looks like:

<input type="image" title="Delete" alt="Delete" src="" onclick="if(!$find('ctl00_PlaceHolderMain_CreateForm_DetailsGrid_ctl00').fireCommand('Delete','10')) return false;">

Here is the grid:

<telerik:RadGrid ID="DetailsGrid" runat="server"
    AllowMultiRowEdit="false"
    AllowPaging="false"
    AllowSorting="false"
    AutoGenerateColumns="false"
    EnableViewState="false"
    GridLines="None"
    Skin="Simple"
    Width="100%">
    <MasterTableView TableLayout="Fixed" ClientDataKeyNames="ID">
        <Columns>
            <telerik:GridBoundColumn UniqueName="Date" DataField="Date" HeaderText="Date" ReadOnly="true" HeaderStyle-Width="75px" ItemStyle-HorizontalAlign="Left" DataType="System.DateTime" DataFormatString="{0:MM/dd/yyyy}">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="UserDisplayName" DataField="UserDisplayName" HeaderText="User" ReadOnly="true" HeaderStyle-Width="135px" ItemStyle-HorizontalAlign="Left">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="Hours" DataField="Hours" HeaderText="Hours" HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Center">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="Minutes" DataField="RemainderMinutes" HeaderText="Minutes" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="Center">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="Description" DataField="Description" HeaderText="Description" ItemStyle-HorizontalAlign="Left">
            </telerik:GridBoundColumn>
            <telerik:GridButtonColumn UniqueName="DeleteCommandColumn"
                                        CommandName="Delete"
                                        ButtonType="ImageButton"
                                        ConfirmText="Are you sure you want to delete this entry?"
                                        ConfirmTitle="Delete Entry"
                                        Text="Delete"
                                        HeaderStyle-Width="30px"
                                        ItemStyle-HorizontalAlign="Center" >
            </telerik:GridButtonColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <ClientEvents OnCommand="Stp.DetailsGrid_Command"></ClientEvents>
    </ClientSettings>
</telerik:RadGrid>

This happens in both IE and Chrome.
Version 2011.1.315.35
Has anyone seen this before?

[Casey]

Chase, 

Is it possible that the 10th item should really be referenced by a 9 instead of 10? My guess would be that the items 0 based? Does the delete click when there is only 1 item cause any issues?

Casey

[Chase Huber]

The delete button (regardless of whether it has rendered itself properly or not) does raise the client side OnCommand event in which I can take action to delete the item:

Stp.DetailsGrid_Command = function (s, e) {
    e.set_cancel(true);
    if (e.get_commandName() == 'Delete') {
        var d = s.get_masterTableView().get_dataItems()[parseInt(e.get_commandArgument())].get_dataItem();                
        Stp.Services.DeleteDetail(d, Stp.DeletedDetail, Stp.CallbackError, d);
    }
}

I am not using the client inline delete column because I want the item to be deleted immediately in case the user navigates away from the page or otherwise does not submit the form.

The incorrectly rendered buttons do not, however, use the ConfirmText and ConfirmTitle properties of the GridButtonColumn. When you click the incorrectly rendered buttons, they do not raise an alert, but proceed directly to the ItemCommand event.

I am attaching a screen shot that shows the incorrectly rendered buttons.

[Pavlina]

Hi Chase Huber,

This behavior is due to the fact that RadGrid serialize its ItemStyle on client. Thus the style will be applied only for the rows that are initially rendered from server.
You can handle RowDataBound client event and apply the style for all desired table cells for current item that is being bound in order to workaround this behavior.

http://www.telerik.com/help/aspnet-ajax/client-side-binding.html
http://www.telerik.com/help/aspnet-ajax/client-side-binding-specifics.html

I hope this helps.

Best wishes,
Pavlina
the Telerik team

[Chase Huber]

I understand now. Since the grid was hidden when the page first loaded, I did not notice that unbound it renders itself with 10 rows in it.
Thank You,

 - Chase