editable true in Jquery Grid is not working

editable true in Jquery Grid is not working - javascript

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
});

Related

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

Pass Id to Subgrid of Jqgrid

In here i'm going to expand subgrid using InvoiceId but i have no idea how to get InvoiceId and pass it to the subgrid url.my main grid has InvoiceId.This is JqGrid.When i hardcode the Invoice ID to the subgrid url then it's working.
<script type="text/javascript">
$(function () {
$('#jqgrid').jqGrid({
url: 'Sales/GetAllSalesOrders/',
datatype: 'json',
mtype: 'GET',
//columns names
colNames: ['InvoiceId', 'CustomerId', 'SubTotal', 'TotalDiscount', 'VAT', 'NBT', 'Amount', 'Balance'],
//columns model
colModel: [
{ name: 'InvoiceId', index: 'InvoiceId' },
{ name: 'CustomerId', index: 'CustomerId',align:'center' },
{ name: 'SubTotal', index: 'SubTotal', align: 'right' },
{ name: 'FullDiscount', index: 'FullDiscount', align: 'right' },
{ name: 'Vat', index: 'Vat', align: 'right' },
{ name: 'Nbt', index: 'Nbt', align: 'right' },
//{ name: 'Total', index: 'Total', align: 'left' },
{ name: 'NetAmount', index: 'NetAmount', align: 'right' },
{ name: 'Balance', index: 'Balance', align: 'right' }
],
pager: '#jqgrid',
rowNum: 10,
sortname: 'InvoiceId',
sortorder: 'asc',
viewrecords: true,
width: 'auto',
height: 'auto',
gridview: true,
rowNum: 50,
rowTotal: 200,
rowList: [20, 30, 50, 100],
rownumbers: false,
rownumWidth: 40,
loadonce: true,
subGrid: true,
subgridtype: "json",
//subrid model
subGridModel: [{
//subgrid columns names
// name: ['InvoiceItemId', 'Quantity', 'Rate', 'DiscountAmount', 'Amount'],
name: ['InvoiceItemId', 'Quantity','Amount'],
width: [100, 100,100],
align: ['left', 'right','right'],
//postData: { id: 22 }
}],
//url from which subgrid data should be requested
subGridUrl: '/Sales/GetSalesItemsByInvoiceId/'
});
My Controller accept Id,
[HttpGet]
public JsonResult GetSalesItemsByInvoiceId(int InvoiceId)
{
//Some code here
}

You can use subGridBeforeExpand to set new value of subGridUrl: $(this).jqGrid("setGridParam", {subGridUrl: newValue});.
Alternatively you can consider to use subGridRowExpanded to implement grid as subgrid. Grid as subgrid allows you maximal control over content of subgrid. jqGrid just create empty <div> for the right part of the additional row added under expended one. One need place empty <table> inside for the subgrid and optionally <div> for the pager. After that one just create new grid. The url of the grdi is the URL for subgrid. I see that you use loadonce: true in the main grid. Probably you can download full subgrid for every grid directly during loading of the main grid. The answer provides an example of such implementation.

In jqGrid, the default querystring parameter for subgrid url is id. You can change that using below code:
...
prmNames: {
subgridid: "InvoiceId",
}
...
Therefore, your subgrid url will be
/Sales/GetSalesItemsByInvoiceId?InvoiceId=
instead of
/Sales/GetSalesItemsByInvoiceId?id=
Also you can change unique id of row using below code, you can give any one of the names specified in "colModel" (in this case it will be "InvoiceId"):
...
jsonReader: {
id: 'InvoiceId'
}
...
So your final code will be like this:
<script type="text/javascript">
$(function () {
$('#jqgrid').jqGrid({
url: 'Sales/GetAllSalesOrders/',
datatype: 'json',
mtype: 'GET',
//columns names
colNames: ['InvoiceId', 'CustomerId', 'SubTotal', 'TotalDiscount', 'VAT', 'NBT', 'Amount', 'Balance'],
//columns model
colModel: [
{ name: 'InvoiceId', index: 'InvoiceId' },
{ name: 'CustomerId', index: 'CustomerId',align:'center' },
{ name: 'SubTotal', index: 'SubTotal', align: 'right' },
{ name: 'FullDiscount', index: 'FullDiscount', align: 'right' },
{ name: 'Vat', index: 'Vat', align: 'right' },
{ name: 'Nbt', index: 'Nbt', align: 'right' },
//{ name: 'Total', index: 'Total', align: 'left' },
{ name: 'NetAmount', index: 'NetAmount', align: 'right' },
{ name: 'Balance', index: 'Balance', align: 'right' }
],
pager: '#jqgrid',
rowNum: 10,
sortname: 'InvoiceId',
sortorder: 'asc',
viewrecords: true,
width: 'auto',
height: 'auto',
gridview: true,
rowNum: 50,
rowTotal: 200,
rowList: [20, 30, 50, 100],
rownumbers: false,
rownumWidth: 40,
loadonce: true,
subGrid: true,
subgridtype: "json",
//subrid model
subGridModel: [{
//subgrid columns names
// name: ['InvoiceItemId', 'Quantity', 'Rate', 'DiscountAmount', 'Amount'],
name: ['InvoiceItemId', 'Quantity','Amount'],
width: [100, 100,100],
align: ['left', 'right','right'],
//postData: { id: 22 }
}],
//url from which subgrid data should be requested
subGridUrl: '/Sales/GetSalesItemsByInvoiceId/',
prmNames: {
subgridid: "InvoiceId",
},
jsonReader: {
id: 'InvoiceId'
}
});

Server Side Sort JQGrid Sort Button Not Working

I have declared this in my jqgrid with 'json' data:
sortname: 'CascadeId',
sortorder: 'asc',
sortable: true,
But Sorting button has no effect. I have implemented server side sorting with asp. but button is not working. Can you indicate how to enable the button?
Update:
Initial GET Request:
http://localhost/myHandler.ashx?_search=false&nd=1361795033464&rows=20&page=1&sidx=CascadeId&sord=asc
ColModel:
colModel: [
{ name: 'CascadeId', index: 'CascadeId', width: 85, sortable: true, editable: true, editrules: { custom: true, custom_func: validateCascadeID, required: true} },
{ name: 'VenuProfile', index: 'VenuProfile', width: 150, sortable: false, editable: true, edittype: 'select', editoptions: { value: VenuProfile, width: 90, align: 'left'} },
{ name: 'Location', index: 'Location', width: 210, sortable: false, editable: true },
]

If you see the sort information going out in the POST sidx & sord and you are recieving those values on the server (again sidx & sord) you would then need to do an equivalent order by on your server fetch of the data.
Ex in C# the order by and then paging request of the data would look something like:
var pagedQuery = dataset.OrderBy(sidx + " " + sord).Skip((page - 1) * rows).Take(rows);
Edit
A portion of one of my working grids that starts out with a sort on the DateTimeMail' column indesc` order.
Client Side:
$('#Mailbox').jqGrid({
datatype: 'json',
url: '/Mail/MailboxGetGridData',
mtype: 'POST',
autoencode: true,
postData: { Mailbox: 'Inbox' },
colNames: ['IdMail', 'From', 'To', 'Date / Time', 'Subject', 'Message', 'HasBeenRead'],
colModel: [
{ name: 'IdMail', index: 'IdMail', width: 95, align: 'center', sortable: false, hidden: true, editable: false },
{ name: 'IdSender', index: 'IdSender', width: 150, align: 'center', sortable: true, firstsortorder: 'desc', hidden: false, editable: false },
{ name: 'IdRecipient', index: 'IdRecipient', width: 150, align: 'center', sortable: true, firstsortorder: 'desc', hidden: false, editable: false },
{ name: 'DateTimeMail', index: 'DateTimeMail', width: 150, align: 'center', sortable: true, firstsortorder: 'desc', hidden: false, editable: false },
{ name: 'Subject', index: 'Subject', width: 250, align: 'left', sortable: false, hidden: false, editable: false },
{ name: 'Message', index: 'Message', width: 150, align: 'center', sortable: false, hidden: true, editable: false },
{ name: 'HasBeenRead', index: 'HasBeenRead', width: 150, align: 'center', sortable: false, hidden: true, editable: false },
],
pager: $('#MailboxPager'),
rowNum: 5,
rowList: [5, 10, 20, 50],
sortname: 'DateTimeMail',
sortorder: "desc",
....
Server side:
public ActionResult MailboxGetGridData(string sidx, string sord, int page, int rows, bool _search, string filters)
{
.....
var pagedQuery = filteredQuery.OrderBy(sidx + " " + sord).Skip((page - 1) * rows).Take(rows);
var jsonData = new
{
total = (totalRecords + rows - 1) / rows,
page = page,
records = totalRecords,
rows = (
from item in pagedQuery.ToList()
select new
{
cell = new string[] {
item.IdMail.ToString(),
HelperClasses.HelperMethods.getUserName(item.IdSender),
HelperClasses.HelperMethods.getUserName(item.IdRecipient),
((DateTime)item.DateTimeMail).ToString("g"),
item.Subject,
item.Message,
(Mailbox == "Inbox") ? item.HasBeenRead.ToString() : "True"
}
}).ToArray()
};
return Json(jsonData, JsonRequestBehavior.AllowGet);

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.

class in column jqgrid doesnt working

Hi I use custom formatter in jqGrid which will add link and class to column.
the name of class I will call is 'iframe' which will set my own dialog box using jquery colorbox.
I have seen in firebug that class of column name was set 'iframe' but when I was clicked that, the dialog didnt working. am I did wrong?
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
$(".iframe").colorbox({ iframe: true, width: "40%", height: "80%", onClosed:function(){ location.reload(true); } });
jQuery("#MyDynamicGrid").jqGrid({
url: '/RepositoryRole/DynamicGridData/',
mtype: 'POST',
datatype: 'json',
colModel: [
{ name: 'Name', index: 'Name', width: 0, align: 'left', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, formatter: returnMyLink, editable: true, editrules: { required: true, edithidden: true }, hidden: false },
{ name: 'Description', index: 'Description', width: 80, align: 'left', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, },
],
colNames: ['Name', 'Description'],
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 20, 30],
sortname: 'Name',
sortorder: 'Desc',
viewrecords: true,
imgpath: '/Content/JqGridThemes/steel/images',
autowidth: true,
editurl: '/User/EditGrid/'
});
function returnMyLink(cellValue, options, rowdata, action) {
return '' + cellValue + ' ';
}});
Thanks

I think the colorbox is not being attached to element which are loaded from jqgrid. you can use gridComplete for reattaching the colorbox
jQuery("#MyDynamicGrid").jqGrid({
url: '/RepositoryRole/DynamicGridData/',
mtype: 'POST',
datatype: 'json',
colModel: [
{ name: 'Name', index: 'Name', width: 0, align: 'left', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, formatter: returnMyLink, editable: true, editrules: { required: true, edithidden: true }, hidden: false },
{ name: 'Description', index: 'Description', width: 80, align: 'left', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, },
],
colNames: ['Name', 'Description'],
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 20, 30],
sortname: 'Name',
sortorder: 'Desc',
viewrecords: true,
imgpath: '/Content/JqGridThemes/steel/images',
autowidth: true,
editurl: '/User/EditGrid/',
gridComplete: function(){
$(".iframe").colorbox({ iframe: true, width: "40%", height: "80%", onClosed:function(){ location.reload(true); } }
}
});

Develop Reference

JavaScript is the programming language of the Web.

editable true in Jquery Grid is not working - javascript

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

Related

Drag Jqgrid one column value to another like in excel

Pass Id to Subgrid of Jqgrid

Server Side Sort JQGrid Sort Button Not Working

Disable column in jqGrid

class in column jqgrid doesnt working

Categories

Resources