如何将行客户端添加到radGrid

Question

我有一个Telerik RadGrid，通过web服务绑定客户端，它向我返回JSON对象列表。网格按类别名称分组，每个类别下都有后者下的项目。如果我调用页面，最初假设3组下有10个项目，它们会正确显示。

我有一个在服务器端生成的自定义组头(不确定如何在客户端生成，但这是另一个问题……如果你有任何简单的答案，我很高兴听到你的消息)

我有pageLoad来绑定数据源onRowDataBound，它更新JSON列表中每一行的控件。第一次加载时，它运行良好。现在我有一个功能可以将项目添加到此列表中。添加时，它会调用web服务，web服务会向我返回一个新列表，其中新项目分组在自己的类别下。

现在调用updateGrid回调来填充网格，并再次通过客户端的onRowDataBound。在某个时刻，当它到达第11行时，它再也找不到要添加的控件了，我猜因为以前我们没有11行。我是不是错过了什么？

我将如何创建新行？

代码：

function pageLoad(sender, eventArgs) {
console.log('pageLoad');
var tableView = $find("<%= grdSelectedList.ClientID %>").get_masterTableView();
ApplicationLayer.WebServices.ShoppingListWS.GetData(updateGrid);
}
function rowDataBound(sender, args) {
var gridItem = args.get_item();
var record = args.get_dataItem();
var lblItemDescription = args.get_item().findElement("lblItemDescription");
var btnDeleteItem = args.get_item().findControl("btnDeleteItem");
var hidElementId = args.get_item().findElement("hidElementId");
var btnPriceStatus = args.get_item().findControl("btnPriceStatus");
var btnDecrementQty = args.get_item().findControl("btnDecrementQty");
var txtQty = args.get_item().findControl("txtQty");
var btnIncrementQty = args.get_item().findControl("btnIncrementQty");
var cmbSizeChoices = args.get_item().findControl("cmbSizeChoices");
var lblSizeDescription = args.get_item().findElement("lblSizeDescription");
console.dir(lblItemDescription);
lblItemDescription.innerHTML = record.ItemName; // Error on this because lblItemDescription returns >null (only on the newly added Row)  when adding new item 
btnDeleteItem.set_commandArgument(record.ItemName.trim() + '|' + record.ListId + ',' + >record.ElementId + '|' + hidElementId.id);
hidElementId.value = record.ElementId;
if (record.ItemId == "0") {
btnPriceStatus.set_text("Item not found in database");
btnPriceStatus.set_enabled(false);
}
else if (record.StoreId != "0" && record.StoreName != "") {
btnPriceStatus.set_text("Selected Deal from " + record.StoreName);
btnPriceStatus.set_enabled(false);
}
else if (record.PriceStatus == "1") {
btnPriceStatus.set_text("Deals Found!");
btnPriceStatus.set_enabled(false);
}
else {
btnPriceStatus.set_visible(false);
btnPriceStatus.set_text("No Deals found (Click for suggestions)");
btnPriceStatus.set_enabled(true);
btnPriceStatus.set_commandArgument(record.ItemName + ',' + record.ElementId);
}
txtQty.set_value(record.Quantity);
if (!IsAddedButton(btnDecrementQty.get_id())){
btnDecrementQty.add_clicked(function (btnDecrementQty, args) { ChangeQty(btnDecrementQty, args, >"D," + record.ElementId + "," + ((record.PerPound == "1") ? "Y" : "N") + "," + txtQty.get_id() + "," + >btnDecrementQty.get_id() + "") });
eventsButton[eventsButton.length] = btnDecrementQty.get_id();
}
if (!IsAddedButton(txtQty.get_id())){
txtQty.add_blur(function (txtQty, args) { ChangeQty(txtQty, args, "Q," + record.ElementId + "," + >((record.PerPound == "1") ? "Y" : "N") + "," + txtQty.get_id() + "," + btnDecrementQty.get_id() + "") });
eventsButton[eventsButton.length] = txtQty.get_id();
}
if (!IsAddedButton(btnIncrementQty.get_id())){
btnIncrementQty.add_clicked(function (btnIncrementQty, args) { ChangeQty(btnIncrementQty, args, >"I," + record.ElementId + "," + ((record.PerPound == "1") ? "Y" : "N") + "," + txtQty.get_id() + "," + >btnDecrementQty.get_id() + "") });
eventsButton[eventsButton.length] = btnIncrementQty.get_id();
}
scString = record.SizeChoices;
scStringArray = scString.split(',');
if (scString != "" && scStringArray.length > 1) {
cmbSizeChoices.set_visible(true);
lblSizeDescription.visible = false;
cmbSizeChoices.clearItems();
for(i=0; i < scStringArray.length; i++){
var cmbItem = new Telerik.Web.UI.RadComboBoxItem();
cmbItem.set_value(scStringArray[i].split('|')[0]);
cmbItem.set_text(scStringArray[i].split('|')[1]);
cmbSizeChoices.get_items().add(cmbItem);
}
if (!IsAddedButton(cmbSizeChoices.get_id())){
if (record.SizeChoiceID != "" && record.SizeChoiceID != "0") {
var itm = cmbSizeChoices.findItemByValue(record.SizeChoiceID);
if (itm != null) itm.select();
}
cmbSizeChoices.add_selectedIndexChanged(function (cmbSizeChoices, args) { >ChangeItemSize(cmbSizeChoices, args, record.ElementId) });
cmbSizeChoices.add_onClientFocus(function (cmbSizeChoices, args) { >SetCurrentCombo(cmbSizeChoices, args) });
eventsButton[eventsButton.length] = cmbSizeChoices.get_id();
}
}
else if (scString != "" && scStringArray.length  == 1) {
cmbSizeChoices.set_visible(false);
lblSizeDescription.visible = true;
lblSizeDescription.innerHTML = scStringArray[0].split('|')[1];
}
else {
cmbSizeChoices.set_visible(false);
lblSizeDescription.visible = false;
}
}
function updateGrid(result, userContext) {
var tableView = $find("<%= grdSelectedList.ClientID %>").get_masterTableView();
alert('updateGrid');
console.dir(userContext);
console.dir(result);
tableView.set_dataSource(result);
tableView.dataBind();
var grid = $find("<%= grdSelectedList.ClientID %>");
grid.repaint();
}
function btAddItemPlus_Clicking(sender, eventArgs) {
var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
var txtAddItem = $find("<%= txtAddItem.ClientID %>");
var args;
var tempVal = txtAddItem.get_value();
tempVal = tempVal.replace(/[^a-zA-Z 0-9]+/g, '');
var tempTxt = txtAddItem.get_text();
tempTxt = tempTxt.replace(/[^a-zA-Z 0-9]+/g, '');
//Adds the item calling the WebService , it returns a new list
args = 'AddItemByID,' + tempVal;
ApplicationLayer.WebServices.ShoppingListWS.AddItemByID(tempVal, tempTxt, updateGrid, onFailed, args);
txtAddItem.set_text('');
txtAddItem.clearItems();
eventArgs.set_cancel(true);
}
function ExpandMe(n, args) {
var type = args.target.tagName.toLowerCase();
if (type != "input" && type != "a") {
console.log('clicked');
$(n).children()[0].children[0].click();
}
}

