I can't find a way to set search options for a column? It seem they are set by default and there's no way I can change it.
We have this option in Jqgrid:
{ name: "outputid", index: "outputid", width: 30, searchoptions: { sopt: ['eq']} }
When doing this in MvcJqGrid:
.AddColumn(new Column("promoDate").SetAlign(MvcJqGrid.Enums.Align.Center).SetLabel("Fecha Ingreso").SetSearchType(Searchtype.Datepicker).SetSearchDateFormat("yy-mm-dd"))
I receive a 'bw' as rule op, not 'eq' as I would like to set.
Thanks!
I've updated MvcJqGrid (nuget package is also updated). As of now you can set a searchoption per column with 'SetSearchOption'. Your example would look something like this:
.AddColumn(new Column("promoDate")
.SetAlign(MvcJqGrid.Enums.Align.Center)
.SetLabel("Fecha Ingreso")
.SetSearchType(Searchtype.Datepicker)
.SetSearchDateFormat("yy-mm-dd")
.SetSearchOption(SearchOptions.Equal))
Let me know if this works for you.
First of all I should mention that I don't use MvcJqGrid myself. It's really important to set different sopt option for different columns especially if one uses toolbar searching. It seems that MvcJqGrid don't provide you enough possibilities to do this. Nevertheless it looks so that MvcJqGrid generate some JavaScript code for you. So if you can't generate exactly the code which you need then you can still change some properties of grid later. For example
$("#grid").jqGrid("setColProp", "outputid", { searchoptions: { sopt: ['eq']} });
change the properties of "outputid" column. It is important to make the changes before searching toolbar are created (before method filterToolbar) will be called. If you can't inject your JavaScript code before creating searching toolbar you can recreate it later with modified properties using destroyFilterToolbar method (see the answer and the pull request):
$("#grid").jqGrid("destroyFilterToolbar");
$("#grid").jqGrid("filterToolbar", { stringResult: true, defaultSearch: "cn" });
Related
I have been using ng-grid for displaying data and now migrating to jqgrid. I'm a newbie to this tech and I have tried creating a button which performs some other action like validating and opening a new form. I could invoke my Angular JS variable in that button. Can someone help me?
function ActionitmGridformatter(cellvalue, options, rowObject) {
var itmgrid= "";
return itmgrid;
}
$scope.itmgrid= function(row){
alert("hii");
...
};
Also the above itmgrid variable is inside the controller. Can someone post useful links for jqgrid docs and any other inputs will be helpful for me. Kindly ignore if the question is repeated and also share the relevant link.
Thanks
I recently needed to do the same thing, I had a grid of ordered products and I needed to create a link in each row that pertained to that order, here is how I went about that:
Create a function:
function orderLinkFormatter (cellvalue, options, rowObject) {
var base = window.location.origin;
return '' + rowObject.OrderNumber + '';
}
In your grid change you colModel to look like this:
{ name: 'OrderId', index: 'OrderId', width: 100, search: false, formatter:orderLinkFormatter, align: 'center'},
You will end up with something like in this DEMO.
Or this DEMO
I would also suggest that you try using free-jqgrid, it is a free fork of jqgrid that is updated almost daily and the author: Oleg provides really good support on this site.
im getting the Uncaught TypeError: Cannot call method 'getColumns' of undefined when clicking on the header toolbar of a Live Serach Grid Panel on ExtJS. Im implementing filters with the Filters Feature.
Heres some of my code:
Ext.require([
'Ext.grid.*',
'Ext.ux.grid.FiltersFeature',
'Ext.ux.LiveSearchGridPanel'
...
]);
var filters = {
ftype: 'filters',
encode: false,
local: true
};
var grid = new Ext.create('Ext.ux.LiveSearchGridPanel', {
selType: 'cellmodel',
store: store,
columns:[
{
header: "Evento",
width: 90,
sortable: true,
filterable: true,
dataIndex: 'RH_DESCRIPCION',
filter: {
type: 'string'
}
}],
features: [filters]
...
This is the block of code where the exception occurs:
Ext.Array.each(grid.columnManager.getColumns(), function (column) {
//Uncaught TypeError: Cannot call method 'getColumns' of undefined
if (column.filterable === false) {
filters.removeAtKey(column.dataIndex);
} else {
add(column.dataIndex, column.filter, column.filterable);
}
});
Any help will be appriciated!
After doing heavier debugging it seems that grid.columnManager isn't very well supported on version 4.2. For any others with the same issue you should use:
grid.down('headercontainer').getGridColumns();
or
grid.down('headercontainer').getVisibleGridColumns();
to get a hold of columns on your grid. I believe this won't work with grouped columns, I've not tested it though.
Ext.Array.each(grid.columnManager.getColumns(), function (column) ...
change to
Ext.Array.each(grid.columns, function (column) {
it works well :)
grid.columns is not a supported/public property. It might not contain, for example, columns added with reconfigure. It will contain them if you use 4.2.0, but not in 4.2.1/4.2.2. This will happen even if you add Ext.selection.CheckboxModel, the checkbox column will not be included there in 4.2.2 and you will end up with "index mismatch" if you get the index from, lets say cellClick event.
Unfortunately, grid.columnManager or grid.getColumnManager() is new in 4.2.1/4.2.2 and it is a private property/method. Shortly speaking, either of those might stop working with next releases of ExtJS, and "columns" property is not reliable in all cases.
See some discussion here:
http://www.sencha.com/forum/showthread.php?277525
I haven't found any officially supported solution yet. I can't add comments, so I had to publish this as a full answer, thanks S.O.!
As others already posted, you should not use the columnManager property. Check Sencha's note about it:
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.ColumnManager
This is a private utility class for internal use by the framework.
Don't rely on its existence.
I think the best option is to use this for all columns:
grid.headerCt.getGridColumns()
And this if you only need the visible columns:
grid.headerCt.getVisibleGridColumns()
I have advanced search button outside the jqGrid. I am using:
var pSearch = //How do I get this object as mine is constructed in c# code. How do I get it from jqGrid's property collection or options??
$("#list").jqGrid("searchGrid",pSearch);
The typical usage of searchGrid would be
$("#list").jqGrid("searchGrid");
or
$("#list").jqGrid("searchGrid", {multipleSearch: true});
because all really important options on the Advanced Searching dialog are inside of colModel.
I personally prefer the first form and set just common settings by $.jgrid.search for the searching in some JavaScript file which I include on every page of the project. For example
$.extend($.jgrid.search, {
multipleSearch: true,
multipleGroup: true,
recreateFilter: true,
overlay: 0
});
OK, I am having an issue with the filter toolbar retaining the filter values after clicking on the Refresh button at the bottom of the grid.
I have looked at numerous examples that do exactly that, clear the top filter toolbar fields to the default state (in the case of select list, to the first item in the list "Select..."), but I do not see any obvious difference between that code and mine
Values are being loaded into the filter toolbar drop down boxes via JSON request, and on selecting an item in the list the grid filters to the appropriate data.
The only thing that is not working is that the filter drop-down(s) do not clear the selected item upon clicking refresh grid.
Any ideas?
Not sure what code would help to post at this point, so I will post upon request
Justin
Well, I have answered my own question :)
The issue turned out to be related to naming convention for column names and indexes.
Example:
Before fix:
{ name: ClientId', index: 'ClientOrganization.Client.ClientId', width: '125', stype: 'select', searchoptions: { sopt: ['eq'], dataUrl: '#Url.Action("GetClientListForFilter")'} },
After fix:
{ name: 'ClientOrganization.Client.ClientId', index: 'ClientOrganization.Client.ClientId', width: '125', stype: 'select', searchoptions: { sopt: ['eq'], dataUrl: '#Url.Action("GetClientListForFilter")'} },
Basically the name needed to be the same as the index to properly refresh. Not sure if this is expected behavior or not, but the fix works. ;)
Justin
I have been stuck on this problem for past 2 days. Did lot of googling but was not able to find the exact answer.
Following is the JQGrid definition
$("#tblresults").jqGrid({
datastr: data,
datatype: 'jsonstring',
height: 230,
colNames: colNames,
colModel: colModel,
rowNum: -1,
viewrecords: true,
loadComplete: function() {
ChangeSize('#tblresults', 70);
}
});
And this is the filter definition
$("#tblresults").filterToolbar({ searchOnEnter: true, stringResult: true, defaultSearch: "cn", groupOp: "AND" });
I get the data from a simple getJSON call. But when I try to use the filter nothing works.
I debugged a the code and found out that jqgrid internally calls the reloadgrid, which makes the data to disappear.
Can anyone tell me how can we do filtering in jqgrid completely on client.
I am using v3.8 and I learnt that jqgrid v3.7 had this client side filtering logic in place.
Thanks in Advance
Do you have the data First of all you should not use -1 as the value of rowNum. Instead of that use any reliable value like rowNum:1000. More better would be to use local data paging. In the case you should just set for example rowNum:10, rowList:[5,10,20,100].
If you get the input parameters colNames, colModel and data parameters of jqGrid from the server per ajax call you should additionally consider to use data parameter instead of datastr. In the case the datatype should be changed from 'jsonstring' to 'local'.
Some other common parameters like gridview:true and height:'100%' can be also usefull for you. The first one (gridview:true) just improve the performance without any disadvantages and the second (height:'100%') will follow to choosing of the optimal grid height without the vertical scroll bar. It can be good combined with the local data paging (parameters like rowNum:10, rowList:[5,10,20,100]).
add these parameters and your toolbar search should work. i have faced similar problem too when started with jqgrid.
search:true,
loadonce:true,