This is a migrated thread and some comments may be shown as answers.

Client-side binding RadGrid with GridTemplateColumns

1 Answer 129 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Brett asked on 14 Jul 2011, 07:49 PM

I'm guessing that my problem is because of a limitation i found here client side binding specifics :"Data editing and grid editors. Since the control is bound on the client, and no subsequent trips are made to the server, the default editors cannot be rendered, and shown, which is the standard behavior, when the grid is bound on the server." So I assume I'll need to add an external edit form as suggested. Please let me know if that is the case, or if I'm simply missing something below.

I have a radgrid with a number of gridtemplatecolumns, most of which contain radtextboxes, radnumerictextboxes and radcomboboxes that the user can edit at any time, without setting individual columns in edit mode. This all worked well using server side binding, but was slow (my customer needs to be able to add and save new rows in about 1 second or less, partial postbacks are taking ~4 seconds).
I am now attempting to get client side binding to work, and have hit a roadblock while trying to add a new row on the client side. I see that a new row is added below my other rows, but only the GridClientSelectColumn's checkbox on the leftmost column is displayed on the new row, all the template columns with textboxes and comboboxes are blank, not just empty controls, the controls aren't in the new column at all.

I call AddNewRow() to add a row, getValues() is a js function which supplies the default values for the new row, and InsertRowToDataSource() webservice returns a JSON string of the current grid data plus one new row with default values (e.g. [{id:"123", RoomName:"x"}, {id:"456", RoomName:"y"}] ) and finally, on rowdatabound, RadGrid1_RowDataBound(...) is called so i can set values on my template controls. However, my template controls appear to not exist on the new row.

function AddNewRow()

{

wsLookup.InsertRowToDataSource(getValues(), updateGrid);

return false;

}

function updateGrid(result)

{

var ds = eval(result);

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

tableView.set_dataSource(ds);

tableView.dataBind();

}

function RadGrid1_RowDataBound(sender, args)

{

var room = args.get_item().findControl("rtbRoom");

// var room is null on the new row

room.set_value(args.get_dataItem()["RoomName"]);

}

and here is my radgrid (with some columns omitted):

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSourceAudit" EnableAJAX="True" EnableOutsideScripts="True"

AutoGenerateColumns="False" GridLines="None" Width="100%" Height = "100%" PageSize="8" Skin="Office2007" ShowStatusBar="True" OnItemDataBound="RadGrid1_ItemDataBound" >

<MasterTableView DataSourceID="SqlDataSourceAudit" CommandItemDisplay="Top" ClientDataKeyNames="AuditEntryID">

<CommandItemSettings ExportToPdfText="Export to Pdf" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

</ExpandCollapseColumn>

<Columns>

<telerik:GridClientSelectColumn Visible="true" HeaderStyle-Width="35px" UniqueName="ClientSelectColumn" HeaderText="Edit" ButtonType="ImageButton" Text="Edit" ImageUrl="~/images/16/pen_16.png" />

<telerik:GridTemplateColumn HeaderText="Sort" UniqueName="Sort" FilterControlAltText="Filter Sort column" Display = "false">

<ItemTemplate>

<telerik:RadNumericTextBox ID="rnSort" runat="server" Width = "100%" DataType="System.Int32" MinValue="0">

<NumberFormat DecimalDigits="0" />

</telerik:RadNumericTextBox>

</ItemTemplate>

<HeaderStyle Width="40px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Building" UniqueName="Building" FilterControlAltText="Filter Building column">

<ItemTemplate>

<telerik:RadComboBox ID="rcbBuilding" runat="server" AllowCustomText="True" Filter="Contains" Width="100%">

</telerik:RadComboBox>

</ItemTemplate>

<HeaderStyle Width="100px" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Area" UniqueName="Area" FilterControlAltText="Filter Area column">

<ItemTemplate>

<telerik:RadTextBox ID="rtbRoom" runat="server" Width="100%" ToolTip="The area or room in the building">

</telerik:RadTextBox>

</ItemTemplate>

<HeaderStyle Width="100px" />

</telerik:GridTemplateColumn>

<telerik:GridButtonColumn ConfirmText="Delete this audit entry?" ConfirmDialogType="RadWindow"

ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"

UniqueName="DeleteColumn" ImageUrl="~/images/16/remove_16.png" FilterControlAltText="Filter DeleteColumn column">

<ItemStyle HorizontalAlign="Center"/>

<HeaderStyle Width="25px" />

</telerik:GridButtonColumn>

</Columns>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column">

</EditColumn>

</EditFormSettings>

<CommandItemTemplate>

<table>

<tr>

<td align="left">

<asp:ImageButton ID="btnAdd"

CommandName="Insert" Runat="server" ImageUrl = "~/images/16/add_16.png"

tooltip="Add new audit line" ></asp:ImageButton>

<asp:ImageButton ID="btnSave"

CommandName="Save" Runat="server" ImageUrl = "~/images/16/ok_16.png"

tooltip="Save all grid changes"></asp:ImageButton>

</td>

<td align="right">

<asp:ImageButton ID="btnRefresh"

CommandName="Cancel" Runat="server" ImageUrl="~/images/16/refresh_16.png"

tooltip="Refresh grid"></asp:ImageButton>

</td>

</tr>

</table>

</CommandItemTemplate>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

<ClientSettings>

<Selecting AllowRowSelect="True" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True">

</Scrolling>

<Resizing AllowColumnResize="True" />

<ClientEvents OnRowSelected="RadGrid1_ItemSelected" OnCommand="RadGrid1_Command" OnRowDataBound="RadGrid1_RowDataBound" />

</ClientSettings>

<PagerStyle Mode="Slider" />

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Office2007">

</HeaderContextMenu>

</telerik:RadGrid>

Client-side binding RadGrid with GridTemplateColumns

1 Answer, 1 is accepted