Как да добавите ред клиентска страна към radGrid

Имам Telerik RadGrid, обвързана клиентска страна чрез уеб услуга, която ми връща списък с JSON обекти. Решетката е групирана по име на категория, като под всяка категория има елементи от последната. Ако извикам страницата, първоначално, да кажем, че има 10 артикула под 3 групи, те се показват правилно.

Имам персонализирана заглавка на групата, която се генерира от страна на сървъра (не знам как да го генерирам от страната на клиента, но това е друг въпрос... ако имате лесен отговор, ще се радвам да чуя от вас)

Имам 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>