Delete all rows in a RadGrid with Javascript

[Al]

Hello.

I need to delete all rows of a datagrid from client side. I have the following javascript code:

******************************************
            var masterTable = $find("<%=  RadGrid1.ClientID %>").get_masterTableView();

            var numRows = masterTable.get_dataItems().length;
            for (i = numRows-1; i >= 0 ; i--)
            {
                masterTable.deleteItem(masterTable.get_dataItems()[i].get_element());
            }

******************************************

In the begining it worked fine, but if I put the radgrid into an updatePanel, it only works for the first row to delete. With the second row, I get this error:

'this.get_element().tBodies' is null or is not an object

I need the radgrid into an update panel in order to perform another tasks server-side using Ajax.

Any idea? Is there another way to delete all rows in a radgrid client-side?

Thanks in advance.

[Roatin Marth]

var view = $find("<%=  RadGrid1.ClientID %>").get_masterTableView();
view.set_dataSource([]);
view.dataBind();

That will empty your table of all its data rows.

[Al]

Hi Nizar, thanks for your answer.....

I tried your code but it seems as if the MasterTableView doesn't support de set_dataSource method since I get this error:

'Object doesn't support this property or method'

[Roatin Marth]

Yep, works for me.

Check that $find("<%=  RadGrid1.ClientID %>") is actually returning your grid instance in the client.

[Francisco Jose CEREZO RIUS]

OK, the problem was my version of the RadControls. I updated to the last version and now I don't get the error.
But I have another problem. This code actually deletes the rows in my grid client-side, but in a following round-trip to ther server, the datasource object still contains the rows, so they are rendered again...

[Tsvetoslav]

Hi Francisco Jose CEREZO RIUS,

If you want to delete the records not only from the client side but from the underlying data source as well, you should do it through web service. In your code behind implement a [WebMethod] that deletes all the records, call it from client script and rebind the grid.

Hope this helps.

Regards,
Tsvetoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Francisco Jose CEREZO RIUS]

Hi, I'm trying this solution, but as the WebMethod must be static, I can't access to the datagrid object so I can't delete all its records and rebind it. In addition, I need to call some methods of another class to check some restrictions, but I have the same problem, the instance of this object is not accessible by the WebMethod.

Any idea?

Thanks in advance.

[Tsvetoslav]

Hi Francisco,

To delete the records from the database you do not need the grid object. In addition, if you should use some methods of another class you can make them static as well. The idea behind the web method call is to delete the records from the very database itself, not just in the browser, so that the client state is consistent with the actual state of the grid.

I hope this information helps.

All the best,
Tsvetoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[kiwo]

How do I delete all rows from the grid, that has GroupByExpressions defined?
Your code doesn't work in this scenario...

[Tsvetoslav]

Hello Mikhail,

Did you try the following code:

            function deleteRows() {

                var tableView = $find('<%=RadGrid1.ClientID %>').get_masterTableView();
                var dataItems = tableView.get_dataItems();

                for(var i=0; i < dataItems.length; i++)
                {

                    tableView.deleteItem(dataItems[i].get_element());
                }

            }

When AllowAutomaticDeletes is set to true for the master table view, the rows will be automatically deleted by the above code. If you are handling the database operations manually, you need to attach an event handler to the DeleteCommand event of the grid, which will be throw for each item by each call to tableView.deleteItem(....) on the client. In the event handler you should implement your database operations logic.

I hope this information helps.

All the best,
Tsvetoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[kiwo]

Hello Tsvetoslav ,
thanks for your answer.

I already have these items deleted in my database with web service call, so I don't need any requests to server in my scenario.
Your code works fine, except the fact, that it posts back the data to server. I don't need this at all, so I need the code that is similar to the one Posted on Feb 10, but which works fine with GroupByExpressions on.

Thanks!

[Tsvetoslav]

Hello kiwo,

RadGrid does not support grouping on the client, therefore there is no way that you can remove grouping only with javascript. You can call the table view's ungroupColumn('ColumnUniqueName') method from your javascript handler but it will make a postback on the server. So in any case a round-trip to the server is necessary for the ungrouping to be achieved.

Regards,
Tsvetoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.