Form Editing

Thanks for this comprehensive documentation. I am a newbie to jQuery and just started to use jqGrid for some project, its really wonderful.

I have a question, basically I want to pull out the select tag options upon an ajax request, I can do this on page load, but I am unable to do this in the form editing mode.. For example, if i have 2 columns in the grid with both set to editable and as drop downs. Now when on the edit form, if I choose some value in the first select drop down, the second should filter out subset values of the first and not display all generic items.. How do I achieve this?

I tried a generic event handler for select tag like $('select').bind('change',function(){}); this works on all select drop downs that are on the page but not on the ones that appear on the editing form. please help. Thanks

I want to use my own form. I like your box but I want to load my own form (Zend_Form generation). Is it possible?

I need use form edit. How can I get response when I submit form edit from server site. There had afterComplate and afterSubmit event, but I don't know how to use this event. Is there had some example for me? And is it possible when edit field type is select and set default select option? Thanks

Example for form edit:

//define handler for 'editSubmit' event
var fn_editSubmit=function(response,postdata){
 var json=response.responseText; //in my case response text form server is "{sc:true,msg:''}"
 var result=eval("("+json+")"); //create js object from server reponse
 return [result.sc,result.msg,null]; 
}

//define edit options for navgrid
var editOptions={
 top: 50, left: "100", width: 500  
 ,closeOnEscape: true, afterSubmit: fn_editSubmit
}

//create navgrid with defined options
//table is $("#table").jqGrid({...,editurl:'server.php'})
table.jqGrid('navGrid',"#navgrid",
     {add:false, view:false, del:false,edit:true}
     ,editOptions /* Our edit options with handler */
     ,{} /*add options*/
     ,{} /*delete options*/
     ,{multipleSearch:false}
     ,{closeOnEscape:true} 
);

Is it possible to do client-side editing w/o posting to the server? I'd like to allow users to manipulate data at will and then post all changes to the server at once.

Thanks

I'm trying to use the afterSubmit event but I'm not sure how the editurl.php script is supposed to format the data back to the event. Does anyone have an example? Is it supposed to be an XML response, JSON response? Can someone just send a snippet of php code showing the result of editurl.php sending the response back to afterSubmit. Thanks

I figured it out. For those people struggling here's the php snippet for a deletion:

              $deleted_rows = mysql_affected_rows();
              if ($deleted_rows >= 1) {
                      $status = "success";
                      $message = "deletion succeeded";
              } else {
                      $status = "fail";
                      $message = "deletion failed";
              }
              $s = $status.';'.$message.';'.'';
              print $s;

and here's the javascript:

