How to add a new row in a group in jqGrid?

Question

I am totally new to jqGrid. I am populating the grid from an array with datatype:local.

var data=[
  {date : "01/01/2012",starttime:"10:15",endtime:"11:15",workfunction:"MA"},
  {date : "01/02/2012",starttime:"11:30",endtime:"12:30",workfunction:"CA"},
  {date : "01/03/2012",starttime:"13:30",endtime:"14:30",workfunction:"FC"},
  {date : "01/01/2012",starttime:"10:15",endtime:"11:15",workfunction:"MA"},
  {date : "01/01/2012",starttime:"11:30",endtime:"12:30",workfunction:"CA"},
  {date : "01/02/2012",starttime:"13:30",endtime:"14:30",workfunction:"FC"},
  {date : "01/02/2012",starttime:"10:15",endtime:"11:15",workfunction:"MA"},
  {date : "01/03/2012",starttime:"11:30",endtime:"12:30",workfunction:"CA"},
  {date : "01/03/2012",starttime:"13:30",endtime:"14:30",workfunction:"FC"}
  ];

$("#gridTable").jqGrid({
    data : data,
    editurl:"clientArray",
    datatype: "local",
    height : 250,
    colNames: [' ','Date','Start Time','End Time','Work Function'],
    colModel : [
                {name: 'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions',formatoptions:{keys:true}},
                {name: 'date',index:'date',width: 100,sorttype:'date',editable:true,editoptions : {
                    dataInit : function(element){
                        formatDatepicker(element,data);

                    }
                }},
                {name: 'starttime',index:'starttime',width: 100,sorttype:'date',editable:true},
                {name: 'endtime',index:'endtime',width: 100,sorttype:'date',editable:true},
                {name: 'workfunction',index:'workfunction',width: 100,sorttype:'date',editable:true,edittype:"select",editoptions:{value:"MA:MA;CA:CA;FC:FC"}},
                ],
                pager: "#gridPager",
                caption : "Weekly Details",
                grouping : true,
                groupingView : {
                    groupField:['date']
                }

}).navGrid("#gridPager",{edit:true,add:true,del:false},
        //edit properties
        {
    zIndex : 950,

        }
);

Given above is the grid I am using. I am grouping the grid according to dates, and I am using jsp as the server side technology. My questions are:

1. Can we add a row to a group without submitting it to the server.
2. When a new row is created with a new date, will a new group form.
3. Can we edit multiple rows and submit all at once.

Answer 1

let me be sure if i understood you right...1. you want to add a row to grid but dont want to submit the data to server? it is possible...2. you have to be more clear on this requirement. 3. yes it is possible to take all the edit data of multiple rows and send the data to server.

I'll start with 3.

you can use multiselect: true here, its like the easiest option. Select the rows which you want to edit and Implement onSelectRow with a function which will make your rows editable on selecting them.

and then you can have a button which will take your edited rows data to server.

how to make rows editable on selecting them

onSelectRow: function(id){ 
jQuery('#grid').editRow(id, true); }

or there's another alternative keep your all rows in editable mode

gridComplete:OnGridComplete, //add this to your Jqgrid parameters

javascript function

function OnGridComplete(){

            var $this = $(this), rows = this.rows, l = rows.length, i, row;
            for (i = 0; i < l; i++) {
                row = rows[i];
                if ($.inArray('jqgrow', row.className.split(' ')) >= 0) {
                    $this.jqGrid('editRow', row.id, true);
                }
            }

        }

and how to take edited data to server just on one click, see my answer

https://stackoverflow.com/a/11662959/1374763

and now with you first question

you should change the editUrl to clientarray,

jQuery("#grid_id").jqGrid('saveRow',"rowid", false, 'clientArray');

check this link and go to saveRow parametrs, for more info

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:inline_editing