jqgrid typeahead with key value - jqgrid

I am using the twitter bootstrap typeahead and Guriddo jqgrid Version 5.2.1 form editing. I'd prefer to do this with key value pair rather then just value. All the code below works as far as it goes, the only thing missing is when the edit form opens for an existing record it shows the key (a number) instead of the value (the name of a company). The grid columns are all created on the fly. I think if inside editoptions, if I could specify a value: of the name of the company, it might be a good hack-around, but that doesn't work.
label: svf.fieldLabel,
name: svf.tf[0].nativename,
width: 150,
editable: true,
edittype: "text",
formatter: 'select',
formatoptions:
{
value: getEditOptionsValue(svf.relatedItemId)
},
editoptions: {
dataInit: function (element) {
var data = JSON.parse(getSelects(svf.relatedItemId));
$(element).attr("autocomplete", "off").typeahead({
appendTo: "body",
dataType: "json",
displayText: function (item) { return item.name; },
source: function (query, process) {
return process(data);
}
});
} //end datainit
}//end edit options

In order to solve your problem you will need to use a custom unformat function.
The predefined unformat function return the key and not the value.
More you can see in our documentation here
You can use the following code:
label: svf.fieldLabel,
name: svf.tf[0].nativename,
width: 150,
editable: true,
edittype: "text",
formatter: 'select',
unformat : function(value, options, cellObject) {
return value;
},

Related

jqgrid - dynamically change mask based on a previous column value

I am using jquery.maskedinput-1.3.js
In column 1, are the phone types. In column 2 the phone numbers.
{ name: 'PhoneTypeId', index: 'PhoneTypeId', hidden: true, editable: true, sortable: true},
{ name: 'Phone', index: 'Phone', width: 150, editable: true, editoptions: { dataInit: function (elem) { $(elem).mask("(999) 999-9999"); }, dataEvents: [{ type: 'change', fn: function (e) { hasChanges=true } }]}, editrules:{required: true}, sortable: true },
I'd like to dynamically change the mask based on the type of phone. Is this possible?
My data is json serialized objects:
datatype: "local",
data: #Html.Raw(ViewBag.Phones)
editurl: 'clientArray'
Thanks,
Gen
You can add change event (using dataInit) of the phone type and based on this you can change the mask (if this plugin allows this). Initially when you start editing (depending on the edit type - form edit or inline edit) you can use some events before editing by example beforeShowForm for form edit or beforeEditRow for inline edit. If you use Guriddo jqGrid JS you can look at the documentation here
EDIT:
In case the field phonetype is not editable by the user then
{ name: 'Phone', index: 'Phone', width: 150, editable: true,
editoptions:{
dataInit: function (elem, options) {
// use the id of the row
var id = options.rowId;
// content of the phonetype cell
var phonetypeval = $(this).jqGrid('getCell', id, 'PhoneTypeId')
if( phonetypeval === 'something') {
mask = 'mask1';
} else {
mask = 'mask2';
}
$(elem).mask(mask);
},
dataEvents: [{
type: 'change', fn: function (e) { hasChanges=true } }
]}
, editrules:{required: true},
sortable: true}
Note that this code is valid for inline and form edit.

How to make JqGrid always have empty row at bottom?

