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 how 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>
Submit an article or tip