1
Telerik RadGrid, JSON 객체 목록을 반환하는 웹 서비스를 통해 바인드 된 클라이언트 측이 있습니다. 눈금은 범주 이름별로 그룹화되며 각 범주 아래에는 항목이 있습니다. 처음에 페이지를 호출하면 처음에는 3 개 그룹 아래에 10 개의 항목이 있다고 가정 해 보겠습니다. 올바르게 표시됩니다.radGrid에 행 클라이언트 측을 추가하는 방법
서버 측에서 생성되는 사용자 정의 그룹 헤더가 있습니다 (클라이언트 측에서 생성하는 방법은 확실하지 않지만 다른 질문입니다 ... 쉬운 대답이 있으면 기꺼이 할 것입니다. 당신에게서 듣기)
데이터 소스를 바인딩하는 pageLoad, onRowDataBound는 JSON 목록의 각 행에 대한 컨트롤을 업데이트합니다. 첫 번째로드에서는 잘 작동합니다. 이제이 목록에 항목을 추가하는 기능이 있습니다. 추가 할 때 웹 서비스를 호출하여 새 항목을 자체 범주로 그룹화 한 새 목록을 반환합니다.
이제 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>