I'm using JqGrid with inline editing and i dont use navigation, pager or footer. I want to add empty row at the bottom to added. I mean empty row will be always there after editing an exsiting row, after adding new row.
I added row in loadComplete event, but i just adds empty row at beginning not anymore.
jQuery("#tableContents").jqGrid({
postData: { orderId: '139358' },
mtype: "POST",
url: "test.asmx/GetContents",
datatype: "json",
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
return JSON.stringify(postData);
},
jsonReader: { repeatitems: true, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
colNames: ['Master Content ID', 'Description Of Goods', 'No Of Items', 'Total Value for Customs', 'Weight', 'Track No'],
colModel: [
{
name: 'master_content_id', index: 'master_content_id', width: 60, hidden: true, editable: true, editrules: { edithidden: false }
},
{
name: 'content', index: 'content', width: 60, sorttype: "string", editable: true, edittype: "text",
editrules: {
required: true
}
},
{
name: 'piecesInt', index: 'piecesInt', width: 90, align: "right", sorttype: "int", editable: true,
editrules: {
number: true,
required: true
}
},
{
name: 'value', index: 'value', width: 100, align: "right", sorttype: "float", editable: true,
editrules: {
required: true
}
},
{
name: 'weight', index: 'weight', width: 80, align: "right", sorttype: "float", editable: true,
editrules: {
required: true
}
},
{
name: 'track_no', index: 'track_no', width: 80, align: "right", sorttype: "string", editable: true
},
],
rowNum: 10,
rowList: [10, 20, 30],
//pager: jQuery('#pager1'),
sortorder: "desc",
viewrecords: true,
regional: 'tr',
height : '100%',
caption: "Manipulating Array Data",
editurl: 'test.asmx/EditContent',
loadonce: true,
sortable: true,
//footerrow: true,
onSelectRow: function (rowid) {
var $self = $(this),
// savedRows array is not empty if some row is in inline editing mode
savedRows = $self.jqGrid("getGridParam", "savedRow");
if (savedRows.length > 0) {
$self.jqGrid("restoreRow", savedRows[0].id);
}
$self.jqGrid("editRow", rowid, {
keys: true,
extraparam: { orderId: '139358', staffId : '111' },
aftersavefunc: function (rowid) {
alert("Saved");
}
});
},
loadComplete: function () {
var $self = $(this)
$self.jqGrid('addRowData', undefined, {});
}
});
How can we do that?
You try to use jqGrid in the way which is opposite to the standard behavior. It's very bad idea. You will have to write a lot of code and have minimal difference to the standard way.
The main problem is: jqGrid hold data inside of the grid. You try to add an empty row inside of the data which is not loaded from the server, which is not in editing mode (like addRow do for example) and which is not saved on the server. So you try to use the grid in the way contradicting to jqGrid logic. It sounds simple, but it is really bad and the implementation will be complex.
I would recommend you to follow the standard way. You will have clean and simple code and the most of the users can use the grid intuitive. For example you can do add navigator toolbar where you add "+"/"Add" button with respect of inlineNav. The user will intuitively understand what need be done to add new row. The difference whether the user clicks on empty row at the bottom of the grid or if the user clicks on "Add new row" button, existing also at the bottom of the grid, is very small. After the click on the button the new row will be added and the user can insert the data. By press of Enter the row will be saved and by press on Esc the empty row will be removed. The code will be simple and it will do almost the same what you try to implement now.

JQGrid with Bootstrap Multiselect and Custom Save

