Develop Reference

editable true in Jquery Grid is not working

I want to make Jq-Grid editable and I tried editable : true but it is not working....
editable : true not working
$(document).ready(function() {
$("#list2").jqGrid({
url: '/Home/GetAll/',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'GET',
colNames: ['Employee Name', 'Designation',
'Gender', 'DOB'
],
colModel: [
{ name: 'name', index: 'name', width: 150, editable: true },
{ name: 'DesignationID', index: 'DesignationID', width: 150, editable: true },
{ name: 'Gender', index: 'Gender', width: 100, editable: true, editable: true },
{ name: 'DOB', index: 'DOB', width: 150, editable: true }
],
rowNum: 10,
rowList: [5, 10, 15],
pager: '#pager2',
sortname: 'id',
height: 200,
viewrecords: true,
sortorder: "asc",
caption: "Employee Records"
});
jQuery("#list2").jqGrid('navGrid', '#pager2', {
edit: false,
add: false,
del: false
});
});

You made minor mistake...
in you code make edit true instead of false
jQuery("#list2").jqGrid('navGrid', '#pager2', {
edit: true,
add: false,
del: false
});

Drag Jqgrid one column value to another like in excel

How to drag the column value of jqgrid to another like dragging in excel?
Can it be resolved?
Below is my jgrid code :
$(document).ready(function () {
$('#form_table').jqGrid('setCell', 2, 'column Name', '', {color: 'red'});
jQuery("#form_table").jqGrid({
datatype: "local",
mtype: "POST",
url: '',
colNames: ['Id', 'तालीममा सहभागीको नाम थर', 'जिल्ला', 'गा.वि.स', 'वडा नं', 'जातजाती', 'लिङ्ग', 'उमेर'],
colModel: [
{name: 'id', index: 'id', jsonmap: "id", hidden: true, },
{name: 'name', index: 'name', jsonmap: "name", width: 250, editable: true},
{name: 'district', index: 'district', jsonmap: "district", width: 100, editable: true, align: 'center', edittype: 'select', editoptions: {
value: {"":"",<?php
foreach ($districts as $district) {
echo "'" . $district->dis_nepali . "': '" . $district->dis_nepali . "', ";
}
?>
}, defaultValue: ''}, formatter: 'select'},
{name: 'vdc', index: 'vdc', jsonmap: "vdc", width: 100, editable: true},
{name: 'ward_no', index: 'ward_no', jsonmap: "ward_no", width: 80, editable: true},
{name: 'caste', index: 'caste', jsonmap: "caste", width: 100, editable: true, align: "center", edittype: 'select', editoptions: {value: {"दलीत": "दलीत","आ/जनजाती": "आ/जनजाती", "बा छ्य": "बा छ्य", "मधेसी": "मधेसी", "अन्य": "अन्य","":""}, defaultValue: ''}, formatter: "select"},
{name: 'gender', index: 'gender', jsonmap: "gender", width: 100, editable: true, align: "center", edittype: 'select', editoptions: {value: {"महिला": "महिला", "पूरूष": "पूरूष","":""}}, formatter: "select"},
{name: 'age_group', index: 'age_group', jsonmap: "age_group", width: 100, editable: true,}
],
loadComplete: function (data) {
var grid = jQuery("#form_table"),
pageSize = parseInt(grid.jqGrid("getGridParam", "rowNum")),
emptyRows = pageSize - data.rows.length;
if (data.rows.length == 0) {
for (var j = 1; j <= emptyRows; j++)
// Send rowId as undefined to force jqGrid to generate random rowId
grid.jqGrid('addRowData', undefined, {});
}
if (emptyRows > 0) {
for (var i = 1; i <= emptyRows; i++)
// Send rowId as undefined to force jqGrid to generate random rowId
grid.jqGrid('addRowData', undefined, {});
}
},
jsonreader: {repeatitems: false, id: 'id', root: 'root'},
pager: '#form_pager',
rowNum: 10,
toppager: true, //for pager on top
height: "auto",
rowList: [10, 20, 50, 100],
// sortname: 'id',
viewrecords: true,
gridview: true,
resizable: true,
rownumbers: true,
loadonce: true,
//shrinkToFit:false,
loadtext: 'Loading...',
cellEdit: true,
contentType: "application/json",
cellsubmit: 'clientArray',
cellurl: ""
});
jQuery("#form_table").jqGrid('navGrid', '#form_pager', {
cloneToTop: true,
edit: false,
add: false,
del: false
});
jQuery("#form_table").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
{startColumnName: 'district', numberOfColumns: 3, titleText: 'ठेगाना'}
]
});
}):
Now i want the column 2 name of row 1 to be dragged to the column 2 name upto row 15 is there any solution?
Any help would be highly appreciated. Thank You

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 edit foreign key in jqgrid?

