jqGrid - extending for consistency - jqgrid

I would like to use jqGrid for a great many grids that have only a small set of application-specific column types, and I would like to create a way to enforce consistency. For example, I want all my columns that show the compliance status of a row to have a certain format, be aligned a certain way, have specific search options, etc. So instead of having a colmodel entry like this:
{ name: 'ABC', width: 80, align: 'center', stype: "select",
searchoptions: { value: "1:Compliant;0:Not Compliant"} }
I would like to have one like this:
{ name: 'ABC', width: 80, mytype: compliancestatus }
where compliancestatus is a function I would write.
Is this kind of thing possible - without modifying the jqGrid source code? If so, can someone point me to an example of this type of extension?

Since jqGrid 3.8.2 are column templates supported.
You can just define for example
var compliancestatus = {
width: 80,
align: 'center',
stype: "select",
searchoptions: { value: "1:Compliant;0:Not Compliant" }
};
somewhere in the scope of visibility and then just use in colModel
{ name: 'ABC', template: compliancestatus }
In the template you can include any parameters. If the column definition has the same property but with the same value like
{ name: 'ABC', width: 100, template: compliancestatus }
the value from the colModel (width: 100 in the case) will be used.
I suggested the feature some time before and I use it intensively myself. For example I have many grids having many columns with checkboxes. I use the following template in the case:
mySettings.templateCheckbox = {
formatter: 'checkbox', align: 'center', width: 20,
edittype: 'checkbox', editoptions: { value: "1:0" },
stype: "select", searchoptions: { sopt: ['eq', 'ne'], value: ":Any;1:Yes;0:No" }
};
In the same way I defined many other templates which reduce the code of grids and improve managing of the common grid style.
If you want to change some common default settings for all columns you can use cmTemplate parameter of jqGrid. For example
cmTemplate: { align: 'center' }
You can use it as additional parameter of jqGrid or set it like any other default parameter with respect of
$.extend($.jgrid.defaults, {
cmTemplate: { align: 'center' }
});
Read more about the column templates here.

Related

jqgrid typeahead with key value

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

Filtering Dropdown value in jqgrid

I hava a problem in the filter functionality for a column thats has dropdown values .Below is my code,
{
name: 'statusFlag',
width: 130,
editable:true,
edittype:'select',
formatter : 'select',
searchoptions:{sopt:['cn','eq','ne']},
editoptions:{value:{Y:'Active',N:'Inactive'}}
}
If I perform search with 'y' I am seeing records with column value active, and If I perform search with 'n', I am seeing records with column value inactive. I want the same functionality to work when I enter active and inactive instead of y /n. How should i changed the code. Should i use formatOptions or anything else.
You need add stype: "select" property and extend searchoptions with value:
{
name: 'statusFlag',
width: 130,
editable: true,
edittype: 'select',
formatter: 'select',
searchoptions: { sopt: ['eq', 'ne'], value: ':Any;Y:Active;N:Inactive' } },
editoptions: { value: 'Y:Active;N:Inactive' }
}
The usage of :Any part in searchoptions.value is recommended if you use filterToolbar. If you use only searching dialog then you can remove the value and just use the same value like in editoptions.

jqGrid - cannot populate select in search dialog - but ok in toolbar

This doesn't seem to make sense, and unfortunately the one example on trirand seems to have the same bug
with this column model
{name:'txtFixtureType', index:'txtFixtureType', width:110,
stype: 'select',
edittype:'select', editoptions: {
value: ":All;1:Division 1;2:Division 2"}},
Enabling a toolbar search results in a select for the column, with the values populated. However with the advanced search dialog the select appears, but contains no values.
Is there some addition property that needs to be set?
Try with
{ name: 'txtFixtureType', index: 'txtFixtureType', width: 110,
edittype: 'select',
editoptions: { value: ":All;1:Division 1;2:Division 2" },
stype: 'select',
searchoptions: { sopt: ['eq', 'ne'], value: ":All;1:Division 1;2:Division 2" }
}
Additionally depend of your data saved it can be needed to use formatter: 'select' (see the documentation).
In general you can do combine toolbar searching with advance searching. See the demo from the answer.

