I'd like to hide a column (its an ID column that is unique for each row), but I cannot remove it from the "columns" array because I need that data in the Row when actions are performed on the Row (Selection, Sorting, ect).
After being sorted for example, I need to grab the Rows match them up to the previous styles that they had before, and I can do this with the ID column. I need the data in the row, I just don't want it to be displayed.
Thanks.
The answer is NO, but that is not the answer you are looking for :)
Other than what columns are looking at to grab their data, there is no hard link between them and what your data items look like. You don't have to have a column visible to have an ID on your data item.
In case anyone is still looking for this, I've found a way... it's not massively elegant but it does work. As Simon, suggested, add the Id column as the last in the grid. Set both the cssClass and headerCssClass to be "display:none !important" and set the width, minWidth and maxWidth column options to 0 as follows:
var columns = [
{ id: "MyColumnId", name: "My Column", field: "MyColumnData", width: 100},
{ id: "Id", name: "Id", field: "Id", width: 0, minWidth: 0, maxWidth: 0, cssClass: "reallyHidden", headerCssClass: "reallyHidden" }
];
and the css is:
.reallyHidden { display: none !important;}
Hope that helps.
It is not possible BUT as a workaround you can set the width/maxWidth to 1, set the name to an empty string and place the column at the far right of all other columns. Like so (example is in coffeescript, if you feel uncertain about the syntax use http://js2coffee.org/):
columns = [
... some columns ...
{
id:"hidden"
name:""
field:"id"
sortable:"true"
width: 1
maxWidth: 1
minWidth: 1
unselectable: true
formatter: (row,cell,val,columnDef,dataContext) ->
"<div style='display: none;'>#{val}</div>"
}
]
I had the same problem today, and i am working with pure array data. if you add your values at the end of the data array, but do not define them in the columns-array, the data is present and you can use it in your events, but it is not shown.
example:
new Slick.Grid({
document.getElementById('grid')
, [
[1, 2, 3, 1]
, [1, 2, 3, 2]
, [1, 2, 3, 3]
, [1, 2, 3, 4]
, [1, 2, 3, 5]
]
, headers: [
{
field: '0'
, id: 'foo'
, name: 'foo'
}
, {
field: '1'
, id: 'bar'
, name: 'bar'
}
, {
field: '0'
, id: 'baz'
, name: 'baz'
}
]
, {}
);
As you can see in the code, i provided a 4th value to the grid with no column-definition.
For this kind of problem, I've used two arrays. One for showing and the other one for columnPicker. Here is how,
var org_columns = [],hid_columns = [];
org_columns.push(
cb_selector.getColumnDefinition(),
{id: "id", name: "ID", field: "id", sortable: true, width: 56},
{id: "name", name: "Name", field: "name", editor: Slick.Editors.Text, sortable: true, width: 234},
{id: "email", name: "Email", field: "email", editor: Slick.Editors.Text, sortable: true, width: 234}
);
hid_columns.push(
cb_selector.getColumnDefinition(),
{id: "name", name: "Name", field: "name", editor: Slick.Editors.Text, sortable: true, width: 234},
{id: "email", name: "Email", field: "email", editor: Slick.Editors.Text, sortable: true, width: 234}
);
var data_view = new Slick.Data.DataView();
grid = new Slick.Grid("#grid", data_view, hid_columns, grid_options);
var columnPicker= new Slick.Controls.ColumnPicker(org_columns, grid,grid_options);
in coloumns.push({id:id,name:name,Hidden:true})
//hidden ensures that the column is removed while binding grid
I realize this is an old question but the correct way to do this is by using a dataProvider and utilizing getItemMetaData to provide information you don't necessarily want displayed.
When you select your row you can call grid.getItemMetaData(cell.row) to get the extra information you need. getItemMetaData is expected to return a jsonObject describing both row and cell level metaData.
Here's the docs that describe it.
https://github.com/mleibman/SlickGrid/wiki/Providing-data-to-the-grid
After looking for some answers about this questions I've found a workaround that quite does the trick of hiding the column and still save the data.
My initial problem was that I needed to hide the ID column of the grid, so basically I hid the ID column by creating the only with the name attribute without specifying anything else and the column was then created I was expecting.
Related
Is it possible to get the selected items count in the kendoMultiSelect's footerTemplate?
I created a DOJO example with an attemp to use instance.dataItems().length but for some reason, the value is always 0.
$("#customers").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
footerTemplate: '#: instance.dataItems().length # item(s) selected'
});
EDIT:
due #Aleksandar comment where he points out
Calling setOptions in an event handler or the respective widget is not
recommended and can cause an endless loop or a JavaScript error.
I take his suggestion into account and add his solution as an answer.
footerTemplate: '<span id="total">#:instance.value().length#</span> item(s) selected',
change:function(e){
var itmsSelected = e.sender.value().length;
$("#total").html(itmsSelected);
}
OBSOLETE:
Guess it's not in an observable object. One of the possible solutions is to change footerTemplate
every time a change happens on multiSelect:
var multi = $("#customers").kendoMultiSelect({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
change: function() {
this.setOptions({"footerTemplate": this.value().length +" item(s) selected"});
},
dataTextField: "name",
dataValueField: "id",
footerTemplate: '0 item(s) selected'
}).getKendoMultiSelect();
Example: Footer template update
I'm trying to set a kendo grid column's sortable property via a variable to control when the column can have sorting facility and when it can't.
But this is not working.
If I directly set the sortable property to true/false it works accordingly, but when I'm using a variable to set it, it is not, regardless of the variable value, the property is always set to 'true'.
Example:
This works as expected.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ sortable: false, field: "id" },
{ field: "name" }
],
sortable: true,
dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</sript>
But this does not, id field always gets sortable property as true
<div id="grid"></div>
<script>
// if first time it's true, then the sortable property is retaining true always,
// regardless if on second call the variable is set to false. there is no effect
var setColumnSort = canBeFalseOrTrue;
$("#grid").kendoGrid({
columns: [
{ sortable: setColumnSort, field: "id" },
{ field: "name" }
],
sortable: true,
dataSource: [ { id: 1, name: "Jane Doe" }, { id: 2, name: "John Doe" } ]
});
</script>
Is there anyway to dynamically disable/enable sorting of a column in a kendo grid?
You need to set it dynamically through grid properties once the grid is initialized.
$('#grid').kendoGrid({
sortable: true,
columns: [
{...}
]
});
var grid = $('#grid').getKendoGrid();
var options = grid.options;
options.columns[0].sortable = false;
grid.setOptions(options);
Example: Enable/disable sorting on column
I am using Dojo Dgrid however i am trying to add a checkbox column however i am not sure of the approach.
Most of the tutorials i have been looking at follow a different code structure and i am unable to create the check box column. I would like to create a checkbox column to select rows
Code (Here is also a Fiddle of my code)
require([
.......................
"dojo/domReady!"
], function(parser, declare, Grid, ColumnSet, Selection, selector,Keyboard, DijitRegistry){
parser.parse();
var data = [
{ first: "Tom", last: "Evans" },
{ first: "Sherry", last: "Young"},
{ first: "Bob", last: "William"}
];
var columns = [
[[
{editor({name: "CheckBox", field: "bool"}, "checkbox")},
{ field: "first", label: "First" },
{ field: "last", label: "Last" }]]
];
var CustomGrid = declare([Grid, ColumnSet, Selection, Keyboard, DijitRegistry]);
var grid = new CustomGrid ({
columnSets: columns ,
"class":"grid"
}, "grid");
grid.renderArray(data);
});
If you want to have a column with checkboxes for the purpose of selecting rows, you should set your sights on the selector column plugin rather than editor. selector is specifically designed to render checkboxes (or radio buttons) in each cell that ties in to the Selection mixin when checked.
See the documentation in the wiki, and the selector test page.
you can also test this solution
first you must add this Modules in require([]) section
"dgrid/extensions/ColumnResizer",
"esri/request", "dgrid/OnDemandGrid", "dgrid/Selection", "dojo/store/Memory", "dgrid/selector",
then define this array to hold your columns
var columnsPol = [];
then add check box type column to array and any other type column to array
columnsPol.push(
selector({ label: selector({}), selectorType: "checkbox" })
);
columnsPol.push({
label: "",
field: {any name},
formatter: {a function for formatting value of cell},
width: "auto",
});
.
.
.
then define your Grid and set properties
var gridPol = new (declare([Grid, ColumnResizer, Selection]))({
store: {your data},
columns: columnsPol,
minRowsPerPage: 40,
maxRowsPerPage: 40,
keepScrollPosition: true,
selectionMode: 'none',
allowSelectAll: true,
loadingMessage: "Loading data...",
noDataMessage: "No results found."
}, {Id for grid});
gridPol.refresh();
and then you can get selected and deselected rows
gridPol.on("dgrid-select", function (event) {
var selectedRows = event.rows;
});
and deselect
gridPol.on.on("dgrid-deselect",function (event){
var deselectedRows = event.rows;
});
I am currently working with using SlickGrid and allowing the user to select which columns to display using the ColumnPicker.
Following the example at http://mleibman.github.com/SlickGrid/examples/example4-model.html I have been able to get this to work quite nicely.
The next step that I am unsure about is whether it is possible to choose a default list of columns to show at first time render.
For example, say I have an array of 5 columns declared something like below:
{
name: "Name"
field: "Name"
id: "Name"
sortable: true
minWidth: 120
editor: Slick.Editors.Text
},
{
name: "Address"
field: "Address"
id: "Address"
sortable: true
minWidth: 175
editor: Slick.Editors.Text
},
{
name: "Town"
field: "Town"
id: "Town"
sortable: true
minWidth: 80
editor: Slick.Editors.Text
},
{
name: "Country"
field: "Country"
id: "Country"
sortable: true
minWidth: 80
editor: Slick.Editors.Text
},
{
name: "Network"
field: "Network"
id: "Network"
sortable: true
minWidth: 80
editor: Slick.Editors.Text
}
At the moment all of these columns will be shown and can be selected to be hidden in the ColumnPicker. The functionality I am looking for is to, for example, say I only want the columns Name, Address and Network to be shown, but still have the others remain as options in the ColumnPicker.
Is this in place or is there an available method of achieving this?
To anyone who might come across this, I found a solution which works but may not be the best.
It is essentially using 2 separate arrays, 1 which holds the default columns to render, and the other holding the names of all the columns you can choose from, including the default column array.
When rendering, I instantiate my grid with the array of default columns:
#Grid = new Slick.Grid(#ElementId, #Data, #DefaultColumns, #GridOptions)
and then when setting the column picker, use the array of all the columns:
columnpicker = new Slick.Controls.ColumnPicker(#Columns, #Grid, #GridOptions)
I am now building a web application with Ext-JS 4.0.2, and I am using a editable grid to control the data to be shown for a table on the same page.
To make the grid editable, I followed the API documentation and used the following:
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})
]
However, for this grid, there are several cells that are not supposed to be changed.
I could simply let the event handler change the data back to the right state once it is changed in the grid, but this seems to be hacky, hard to maintain, and unreadable. Is there any better way to do this? I read the API but cannot find any useful attributes.
UPDATE
As for this particular app, just disable the first row would work. But I am also interested in choose several grid and make them not editable (imagine a Sudoku game with a grid).
As I've understand from comments you want to make first row not editable. There is ugly but quick solution. Assign to your plugin beforeedit handler. And when event is being fired check what row is being edited. If first - return false:
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2,
listeners: {
beforeedit: function(e, editor){
if (e.rowIdx == 0)
return false;
}
}
})
]
Check out docs for beforeedit.
UPDATE
Docs say that beforeedit has such set of params:
beforeedit( Ext.grid.plugin.Editing editor, Object e, Object options )
But there is mistake. The correct sequance is:
beforeedit( Object e, Ext.grid.plugin.Editing editor, Object options )
I've updated example due to this fact.
You can specify ColumnModel to declare editable and not editable columns:
var cm = new Ext.grid.ColumnModel({
columns: [{
dataIndex: 'id',
header: 'id',
hidden: true
},{
dataIndex: '1',
header: '1',
editor: new Ext.form.TextField({})
},{
dataIndex: '2',
header: '2',
editor: new Ext.form.NumberField({})
},{
dataIndex: '3',
header: '3'
}]
});
var grid = new Ext.grid.EditorGridPanel({
store: store,
clicksToEdit: 2,
cm: cm
...
In this example column id is unvisible, columns 1 and 2 editable (with text and number editors) and column 3 is not editable.
UPDATE:
Prevent row editing:
grid.on('beforeedit', function(event) {
if (event.row == 0) {
this.store.rejectChanges();
event.cancel = true;
}
}, grid);
As Ziyao Wei mentioned the documentation for the beforeEdit event is wrong. However you need to reference the 'editor' parameter to get the row index and other values, not the first object parameter 'e'.
Updated example:
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2,
listeners: {
beforeedit: function(e, editor){
if (editor.rowIdx == 0)
return false;
}
}
})
]