Add new row onclient (javascript)

[Ron]

Hi,

Can you point me in the right direction on how to add a new blank row to radgrid on the client using javascript?
Here's what i have so far. Onclient button click I call a web service to insert a blank row into database,
then on success of the web service call I rebind the grid on client. Here is the code: There's also a screen shot to give you a better idea.

  function updateChanges() {
             ItemsService.AddNewItem(updateGrid());
         }
         function updateGrid(result) {
            var masterTable = $find("<%= grdInvoiceItems.ClientID %>").get_masterTableView();
            masterTable.fireCommand("RebindGrid");

//             $find("<%= grdInvoiceItems.ClientID %>").get_masterTableView().rebind();
         }

Thanks,
Ron

[Martin]

Hello Ron,

When you call a webservice method, the last parameter should be a pointer to a call back function. Therefore "updateGrid" function should be specified without parentheses:

function updateChanges()
{
      ItemsService.AddNewItem(updateGrid);
}

I am also attaching a small sample that demonstrates how to achieve the desired functionality.

I hope this helps.

Greetings,
Martin
the Telerik team

[Ron]

Thank you kindly for you reply, but I was unable to emplement your sample it just did not work for me maybe it's because im using sql database. However I think I'm really close to making this work with your assitance. When I call my function to insert a new row and rebind to refresh radgrid everythinig works fine expect the inserted row is just a plain grey row and not the row i'm expecting which has textbox controls. I will attach a screen shot so you can get a better idea aswell as the browse source code. In the browser source you can see where there are 4 rows but the forth row has a different class and I think this is why I'm not getting the row im expecting.

function updateChanges() {
             ItemsService.AddNewItem(updateGrid);
         }
         function updateGrid(result) {
             var tableView = $find("<%= grdInvoiceItems.ClientID %>").get_masterTableView();
             tableView.set_dataSource(result);
             tableView.rebind();
         }

Web service

[WebMethod(EnableSession = true)]
   public List<InvoiceItemsDetails> AddNewItem()
   {
       Invoice.InsertInvoiceItems(string.Empty, string.Empty, 0, 0,
          0, 0, 0, 0, 1001);
       return Invoice.GetInvoiceItems(1001);
   }

 
Thanks,
Ron.

[Martin]

Hello Ron,

You would need to put the newly inserted item into edit mode to achieve the desired output. However, since you are using InPlace editing, you will have to rebind your grid one more time. Attached is a modified version of the project that demonstrates the approach in question.

I hope this helps.

Regards,
Martin
the Telerik team

[Varun]

How to Add New Empty Row in RadGrid using Javascript ?
Please provide one example,,,

[Angel Petrov]

Hello Varun,

In order to insert a new row in the grid it should be included in it's data source. The approach for achieving this depends on the type of binding. That said I would like to ask you to explain in detail what are the requirements and how is the grid configured so we could advice you further.

Regards,
Angel Petrov
Telerik