Stopping columns resizable in jqgrid

How I can make all the columns of jqgrid not resizable? Currently I think every column I've to specify the property { resizable:false }. Is there anyway I can specify for the entire grid?
Starting with version 3.8.2 jqGrid supports one very useful feature: column templates. (It's probably not quite correct from me to praise the feature because the feature was introduced on my own suggestion :-)). The feature is still not really documented, but it can be used very easily.
I explain it on an example. If you define additional jqGrid parameter
cmTemplate:{resizable:false}
then your problem will be solved.
If you have more properties which are common in all columns of colModel items, for example align:'center' the cmTemplate will help you also (cmTemplate:{resizable:false, align:'center'}). In jqGrid 3.8.2 was small bug in priority of template settings relatively to settings from colModel, but the bug is fixed in jqGrid 4.0.0. So the properties from cmTemplate can be interpret just as default values for colModel items.
One more version of usage jqGrid column template is in the form:
var myDateTemplate = {sorttype:'date', formatter:'date',
formatoptions: {newformat:'m/d/Y'}, datefmt: 'm/d/Y',
align:'center', width:80 }
$("list").jqGrid({
colModel: [
...
{name:'column1': template:myDateTemplate},
{name:'column2': template:myDateTemplate, width:90},
...
]
...
});
In the way you can define some templates (like myDateTemplate) and use there in many places in your grid (or gids). With respect of the feature you can make your code shorter, better readable and easily changeable.
Template works great for me:
{ name: 'quantity_warehouse', index: 'quantity_warehouse', template: intColTemplate, width: '70' },
{ name: 'status', index: 'status', align: 'left', template: stringColTemplate, width: '90' },
{ name: 'snapshot_at', index: 'snapshot_at', template: dateColTemplate },
{ name: 'applied_at', index: 'applied_at', template: dateColTemplate },
JS:
var dateColTemplate = { align: 'left', search: true, stype: 'text', width: '70', datefmt: 'm/d/y', formatter: 'date', formatoptions: { srcformat: 'm/d/y', newformat: 'm/d/Y' }, sorttype: 'date', searchrules: { required: true, date: true }, searchoptions: { sopt: ['eq', 'ge', 'le'],
dataInit: function (el) {
$(el).datepicker({ changeYear: true, changeMonth: true, showButtonPanel: true });
}
}
};
var intColTemplate = { align: 'left', search: true, stype: 'text', searchoptions: { sopt: ['eq', 'ge', 'le']} };
var stringColTemplate = { align: 'left', search: true, stype: 'text', searchoptions: { sopt: ['bw', 'cn']} };

jqGrid add item checkbox field defaulted to checked

Here's a simple question. I have a jqGrid that's working great but I want set the default value for a checkbox to checked when user adds a new item. Here's a snippet of code:
{name: "Active", index: "active", width: 80, align: "center", sortable: false,
editable: true, edittype: "checkbox", editoptions: {value: "Yes:No"}}
I don't see anything in the documentation:
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules
You can use
editoptions: {value: "Yes:No", defaultValue: "Yes"}
(see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editoptions).
By the way, I personally use always the formatter: "checkbox" for columns like you have. Moreover
stype: "select", searchoptions: { value: "1:Yes;0:No" }
can also be helpful if you allow to search for values from the column.
UPDATED: Free jqGrid 4.13.6 (currently 4.13.6-pre, which one can get from GitHub) supports new stype: "checkbox". One can use, for example
stype: "checkbox", searchoptions: { sopt: ["eq"], value: "true:false" }
to have 3-state checkbox in the filter toolbar and 2-state checkbox in the Searching Dialog. The above searchoptions.value value means that the checked box corresponds the value "true" und unchecked box the value "false".
I have used this, it worked.
editoptions: {value: "true:false", defaultValue: "true"}

Resources