Develop Reference

grouping hide when click on button search

I´m used JqxGrid and I have a button "Buscar dados" => "Search" when I click on this button my group hide, and show the data but without group.
`var urlDefault = '[{ "STATUS": "--", "CODIGO_DOC": "--", "COMPETENCIA": "--", "FORNECEDOR": "--", "NUMERO_DOC": "--", "SERIE": "--", "VENCIMENTO": "--", "EMISSAO": "--", "VALOR_DOC": "--", "DESCONTO": "--", "EMPRESA": "--", "NOME_CONTA_FINANCEIRA": "--", "NOME_PLANO_CONTA": "--", "CENTRO_CUSTO": "--", "TIPO_DOC": "--", "SERVICO": "--", "FORMA_PGTO": "--", "PRIORIDADE": "--", "HISTORICO": "--", "INCIDENCIA_PARCELAS": "--", "OP_CAD": "--" }]';
var source =
{
datatype: "json",
datafields: [
{ name: 'STATUS' },
{ name: 'CODIGO_DOC' },
{ name: 'COMPETENCIA' },
{ name: 'FORNECEDOR' },
{ name: 'NUMERO_DOC' },
{ name: 'SERIE' },
{ name: 'VENCIMENTO', type: 'date' },
{ name: 'EMISSAO', type: 'date' },
{ name: 'VALOR_DOC', type: 'number' },
{ name: 'DESCONTO', type: 'number' },
{ name: 'EMPRESA' },
{ name: 'NOME_CONTA_FINANCEIRA' },
{ name: 'NOME_PLANO_CONTA' },
{ name: 'CENTRO_CUSTO' },
{ name: 'TIPO_DOC' },
{ name: 'SERVICO' },
{ name: 'FORMA_PGTO' },
{ name: 'PRIORIDADE' },
{ name: 'HISTORICO' },
{ name: 'INCIDENCIA_PARCELAS' },
{ name: 'OP_CAD' },
{ name: 'DT_CAD', type: 'date' },
],
id: 'id',
url: urlDefault,
root: 'data'
};
$('#BtnSave').click(function () {
var TIPO = '2';
var INI = '01/01/2000';
var FIM = '31/12/2022';
var url = "http://test-test";
source.url = url;
$('#jqxgrid').jqxGrid('updatebounddata');
});
$("#jqxgrid").jqxGrid(
{
height: 300,
source: source,
sortable: true,
showfilterrow: true,
filterable: true,
groupable: true,
columns: [
{ text: 'STATUS', datafield: 'STATUS', width: 120, align: 'center', cellsalign: 'center' },
{ text: 'CÓDIGO', datafield: 'CODIGO_DOC', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'VALOR', datafield: 'VALOR_DOC', width: 130, groupable: true, width: 200, align: 'center', cellsalign: 'center', aggregates: ["sum"], cellsformat: 'c2' , initeditor: function (row, cellvalue, editor) { editor.jqxNumberInput({ digits: 6, decimalDigits: 2 }); } },
{ text: 'COMPETENCIA', datafield: 'COMPETENCIA', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'FORNECEDOR', datafield: 'FORNECEDOR', width: 160, align: 'center', cellsalign: 'center' },
{ text: 'Nº DOCUMENTO', datafield: 'NUMERO_DOC', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'SÉRIE', datafield: 'SERIE', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'VENCIMENTO', datafield: 'VENCIMENTO', width: 130, align: 'center', cellsalign: 'center', cellsformat: 'dd/MM/yyyy', groupable: true },
{ text: 'EMISSAO', datafield: 'EMISSAO', width: 130, align: 'center', cellsalign: 'center', cellsformat: 'dd/MM/yyyy', groupable: true },
{ text: 'EMPRESA', datafield: 'EMPRESA', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'CONTA FINANCEIRA', datafield: 'NOME_CONTA_FINANCEIRA', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'PLANO DE CONTA', datafield: 'NOME_PLANO_CONTA', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'CENTRO CUSTO', datafield: 'CENTRO_CUSTO', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'TIPO DE DOCUMENTO', datafield: 'TIPO_DOC', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'SERVICO', datafield: 'SERVICO', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'FORMA DE PAGAMENTO', datafield: 'FORMA_PGTO', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'PRIORIDADE', datafield: 'PRIORIDADE', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'HISTORICO', datafield: 'HISTORICO', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'PARCELAS', datafield: 'INCIDENCIA_PARCELAS', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'OP. CAD', datafield: 'OP_CAD', width: 130, align: 'center', cellsalign: 'center' },
{ text: 'DT. CAD', datafield: 'DT_CAD', width: 100, align: 'center', cellsformat: 'dd/MM/yyyy', groupable: true, cellsalign: 'center' },
],
groups: ['FORNECEDOR']
});
});
</script>
<br><br>
`
I would like that when click on button the data show with group