标记：

<telerik:RadGrid ID="grdSelectedList" runat="server" AutoGenerateColumns="False"
CellSpacing="0" GridLines="None" ShowHeader="False" Style="outline: none;" EnableViewState="false"
OnNeedDataSource="grdSelectedList_NeedDataSource"
OnItemCommand="grdSelectedList_ItemCommand" OnItemDataBound="grdSelectedList_ItemDataBound"
Height="493px" Width="595px" Skin="Default" EnableEmbeddedSkins="false" CssClass="grdSelectedList">
<ClientSettings AllowGroupExpandCollapse="True">
<Selecting AllowRowSelect="True" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="493px" />
<ClientEvents OnRowClick="grdSelectedList_RowClick" OnRowDataBound="rowDataBound" />
</ClientSettings>
<MasterTableView DataKeyNames="AccountId, ItemId, ListId, ElementId, DealId" ClientDataKeyNames="AccountId, ItemId, ListId, ElementId, DealId, CategoryName"
TableLayout="Fixed" GroupLoadMode="Client">
<GroupByExpressions>
<telerik:GridGroupByExpression>
<SelectFields>
<telerik:GridGroupByField FieldName="CategoryName" />
</SelectFields>
<GroupByFields>
<telerik:GridGroupByField FieldName="CategoryName" />
</GroupByFields>
</telerik:GridGroupByExpression>
</GroupByExpressions>
<NoRecordsTemplate>
This list is empty.<br />
Click in "Add an Item" or "Browse Aisles" to add items to this list.
</NoRecordsTemplate>
<Columns>
<telerik:GridBoundColumn FilterControlAltText="Filter CategoryCol column" UniqueName="CategoryCol"
DataField="CategoryName" Groupable="true" Visible="False">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn FilterControlAltText="Filter DescriptionCol column" UniqueName="DescriptionCol"
HeaderStyle-Width="350px">
<ItemTemplate>
<div style="width: 350px; clear: both; font-weight: bold; margin-left: -5px;">
<asp:Label ID="lblItemDescription" runat="server" CssClass="blackHyperlink"></asp:Label>
</div>
<div style="margin-left: -9px;">
<telerik:RadButton ID="btnPriceStatus" runat="server" UniqueName="PriceStatusColumn"
OnClientClicking="SuggestSubItems" BackColor="Transparent" ButtonType="LinkButton"
CssClass="dealFound" BorderStyle="None">
</telerik:RadButton>
</div>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="QtyCol" HeaderStyle-Width="78px">
<ItemTemplate>
<div class="divQtyWrapper">
<div class="divPlusMinus" id="qtyMinus">
<telerik:RadButton ID="btnDecrementQty" runat="server" CommandName="DecrementQty"
Width="17" Height="20" AutoPostBack="false">
<Image ImageUrl="../Images/btGrdMinus.gif" />
</telerik:RadButton>
</div>
<div class="divQty">
<telerik:RadTextBox ID="txtQty" runat="server" CssClass="txtQtyInput" ViewStateMode="Disabled">
</telerik:RadTextBox></div>
<div class="divPlusMinus" id="qtyPlus">
<telerik:RadButton ID="btnIncrementQty" runat="server" CommandName="IncrementQty"
Width="17" Height="20" AutoPostBack="false">
<Image ImageUrl="../Images/btGrdPlus.gif" />
</telerik:RadButton>
</div>
</div>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="QtyCol" HeaderStyle-Width="105px">
<ItemTemplate>
<telerik:RadComboBox ID="cmbSizeChoices" runat="server" Width="98px">
</telerik:RadComboBox>
<asp:Label ID="lblSizeDescription" runat="server"></asp:Label>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn UniqueName="DelCol">
<ItemTemplate>
<telerik:RadButton ID="btnDeleteItem" runat="server" CommandName="DeleteShoppingListItem"
OnClientClicking="ConfirmDeleteItem" Width="18" Height="20" AutoPostBack="false">
<Image ImageUrl="..ImagesicoDeleteRedX.gif" />
</telerik:RadButton>
<asp:HiddenField ID="hidElementId" runat="server" />
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>

Answer 1

我们通过在隐藏表中设置一行来实现这一点，其中设置了所有输入元素。当用户单击"添加"按钮时，我们将该行简单地附加到RadGrid的末尾。这使得它成为最上面的一行，并允许他们在所有验证都到位的情况下进入。当他们点击保存时，ajax会关闭要保存的Web服务，然后调用更新来重新绑定网格。这样保存得很好。