I was create kendo grid with sortable: true property and turn off sorting for some columns by setting property sortable to false
this._grid = $('#findResultsGrid').kendoGrid ({
sortable: true,
groupable: {
messages: {
empty: 'drag columns here'
}
},
scrollable: true,
columns:[
{
width: '100px',
title: 'Project',
field: 'PROJECT',
template: '<p style="' + defaultStyle + '">#=PROJECT#</p>'
},
{
width: '100px',
title: 'Well',
field: 'SLHOLENAME',
sortable: false,
template: '<p style="' + defaultStyle + '">#=SLHOLENAME#</p>'
},
...
But some columns without sort disabling (has no option sortable: false) not sortings and looks as not sortable
Sorry, i found my own bug while prepared reproducing example - unsortable columns has not filled field property
Same problem. The field property of a column needs to be set for column sorting to work. Since:
columns.sortable: If set to true the user can click the column header and sort the grid by the column field when sorting is enabled.
Another case of this problem is when you have numerical fields if one of them is 0, it will be considered as not set.
To fix this, prefix an empty string to it to force its conversion to string:
field: '' + item.field,
Related
How can I display fixed number of rows in kendo grid regardless of window size change?
I need to display 10 rows regardless of window resizes.
In order to do this, I need to re-calculate the number of rows and display 10 rows only back inside the grid. My requirement is to calculate the rows to display correctly in the grid. (in fact, I have search on internet and seems can't find any examples/articles, if you have any please share with me too ). My current solution has no error in my opinion, but still incorrect??? . Can someone help me find errors and correct me? Moreover if I insert some items above grid, the wrapper and data items(grid) becomes incorrect totally.
I need some insight and/or code-examples on this matter.
Much appreciated for the help.
My current codes for the resizing grid is as follow:
function resizeGrid() {
var gridElement = $("#grid"),
dataArea = gridElement.find(".k-grid-content"),
gridHeight = gridElement.innerHeight(),
otherElements = gridElement.children().not(".k-grid-content"),
otherElementsHeight = 0;
otherElements.each(function(){
otherElementsHeight += $(this).outerHeight();
});
dataArea.height(gridHeight - otherElementsHeight);
}
function resizeWrapper() {
$("#outerWrapper").height($('#body').innerHeight());
}
and call the functions of both of them:
$(window).resize(function() {
resizeWrapper();
resizeGrid();
});
This is my datasource and schema:
$(document).ready(function() {
$(window).trigger("resize");
$("#grid").kendoGrid({
dataSource: {
data: [
{ userId: 11111, No: 1, isActive:true, date: new Date('12/12/2005 12:30 AM'), from: 'A', sm: 'testing', art: 'Shipped on', due: new Date('12/19/2005 11:30 PM')},
{ userId: 22340, No: 2, isActive:true, date: new Date('12/12/2005 12:30 AM'), from: 'A', sm: 'test0', art: 'Shipped on', due: new Date('12/19/2005 11:30 PM')},
.....
],
schema: {
model: {
fields: {
userId: { editable: true },
date: { filterable: { ui: "datetimepicker"}},
isActive:false,
No: { editable: true }
}
}
},
pageSize: 10
},
sortable: true,
reorderable: true,
scrollable: true,
resizable: true,
filterable: true,
columnMenu: true,
pageable: {
input: true,
numeric: false
},
columns: [
{ field: 'No' ,width: 50 },
{ field: 'userId', title: 'ID', template:"<span class=ul>#=userId#</span> </br> <span class='pie'>1/5</span>", width:60 } ,
{ field: "isActive",
headerTemplate: '!',
template: '<span class="k-icon k-i-circle Unicode: e308" style="color: green; font-size: 28px;"></span> </br> <div class="div1"></div>', filterable:false , width: 40 },
......
]
});
});
Here is my kendo link: http://dojo.telerik.com/aviQU/6
Why not tell the grid to use a page size of 10? No need to recalculate sizes.
Set the data source's page size when you configure the grid.
Or are you setting (CSS/JS) the height of the grid somewhere that is causing it to resize?
I am trying to implement grouping in slickgrid based on the following example.
https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example-grouping.html
The only difference being I do not have any filter, so I don't call dataview.setFilter()
Below is my grouping code.
#columns =
[
{id: "fname", name: "First Name", field: "firstName", formatter: #formatFname, sortable: true, width: #setWidth(30)}
{id: "lastName", name: "Last Name", field: "lastName", sortable: true, width: #setWidth(30)}
{id: "email", name: "Email ID", field: "email", formatter: #formatEmail, onClick: #launchEmail, sortable: true, width: #setWidth(60)}
]
groupItemMetadataProvider = new Slick.Data.GroupItemMetadataProvider
dataViewOptions = {
groupItemMetadataProvider: groupItemMetadataProvider
inlineFilters: true
}
#dataView = new Slick.Data.DataView(dataViewOptions)
dataView.beginUpdate()
dataView.setGrouping({
getter: 'lastName'
formatter: (g) ->
console.log("g is : ",g)
'Duration: ' + g.value + ' items'
aggregators: []
aggregateCollapsed: false
lazyTotalsCalculation: true
});
dataView.setItems(data)
dataView.endUpdate()
I am even able to see my groups with proper title set to each group.
But I am not seeing any group rows in my slick grid.
You may be using ES6 features that I'm not familiar with, but the code looks suspicious to me, eg
dataView.setGrouping({
getter: 'lastName'
formatter: (g) ->
console.log("g is : ",g)
'Duration: ' + g.value + ' items'
aggregators: []
aggregateCollapsed: false
lazyTotalsCalculation: true
});
There are no commas between the elements of this object definition.
Also, the arrow function does not look correctly formed to me. Since there are two statements, it should be contained in braces and have a return keyword.
How can I assign the custom id's to JQGrid row and cells. I am using datatype: "local". Is there some thing to do with key in _columnModel_.
You need not to declare any ID to cell , instead you can use name property as ID. To access cell data you can use name property defined in colModel.
You can define your colModel like this:
colModel: [{ name: 'myname', index: 'myname', width: 100, align: 'left', editable: false, search: true },
{ name: 'roll', index: 'roll', width: 100, align: 'left', editable: false, search: false, true}
],
...
And to access row details you can use below codes in onCellSelect method...
,onCellSelect: function (rowid, iCol, cellcontent, target)
{
var rowData = $(this).jqGrid("getRowData", rowid);
var g_myName = rowData.myname;
}
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.
I am using jqGrid to render some data. Now I want the ability to modify the data based on the values of two different select boxes. For example, I have a dropdown of location id's and a dropdown of date ranges. I want to filter by the location id and date range, handling this logic in my /something/search action. How can I pass this additional data into jqGrid dynamically? So, (1) on the initial load and (2) when on onChange event is fired, i'll pass in something like {data: {location_id: 10, range_start: '1/1/2012', range_end: '1/5/2010'}}. I could then read this in as a param, just like I do for "page", "rows", "sidx", etc..
Edit:
Included my existing code if needed:
grid.jqGrid({
url: "/something/search",
datatype: "json",
colNames: ['', 'ID', 'Description', 'Start', 'End', 'Last Updated'],
colModel: [{name:'act',index:'act', width:16,sortable:false},
{ name: 'id', index: 'id', width: 100, hidden: true },
{ name: 'description', index: 'description', width: 200 },
{ name: 'start_date', index: 'start_date', width: 120 },
{ name: 'end_date', index: 'end_date', width: 120 },
{ name: 'last_update', index: 'last_update', width: 120 }],
rowNum: 20,
rowList: [10, 20, 50],
pager: '#data-list-pager',
sortname: 'ident',
viewrecords: true,
sortorder: "desc",
multiselect: false,
height: "100%",
caption: "",
altRows: true,
width: 865});
The first way to solve the problem is to follow the way which I described here. In the case the controls which the user will use to filter the grid will be outside of the grid.
Another way which I can suggest is to use the Toolbar Searching. The advantage of the approach is that the controls used for searching will be integrated in the grid. In the case you can use either the select control or text input with the jQuery UI Datepicker.
To add the Toolbar Searching you need just call filterToolbar with the parameters which you prefer. If you would you stringResult: true option the format of the filters parameter which will be send to the server will be the same like in case of the usage of advanced searching. To define 'greater or equal' searching operation for the 'start_date' and the 'less or equal' searching operation for the 'end_date' you need just add searchoptions having 'ge' or 'le' as the first element of the sopt property.
As the result one will be able to filter the grid:
and
see the demo.