Uncaught TypeError: $(...).jqGrid is not a function on subGridRowExpanded

I'm trying to load data into a jqGrid sub grid (subgrid as grid) and get the above error on this line:
$("#" + subgrid_table_id).jqGrid
Please help - thanks.
My JS code:
<link rel="stylesheet" href="~/Styles/ui.jqgrid-bootstrap.css" />
<link rel="stylesheet" href="~/Styles/ui.jqgrid-bootstrap-ui.css" />
<script src="/Scripts/jquery-1.9.1.js"></script>
<script src="~/Scripts/JqGrid/jquery.jqGrid.min.js"></script>
<script src="~/Scripts/JqGrid/jquery.jqGrid.js"></script>
<script src="~/Scripts/JqGrid/grid.jqueryui.js"></script>
<script src="~/Scripts/JqGrid/grid.subgrid.js"></script>
<script src="~/Scripts/JqGrid/jqModal.js"></script>
<script src="~/Scripts/JqGrid/i18n/grid.locale-he.js"></script>
<div id="jqGrid">
<table id="grid" style="float:right; width:100%"></table>
<div id="pager" style="float:right;"></div>
</div>
<script type="text/javascript">
var gridDataUrl = 'GetAllPurchasesJson';
var lastSel;
$("#grid").jqGrid({
url: gridDataUrl,
datatype: "json",
mtype: 'POST',
jsonReader: {
root: 'gridModel',
repeatitems: true,
subgrid: {root:'rows', repeatitems: true, cell:"cell" }
}
,
colNames: ['Id','סטטוס','סה"כ כולל מע"מ','מע"מ','סה"כ ללא מע"מ','תאריך אספקה','תאריך הזמנה','ספק','מספר הזמנה'],
colModel: [
{ name: 'Id', index: 'Id', width: 50, align: 'right', hidden: true },
{
name: 'Status',
index: 'סטטוס',
width: 100,
align: 'right',
editable: true,
},
{
name: 'Total',
index: 'סה"כ כולל מע"מ',
width: 100,
align: 'right',
},
{ name: 'Vat', index: 'מע"מ', width: 100, align: 'right' },
{ name: 'TotalNoVat', index: 'סה"כ ללא מע"מ', width: 100, align: 'right' },
{ name: 'ArrivedDate', index: 'תאריך אספקה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
{ name: 'OrderDate', index: 'תאריך הזמנה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
{ name: 'Supplier', index: 'ספק', width: 100, align: 'right' },
{ name: 'OrderNumber', index: 'מספר הזמנה', width: 100, align: 'right' }
],
cmTemplate: { editable: false },
rowNum: 20,
rowList: [10, 20, 30],
height: 'auto',
width: '800',
pager: jQuery('#pager'),
sortname: 'Name',
viewrecords: true,
sortorder: "desc",
regional: 'he',
editurl: '#Url.Action("SaveOrUpdateProduct", "Inventory")',
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
// we pass two parameters
// subgrid_id is a id of the div tag created within a table
// the row_id is the id of the row
// If we want to pass additional parameters to the url we can use
// the method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the following
var subgrid_table_id;
subgrid_table_id = subgrid_id+"_t";
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
$("#" + subgrid_table_id).jqGrid({
url:"GetPurchaseDetailes/"+row_id,
datatype: "json",
colNames: ['Id','Status','ActualTotal','ActualVat','ActualPaid'],
colModel: [
{name:"Id",index:"Id",width:80,key:true},
{name:"Status",index:"Status",width:130},
{name:"ActualTotal",index:"ActualTotal",width:80,align:"right"},
{name:"ActualVat",index:"ActualVat",width:80,align:"right"},
{name:"ActualPaid",index:"ActualPaid",width:100,align:"right",sortable:false}
],
height: '100%',
rowNum:20,
sortname: 'Id',
sortorder: "asc"
});
} });

This looks like a jQuery conflict to me: https://api.jquery.com/jquery.noconflict/
Try wrapping your jQuery in an anonymous function as below:
(function($) {
// jQuery code
})(jQuery);
Your jQuery on your page will then look something like the below:
<script type="text/javascript">
(function($) {
var gridDataUrl = 'GetAllPurchasesJson';
var lastSel;
$("#grid").jqGrid({
url: gridDataUrl,
datatype: "json",
mtype: 'POST',
jsonReader: {
root: 'gridModel',
repeatitems: true,
subgrid: {root:'rows', repeatitems: true, cell:"cell" }
}
,
colNames: ['Id','סטטוס','סה"כ כולל מע"מ','מע"מ','סה"כ ללא מע"מ','תאריך אספקה','תאריך הזמנה','ספק','מספר הזמנה'],
colModel: [
{ name: 'Id', index: 'Id', width: 50, align: 'right', hidden: true },
{
name: 'Status',
index: 'סטטוס',
width: 100,
align: 'right',
editable: true,
},
{
name: 'Total',
index: 'סה"כ כולל מע"מ',
width: 100,
align: 'right',
},
{ name: 'Vat', index: 'מע"מ', width: 100, align: 'right' },
{ name: 'TotalNoVat', index: 'סה"כ ללא מע"מ', width: 100, align: 'right' },
{ name: 'ArrivedDate', index: 'תאריך אספקה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
{ name: 'OrderDate', index: 'תאריך הזמנה', width: 100, align: 'right', formatter: 'date', formatoptions: { srcformat: 'U', newformat: 'd/m/Y' } },
{ name: 'Supplier', index: 'ספק', width: 100, align: 'right' },
{ name: 'OrderNumber', index: 'מספר הזמנה', width: 100, align: 'right' }
],
cmTemplate: { editable: false },
rowNum: 20,
rowList: [10, 20, 30],
height: 'auto',
width: '800',
pager: jQuery('#pager'),
sortname: 'Name',
viewrecords: true,
sortorder: "desc",
regional: 'he',
editurl: '#Url.Action("SaveOrUpdateProduct", "Inventory")',
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
// we pass two parameters
// subgrid_id is a id of the div tag created within a table
// the row_id is the id of the row
// If we want to pass additional parameters to the url we can use
// the method getRowData(row_id) - which returns associative array in type name-value
// here we can easy construct the following
var subgrid_table_id;
subgrid_table_id = subgrid_id+"_t";
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
$("#" + subgrid_table_id).jqGrid({
url:"GetPurchaseDetailes/"+row_id,
datatype: "json",
colNames: ['Id','Status','ActualTotal','ActualVat','ActualPaid'],
colModel: [
{name:"Id",index:"Id",width:80,key:true},
{name:"Status",index:"Status",width:130},
{name:"ActualTotal",index:"ActualTotal",width:80,align:"right"},
{name:"ActualVat",index:"ActualVat",width:80,align:"right"},
{name:"ActualPaid",index:"ActualPaid",width:100,align:"right",sortable:false}
],
height: '100%',
rowNum:20,
sortname: 'Id',
sortorder: "asc"
});
}
});
})(jQuery);
</script>

How to show paginationa in jqgrid?

I am trying to show pagination of the jq grid. But it is not working. It is not showing any data in the grid. I am new in jqgrid and i have tried, here is my example.
My action in controller
public ActionResult itemList(string sidx, string sord, int page, int rows)
{
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
int totalRecords = db.tbl_Item.Count();
int totalPages = (int)Math.Ceiling((float)totalRecords / (float)pageSize);
var v = new
{
total = totalPages,
page,
records = totalRecords,
rows = (
from t in db.tbl_Item
select new
{
i = t.id,
cell = new string[]{
t.batchno,t.brand,t.buyingPrice.ToString(),
t.catg,
t.itemcode,
t.name,
t.qtyLimit.ToString(),
t.Quantity.ToString(),
t.sellingPrice.ToString(),t.supplier,t.unitType,t.vat.ToString()
}
}).ToArray()
};
return Json(v, JsonRequestBehavior.AllowGet);
}
And the javascript code are
jQuery("#list").jqGrid({
cache: false,
async: false,
url: '/Settings/itemList/',
datatype: 'json',
mtype: 'GET',
colNames: ['id','New Item', 'Batch No', 'Supplier', 'Unit', 'B. Price', 'S. Price','Item Code','Vat','Limit'],
colModel: [
{ name: 'id', index: 'id', width: 110, align: 'center',hidden:true },
{ name: 'name', index: 'name', width: 110, align: 'center' },
{ name: 'batchno', index: 'batchno', width: 110, align: 'center' },
{ name: 'supplier', index: 'supplier', width: 110, align: 'center' },
{ name: 'unitType', index: 'unitType', width: 110, align: 'center', editoptions: { readonly: 'readonly' } },
{ name: 'buyingPrice', index: 'buyingPrice', width: 110, align: 'center', editoptions: { readonly: 'readonly' } },
{ name: 'sellingPrice', index: 'sellingPrice', align: 'center' },
{ name: 'itemcode', index: 'itemcode', width: 110, align: 'center'},
{ name: 'vat', index: 'vat', width: 110, align: 'center', editoptions: { readonly: 'readonly' } },
{ name: 'qtyLimit', index: 'qtyLimit', align: 'center' }
],
pager: jQuery('#pager'),
rowNum: 2,
rowList: [5, 10, 20, 50],
sortname: 'id',
sortorder: "desc",
viewrecords: true,
width: 960,
height: 200,
loadOnce: false,
excelexport: true,
imgpath: '/scripts/themes/coffee/images',
caption: 'Stock Information'
});
Please help me.

How to send JSON to server with jqGrid?

[EDIT] (I couldn't wait 3 hours to answer my question):
Well, it appears it is not the jqGrid component which is in fault, thanks to TheCodeDestroyer for figured it out.
I tested this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="./css/smoothness/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./css/ui.jqgrid.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
</style>
<script src="./js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="./js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="./js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url:'datas.php',
datatype: "json",
mtype: "GET",
colNames: ["ID","Client", "Projet", "Tache", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
colModel: [
{ name: "id_record", width: 55, hidden:false},
{ name: "client", width: 55, sortable:true},
{ name: "projet", width: 150, align: "right", sortable:true},
{ name: "tache", width: 150, align: "right", sortable:true},
{ name: "un", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "deux", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "trois", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "quatre", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "cinq", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "six", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "sept", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "huit", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "neuf", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "dix", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "onze", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "douze", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "treize", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "quatorze", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "quinze", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "seize", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "dix-sept", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "dix-huit", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "dix-neuf", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-et-un", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-deux", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-trois", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-quatre", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-cinq", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-six", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-sept", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-huit", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "vingt-neuf", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "trente", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
{ name: "trente-et-un", width: 20, align: "right", sortable:false, editable: true, edittype: "select",editoptions: { value: "1:1; 0.5:0.5; 0.25:0.25" } },
],
height: '100%',
cellEdit: true,
cellsubmit: 'remote',
cellurl: "https://ort8m12c8ckf.runscope.net",
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "id_record",
sortorder: "asc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "My first grid",
ajaxGridOptions: { contentType: "application/json"},
ajaxCellOptions: { contentType: "application/json"},
ajaxRowOptions: { contentType: "application/json"},
beforeSubmitCell : function(rowid,celname,value,iRow,iCol) {
selectedRowId = $('#list').jqGrid ('getGridParam', 'selrow');
cellValue = $('#list').jqGrid('getCell', selectedRowId, 'id_record');
v = JSON.stringify({valeur: value,nom_cellule: celname,id_record: cellValue});
send(v);
return v;
},
// serializeRowData: function (data) { alert("ok"); return JSON.stringify(data); },
})
function send(datas){
$.ajax({
type: "POST",
contentType: "application/json",
url: 'https://ort8m12c8ckf.runscope.net',
data: datas,
dataType: "json"
});
}
});
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
<input type="button" value="send"></input>
</body>
</html>
So TheCodeDestroyer gave all the answers possible, and if you are in the same situation, it is probably due to your server or something like that. I posted a new topic concerning this new question just there.
[HERE IS THE FIRST QUESTION]
I am looking for a way to send JSON to server with jqGrid since yesterday. And I have still no answer.
So here is my grid:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="./css/smoothness/jquery-ui-1.10.3.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="./css/ui.jqgrid.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 100%;
}
</style>
<script src="./js/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="./js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="./js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#list").jqGrid({
url:'datas.php',
datatype: "json",
mtype: "GET",
colNames: ["ID","Client", "Projet", "Tache", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"],
colModel: [
{ name: "id_record", width: 55, hidden:false},
{ name: "client", width: 55, sortable:true},
{ name: "projet", width: 150, align: "right", sortable:true},
{ name: "tache", width: 150, align: "right", sortable:true},
{ name: "un", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "deux", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "trois", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "quatre", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "cinq", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "six", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "sept", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "huit", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "neuf", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "dix", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "onze", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "douze", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "treize", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "quatorze", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "quinze", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "seize", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "dix-sept", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "dix-huit", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "dix-neuf", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-et-un", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-deux", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-trois", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-quatre", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-cinq", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-six", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-sept", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-huit", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "vingt-neuf", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "trente", width: 20, align: "right", sortable:false, editable: true, key: false },
{ name: "trente-et-un", width: 20, align: "right", sortable:false, editable: true, key: false},
],
height: '100%',
cellEdit: true,
cellsubmit: 'remote',
cellurl: "https://ort8m12c8ckf.runscope.net",
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "id_record",
sortorder: "asc",
viewrecords: true,
gridview: true,
autoencode: true,
caption: "my first grid
gridview: true,
beforeSubmitCell : function(rowid,celname,value,iRow,iCol) {
selectedRowId = $('#list').jqGrid ('getGridParam', 'selrow');
cellValue = $('#list').jqGrid('getCell', selectedRowId, 'id_record');
return {valeur:value,nom_cellule:celname,id_record:cellValue};
}
})
});
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
</body>
</html>
I am using the inline editing feature to send datas. Currently, the URL is referring a place where I can see what is posted (and it is not JSON my friends).
Your help would be very appreciated.

