I'm a jquery/jqgrid newbie here and I have a client that is using a jqgrid to list the job details on auto repairs. Right now, they're using the modal method of editing and adding new job details, but they'd rather use the inline functions. I've managed to convert the grid the best I can, but I can't seem to get it working properly. Right now, they can edit rows and delete rows using the inline function but when they go to add a new row, it still pops up the modal dialog box for adding the row. I suspect that the problem is somewhere in the $("#list").navGrid( code so I tried changing "navGrid" to "inline" but then the buttons for adding and deleting a row disappear. I've tried to simply take the tutorial example for inline grids and customize it to our data structure and sources, but since I also have auto complete and text resizing scripts running on the grid, it's difficult to customize the example code with these features without breaking the grid altogether. (I'm not even sure h ow I got it all to work in the first place since this was my first foray into the world of jquery or jqgrid...I just kept trying different things until I got it working...lol) Anyway, here's the code for the grid as it stands now. Any help would be greatly appreciated. <script> function autocomplete_element(value, options) { // creating input element var $ac = $('<input type="text"/>'); // setting value to the one passed from jqGrid $ac.val(value); // creating autocomplete $ac.autocomplete({source: "editGrid.cfc?method=fnAutocomplete"}); // returning element back to jqGrid return $ac; } function autocomplete_value(elem, op, value) { if (op == "set") { $(elem).val(value); } return $(elem).val(); } $(document).ready(function() { var mkinline $("#list").jqGrid( { url:'editGrid.cfc?method=getUsers', //CFC that will return the users datatype: 'json', //We specify that the datatype we will be using will be JSON colNames:['DetailID', 'ProjectID','Qty.','Description','Unit Price','Total Cost'], //Column Names /* The Column Model to define the data. Note you can make columns non sortable, specify width, alignment, etc. We also specify the editoptions, edittype=text shows a nice textbox for inline edit. We have also specified Edit Rules, to say which fields are required/not required for add/edit */ colModel :[ {name:'DetailID', index:'DetailID', align:'right', hidden:true, editable:true}, {name:'ProjectID', index:'ProjectID', width:25, hidden:true, editable:true}, {name:'Quantity', index:'Quantity', editable:true, width:50, align:'right', edittype:'text', editoptions: {defaultValue:'1'}}, {name:'TaskName', index:'TaskName', editable:true, width:450, align:'left', edittype: 'custom', editoptions: {'custom_element' : autocomplete_element, 'custom_value' : autocomplete_value}}, {name:'UnitPrice', index:'UnitPrice', editable:true, width:100, align:'right'}, {name:'ExtendedPrice', index:'ExtendedPrice', editable:false, width:100, align:'right'} ], onSelectRow: function(id){ if(id && id!==mkinline){ jQuery('#list').saveRow(mkinline); jQuery('#list').editRow(id,true); mkinline=id; } }, pager: $('#pager'), //The div we have specified, tells jqGrid where to put the pager rowNum:20, //Number of records we want to show per page rowList:[], //Row List, to allow user to select how many rows they want to see per page sortorder: "asc", //Default sort order sortname: "DetailID", //Default sort column jqModal: false, viewrecords: false, //Shows the nice message on the pager imgpath: '/js/jquery/css/start/images', //Image path for prev/next etc images caption: 'Project Details', //Grid Name height:'auto', //I like auto, so there is no blank space between. Using a fixed height can mean either a scrollbar or a blank space before the pager width:823, mtype:'GET', recordtext:'', //On the demo you will notice "7 Total Records" - The Total Reocrds text comes from here pgtext:'', //You notice the 1/3, you can change the /. You can make it say 1 of 3 editurl:"editGrid.cfc?method=addeditUser", //The Add/Edit function call toolbar:[false,"top"], //Shows the toolbar at the top. We will use it to display user feedback //Things to do when grid is finished loading loadComplete:function(){ //We get the Userdata for the grid. var recorddata = $("#list").getUserData(); //show the msg in the toolbar $("#t_list").html(recorddata.MSG); }, //The JSON reader. This defines what the JSON data returned from the CFC should look like jsonReader: { root: "ROWS", //our data page: "PAGE", //current page total: "TOTAL", //total pages records:"RECORDS", //total records userdata:"USERDATA", //Userdata we will pass back for feedback cell: "", //Not Used id: "0" //Will default to first column } } ); //Set toolbar text color to blue $("#t_list").css("color","blue");
//Here we use the navGrid to display the Search button with label Filter, and enable the add/edit/delete buttons. $("#list").navGrid( "#pager",{add:true,edit:false,addtext:"",deltext:"",del:true,search:false,refresh:true},//We will specify custom search/refresh buttons {reloadAfterSubmit:true,afterSubmit:commonSubmit,closeAfterEdit:true,width:"400"},//Options for the Edit Dialog {reloadAfterSubmit:true,afterSubmit:commonSubmit,closeAfterAdd:false,width:"400"},//Options for the Add Dialog {url:"editGrid.cfc?method=delUser",closeAfterDelete:true,reloadAftersubmit:false,afterSubmit:commonSubmit,caption:"Delete",msg:"Delete selected",width:"400"}//Options for Del Dialog ).navButtonAdd('#pager',{caption:"",title:"Reload Form",buttonimg:'/js/jquery/css/start/images/refresh.gif',onClickButton:function(id)//The refresh button { //We reset our search form (clear any form values) resetForm(); //We reset the Grid URL as we change it for the search in the gridSearch function below. This resets the grid to its original state $("#list").setGridParam( { url:"editGrid.cfc?method=getUsers", page:1 } ).trigger("reloadGrid");//Reload grid trigger } }); } );//End document.ready function //This function will perform the search for us function gridSearch() { //Get the values from the search form. Very simple using jquery. var pid = $("#ProjectID").val(); var qty = $("#Quantity").val(); var tn = $("#TaskName").val(); var up = $("#UnitPrice").val(); var ep = $("#ExtendedPrice").val(); //We set the grid URL and pass in some extra params for the search. $("#list").setGridParam( { url:"editGrid.cfc?method=getUsers&ProjectID="+pid+"&Quantity="+qty+"&TaskName="+tn+"&UnitPrice="+up+"&ExtendedPrice="+ep, page:1 } ).trigger("reloadGrid");//Reload grid trigger $("#filter").jqmHide();//Hide our search/filter window dialog return false } //This function is called after an add/edit happens. We just take the MSG from the response and display it in the toolbar. //Note currently, since we reload the grid after the add/edit, the msg will only be visible for a short second or so function commonSubmit(data,params) { var a = eval( "(" + data.responseText + ")" );//Convert returned string into JSON $("#t_list").html(a.USERDATA.MSG); resetForm();//Clear our search form return true; } //Clear our form function resetForm() { window.location.reload(false); } </script> ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~| Order the Adobe Coldfusion Anthology now! http://www.amazon.com/Adobe-Coldfusion-Anthology/dp/1430272155/?tag=houseoffusion Archive: http://www.houseoffusion.com/groups/cf-talk/message.cfm/messageid:359496 Subscription: http://www.houseoffusion.com/groups/cf-talk/subscribe.cfm Unsubscribe: http://www.houseoffusion.com/groups/cf-talk/unsubscribe.cfm