Delete all rows in a RadGrid with Javascript

12 posts, 0 answers
  1. Al
    Al avatar
    2 posts
    Member since:
    Mar 2008

    Posted 10 Feb 2009 Link to this post

    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.




  2. Roatin Marth
    Roatin Marth avatar
    65 posts
    Member since:
    Nov 2007

    Posted 10 Feb 2009 Link to this post

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

    That will empty your table of all its data rows.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Al
    Al avatar
    2 posts
    Member since:
    Mar 2008

    Posted 11 Feb 2009 Link to this post

    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'





  5. Roatin Marth
    Roatin Marth avatar
    65 posts
    Member since:
    Nov 2007

    Posted 11 Feb 2009 Link to this post

    Yep, works for me.

    Check that $find("<%=  RadGrid1.ClientID %>") is actually returning your grid instance in the client.
  6. Francisco Jose CEREZO RIUS
    Francisco Jose CEREZO RIUS avatar
    2 posts
    Member since:
    Jun 2008

    Posted 13 Feb 2009 Link to this post

    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...
  7. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 13 Feb 2009 Link to this post

    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.
  8. Francisco Jose CEREZO RIUS
    Francisco Jose CEREZO RIUS avatar
    2 posts
    Member since:
    Jun 2008

    Posted 19 May 2009 Link to this post

    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.
  9. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 21 May 2009 Link to this post

    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.
  10. kiwo
    kiwo avatar
    17 posts
    Member since:
    Apr 2007

    Posted 18 Aug 2009 Link to this post

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

    Posted 20 Aug 2009 Link to this post

    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.
  12. kiwo
    kiwo avatar
    17 posts
    Member since:
    Apr 2007

    Posted 20 Aug 2009 Link to this post

    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!
  13. Tsvetoslav
    Admin
    Tsvetoslav avatar
    1823 posts

    Posted 21 Aug 2009 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017