title: How to add a row client side to radGrid
body: <p>I have a Telerik RadGrid, binded client side via a web service which returns me a list of JSON objects. The grid is grouped by Category Name, under each Category are items under the latter. If I call the page, initially, let's say there are 10 items under 3 groups, they are displayed correctly.</p>
  
  <p>I have a custom group header which is generated on on the server side (not sure how to generate it on the client side but this is another question... if you have any easy answer, i'll be glad to hear from you)</p>
  
  <p>I have pageLoad to bind the datasource, onRowDataBound, which updates the control for each row from the JSON list. On first load, it is working great. Now I have a feature to add an item to this list. When adding, it calls the web service which returns me a new list with the new item grouped under its own Category.</p>
  
  <p>Now the updateGrid callback is called to fill the grid, and again it goes through the onRowDataBound on Client side. At some point when it reaches row 11 it can no longer find the controls to add, I'm guessing since previously we didnt have 11 rows. Am I missing something?</p>
  
  <p>How would I create the new row?</p>
  
  <p>Code:</p>
  
  <pre><code>function pageLoad(sender, eventArgs) {
      console.log('pageLoad');
      var tableView = $find("&lt;%= grdSelectedList.ClientID %&gt;").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 &gt;null (only on the newly added Row)  when adding new item 
      btnDeleteItem.set_commandArgument(record.ItemName.trim() + '|' + record.ListId + ',' + &gt;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" &amp;&amp; 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, &gt;"D," + record.ElementId + "," + ((record.PerPound == "1") ? "Y" : "N") + "," + txtQty.get_id() + "," + &gt;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 + "," + &gt;((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, &gt;"I," + record.ElementId + "," + ((record.PerPound == "1") ? "Y" : "N") + "," + txtQty.get_id() + "," + &gt;btnDecrementQty.get_id() + "") });
          eventsButton[eventsButton.length] = btnIncrementQty.get_id();
      }
  
      scString = record.SizeChoices;
      scStringArray = scString.split(',');
  
      if (scString != "" &amp;&amp; scStringArray.length &gt; 1) {
          cmbSizeChoices.set_visible(true);
          lblSizeDescription.visible = false;
          cmbSizeChoices.clearItems();
          for(i=0; i &lt; 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 != "" &amp;&amp; record.SizeChoiceID != "0") {
                  var itm = cmbSizeChoices.findItemByValue(record.SizeChoiceID);
                  if (itm != null) itm.select();
              }
              cmbSizeChoices.add_selectedIndexChanged(function (cmbSizeChoices, args) { &gt;ChangeItemSize(cmbSizeChoices, args, record.ElementId) });
              cmbSizeChoices.add_onClientFocus(function (cmbSizeChoices, args) { &gt;SetCurrentCombo(cmbSizeChoices, args) });
              eventsButton[eventsButton.length] = cmbSizeChoices.get_id();
          }
      }
      else if (scString != "" &amp;&amp; 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("&lt;%= grdSelectedList.ClientID %&gt;").get_masterTableView();
      alert('updateGrid');
  
      console.dir(userContext);
      console.dir(result);
  
      tableView.set_dataSource(result);
      tableView.dataBind();
      var grid = $find("&lt;%= grdSelectedList.ClientID %&gt;");
      grid.repaint();
  }
  
  function btAddItemPlus_Clicking(sender, eventArgs) {
      var ajaxManager = $find("&lt;%= RadAjaxManager.GetCurrent(Page).ClientID %&gt;");
      var txtAddItem = $find("&lt;%= txtAddItem.ClientID %&gt;");
      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" &amp;&amp; type != "a") {
          console.log('clicked');
          $(n).children()[0].children[0].click();
      }
  }
  </code></pre>
  
  <p>Markup:</p>
  
  <pre><code>&lt;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"&gt;
  &lt;ClientSettings AllowGroupExpandCollapse="True"&gt;
      &lt;Selecting AllowRowSelect="True" /&gt;
      &lt;Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="493px" /&gt;
      &lt;ClientEvents OnRowClick="grdSelectedList_RowClick" OnRowDataBound="rowDataBound" /&gt;
  &lt;/ClientSettings&gt;
  &lt;MasterTableView DataKeyNames="AccountId, ItemId, ListId, ElementId, DealId" ClientDataKeyNames="AccountId, ItemId, ListId, ElementId, DealId, CategoryName"
      TableLayout="Fixed" GroupLoadMode="Client"&gt;
      &lt;GroupByExpressions&gt;
          &lt;telerik:GridGroupByExpression&gt;
              &lt;SelectFields&gt;
                  &lt;telerik:GridGroupByField FieldName="CategoryName" /&gt;
              &lt;/SelectFields&gt;
              &lt;GroupByFields&gt;
                  &lt;telerik:GridGroupByField FieldName="CategoryName" /&gt;
              &lt;/GroupByFields&gt;
          &lt;/telerik:GridGroupByExpression&gt;
      &lt;/GroupByExpressions&gt;
      &lt;NoRecordsTemplate&gt;
          This list is empty.&lt;br /&gt;
          Click in "Add an Item" or "Browse Aisles" to add items to this list.
      &lt;/NoRecordsTemplate&gt;
      &lt;Columns&gt;
          &lt;telerik:GridBoundColumn FilterControlAltText="Filter CategoryCol column" UniqueName="CategoryCol"
              DataField="CategoryName" Groupable="true" Visible="False"&gt;
          &lt;/telerik:GridBoundColumn&gt;
          &lt;telerik:GridTemplateColumn FilterControlAltText="Filter DescriptionCol column" UniqueName="DescriptionCol"
              HeaderStyle-Width="350px"&gt;
              &lt;ItemTemplate&gt;
                  &lt;div style="width: 350px; clear: both; font-weight: bold; margin-left: -5px;"&gt;
                      &lt;asp:Label ID="lblItemDescription" runat="server" CssClass="blackHyperlink"&gt;&lt;/asp:Label&gt;
                  &lt;/div&gt;
                  &lt;div style="margin-left: -9px;"&gt;
                      &lt;telerik:RadButton ID="btnPriceStatus" runat="server" UniqueName="PriceStatusColumn"
                          OnClientClicking="SuggestSubItems" BackColor="Transparent" ButtonType="LinkButton"
                          CssClass="dealFound" BorderStyle="None"&gt;
                      &lt;/telerik:RadButton&gt;
                  &lt;/div&gt;
              &lt;/ItemTemplate&gt;
          &lt;/telerik:GridTemplateColumn&gt;
          &lt;telerik:GridTemplateColumn UniqueName="QtyCol" HeaderStyle-Width="78px"&gt;
              &lt;ItemTemplate&gt;
                  &lt;div class="divQtyWrapper"&gt;
                      &lt;div class="divPlusMinus" id="qtyMinus"&gt;
                          &lt;telerik:RadButton ID="btnDecrementQty" runat="server" CommandName="DecrementQty"
                              Width="17" Height="20" AutoPostBack="false"&gt;
                              &lt;Image ImageUrl="../Images/btGrdMinus.gif" /&gt;
                          &lt;/telerik:RadButton&gt;
                      &lt;/div&gt;
                      &lt;div class="divQty"&gt;
                          &lt;telerik:RadTextBox ID="txtQty" runat="server" CssClass="txtQtyInput" ViewStateMode="Disabled"&gt;
                          &lt;/telerik:RadTextBox&gt;&lt;/div&gt;
                      &lt;div class="divPlusMinus" id="qtyPlus"&gt;
                          &lt;telerik:RadButton ID="btnIncrementQty" runat="server" CommandName="IncrementQty"
                              Width="17" Height="20" AutoPostBack="false"&gt;
                              &lt;Image ImageUrl="../Images/btGrdPlus.gif" /&gt;
                          &lt;/telerik:RadButton&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/ItemTemplate&gt;
          &lt;/telerik:GridTemplateColumn&gt;
          &lt;telerik:GridTemplateColumn UniqueName="QtyCol" HeaderStyle-Width="105px"&gt;
              &lt;ItemTemplate&gt;
                  &lt;telerik:RadComboBox ID="cmbSizeChoices" runat="server" Width="98px"&gt;
                  &lt;/telerik:RadComboBox&gt;
                  &lt;asp:Label ID="lblSizeDescription" runat="server"&gt;&lt;/asp:Label&gt;
              &lt;/ItemTemplate&gt;
          &lt;/telerik:GridTemplateColumn&gt;
          &lt;telerik:GridTemplateColumn UniqueName="DelCol"&gt;
              &lt;ItemTemplate&gt;
                  &lt;telerik:RadButton ID="btnDeleteItem" runat="server" CommandName="DeleteShoppingListItem"
                      OnClientClicking="ConfirmDeleteItem" Width="18" Height="20" AutoPostBack="false"&gt;
                      &lt;Image ImageUrl="..\Images\icoDeleteRedX.gif" /&gt;
                  &lt;/telerik:RadButton&gt;
                  &lt;asp:HiddenField ID="hidElementId" runat="server" /&gt;
              &lt;/ItemTemplate&gt;
          &lt;/telerik:GridTemplateColumn&gt;
      &lt;/Columns&gt;
  &lt;/MasterTableView&gt;
  </code></pre>
  
  <p></p>