working jqGrid Example

by Raul Corona Xolaltenco

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<link rel="stylesheet" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.css">
<link rel="stylesheet" href="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/jquery.multiselect.filter.css">
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/src/jquery.multiselect.js"></script>
<script src="http://www.erichynds.com/examples/jquery-ui-multiselect-widget/src/jquery.multiselect.filter.js"></script>

<select name="DdlEstado"  multiple="multiple" >
		<option value="Aguascalientes">Aguascalientes</option>
		<option value="Baja_California">Baja California</option>
		<option value="Baja_California Sur">Baja California Sur</option>
		<option value="Campeche">Campeche</option>
		<option value="Coahuila_de_Zaragoza">Coahuila de Zaragoza</option>
		<option value="Colima">Colima</option>
		<option value="Chiapas">Chiapas</option>
		<option value="Chihuahua">Chihuahua</option>
		<option value="Distrito_Federal">Distrito Federal</option>
		<option value="Durango">Durango</option>
		<option value="Guanajuato">Guanajuato</option>
		<option value="Guerrero">Guerrero</option>
		<option value="Hidalgo">Hidalgo</option>
		<option value="Jalisco">Jalisco</option>
		<option value="México">México</option>
		<option value="Michoacán_de_Ocampo">Michoacán de Ocampo</option>
		<option value="Morelos">Morelos</option>
		<option value="Nayarit">Nayarit</option>
		<option value="Nuevo León">Nuevo León</option>
		<option value="Oaxaca">Oaxaca</option>
		<option value="Puebla">Puebla</option>
		<option value="Querétaro">Querétaro</option>
		<option...

CSS

.cvteste {
            background-color: green !important;
        }

JavaScript

var data = [[1, "Aguascalientes", "", "02200220", "OPEN"],
            [2, "Baja California", "", "77733337", "ENTERED"],
			[3, "Baja California Sur", "", "77733337", "ENTERED"],
			[4, "Campeche", "", "77733337", "ENTERED"],
			[5, "Puebla de Zaragoza", "", "77733337", "ENTERED"],
			[6, "Colima", "", "77733337", "ENTERED"],
			[7, "Chiapas", "", "77733337", "ENTERED"],
			[8, "Chihuahua", "", "77733337", "ENTERED"],
			[9, "Distrito Federal", "", "77733337", "ENTERED"],
			[10, "Durango", "", "77733337", "ENTERED"],
			[11, "Guanajuato", "", "77733337", "ENTERED"],
			[12, "Guerrero", "", "77733337", "ENTERED"],
			[13, "Hidalgo", "", "77733337", "ENTERED"],
			[14, "Jalisco", "", "77733337", "ENTERED"],
			[15, "México", "", "77733337", "ENTERED"],
			[16, "Michoacán de Ocampo", "", "77733337", "ENTERED"],
			[17, "Morelos", "", "77733337", "ENTERED"],
			[18, "Nayarit", "", "77733337", "ENTERED"],
			[19, "Nuevo León", "", "77733337", "ENTERED"],
			[20, "Oaxaca", "", "77733337", "ENTERED"],
			[21, "Puebla", "", "77733337", "ENTERED"],
			[22, "Querétaro", "", "77733337", "ENTERED"],
			[23, "Quintana Roo", "", "77733337", "ENTERED"],
			[24, "San Luis Potosí", "", "77733337", "ENTERED"],
			[25, "Sinaloa", "", "77733337", "ENTERED"],
			[26, "Sonora", "", "77733337", "ENTERED"],
			[27, "Tabasco", "", "77733337", "ENTERED"],
			[28, "Tamaulipas", "", "77733337", "ENTERED"],
			[29, "Tlaxcala", "", "77733337", "ENTERED"],
			[30, "Veracruz de Ignacio de la Llave", "", "77733337", "ENTERED"],
			[31, "Yucatán", "", "77733337", "ENTERED"],
			[32, "Zacatecas", "", "77733337", "ENTERED"]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'Ciudad', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'ciudad',
        index: 'ciudad',
        width: 300,
        sorttype: "date"},
    {
        name: 'blank',
        index:...