Как добавить клиентскую строку в 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>