1

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

我有一个在服务器端生成的自定义组标头（不确定如何在客户端生成它，但这是另一个问题……如果您有任何简单的答案，我会很高兴收到您的来信）

我有 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>

4

1 回答 1

0

我们通过在隐藏表中设置一行来完成此操作，其中设置了所有输入元素。当用户单击“添加”按钮时，我们将该行简单地附加到 RadGrid 的头部。这使它成为最顶层的行，并允许他们在所有验证到位的情况下输入。当他们单击保存时，ajax 会触发 web 服务进行保存，然后调用更新以重新绑定网格。这很好地保存了一切。

于 2012-12-11T16:35:03.920 回答