Related
How can I get all of the rows or IDs that are not removed after a user uses the filter toolbar?
My jqgrid:
I use :
var selRow = jQuery("#list").jqGrid('getGridParam', 'selarrrow');
But this code get 3 of row and I want all row of other pages selected!!!
javascript code:
<script type="text/javascript">
var searchOptions = ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'bw', 'bn', 'in', 'ni', 'ew', 'en', 'cn', 'nc'];
$(document).ready(function () {
$('#list').jqGrid({
caption: "",
//url from wich data should be requested
url: '#Url.Action("GetAllMet", "MetGrid")',
//type of data
datatype: 'json',
jsonReader: {
root: "Rows",
page: "Page",
total: "Total",
records: "Records",
repeatitems: true,
id: "MetID",
cell: "RowCells"
},
//url access method type
mtype: 'POST',
//columns names
colNames: ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ' ', '', '', '', '', '', '', '', '', ''],
//columns model
colModel: [
{
name: 'MetID', index: 'MetID',
editable: false, hidden: true, key: true
},
{
name: 'WaterSharingNo', index: 'WaterSharingNo', align: 'center', width: 70,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text'
},
{
name: 'PowerSharingNo', index: 'PowerSharingNo', align: 'center', width: 70,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text'
}
,
{
name: 'Serial', index: 'Serial', align: 'center', width: 70,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text'
},
{
name: 'TypeID_FK', index: 'TypeID_FK', align: 'center', width: 90,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("TypeMeterSelect", "MeterGrid")'
}
},
{
name: 'UseID_FK', index: 'UseID_FK', align: 'center', width: 80,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("UseMetSelect", "MetGrid")'
}
},
{
name: 'TypeModID_FK', index: 'TypeModID_FK', align: 'center', width: 90,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, editoptions: { readonly: 'readonly' }
},
{
name: 'ModID_FK', index: 'ModID_FK', align: 'center', width: 80,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
dataInit: function (elem) {
// http://jqueryui.com/autocomplete/
$(elem).autocomplete({
source: '#Url.Action("GetModSerial","MetGrid")',
minLength: 2,
select: function (event, ui) {
$(elem).val(ui.item.value);
$(elem).trigger('change');
}
});
}
}
},
{
//shomare sim kart
name: 'ModCelNo', index: 'ModCelNo', align: 'center', width: 70,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text'
},
{
name: 'GroupID_FK', index: 'GroupID_FK', align: 'center', width: 70,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("GroupSelect", "MetGrid")'
}
},
{
name: 'AffairID_FK', index: 'AffairID_FK', align: 'center', width: 90,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("AffairSelect", "MetGrid")'
}
},
{
name: 'DesertID_FK', index: 'DesertID_FK', align: 'center', width: 90,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("DesertSelect", "MetGrid")'
}
},
{
name: 'wnerName', index: 'wnerName', align: 'center', width: 90,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text'
},
{
name: 'MetDateInstall', index: 'MetDateInstall', align: 'center', width: 170,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'Emplacement', index: 'Emplacement', align: 'center', width: 90,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'WarrantyStartDate', index: 'WarrantyStartDate', align: 'center', width: 170,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'WarrantyEndDate', index: 'WarrantyEndDate', align: 'center', width: 170,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text'
},
{
name: 'CelOwner', index: 'CelOwner', align: 'center', width: 70,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
}
}, {
name: 'CityID_FK', index: 'CityID_FK', align: 'center', width: 80,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("CitySelect", "MeterGrid")'
}
},
{
name: 'UserIDCreate_FK', index: 'UserIDCreate_FK', align: 'center', width: 80,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, editoptions: { readonly: 'readonly' }
},
{
name: 'UserIDChange_FK', index: 'UserIDChange_FK', align: 'center', width: 80,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: false, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'MetDateCreate', index: 'MetDateCreate', align: 'center', width: 170,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, editoptions: { readonly: 'readonly' }
},
{
name: 'MetDateChange', index: 'MetDateChange', align: 'center', width: 170,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: false, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'SettingID_FK', index: 'SettingID_FK', align: 'center', width: 80,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'select',
editoptions: {
dataUrl: '#Url.Action("SettingSelect", "MeterGrid")'
}
},
{
name: 'Metitle', index: 'Metitle', align: 'center', width: 90,
//formatter: formatNumber,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'Longitude', index: 'Longitude', align: 'center', width: 70,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'Latitude', index: 'Latitude', align: 'center', width: 70,
search: true, stype: 'text', searchoptions: { sopt: searchOptions },
editable: true, edittype: 'text',
editoptions: {
maxlength: 40
}
},
{
name: 'myac', width: 50, fixed: true, sortable: false, search: false,
resize: false, formatter: 'actions',
formatoptions: {
keys: true
}
}
],
//pager for grid
pager: $('#pager'),
toppager: true,
//number of rows per page
rowNum: 10,
rowList: [10, 20, 50, 100],
//initial sorting column
sortname: 'MetID',
//initial sorting direction
sortorder: 'desc',
//we want to display total records count
viewrecords: true,
altRows: true,
shrinkToFit: false,
width: '900',
height: 'auto',
hidegrid: false,
direction: "rtl",
gridview: true,
rownumbers: true,
multiselect: true,
footerrow: true,
//loadonce:true,
//userDataOnFooter: true,
loadComplete: function () {
//change alternate rows color
$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
loadError: function (xhr, st, err) {
jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
}
})
//jQuery("#list").jqGrid('filterToolbar', { searchOperators: true })
.jqGrid('navGrid', "#pager",
{ cloneToTop: true, add: false, edit: false, del: false },
{}, // default settings for edit
{}, // default settings for add
{}, // delete instead that del:false we need this
{
// search options
multipleSearch: true,
closeOnEscape: true,
closeAfterSearch: true,
ignoreCase: true
})
.jqGrid('navButtonAdd', '#pager',
{
caption: "", title: "Reorder Columns",
onClickButton: function () {
jQuery("#list").jqGrid('columnChooser');
}
})
.jqGrid('navButtonAdd', '#pager', {
caption: "pdf", buttonicon: "ui-icon-print", title: "pdf",
onClickButton: function () {
$("#list").jqGrid('excelExport', { url: '#Url.Action("ReadCommand", "MetGrid")' });
}
})
.jqGrid('navButtonAdd', '#pager',
{
caption: "FF", buttonicon: "ui-icon-signal-diag", title: "FF",
onClickButton: function () {
var selRow = jQuery("#list").jqGrid('getGridParam', 'selarrrow'); //get selected rows
//var selRow = jQuery('#list').getGridParam(rowKey); //get selected rows
if (selRow == 0) {
// display error message because no row is selected
$.jgrid.viewModal("#" + 'alertmod_' + this.p.id,
{ gbox: "#gbox_" + $.jgrid.jqID(this.p.id), jqm: true });
$("#jqg_alrt").focus();
}
else {
var dataToSend = JSON.stringify(selRow)
$.ajax({
url: '#Url.Action("Index", "AddSMS")' + '?cbChecked=' + $("input.myMultiSearch").is(":checked"),
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: dataToSend,
dataType: 'json',
success: function (result) {
alert('success');
}
});
}
}
})
$("#pager_left table.navtable tbody tr").append( // here 'pager' part or #pager_left is the id of the pager
'<td><div><input type="checkbox" class="myMultiSearch" id="WithSetting" name="setting"/>setting</div></td>');
function toolbarSearching() {
$('#list').filterToolbar({
groupOp: 'OR',
defaultSearch: "cn",
autosearch: true,
searchOnEnter: true,
searchOperators: true, //
stringResult: true //
});
};
function singleSearching() {
$('#list').searchGrid({
multipleSearch: true,
closeAfterSearch: true
});
function advancedSearching() {
$('#list').searchGrid({
multipleSearch: true,
closeAfterSearch: true
});
};
}
})
</script>
I have a question regarding jqgrid. In order to edit a row in my grid you have to select the edit button that is using the action formatter. This makes almost the whole row editable.
My question is that if the user clicks another rows edit button, instead of the cancel or submit button on the currently editable row, is there a way to return the first editable row to a non-editable state while leaving the newly selected row editable?
Here's the grid if you want to check is out. Rather large amount of code. The data is passed to the grid through a function. This is part of a large MVC app. The data is in json format.
Suggestions on which direction to go would be greatly appreciated.
grid.jqGrid({
datatype: "local",
data: gridData,
colNames: ['Action', 'ID', 'Center', 'DBA', 'Check Number', 'Received Date', 'Check Amount', 'Unposted Amount', 'Posted Amount', 'Comments', 'Check Date', 'Received By', 'Withdrawn By', 'Withdrawal Date', 'Witness', 'Is Posted?', 'Is NSed?', 'Refunded Amount', 'Batch Number'],
colModel: [
{ name: 'act', index: 'act', width: 55, align: 'center', sortable: false, formatter: 'actions',
formatoptions: { keys: true,
delbutton: false,
extraparam: { CheckLogId: getChecklogId, IsPosted: getIsPosted, CheckAmountPosted: getCheckAmountPosted, BatchNumberSequence: getBatchSeqNumber, IsNSed: getIsNSed },
afterSave: afterEditSave,
onSuccess: afterOnSuccess,
afterRestore: function (rowid) {
var acc_list = getAccountDBAOnCenter(last_center);
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(acc_list)} });
grid.trigger('reloadGrid');
if (!isCurrentUserAdmin) {
grid.setCell(rowid, 2, '', { 'visibility': 'visible' });
}
},
onEdit: function (rowid) {
edit_row_id = rowid;
grid.trigger('reloadGrid');
if (grid.getCell(rowid, 'IsPosted') == true) {
var checkAmountInput = '#' + rowid + '_CheckAmount';
$(checkAmountInput).prop("disabled", true);
}
else {
var checkAmountInput = '#' + rowid + '_CheckAmount';
$(checkAmountInput).prop("disabled", false);
}
if (!isCurrentUserAdmin) {
grid.setCell(rowid, 'CenterId', '', { 'visibility': 'hidden' });
}
checklog_id = grid.getCell(rowid, 'CheckLogId');
batch_sql_num = grid.getCell(rowid, 'BatchNumberSequence');
is_posted = grid.getCell(rowid, 'IsPosted');
check_amount_posted = grid.getCell(rowid, 'CheckAmountPosted');
check_amount_refunded = grid.getCell(rowid, 'CheckAmountRefunded');
is_nsed = grid.getCell(rowid, 'IsNSed');
batch_sql_num = batch_sql_num == '' ? '-' : batch_sql_num;
}
}
},
{ name: "CheckLogId", index: "CheckLogId", width: 40, align: "center", editable: false, hidden: true, editrules: { required: true, edithidden: true }, search: false },
{ name: "CenterId", index: "CenterId", width: 200, align: "left", editrules: { required: true },
editable: true,
formatter: 'select',
edittype: 'select',
editoptions: {
value: getSelectList(center_list),
style: 'width:190px',
dataInit: function (elem) {
var center_id = $(elem).val();
if (center_id == '') {
center_id = $("#center_id").val();
}
last_center = center_id;
var list_data = getAccountDBAOnCenter(center_id);
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(list_data)} });
},
dataEvents: [
{
type: 'change',
fn: function (e) {
resetAccountDBAValues();
var center_id = parseInt($(e.target).val(), 10);
var dba_select_list = getAccountDBAOnCenter(center_id);
var newOptions = '';
$.each(dba_select_list, function (i, dbaRecord) {
newOptions += '<option role="option" value="' +
dbaRecord.AccountId + '">' +
dbaRecord.DBAName + '</option>';
});
if ($(e.target).is('.FormElement')) {
var form = $(e.target).closest('form.FormGrid');
var acccountElm = form.find("select#AccountId.FormElement");
acccountElm.removeAttr("disabled");
acccountElm.html(newOptions);
} else {
var row = $(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
$("select#" + rowId + "_AccountId", row[0]).html(newOptions);
}
}
}
]
}, search: false
},
{ name: "AccountId", index: "AccountId", width: 200, align: "left", formatter: 'select', editable: true, editrules: { required: true },
edittype: 'select',
editoptions: { value: dba_select_list_json, style: 'width:190px' },
search: true
},
{ name: "CheckNumber", index: "CheckNumber", width: 110, align: "left", editable: true, editrules: { required: true }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px' }, search: false },
{ name: "ReceivedDate", index: "ReceivedDate", width: 100, align: "center", datefmt: 'm/d/yy', formatter: jsonDateFormatter, editable: true, editrules: { date: false, required: true, custom: true, custom_func: dateValidate }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px', dataInit: function (element) { $(element).datepicker({ dateFormat: 'm/d/yy', changeYear: true, changeMonth: true }) } }, search: false },
{ name: "CheckAmount", index: "CheckAmount", width: 110, align: "left", formatter: 'currency', editable: true, editrules: { required: true, number: true }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px' }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "CheckAmountUnposted", index: "CheckAmountUnposted", width: 120, align: "center", formatter: uPostFormatter, editable: false, editrules: { required: true, edithidden: true }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "CheckAmountPosted", index: "CheckAmountPosted", width: 120, align: "center", formatter: 'currency', editable: false, editrules: { required: true, edithidden: true }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "CheckDescription", index: "CheckDescription", width: 180, align: "left", editable: true, editrules: { required: false }, edittype: 'text', editoptions: { size: 100, maxlength: 100, style: 'width:200px' }, search: false },
{ name: "CheckDate", index: "CheckDate", width: 100, align: "center", formatter: jsonDateFormatter, editable: true, editrules: { required: true, custom: true, custom_func: checkValidation }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px', dataInit: function (element) { $(element).datepicker({ dateFormat: 'm/d/yy', changeYear: true, changeMonth: true }) } } },
{ name: "ReceivedBy", index: "ReceivedBy", width: 120, align: "left", editable: true, editrules: { required: true }, edittype: 'text', editoptions: { size: 15, maxlength: 15, style: 'width:110px' }, search: false },
{ name: "WithdrawnBy", index: "WithdrawnBy", width: 120, align: "left", editable: true, editrules: { required: false }, edittype: 'text', editoptions: { size: 15, maxlength: 15, style: 'width:110px' }, search: false },
{ name: "WithdrawnDate", index: "WithdrawnDate", width: 100, align: "center", datefmt: 'm/d/yy', formatter: jsonDateFormatter, editable: true, editrules: { date: false, required: false, custom: true, custom_func: dateValidate }, edittype: 'text', editoptions: { size: 10, maxlength: 10, style: 'width:90px', dataInit: function (element) { $(element).datepicker({ dateFormat: 'm/d/yy', changeYear: true, changeMonth: true }) } }, search: false },
{ name: "WitnessedBy", index: "WitnessedBy", width: 120, align: "left", editable: true, editrules: { required: false }, edittype: 'text', editoptions: { size: 15, maxlength: 15, style: 'width:110px' }, search: false },
{ name: "IsPosted", index: "IsPosted", width: 75, align: "center", editable: false, formatter: booleanFormatter, unformat: booleanUnFormatter, editrules: { required: true, edithidden: true }, search: false },
{ name: "IsNSed", index: "IsNSed", width: 75, align: "center", editable: false, formatter: booleanFormatter, unformat: booleanUnFormatter, editrules: { required: true, edithidden: true }, search: false },
{ name: "CheckAmountRefunded", index: "CheckAmountRefunded", width: 120, align: "center", formatter: 'currency', editable: false, editrules: { required: true, edithidden: true }, formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, prefix: "$" }, search: false },
{ name: "BatchNumberSequence", index: "BatchNumberSequence", width: 120, align: "left", editable: false, edittype: 'text', search: false }
],
pager: '#checklog-table-pager',
rowNum: 25,
rowList: [25, 50, 75, 100, 1000000],
gridview: true,
rownumbers: false,
ignoreCase: true,
viewrecords: true,
width: 1040,
height: 400,
autowidth: false,
shrinkToFit: false,
scrolling: true,
loadonce: false,
editurl: '/Payment/SaveChecklog',
loadComplete: loadGridComplete,
ondblClickRow: function (rowid, iRow, iCol, e) {
if (grid.getCell(rowid, 'IsNSed') == false) {
if (showPaymentCallBack) {
showPaymentCallBack(rowid);
}
}
}
}).jqGrid('navGrid', '#checklog-table-pager',
{ add: true, edit: false, del: false },
{},
{
caption: 'Add',
recreateForm: true,
mtype: "post",
width: 520,
addCaption: "Add Check",
reloadAfterSubmit: true,
closeAfterAdd: true,
bSubmit: "Save",
onclickSubmit: beforeAdd,
afterSubmit: addComplete,
beforeShowForm: beforeShowAdd
},
{},
{ multipleSearch: true, overlay: false }
).navButtonAdd("#checklog-table-pager", {
caption: 'Export',
title: 'Export to Excel',
buttonicon: 'ui-icon-extlink',
onClickButton: function () {
var fileName = 'checklog_for_center_' + center_id + '.xls';
var dataUrl = 'PaymentService/GetCheckLog';
var searchParameters = getCheckLogIds();
$("#checklog-table").jqGrid('excelExport', { url: '/Spreadsheet/Index?fileName=' + fileName + '&dataUrl=' + dataUrl + '&filter=' + searchParameters });
}
});
$("#checklog-table-pager table.navtable tbody tr").append(
'<td><div><input type="checkbox" class="searchClosedBox" id="navSearchClosedBox"/>NLO Deal</div></td>');
$(".searchClosedBox").change(function () {
if ($(this).is(':checked')) {
search_closed = true;
var acc_list = getAccountDBAOnCenter($("#center_id").val());
dba_select_list_json = acc_list;
dba_list = acc_list;
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(acc_list)} });
grid.trigger('reloadGrid');
}
else {
search_closed = false;
var acc_list = getAccountDBAOnCenter($("#center_id").val());
dba_select_list_json = acc_list;
dba_list = acc_list;
grid.setColProp('AccountId', { editoptions: { value: convertToSelectList(acc_list)} });
grid.trigger('reloadGrid');
}
})
//Set the current row to false
grid.editRow(current_row_id, false);
// Set the new row to editable
grid.editRow(new_row_id, true);
..
or on everytime you select a row, you can add a flag.
and then disable all rows with that flag when you click.
$cur_row.on("click", function(){
// Select all rows's with that flag, disable them and remove flag.
// Add Flag Class to this
// Then enable this one only.
}
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);
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.
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); } }
}
});