0

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.
DisplayName
  • 3,093
  • 5
  • 35
  • 42
dinupvishal
  • 25
  • 1
  • 7

1 Answers1

0

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

Community
  • 1
  • 1
Piyush Sardana
  • 1,748
  • 4
  • 19
  • 33
  • sorry piyush, but can i know where to write this jQuery("#grid_id").jqGrid('saveRow',"rowid", false, 'clientArray'); is it during the onclickSubmit button or sumting like that – dinupvishal Jul 26 '12 at 06:45
  • see this answer for further help, i hope this will help you http://stackoverflow.com/questions/11052643/jqgrid-inlineedit-with-editurl-clientarray-can-not-save – Piyush Sardana Jul 26 '12 at 07:08
  • to do this,which editing is better? inline or form.. could u suggest me with this? – dinupvishal Jul 26 '12 at 13:36
  • this guy is doing inline editing you can see, http://stackoverflow.com/questions/11052643/jqgrid-inlineedit-with-editurl-clientarray-can-not-save try this, if it doesnt work for you then let me know...but try to implement it first... – Piyush Sardana Jul 26 '12 at 15:49
  • hai piyush... got one doubt..on adding new row. using saveRow,how will it save a new row. where should i write this saveRow param. can u help me with this?? – dinupvishal Jul 30 '12 at 19:45
  • something like this $("#list4").jqGrid('navButtonAdd','#pager14',{ caption:"Save changes  ",buttonicon:"ui-icon-disk", onClickButton:function(){ var id =//get the id of selected tow here $('#list4').jqGrid('saveRow',id);//make sure that you specify url here as clientarray if you are saving to grid only } }); check this link for more help http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3ainline_editing#saverow – Piyush Sardana Jul 31 '12 at 03:07