1
我有一個Telerik RadGrid綁定客戶端通過Web服務返回給我一個JSON對象列表。網格按類別名稱分組，每個類別下都是後者的項目。如果我打電話給該頁面，最初假設有3個組下的10個項目，它們顯示正確。如何將行客戶端添加到radGrid
我有一個自定義的組頭在服務器端生成（不知道如何在客戶端生成它，但這是另一個問題...如果你有任何簡單的答案，我會很高興聽到你的聲音）
我有pageLoad綁定數據源，onRowDataBound，它從JSON列表中更新每行的控件。在第一次加載時，它工作得很好。現在我有一個功能可以添加一個項目到這個列表。添加時，它會調用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="..\Images\icoDeleteRedX.gif" />
</telerik:RadButton>
<asp:HiddenField ID="hidElementId" runat="server" />
</ItemTemplate>
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>