{closeOnEscape:true, afterSubmit:function( data_from_server, array_data) { var result =data_from_server.responseText.split(”;”); if (result[0] == “fail”) { return [false,result[1]] } else { return [true,,result[2]];

              }
      }''

I am using the navigation buttons to do add/edit/delete. But am not sure how to set the width of the dialog boxes that popup. I also did a double click edit, and it sets the width, and if I open add after double clicking it retains the width, but if I click the nav add button I get a box too small in width. Ideas?

Re: jQuery(”#grid_id”).jqGrid('GridToForm', rowid, formid );

For completeness' sake: instead of the form ID you have to put in the form *selector*. Eg, '#form_id' instead of 'form_id'

Hope this helps, -Peter

I wonder if I can load ajax select options that depend on other column value ?

For example: when the value of column A is “Asia”, I hope that the select options of column B will be “China”,”Japan”,”Korea”; when the value of column A is “Europe”, I hope that the select options of column B will be “U.K., France, Italy”.

I read the document of form editing, and I found that I cannot load ajax options from server more than once.

Hi All,

When I do FormToGrid how can I trigger submit to that server - the same as if it was done by built in form?

Thanks!

i wonder if i can diy my add dialog, for example, i add fileupload button in add dialog?

Hello, Very new to the grid so please correct me if I haven't found the right solution. These grids are great and appreciate all of the hard work done so far.

In IE7, I have recreateForm:true but it's not firing off to my dataurl after an initial loading of the form(Chrome, FF all are working). I've tried adding something to the end of my dataurl like + Math.random() etc but still having no luck. Is there a better way to use recreateForm:true and not cache the dataurl call?

What I've messed w/ so far was adding: cache: false in my editoptions for the colModel

then in grid.common.js in (createEl() case:'select' inside the jquery ajax call: cache: options.cache

Again I'm new so any advice would be great.

Hi

I am trying to get afterSubmit event to fire without much success…

My grid definition is as follows

   jQuery("#optbl").jqGrid({
                         url:'getusersxml.php',
                         datatype: "xml",
                         colNames:cols,
                         colModel:cm,
                         rowNum:25,
                         rowList:[10,20,30,40,50],
                         pager: jQuery('#opnav'),

                         height:'300px',
                         sortname: 'id',
                         recordpos: 'left',
                         viewrecords: true,
                         sortorder: "desc",
                         editurl:"edituser.php",
                         afterSubmit:function(response,postdata)
                         {
                                    alert("Event Captured !!!!");
                         }
                         .... 
          });

Shouldnt I atleast get the alert box after submitting the form ?? What am I doing wrong ? Please help.

The onclickSubmit event documentation is wrong for this event during edit processing. There are two parameters, the first is a equivalent to “this”, the second is the postdata submitted to the event.

I am a new jqgird user from china,now I meet a problem.let me just take the “my first grid” as an example.in the grid,we have 7 column (Inv No ,Date,Amount,Tax,Total,Notes)，but in the Add Record dialogue,i only need 2 cloumns(Inv No,Date).what should i do?

Question: if I user the GridToForm option, what happens when I submit the edit form? Is the server called automatically to trigger the record update, or I must run the server update for myself? If the answer is the second one, how do I proceed?

I am asking it bc so far I couldn't make my custom edit form to save edited data in my DB…

thanks Gabriel

Question: I made a big table, it works, but there are disadvantages, I vyzvvayu line editing two methods

                                      ondblClickRow: function(id) 	{
				if (id && id != lastSel) {var gr = jQuery("#le_table").jqGrid('getGridParam','selrow'); 
				var ttop = 0;
				var html = document.documentElement;
				ttop = html.scrollTop;
				if( gr != null ) 
				jQuery("#le_table").jqGrid('editGridRow',gr,{top:ttop,reloadAfterSubmit:true,closeAfterEdit:true}); 
				else alert("select the string!");
				lastSel = id;
										}
											}

and

jQuery(”#le_table”).jqGrid('navGrid','#le_tablePager', {edit:true,add:false,del:true,refresh:true}, options {jqModal:true,modal:true,top:?????,left:500,reloadAfterSubmit:true,closeAfterEdit:true}, edit options

		{height:500,width:980,reloadAfterSubmit:true,closeAfterEdit:true}, // add options 
		{reloadAfterSubmit:true,jqModal:true}, // del options 
		{closeOnEscape:true, multipleSearch:true, closeAfterSearch:true} // search options 

When I select a row, the window is positioned at the top of the screen, although the line for a few screens below. This is inconvenient. How can I make that window tied to the left of my browser, the current position of the screen?

by reviewing the src, customized form parameters can be set using following means: 1. add FormElement and customelement to the added form fields 2. each added form fields should have name attribute

Hi,

somebody have a example with form Editing and mysql?

I realy apreciate your help

thanks and sorry for my English

http://shasoft.com/jqGridDeleteError.png Demo “Live Data Manipulation” ⇒ “Delete Row”

1. Click button “Delete Selected”
2. Click button “Delete”
3. message: Error Uncaught TypeError: Object 9 has no method 'split'

Browse Google Chrome 15.0.874.106

?

Hi everyone,

I need to change the Delete message that is displayed when we try to delete a row.

can anyone help me how to do that.

A quick reply will be really appreciated.

delGridRow seems to contain BUG. In 8008 the line toarr = postdata.split (”,”); statement, postdata used here is an array, and how to split

Hi everyone,i made a Event 'afterComplete ' in 'edit' like this:

{ height : 280, reloadAfterSubmit : true, closeAfterEdit : true, afterComplete : function(response, postdata, formid) { try to do some thing by response(json or txt) } },'' but it dosn't work. I try to return txt or json ,the 'response' can't get still。 how can i get a response from server by afterComplete：function?