Aug 05, 2012

jqGrid Inline Editing With jQuery Autocomplete FlexBox

This post explains how to use jQuery FlexBox plugin for Google like auto-suggestion box to edit data in jqGrid. Suppose jqGrid has Country column and we want to give auto-suggestion box during editing. When user enters letter, It will auto-populate related country names.

jqgrid flexbox


We have to include jquery UI, FlexBox and jqGrid css files.

		<link rel="stylesheet" type="text/css" href="css/main.css" />		
		<link rel="stylesheet" type="text/css" href="css/jquery.flexbox.css" />
		<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.1.custom.css" />
		<link rel="stylesheet" type="text/css" href="css/ui.jqgrid.css" />
		<style type="text/css">
		#gridMain td.countryHolder{
		#gridMain .ffb{
		margin:0 auto;

Also, need to include jquery, jquery ui, FlexGrid, jqgrid locale and jqgrid js files.

		<script type="text/javascript" src="js/jquery/1.4.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.flexbox.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.20.min.js"></script>
		<script type="text/javascript" src="js/grid.locale-en.js"></script>
		<script type="text/javascript" src="js/jquery.jqGrid.min.js"></script>
		<script type="text/javascript" src="js/countries.js"></script>

countries.js file has country data in following format:

var countries = {};
countries.results = [
	{id:'AS',name:'American Samoa'},
	{id:'AG',name:'Antigua & Barbuda'},
]; = countries.results.length;

See following for jqGrid data:

var mydata=[

HTML Structure:

<table id="gridMain"></table>
<div id="pagernav"></div>
<div id="testData" style="margin:0 auto"></div>
<input type="button" id="btnGetData" value="Get Updated Info" />	

testData div is used to retrieve the latest data from jqGrid.

Read Also:

jqGrid: Drag and Drop columns (Reordering) with Javascript Array


  var lastsel2;
    datatype: "local",
    data: mydata,
    pager: '#pagernav',
    sortname: 'id',
    sortorder: "desc",
    sortable: true,
    height: 300,
	localReader : {id:'id'},
    editurl: 'clientArray',
	onSelectRow: function(id){
      if(id && id!==lastsel2){
    colNames: ['Inv No', 'Country', 'Amount', 'Tax'],
colModel:[ {name:'id',index:'id',key: true, width:40},
 {name:'Country',index:'Country', width:300, classes:"countryHolder", editable: true
 {name:'amount',index:'amount', width:80, align:"right", editable: true},
 {name:'tax',index:'tax', width:80, align:"right", editable: true}
    caption: "FlexBox"
jQuery("#gridMain").jqGrid('navGrid', '#pagernav', {add:false,edit:false,del:false});

We defined country colum edittype = custom and defined myelem to get custom control and myval to get value in editoptions. In myelem method, FlexBox is configured.

function myelem(value,options){
   var $ret = $('<div id="country"></div>');
        $ret.flexbox(countries, {  
        initialValue: value,         
        paging: {  
            pageSize: 5  
   return $ret;

function myval(elem){
    return  $('#country_input').val();

You can configure more as per your requirement, check following:

FlexBox documentation

Practical Usage:

For simplicity, I took local data. You can consume web service to get JSON data for grid and auto-complete list, modify grid data and pass to web service to save it. If you want to get the latest data from the grid, see following:

$("#btnGetData").click(function ()
var latestData = $('#gridMain').jqGrid('getRowData');
var record,tbl = '<table style="border:2px solid gray;margin:0 auto" cellspacing="0" cellpadding="3" >';
for (row in latestData){
record = latestData[row];
tbl += '<tr>';
for (cell in record)
tbl += '<td style="border:1px solid gray"> ' +record[cell] + '</td>';
tbl += '</tr>';
tbl += '</table>';

Hope, It helps.