You actually use cell edit not inline edit... I don't get your code why do you set selectedRowId and cellValue? you should get those values through the event.
rowid = selectedRowId
cellValue = value
But to return JSON do this in beforeSubmitCell :
beforeSubmitCell : function(rowid,celname,value,iRow,iCol) {
selectedRowId = $('#list').jqGrid ('getGridParam', 'selrow');
cellValue = $('#list').jqGrid('getCell', selectedRowId, 'id_record');
return JSON.stringify({valeur: value,nom_cellule: celname,id_record: cellValue});
}

FlexiGrid - set width of Grid in code

I'm trying out Flexigrid for a new app - I'm really impressed with it but I can't find a way to set the width in code.
The main reason for this is to get the GRID (not the columns inside the grid) to align fully to the size of the window. I know, it makes a mockery of the horizontal resizer, but that's what I have to do!
FYI my set up is the following:
$(document).ready(function() {
$("#flex1").flexigrid
(
{
url: '<%= ResolveUrl("~/Data.ashx") %>?filter=none',
dataType: 'json',
colModel: [
{ display: '', name: 'view', width: 20, sortable: true, align: 'center' },
{ display: 'Street', name: 'Street', width: 260, sortable: true, align: 'left' },
{ display: 'Town', name: 'Town', width: 200, sortable: true, align: 'left' },
{ display: '', name:'Actions', width:30, sortable: false, align: 'center' }
],
sortname: "Street",
sortorder: "asc",
usepager: true,
title: 'Streets',
useRp: true,
rp: 15,
showTableToggleBtn: false,
width: 800,
height: 200
}
);
});
but the following function doesn't work:
function ResizeGrid() {
$('#flex1').flexOptions({ width:1000 }).flexReload();
}
It causes the grid to refresh, but nothing more.

Despite having NO LUCK on google for about 20 minutes before posting this, Murphy's law meant that I tried another quick search just afterwards and found the answer.
Turns out that "width" should be set to 'auto' (note the quotes are vital).
$("#flex1").flexigrid
(
{
url: '<%= ResolveUrl("~/Data.ashx") %>?filter=none',
dataType: 'json',
colModel: [
{ display: '', name: 'view', width: 20, sortable: true, align: 'center' },
{ display: 'Street', name: 'Street', width: 260, sortable: true, align: 'left' },
{ display: 'Town', name: 'Town', width: 200, sortable: true, align: 'left' },
{ display: '', name:'Actions', width:30, sortable: false, align: 'center' }
],
sortname: "Street",
sortorder: "asc",
usepager: true,
title: 'Streets',
useRp: true,
rp: 15,
showTableToggleBtn: false,
width: 'auto',
height: 200
}
);
I'll leave this post for anyone else who has this problem.