This is a migrated thread and some comments may be shown as answers.

Add new row onclient (javascript)

5 Answers 82 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Ron asked on 10 May 2011, 04:13 PM
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

5 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 13 May 2011, 09:37 AM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Ron
Top achievements
Rank 1
answered on 18 May 2011, 04:28 AM
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.
0
Martin
Telerik team
answered on 20 May 2011, 03:43 PM
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

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Varun
Top achievements
Rank 1
answered on 18 Nov 2013, 09:14 AM
How to Add New Empty Row in RadGrid using Javascript ?
Please provide one example,,,
0
Angel Petrov
Telerik team
answered on 21 Nov 2013, 07:32 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Grid
Asked by
Ron
Top achievements
Rank 1
Answers by
Martin
Telerik team
Ron
Top achievements
Rank 1
Varun
Top achievements
Rank 1
Angel Petrov
Telerik team
Share this question
or