Yii Framework Forum: How to add row to GridView widget with JavaScript - Yii Framework Forum

Jump to content

Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

How to add row to GridView widget with JavaScript Rate Topic: ***** 1 Votes

#1 User is offline   Stephen51 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 61
  • Joined: 09-May 12

Posted 22 June 2012 - 02:59 PM

Is there a way to add a row to a GridView-generated table with JavaScript without reloading the page? I don't want to save the data to the database. I just want to add a row to a table.
0

#2 User is offline   rookie84 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 114
  • Joined: 16-November 11

Posted 22 June 2012 - 10:55 PM

Yes you can do it:
<a href="#" class="add-row">Add Row</a>

<script>
    $(document).ready(function(e) {
       var $table = $('#milestone-grid table tbody');
       $('.add-row').click(function(e) {
         //If it is odd then the next one should be even.. 
         var number = (($table.find('tr').size())%2 === 0)?'odd':'even';
         var html = '<tr class="'+number+'"> <td>Added</td> </tr>';
         $table.append(html);
         return false;
       });
    });
    
</script>


where #milestone-grid is the table ID you need to replace.
0

#3 User is offline   Stephen51 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 61
  • Joined: 09-May 12

Posted 23 June 2012 - 08:08 AM

That will do. Thanks!
0

#4 User is offline   Julie L. 

  • Newbie
  • Yii
  • Group: Members
  • Posts: 2
  • Joined: 27-December 12

Posted 21 January 2013 - 03:13 PM

That worked great! Thank you!

What if I want to save the data? I've been reading all the editable documentation, but it seems to use detailview and not gridview and I can't seem to bridge this in my mind.

I have an editable gridview and that is working great for updates. I would like to have a button below the editable rows that says "Add new" and then pop in a new row of input fields (that worked great with the code above) with a Create/Add button that would allow the user to save the new record. I can't seem to get this working.

As a workaround, I will pop up a detailview for a new record and refresh the gridview, but would like to make it more streamlined by keeping the "add" inline.

Any help would be appreciated.
0

#5 User is offline   salsero 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 80
  • Joined: 05-September 12
  • Location:Italia

Posted 15 April 2013 - 12:01 PM

Hello,
in my experience i have obteined the same result as:
var $table = $("#id-table").children('table');
var $tbody = $table.children('tbody');
$tbody.append('<tr> <td>Some Text</td> <td>Some Text</td>  </tr>');


Best regards!!!
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users