jQGrid version : 3.7.2
jquery version: 1.4.2
Issue: creating search dialog with a subset of operators:
var searchOptions = {
caption: 'Filter...',
multipleSearch:true,
closeAfterSearch:true,
closeAfterReset:true
};
$('#list').jqGrid({
colModel: [
{
name:'abc', sorttype:'int', sortable: true, search:true,
searchoptions:{sopt:['eq','ne']}
}
],
pager: '#pager'
}).navGrid('#pager', {search: true, edit:false, add:false, del:false},
null, null, null, searchOptions);
When the search popup comes up, pick 'Not Equal' and input a number and click on 'Search' button. The grid rows do not reflect the search criteria! However, if you remove 'searchoptions' from colModel, it works fine.
Has anyone else encountered this issue?
Thanks
I can not reproduce your problem. Probably you have a bug in your example.
You can verify on the demo example that "equal" and "not equal" operations work. In the example 12 rows will be added in the grid. If you will search for 'Inv No' equal to 4, one row will be displyed. If you will search for 'Inv No' not equal to 4, first page from 11 rows will be displyed (see on the right size of the pager). If you will search for 'Inv No' not equal to 44, first page from 12 rows will be displyed. So all work without any problem.
I verified the results with jQuery 1.4.2 and jqGrid 3.7.2, but I am not a friend of retro versions and I used in the final version of the demo jQuery 1.4.4 and jqGrid 3.8.2.
Related
Is it possible to sort numeric item according to its values in a column which contains both numeric and string items in datatables?
I tried columnDefs:
[{ type: 'natural', targets: [0,1] }]
But it's not working. Any help is appreciated.
Well, perhaps you just need to see a working example? Here is the values from the other question you are referring to, and the usage of a sorting plugin I once made for exactly this, any-number -> https://github.com/davidkonrad/Plugins/blob/master/sorting/any-number.js
var table = $('#example').DataTable({
columnDefs : [
{ type: 'any-number', targets: [0] }
]
})
see how it is working here -> http://jsfiddle.net/o53burrf/
This is how most of the other sorting plugins works as well - if you want to use natural, include the source snippet an replace any-number with natural.
I have a field in my grid that are IDs that range from 1 to 2000. I have it designated as a number in the field definition.
The issue is when I use the filter and type in say "1000" when I return to the filter to put in another number it displays "1,000.00". I don't want the filtered text box to show the comma or decimal point. That format isn't relevant for this field.
How do I correct this?
Thanks in advance!
While #Flores answer pointed me in the right direction, it did not do what was expected. At least I still had commas in my filter using his snippet. I ended up making a small modification to the code to achieve the desired result.
filterable: {
ui: function (element) {
element.kendoNumericTextBox({
format: '#',
decimals: 0,
});
},
},
That will give you only numbers. No commas and no decimals.
You can set format on the filterable on the column like this:
field: "TaskId",
title: "TaskId",
width: 80,
filterable: {
ui: function (element) {
element.kendoNumericTextBox({
format: "n0"
});
}
}
You should consider using custom filter menu. Here is how to create DDL. In your case you will need to create numeric textbox with specific format.
Per Kendo support:
If filterable.mode is set to 'row', columns.filterable.cell.template should be used to customize the input. Please refer to this example http://dojo.telerik.com/UKulA/2.
You can limit the range using min and max like in the sample above.
As far as I know sorting in jqgrid will be like this sortname: 'Key', sortorder: "asc", but everytime the 'Key' shows it's not in numeric order. It looks like:
Key
1
10
100
1000
1001
1002
My output needed:
Key
1
2
3
4
5
Any help? Thanks
a extract of your code might be usefull...
Try to specify the sorttype option to int in your colmodel http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
you have to assign the sorttype:'int' inside the specific colModel that you want sorted
for ex. { name: 'Key', index: 'Key', width: 100, align: 'left', hidden: false, sorttype:'int' }
I'm facing this situation. I'm having a grid with approximately 3500 rows. And this grid should be cross-browsing, specially in IE6 (which is the Client's browser... unfortunately).
When I do the test in IE6, the loading takes so many time than other browsers. After seeing this, I've decided to optimize the query and now it's loading only the necessary db fields, but the loading in IE still slow. My datatype is JSON.
Besides this inconvenience, I've found that the filtering is slow in all the browsers (in IE6 takes so much more time than others). I'm using in the filter the option searchOnEnter : false, Sorting by a column in IE6 is slow as well.
What can I do to decrease the loading time and when I use the filtering and sorting by a column? I'm still surfing trying to get a possible solution but I'm running out of ideas.
Thanks in advance.
UPDATE: jQGrid Code
var myGrid = $('#bookingsList');
myGrid.jqGrid({
jsonReader : { root: "rows", repeatitems: false, id: "0", cell: ""},
url:'/WebBooking/json/bookingListAct.action',
datatype: 'json',
mtype: 'POST',
colNames:['Id','Site','CompanyId','Created'],
colModel :[
{name:'bestillingId', index:'bestillingId', width:45, sorttype: 'int'},
{name:'stedName', index:'stedName', width:90},
{name:'firmaId', index:'firmaId', width:200, hidden:true},
{name:'creationDate', index:'creationDate', width:105, search:false}
],
pager: '#pager',
rowNum:10,
rowList:[10,50,100,150,200,250,500],
sortname: 'bestillingId',
sortorder: 'desc',
viewrecords: true,
gridview: true,
loadonce: true,
sortable: true,
rownumbers: true,
autoencode: true,
ignoreCase: true,
shrinkToFit:false,
width: 1050,
height: '100%'
});
UPDATE: JSON String (A Portion)
{"page":"1","records":"3180","rows":[{"stedName":"Mongstad","bestillingId":"2","firmaName":"Reinertsen AS","creationDate":"13.09.11 09:01"}],"total":"318"}
The main problem in your current code is the usage of loadonce: true. In the case the implementation of url:'/WebBooking/json/bookingListAct.action' is very easy: you returns just all data to the jqGrid. Nevertheless event in the case you should sort the data corresponds to sortname: 'bestillingId' and sortorder: 'desc' which will be seen on the server (in bookingListAct.action) as sidx and sord parameters.
You should understand that in case of usage loadonce: true the sorting, paging and filtering of data will be implemented on the client side in JavaScript code. How you know JavaScript is mostly interpreter and the code will be not compiled (at least in old web browsers). So sorting of data on the client side is many times (or many thousand times) slowly as on the server in the compiled native code. If you hold the data in the database and have indexes on the columns which you permit to sort or filter the sorting and filtering will be more quickly in the server side implementation.
So my main suggestion will be to implement server-side sorting, paging and filtering.
To implement sorting on the server side you should sidx and sord to construct ORDER BY in the corresponding SQL SELECT statement.
To implement paging on the server side you should use information from page and rows parameters. You can use SELECT TOP and LEFT OUTER JOIN or LIMIT and SKIP depend on the dialect of SQL which you use (see here) some details.
To implement filtering you should first use stringResult: true option of filterToolbar to have information about the filters to be send in the Advanced Searching format (see here). The full filter in form of JSON string will be send to the server as filters parameter. Additionally it will be send boolean _search parameter. On the server side you should convert filters parameter from JSON string to object and parse the information. Then you should use the information to construct WHERE part of the corresponding SELECT statement.
If all information sorting, paging and filtering are exist in the request to the server then you should first filter the data, sort the results and the get the requested page from the results. The records and total values in the server response should take in the consideration the filtering. So if the filtered data consists for example from 12 rows and the page size is 10 you should return "records": 12, "total": 2 instead of "records": 3180, "total": 318 which you have in unfiltered data.
I don't use Java myself. I am not sure whether it helps you but in the answer you will find and download Visual Studio C# project which implement paging, sorting and filtering.
The last remark. The row of data which you returns from the server currently looks like
{"stedName":"Mongstad","bestillingId":"2","firmaName":"Reinertsen AS",
"creationDate":"13.09.11 09:01"}
If you would use default repeatitems: true format of the data together with id: "0", cell: "" you can replace the data needed for the row to
["Mongstad","2","Reinertsen AS",:"13.09.11 09:01"]
It will reduce the size of data and improve performance additionally. Moreover I personally don't like to use date in the form like "13.09.11 09:01". Such form is localized, will be interpreted as string and so can't be correct sorted and filtered. It would be better to return data in ISO 8601 format format: 2011-109-13T08:01Z or 2011-109-13T09:01+01:00. You can use formatter: 'data' with formatoptions: { srcformat: 'ISO8601Long', newformat: 'd.m.y H:i' }.
I have a project I'm working on for enyo, that needs to have 3 column with the following format:
--- date--- ---- message ------- ----- attachments-------
The problem is that each line has a different spacing. So if the first date is 1/2/10012 and the next date is 12/22/2002, the message column will not line up. I've looked into using a slidingPane, but was wondering if there was a more simple way to do it.
I'm not sure if I understand the question fully, but if you want a block of display to contain 3 equally spaced "columns" you can do something like:
{kind: enyo.VFlexBox, components: [
{kind: enyo.HFlexBox, flex: 1, align: "center", pack: "center", components: [
{name: "column1", flex: 1, content: "Column 1"},
{name: "column2", flex: 1, content: "Column 2"},
{name: "column3", flex: 1, content: "Column 3"},
]}
]}
I believe that what you want is the VirtualRepeater. This allows for a repeating list of rows (It say maximum of ~100 rows, so make sure that'll work for your use case). This should allow for variable height rows (Which is what I Think you're talking about). In your getItem function you can fill in each row as needed and they'll line up.