I have 2 requirements I need to solve for. I'm using a JQGrid on an aspx page with other form controls. Saving the main form generates a database id that is populated in a hidden field. If the hidden field is empty, I don't want to save the grid record because I need the db id first. If the hidden field has a value, I want to save the row with a editurl.
The second part is related to a Bootstrap multiselect in one of the grid columns (I need the filtering capability). When a user selects a value from the multiselect I'd like to populate the PERNR column with the value selected. I can't use the onchange event for the multiselect since if the user doesn't change from the first option obviously it won't trigger the event.
How can I solve these 2 issues?
var roleDdlItems = $.parseJSON($("input[id$='hdfRoleDdlItems']").val());
$("#grdParticipants").jqGrid({
jsonReader: {
repeatitems: false,
root: 'Table',
page: function (obj) { return 1; },
total: function (obj) { return 2; },
records: function (obj) { return obj.ItemCount; },
id: "0"
},
caption: getParticipantCaption(),//"Participants",
pgbuttons: false,
recordtext: "Total: {2}",
emptyrecords: "",
loadtext: "Loading...",
pgtext: "",
datatype: function () {
UpdateParticipant("getParticipants");
},
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
// serializeGridData: function (postData) { return JSON.stringify(postData); },
colNames: ['Id', 'PERNR', 'Name', 'Email', 'RoleId', 'Role', 'Active', 'Updated'],
colModel: [
{ name: 'Id', index: 'Id', hidden: true, editable: true, hidedlg: true },
{ name: 'PERNR', index: 'PERNR', hidden: true, editable: true, hidedlg: true },
{ name: 'Name', index: 'Name', width: 200, align: "center", editable: true, edittype: "select",
editoptions: { value: function () {
var ITDdlItems = $.parseJSON($("input[id$='hdfITEmployeesDdlItems']").val());
var s = "";
if (ITDdlItems.Table4 && ITDdlItems.Table4.length) {
for (var i = 0, l = ITDdlItems.Table4.length; i < l; i++) {
var item = ITDdlItems.Table4[i];
s += item.PERNR + ":" + item.Name + ";";
}
}
s = s.substring(0, s.length - 1);
return s;
},
dataInit: function (e) {
$(e).multiselect({
maxHeight: 200,
enableFiltering: true,
filterPlaceholder: "Search Employees",
enableCaseInsensitiveFiltering: true,
templates: {
filter: '<li class="multiselect-item filter"><div class="input-group"><input class="form-control input-sm multiselect-search" id="txtITEmployeeFilter" type="text"></div></li>',
filterClearBtn: "<span class='input-group-btn'><button class='btn btn-default input-sm multiselect-clear-filter' type='button'><i class='glyphicon glyphicon-remove'></i></button><button class='btn btn-primary input-sm multiselect-clear-filter' type='button' onclick='javascript:searchEmployees("#" + e.id + "");'><i class='glyphicon glyphicon-search'></i></button></span>"
},
onDropdownHide: function (event) {
$(e).multiselect("updateButtonText");
$(e).multiselect("updateSelectAll");
}
// onChange: function(option, checked) {
// var selectedOption = $("#" + e.id + " option:selected").val();
// alert(selectedOption);
// }
});
}
}
},
{ name: 'Email', index: 'Email', width: 250, align: "center", editable: false },
{ name: 'RoleId', index: 'RoleId', hidden: true, editable: true, hidedlg: true },
{ name: 'Role', index: 'Role', width: 175, align: "center", editable: true, edittype: "select",
editoptions: { value: function () {
var roleDdlItems = $.parseJSON($("input[id$='hdfRoleDdlItems']").val());
var s = "";
if (roleDdlItems.Table3 && roleDdlItems.Table3.length) {
for (var i = 0, l = roleDdlItems.Table3.length; i < l; i++) {
var item = roleDdlItems.Table3[i];
s += item.Id + ":" + item.Role + ";";
}
}
s = s.substring(0, s.length - 1);
return s;
},
dataInit: function (e) {
$(e).multiselect({
maxHeight: 200,
onDropdownHide: function (event) {
$(e).multiselect("updateButtonText");
$(e).multiselect("updateSelectAll");
}
});
}
}
},
{
name: 'Active', index: 'Active', hidden: false, width: 75, align: "center", editable: true, hidedlg: true,
edittype: 'checkbox', editoptions: { value: "true:false", defaultValue: "Active" },
formatter: "checkbox", formatoptions: { disabled: true }
},
{ name: 'Updated', index: 'Updated', width: 100, align: "center", editable: false, sorttype: "date",
formatter: 'date', formatoptions: { newformat: 'n/j/y g:i A' }
}
],
rowNum: 5000,
autoWidth: true,
rowList: [],
pager: '#pgrParticipants',
toppager: true,
sortname: 'Name',
viewrecords: true,
sortorder: 'asc'
});
$('#grdParticipants').navGrid("#pgrParticipants", {edit: false, add: false, del: true, refresh: false, search: false, view: false});
$('#grdParticipants').inlineNav('#pgrParticipants',
// the buttons to appear on the toolbar of the grid
{
edit: true,
add: true,
del: true,
cancel: true,
editParams: {
keys: true
},
addParams: {
addRowParams: {
keys: true
}
}
});
$('#grdParticipants').navSeparatorAdd('#pgrParticipants', {
sepclass: 'ui-separator',
sepcontent: '',
position: 'last'
});
$('#grdParticipants').navButtonAdd('#pgrParticipants',
{
buttonicon: "ui-icon-help",
title: "Roles & Responsibilities Matrix",
caption: "Roles & Responsibilities Matrix",
position: "last",
onClickButton: showRoleMatrix
});
* EDIT *
The datatype function contains an ajax call that populates the grid. I’m using this based on an example someone else in my company provided. I’ll look around today for a better method, as it sounds this isn’t the best way. Maybe using url, which I stumbled across today.
This is a tab interface to track outages that will ultimately have a total of 5 separate JQGrids. When the page initially loads for a new outage this grid is on the first tab and is empty. It would only contain records if they’re editing an existing outage. In that instance, I would populate values in the main outage form controls and load data in the grid. The UpdateParticipant function seemed work well for this as it allows me to check for that hidden field before deciding whether a db call is even needed.
The PERNR is an employee id that the user doesn’t need to know, hence hidden. It’s not strictly confidential info, but we don’t advertise it either. They only need to see Name and Email (maybe) based on the value selected from the Name multiselect. Id will be a Participant Id generated by the database after the grid data is saved. Which can’t happen until the main outage form above is saved because I need that unique Outage Id as a foreign key for the participants. This attaches a participant to an outage and becomes the unique Id for the grid rows.
The selectedOption = $("#" + e.id + " option:selected").val() is commented out, but was only to trigger onchange for that specific Bootstrap Multiselect. The Role multiselect didn’t have an onchange function registered in code. So yes, it was for one element only. As mentioned previously, I was trying to use this to populate PERNR on a Name select. I need PERNR not Name to save to the db later. To solve for this I’m using the custom formatter on that column so I’ve since removed that onchange function for the Name multiselect. The ITDdlItems = $.parseJSON($("input[id$='hdfITEmployeesDdlItems']").val()) contains a json list of employee names and PERNRs to populate the Name multiselect. That works fine so this isn’t code relevant.
The only thing I need to figure out is how to perform a check for OutageId in the hidden field before the grid data is posted to the server. Thinking about it last night, if all else fails, I’ll let it post to the server and check there for the OutageId. I just don’t like posting if it isn’t going to make a db call. I’d share a demo somewhere if I knew how. This is an internal application so my options are limited.

