I am looking for option to support auto-complete type input field on free-jqgrid inline-edit mode. It works great if small 5-10 values into drop-down. I have need to either value need to be searched or needs auto-complete option on the grid.
Let me know if this is possible? if it is please provide some direction or example.
UPDATE 1
Screenshot displays inline input text field needs Auto-Complete
UPDATE 2
I have following order in which files are imported:
jquery-ui-min.css
bootstrap.min.css
bootstrap-grid.min.css
ui.jqgrid.min.css
font-awesome.min.css
select2.min.css
jquery.min.js
jquery-ui.min.js
select2.min.js
jquery.jqgrid.min.js
tether.min.js
bootstrap.min.js
You can use the code like
{ name: "name", align: "justify", width: 80, editrules: { required: true },
autoResizing: { minColWidth: 80 },
createColumnIndex: true,
editoptions: {
dataInit: function (elem) {
initAutocomplete.call(this, elem, "name");
}
},
searchoptions: {
dataInit: function (elem) {
initAutocomplete.call(this, elem, "name");
},
sopt: [ "cn", "eq", "bw", "ew", "bn", "nc", "en" ],
clearSearch: true
} }
where initAutocomplete function is declared as
var initAutocomplete = function (elem, cmName) {
$(elem).autocomplete({
source: $(this).jqGrid("getUniqueValueFromColumnIndex", cmName),
delay: 0,
minLength: 0
});
};
See https://jsfiddle.net/OlegKi/ugxvr75q/
Related
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.
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;
},
I am using the free JqGrid, and the problem I have is that the search filter fields do not lengthen to fit the width of the column, as you can see for the title below. How do I achieve this?
The grid is created by the following code;
$(function () {
getGrid();
});
var populateGrid = function (data) {
var grid = $("#grid");
grid.jqGrid({
data: data,
colNames: ["Contract No", "Title", ""],
colModel: [
{ name: "FullContractNo", label: "FullContractNo", width: 80, align: "center" },
{ name: "ContractTitle", label: "ContractTitle", width: 500, searchoptions: { sopt: ["cn"] } },
{ name: "Link", label: "Link", width: 60, search: false, align: "center" }
],
cmTemplate: { autoResizable: true },
rowNum: 20,
pager: "#pager",
shrinkToFit: true,
rownumbers: true,
sortname: "FullContractNo",
viewrecords: true
});
grid.jqGrid("filterToolbar", {
beforeSearch: function () {
return false; // allow filtering
}
}).jqGrid("gridResize");
$("#divLoading").hide();
}
var getGrid = function () {
var url = GetHiddenField("sir-get-selected-contract-list");
var callback = populateGrid;
dataService.getList(url, callback);
}
The most easy way to set the width of the searching field is the usage of attr property of searchoptions:
{
name: "ContractTitle",
label: "ContractTitle",
width: 500,
searchoptions: {
sopt: ["cn"],
attr: { style: "width:100px;" }
}
}
In the way one can set any attribute on the searching field, inclusive style attribute.
I've got a Kendo Grid with inline editing enabled and a numeric text box in it to edit numeric values:
$("#g_Points").kendoGrid({
dataSource: viewModel.myList,
columns: [
{ field: "Name", title: "Name", width: 250, editor: function (element, options) { element.text(options.model.Name) } },
{ field: "Available", title: "Points", width: 90, editable: true }
],
editable: true,
save: function (arg) {
arg.model.Available = arg.values.Available;
saveRow(arg.model);
this.cancelChanges();
},
scrollable: true
});
It works fine but I need to restrict the "Available" field to positive numbers only.
I tried this:
...
{ field: "Available", title: "Points", width: 90, editable: true, editor: myEditorFunction }
...
function myEditorFunction (container, options) {
$('<input/>')
.appendTo(container)
.kendoNumericTextBox({
min: 0
});
}
And it restricts to only positive numbers only, but then the save functionality isn't working anymore. I can edit the values but when I leave the cell editing, the value returns to the default one.
How can I restrict my inline numeric textbox to positive numbers only?
Got it to work, here's what I did:
$("#g_Points").kendoGrid({
dataSource: new kendo.data.DataSource({
data: viewModel.myList,
schema: {
model: {
fields: {
Available: { type: "number", validation: { required: true, min: 0 } }
}
}
}
}),
Looks like you have to set the name attribute of the input to be that of the field.
function myEditorFunction (container, options) {
$('<input name="' + options.field + '" />')
.appendTo(container)
.kendoNumericTextBox({
min: 0
});
}
See here for more info.
I have a jQgrid that loads data initially via an ajax call from backend(java struts). Again, this is one time load and once loaded, the jqGrid should operate on the data available locally.
Initially, datatype:json and once loadcomplete, set datatype:local.
Now is there a way to use filterToolbar for local datatype with the following options in free jqgrid;
autocomplete enabled in the toolbar
excel like filtering options
Jqgrid Options:
jQuery("#listTable").jqGrid({
url:'/WebTest/MainAction.do',
datatype: "json",
colNames: ['Label','Value'],
colModel: [
{name:'label',index:'label',width: 40,search:true, stype:'text',sorttype:'int'},
{name:'value',index:'value',width: 56,search:true, stype:'text',sorttype:'text'}
],
autowidth: true,
autoResizing: { compact: true, widthOfVisiblePartOfSortIcon: 13 },
rowNum: 10,
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
pager: true,
toppager: true,
rownumbers: true,
sortname: "label",
sortorder: "desc",
caption: "Test 235",
height: "200",
search: true,
loadonce: true,
loadComplete: function (data) {
},
gridComplete: function(){
jQuery("#listTable").jqGrid('setGridParam', { datatype: 'local' });
}
}) .jqGrid("navGrid", { view: true, cloneToTop: true})
.jqGrid("filterToolbar")
.jqGrid("gridResize");
All the features are enabled by default if I understand you correctly. The server just have to return all data instead of one page of data to make loadonce: true property work correctly. You need just call filterToolbar after creating the grid. All will work like with local data. You should consider to set sorttype property for correct local sorting and stype and searchoptions for correct filtering of data.
To have "autocomplete" and "excel like filtering options" you need additionally to follow the answer which set autocomplete or stype: "select", searchoptions: { value: ...} properties based on different values of input data. You can do this inside of beforeProcessing callback. The code from the answer use this.jqGrid("getCol", columnName) which get the data from the grid. Instead of that one have access to data returned from the server inside of beforeProcessing callback. So one can scan the data to get the lists with unique values in every column and to set either autocomplete or stype: "select", searchoptions: { value: ...} properties.
UPDATED: I created JSFiddle demo which demonstrates what one can do: http://jsfiddle.net/OlegKi/vgznxru6/1/. It uses the following code (I changed just echo URL to your URL):
$("#grid").jqGrid({
url: "/WebTest/MainAction.do",
datatype: "json",
colNames: ["Label", "Value"],
colModel: [
{name: "label", width: 70, template: "integer" },
{name: "value", width: 200 }
],
loadonce: true,
pager: true,
rowNum: 10,
rowList: [5, 10, "10000:All"],
iconSet: "fontAwesome",
cmTemplate: { autoResizable: true },
shrinkToFit: false,
autoResizing: { compact: true },
beforeProcessing: function (data) {
var labelMap = {}, valueMap = {}, i, item, labels = ":All", values = [],
$self = $(this);
for (i = 0; i < data.length; i++) {
item = data[i];
if (!labelMap[item.label]) {
labelMap[item.label] = true;
labels += ";" + item.label + ":" + item.label;
}
if (!valueMap[item.value]) {
valueMap[item.value] = true;
values.push(item.value);
}
}
$self.jqGrid("setColProp", "label", {
stype: "select",
searchoptions: {
value: labels,
sopt: ["eq"]
}
});
$self.jqGrid("setColProp", "value", {
searchoptions: {
sopt: ["cn"],
dataInit: function (elem) {
$(elem).autocomplete({
source: values,
delay: 0,
minLength: 0,
select: function (event, ui) {
var grid;
$(elem).val(ui.item.value);
if (typeof elem.id === "string" && elem.id.substr(0, 3) === "gs_") {
grid = $self[0];
if ($.isFunction(grid.triggerToolbar)) {
grid.triggerToolbar();
}
} else {
// to refresh the filter
$(elem).trigger("change");
}
}
});
}
}
});
// one should use stringResult:true option additionally because
// datatype: "json" at the moment, but one need use local filtreing later
$self.jqGrid("filterToolbar", {stringResult: true });
}
});