By default jqGrid considers the text value to set the selected option in a combo box. How can I add a column for the key value and have jqGrid selecting the right option using the key value?
I've been using the custom formatter, but some pages are displaying undefined when the rows are not editable, and when the inline edit modes is enabled, they display the right option.
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#Grid').jqGrid({
autowidth: true,
datatype: 'json',
height: '100%',
pager: '#pager',
rowNum: 10,
sortname: 'Description',
url: '/AppUrl/Service',
viewrecords: true,
gridComplete: function () { OnGridComplete() },
onSelectRow: function (rowid, status) { grid.EditGridRow(rowid) },
colModel: [
{
name: 'ID',
hidden: true,
key: true,
index: 'ID'
}, {
name: 'ModuleId',
formatter: formatAsDropDown,
label: 'Módulo',
sortable: true,
width: 300,
editable: true,
edittype: 'select',
editoptions: { "value": "1:Modulo 1;2:Modulo 2;3:Modulo 3" },
index: 'ModuleId'
}, {
name: 'Description',
label: 'Description',
sortable: true,
width: 300,
editable: true,
index: 'Description'
}
]
});
function formatAsDropDown(cellvalue, options, rowObject) {
return rowObject.ModuleName;
}
});
</script>
Related
I am using free version (latest) of jqgrid with MVC c#.
I have form fields setup. When the user clicks add in the footer button (add) it shows a modal popup with all the form fields.
I want my first textbox in the form field to autocomplete, ie when they start typing their empployee number in the textbox, I should query my mvc controller and fetch the data and then prefill if there is a match. Once that prefills I also want to update 2 more label on the form, firstname & lastname. Also the button should be disabled until the correct id is fetched in the employee textbox.
Not sure how should I go about this. I can share my sample grid that I have used.
Thanks
<script type="text/javascript">
$(function () {
"use strict";
var $grid = $("#list");
$grid.jqGrid({
url: '#Url.Action("GetData", "Home")',
datatype: "json",
mtype: 'Get',
colNames: ['Id', 'Name', 'Sex', 'Address'],
loadonce: true,
height: '100%',
autowidth: true,
colModel: [
{ name: 'empid', index: 'empid', editable: true, editrules: { required: true}},
{ name: 'fname', index: 'fname', editable: true, editrules: { required: true}}, //currently these are texbox, but I want this to be label which gets filled based on the empid
{ name: 'lname', index: 'lname', editable: true, editrules: { required: true}},
{ name: 'address', index: 'address', editable: true, editrules: { required: true}}
],
cmTemplate: { autoResizable: true, editable: true },
autoResizing: { compact: true, resetWidthOrg: true },
iconSet: "fontAwesome",
rowNum: 10,
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
autoencode: true,
sortable: true,
pager: true,
rownumbers: true,
sortname: "uid",
sortorder: "desc",
pagerRightWidth: 150,
inlineEditing: {
keys: true
},
formEditing: {
reloadGridOptions: { fromServer: true },
reloadAfterSubmit: true,
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
closeAfterAdd: true,
closeAfterDelete: true,
savekey: [true, 13]
}
caption: "MyData"
}).jqGrid("navGrid")
.editGridRow("new", properties);
});
Updated:
If there is also option to use onkeyup, mouseover etc on the textbox so that I can validate whats entered in the textbox and then also update other textbox based on this value
I have done this by using keyup event instead of using autocomplete.
Relevant code as below:
colModel: [
{
name: 'empid', index: 'empid', editable: true, , editrules: { required: true },
editoptions:
{
dataEvents: [
{
type: 'keyup',
fn: function (e) {
$.ajax({
url: //call to my method in my mvc controller,
data: "empid=" + $(this).val(),
type: "GET",
success: function (data) {
//validate and populate other fields here
}
else {
}
},
error: function (passParams) {
// code here
}
});
}
}
]
}
]
When do inline edit in jqgrid row, then it allows to do but, again click on another row then, it is not cancelling earlier row and both will remain in edit mode.
I need it to be cancel last one if user has clicked new row to edit as at single time, single row should be open for edit.
(if user click on next row to edit then, last row should be cancel out and new row only should open for edit).
Problem is here, it switch to the new row to edit but, "edit" and "cancel" button of last row remain as it is. Hence, simultaneously user can see two two row's edit, cancel buttons.
$("#SamplesGrdList").jqGrid({
url: '#Url.Action("ActionName", "Controller")/',
datatype: "json",
colNames: ['Category Name','ValueToChange','Edit'],
colModel: [
{ name: 'CategoryName', index: 'CategoryName', sortable: true, sorttype: 'text', width: 140, classes: 'bStyle' },
{
name: 'ValueToChange', index: 'ValueToChange', width: 82, align: "right", editable: true, editrules: { number: true, required: true, custom: true, custom_func: Deductions }, formatter: 'currency',
formatoptions: { decimalSeparator: ".", thousandsSeparator: ",", decimalPlaces: 2, defaultValue: '0.00', prefix: '$ ' },
editoptions: {
style: 'width:70px;', dataEvents: [
{
type: 'blur',
fn: function (e) {
CalculateDeductions($(this).val());// SOme DB Operation
}
}
]
}
},
{
name: 'act', index: 'act', width: 60, align: 'center', sortable: false, formatter: 'actions',
formatoptions: {
keys: false,
delbutton: false,
onEdit: function (rowid) {
},
onSuccess: function (jqXHR) {
$("#SamplesGrdList").trigger('reloadGrid');
return true;
},
onError: function (rowid, jqXHR, textStatus) {
},
afterSave: function (rowid) {
},
afterRestore: function (rowid) {
$("#SamplesGrdList").trigger('reloadGrid');
}
}
}
],
rowNum: 10, rowList: [10, 20, 30],
sortname: 'CategoryName',
shrinkToFit: true,
sortable: true,
viewrecords: true,
sortorder: "desc",
footerrow: true,
width: '780',
height: '100%',
jsonReader:
{
root: 'List',
page: 'Page',
total: 'TotalPages',
records: 'TotalCount',
repeatitems: false,
id: 'Id'
},
editurl: '#Url.Action("ActionName", "ControllerName")'
});
Please guide how to resolve this so, at a time, single row is avaialble for edit/save/cancel.
NOTE: jqgrid version is Jquery.jqgrid-4.1.2.min.js
Thanks
I think that the only problem which you have: the usage of very old version jqGrid 4.1.2. I recommend you update to jqGrid 4.7 or free jqGrid 4.8.
Just try the demo for example. It uses formatter: "actions" which you need. You can verify that it works like you need.
How to do edit on popup dialog in jqgrid.
Below is jqgrid stuff. I dont' need inline editing. I want to popup dialog.
To popup dialog, we already have dialog which can be popup.
To achieve this, I need to call - javascript function which can allow to popup dialog.
please guide me how I could call javascript function on click of edit icon ?
$('#CategoriesGrdList').jqGrid({
ajaxGridOptions: {
error: function () {
$('#CategoriesGrdList')[0].grid.hDiv.loading = false;
alert('An error has occurred.');
}
},
url: '#Url.Action("GetAllCategoriesList", "Categories")/' + 0,
gridview: true,
autoencode: true,
postData: { categoryId: 1 },
datatype: 'json',
jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'Id' },
mtype: 'GET',
colNames: ['Id', 'Code', 'Description', 'IsActive', "actions"],
colModel: [
{ name: 'Id', index: 'Id', hidden: false, key: true },
{ name: 'Code', index: 'Code', width: 170},
{ name: 'Description', index: 'Description', width: 170},
{ name: 'IsActive', index: 'IsActive', width: 170 },
{
name: 'actions', index: 'actions', formatter: 'actions',
formatoptions: {
keys: true,
editbutton: true,
delOptions: { url: '#Url.Action("DeleteCategory", "Categories")' }
}
}
],
pager: $('#CategoriesGrdPager'),
sortname: 'Code',
rowNum: 3,
rowList: [3, 6, 9],
width: '500',
height: '100%',
viewrecords: true,
multiselect: false,
caption: "Categories",
loadComplete: function () {
$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
beforeSelectRow: function (rowid, e) {
return false;
},
sortorder: 'desc'
}).navGrid('#CategoriesGrdPager', { edit: true, add: false, del: false, search: false, refresh: true });
Pleae guide me.
To Make your own Edit actions/buttons in JQGrid, you need to set the default Edit navGrid buttons/actions to false, then add custom buttons to the navigation grid.
Here is an example below - remember to remove the navGrid setup in jqgrid chained functions above:
$('#CategoriesGrdList').jqGrid('navGrid', '#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: true})
.navButtonAdd('#CategoriesGrdPager', {
title: "Edit",
caption: "Edit",
buttonicon: "ui-icon-pencil", // JQuery UI Icon
onClickButton: function () { /*CALL YOUR FUNCTION HERE*/ },
position: "last" // Position of the button on Nav
})'
I'm using jqGrid 4.4.5 and the toolbar filter.The grid can reloads base on condition(for example inbox or outbox letters).I use select options of a column.I need to change the select options of a 'type' column.For example if the grid show 'inbox letter' Then 'select options' show 'A,B' Otherwise show 'C,D'.
I use this code for create grid:
function creatGrid() {
var inboxSearchOptions = 'A:A;B:B;All:';//inbox Options
var inboxEditOptions = 'A:A;B:B';
var outboxSearchOptions = 'C:C;D:D;ALL:';
var outboxEditOptions = 'C:C;D:D';
grid.jqGrid({
url: 'jqGridHandler.ashx',
datatype: 'json',
width: 100,
height: 200,
colNames: ['Email', 'Subject', 'Type', 'ID'],
colModel: [
{ name: 'Email', width: 100, sortable: false, },
{ name: 'Subject', width: 100, sortable: false, },
{
name: 'Type',
width: 100,
search: true,
formatter: 'select',
edittype: 'select',
editoptions: { value: (($.cookie("calledFrom") == "inbox") ? inboxEditOptions : outboxEditOptions), defaultValue: 'ALL' },
stype: 'select',
searchoptions: { sopt: ['eq', 'ne'], value: (($.cookie("calledFrom") == "inbox") ? inboxSearchOptions : outboxSearchOptions) },
},
{ name: 'ID', width: 100, sortable: false, hidden: true, key: true },
],
rowNum: 20,
loadonce: true,
rowList: [5, 10, 20],
recordpos: "left",
ignoreCase: true,
toppager: true,
viewrecords: true,
multiselect: true,
sortorder: "desc",
scrollOffset: 1,
editurl: 'clientArray',
multiboxonly: true,
jsonReader:
{
repeatitems: false,
},
gridview: true,
}
}
Then i use this code for reload grid:
function doReloadMainGrid() {
switch (($.cookie("calledFrom")) ) {
case "inbox":
{
window.grid.setColProp("Type", {
searchoptions: {
value: inboxSearchOptions,
},
editoptions: {
value: inboxEditOptions
},
});
}
break;
case "outbox":
window.grid.setColProp("Type", {
searchoptions: {
value: outboxSearchOptions,
},
editoptions: {
value: outboxEditOptions
},
});
break;
}
var url = createUrl();
window.grid.setGridParam({ datatype: 'json' });
window.grid.setGridParam({ url: url });
window.grid.trigger("reloadGrid", { current: true });
}
But the 'setColProp' has no effect.I read this answer but it was not a good solution for me.What i got wrong?
Thanks in advance
setColProp don't change existing filter toolbar. If you just get the values from cookie or localStorage than it would be better to do this before the filter toolbar will be created by filterToolbar method.
You can use destroyFilterToolbar to recreate the filter toolbar using new values in colModel. If you have to use old version of jqGrid you can just follow the answer which describe how to add the code destroyFilterToolbar to old version of jqGrid.
In my jqGrid I want to pass in 5 rows from my model and display 3 of them in the grid but have all 5 show up in the edit and add popup window that jqGrid generates. I know I can add the hidden: true attribute in the colModel settings to prevent it from showing up but this also hides it from the popup window. Is there some way of hiding columns from the grid but show it when adding or editing data?
My Grid code:
<script type="text/javascript">
$( document ).ready( function ()
{
$( '#Sections' ).jqGrid( {
url: '#Url.Action("GetData")',
datatype: 'json',
mtype: 'GET',
colNames: ['ID', 'RouteName', 'Title', 'File', 'Description'],
colModel: [
{ name: 'ID', index: 'ID', width: 10, sorttype: 'int' },
{ name: 'RouteName', index: 'RouteName', width: 50, editable: true, edittype: 'text'},
{ name: 'Title', index: 'Title' },
{ name: 'File', index: 'File', hidden: true },
{ name: 'Description', index: 'Description', hidden: true }
],
autowidth: true,
height: '100%',
pager: $( '#SectionsPager' ),
sortname: 'ID',
viewrecords: true,
loadonce: true,
ignoreCase: true,
multiSort: true,
} );
$( '#Sections' ).jqGrid( 'navGrid', '#SectionsPager',
//enabling buttons
{ add: true, del: false, edit: true, search: true },
//add options
{ width: 'auto' },
//edit options
{ width: 'auto' },
//delete options
{}
);
} );
</script>
Via Oleg's answer at
Sending additional parameters to editurl on JQgrid
hidden: true, editable: true, editrules: { edithidden: true}, hidedlg: true
The editrules: { edithidden: true} section will "turn on" your column when editing.
u can use beforeShowForm in your add/edit and make it hidden or not
beforeShowForm: function(form) {
$("#tr_columnname").hide();
$("#tr_columnname").show();
}