I have the Foreign key in JqGrid and show name of foreign key in grid.
when i want to edit, method don't send value of foreign key and value of foreign key is null:
public ActionResult EditState(tblState state)
{
UserRepository user = new UserRepository();
state.UserIDChange_FK = Convert.ToInt64(user.FindUserID(User.Identity.Name));
state.StateDateChange = (DateTime.Now);
state.StateDateCreate = DateTimeConvertor.ToDateTime(state.StateDateCreate.ToString());
if (ModelState.IsValid)
{
StateRepository mr = new StateRepository();
if (mr.Update(state, true))
{
return MessageBox.Show("success", MessageType.Success, modal: true, layout: MessageAlignment.Center);
}
else
{
return MessageBox.Show("don not success", MessageType.Error, modal: true, layout: MessageAlignment.Center);
}
}
return Json(true);
}
Script of jqgrid:
<script type="text/javascript">
$(document).ready(function () {
$('#list').jqGrid({
caption: "State Info",
url: '#Url.Action("GetState", "LocationGrid")',
editurl: '#Url.Action("EditState", "LocationGrid")',
datatype: 'json',
jsonReader: {
root: "Rows",
page: "Page",
total: "Total",
records: "Records",
repeatitems: true,
id: "StateID",
cell: "RowCells"
},
mtype: 'POST',
colNames: ['ID','state','UserIDCreate_FK','UserIDChange_FK','StateDateCreate','StateDateChange', ''],
colModel: [
{
name: 'StateID', index: 'StateID',
editable: false, hidden: true, key: true
},
{
name: 'StateName', index: 'StateName', align: 'center', width: 120,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
},
editrules: {
required: true
}
},
{
name: 'UserIDCreate_FK', index: 'UserIDCreate_FK', align: 'center', width: 80,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, editoptions: { readonly: 'readonly' }
},
{
name: 'UserIDChange_FK', index: 'UserIDChange_FK', align: 'center', width: 80,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: false, edittype: 'text',
editoptions: {
maxlength: 40
},
editrules: {
required: true
}
}
,
{
name: 'StateDateCreate', index: 'StateDateCreate', align: 'center', width: 135,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, editoptions: { readonly: 'readonly' }
},
{
name: 'StateDateChange', index: 'StateDateChange', align: 'center', width: 135,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: false, edittype: 'text',
editoptions: {
maxlength: 40
},
editrules: {
required: true
}
},
{
name: 'myac', width: 80, fixed: true, sortable: false, search: false,
resize: false, formatter: 'actions',
formatoptions: {
keys: true
}
}
],
rowNum: 10,
rowList: [10, 20, 50, 100],
sortname: 'StateID',
sortorder: 'desc',
viewrecords: true,
altRows: true,
shrinkToFit: false,
width: '900',
height: 'auto',
hidegrid: false,
direction: "rtl",
gridview: true,
rownumbers: true,
footerrow: true,
loadComplete: function () {
$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
loadError: function (xhr, st, err) {
jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
}
})
;
});
Bellow picture show that UserIDCreate_FK is null but in grid this feild has value.

Disable column in jqGrid

I have this jqGrid:
$("#list").jqGrid({
url: '/modulos/carga/cargaServiciosTarifa.ashx',
datatype: 'xml',
mtype: 'GET',
colNames: ['Tipo_Servicio', 'Cantidad','Unidad'],
colModel: [
{name: 'Tipo_Servicio', index: 'TSI_TS_Id', width: 100, align: 'center',
edittype: 'select', editable: true, sortable: true,
editrules: { edithidden: false, required: true }, editoptions: {
size: 1,
dataUrl: '/modulos/carga/cargaServiciosTarifa.ashx?oper=getServicios'
}},
{ name: 'Cantidad', index: 'TSI_Cantidad', width: 100, align: 'center',
editable: true, edittype: 'select', editoptions: {
value: "1:1;2:2;3:3;4:4;5:5;6:6;7:7;8:8;9:9;10:10;11:11;12:12" },
editrules: { edithidden: true }, sortable: true },
{ name: 'Unidad', index: 'TSI_Unidad', width: 100, align: 'center',
editable: true, edittype: 'select',
editoptions: { value: "Dia:Dia;Hora:Hora" }, sortable: true }
],
autoencode: true,
pager: '#pager',
rowNum: 20,
sortname: 'TSI_TS_Id',
sortorder: 'asc',
sortable: true,
autowidth: false,
width: 733,
height: -1,
shrinkToFit: true,
viewrecords: true,
gridview: true,
caption: 'Listado Servicios asociados a Tarifa',
postData: {tarId: tarId.val()},
editurl: '/modulos/carga/cargaServiciosTarifa.ashx'
});
With three select options, and I want to know how can I disable the 'Cantidad'(second column) select if I select the option 'Dia' of the third (last) select called 'Unidad', but can use if I select 'Hora' option! Is there a possible way to do this when I create or edit(no inline editing)?
Have any property like a html disabled to can add to the colModel definition?
Thanks.