Jqgrid and Data send error

I have this code..
var _codSelected="";
$("#list").jqGrid({
url: '/modulos/mantenimiento/Proveedores.ashx',
datatype: 'xml',
mtype: 'GET',
colNames: ['Codigo' //Some more colnames and colmodels]
colModel: [{ name: 'Codigo', index: 'PRg_Codigo', edittype: 'select',
editable: true, editrules: { edithidden: false }, editoptions:
{ size: 30, dataUrl: '/modulos/mantenimiento/grupoProveedores.ashx?
oper=selectAllGroups }, sortable: true }
],
onSelectRow: function (rowid) {
_codSelected = rowid;
//alert(_codSelected);
},
When i select a row in my jqgrid, the alert (commented) is show me the value that i want to send by dataUrl to my handler, but always is empty. The alert shows it, but i cant include it in the url! Can someone tell me how can i do it?
Thanks.
EDIT
I have fixed adding this event..
ajaxSelectOptions: {
data: {
codSelected: function () {
return _codSelected;
}
}
}
That's because _codSelected is just an empty string in the scope of the colModel array declaration. It only becomes your row id in the callback function.
If you want _codSelected to have a value to append to dataUrl, you need to give it one before referencing it inside your object literal.

jqgrid inline searching

I have a jqgrid that I am performing an inline edit on. I am using the textarea instead of text. How do I submit the data once I'm done editing the cell. "Enter" works on text and obviously doesn't on textarea since it creates a new line.
This is a snippet from my code
grid4 = $('#CaseNotes').jqGrid({
...
{ name: 'Note', index: 'Note', width: 650, align: 'left', sortable: false,
editable: true, edittype: 'textarea', editoptions: { rows: '5', cols: '100' }
},
...
onSelectRow: function (id) {
if (id && id != lastsel) {
grid4.restoreRow(lastsel);
lastsel = id;
}
grid4.jqGrid('editRow', id, true, '', '', '', '', reload);
},
editurl: '#Url.Action("EditCaseNote", "CaseNote")',
...
});
//function to reload the grid
function reload(id, result) {
grid4.setGridParam(
{
url: '#Url.Action("DisplayCaseNotesGrid", "CaseInfo")',
datatype: 'json'
}
).trigger('reloadGrid');
}
If I understand you correct you mean "inline editing" instead of "inline searching". Because you can't use Enter key you have to include some additional button in the Navigator toolbar which call saveRow method. You can either add the corresponding row manually with respect of navButtonAdd or use inlineNav method.
Thanks to Oleg's advise I was able to solve this. Here is my code incase anyone runs into a similar problem. I removed my refresh function since I no longer needed it.
grid4 = $('#CaseNotes').jqGrid({
...
{ name: 'Note', index: 'Note', width: 650, align: 'left', sortable: false,
editable: true, edittype: 'textarea', editoptions: { rows: '5', cols: '100' }
},
...
onSelectRow: function (id) {
if (id && id != lastsel) {
grid4.restoreRow(lastsel);
lastsel = id;
}
grid4.jqGrid('editRow', id, { keys: true, afterrestorefunc: reload });
},
...
});
//Adds the button to the pager
grid4.jqGrid('navButtonAdd', '#casenotes_pager', {
caption: 'Save Case Note',
buttonicon: 'none',
onClickButton: function () {
//calls the saveRow function
grid4.jqGrid('saveRow', lastsel,
{
url: '#Url.Action("EditCaseNote", "CaseNote")'
}
);
//refreshes the grid
grid4.setGridParam(
{
url: '#Url.Action("DisplayCaseNotesGrid", "CaseInfo")',
datatype: 'json'
}
).trigger('reloadGrid');
}
});

Resources