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;
});
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 loop through a nested json array to display values in a grid cell (using extjs 6.0).
Here is the column in the view:
{
header: 'Participants',
dataIndex: 'participants'
},
The model:
Ext.define('App.model.Event', {
extend: 'Ext.data.Model',
fields: [
{ name: 'eventTypeName', type: 'auto', mapping: 'eventType.eventType' },
// this only grabs the first object in the list....how to grab all?
{ name: 'participants', type: 'auto', mapping: 'participants[0].participantName' },
]
});
And the json:
{
"_embedded" : {
"events" : [ {
"participants" : [ {
"participantId" : 1,
"participantName" : "name1"
}, {
"participantId" : 2,
"participantName" : "name2"
}, {
"participantId" : 3,
"participantName" : "name3"
} ],
}
}
}
The rows in the grid are the events, and each event row will have multiple participants that I want to display in a cell. How can all of the participant names be displayed in a single cell?
I've tried something similar to this post using the hasMany method, to no avail: https://www.sencha.com/forum/showthread.php?205509-Displaying-a-hasMany-model-relationship-in-a-Grid&p=822648&viewfull=1#post822648
If you want to display special content in a cell, then you'll need to implement a renderer. In the renderer function, you would iterate over your participants for the current row, building and returning an HTML string based on what you want that cell to look like.
I try to add a button to the last column of my Gridx, however, the button is not shown and above the other table data the grid just says "loading...".
Cell Widget is required and declared, widgetInCell is set and onCellWidgetCreated function added. When replacing the onCellWidgetCreated function with alert, an alert message for each row is shown and the "loading..." disappears. My feeling is that the onCellWidgetCreated function is wrong?
My code looks like the following and when comparing it against some examples on the Gridx website I cannot find the problem.
require([
"gridx/Grid",
"gridx/core/model/cache/Sync",
"dojo/store/Memory",
"dojo/domReady!",
"gridx/modules/CellWidget",
"dijit/form/Button"
], function(Grid, Cache, Memory,Button,CellWidget,domConstruct){
var store = new Memory({
idProperty:"CategoryID",
data: jsondata
});
var grid = new Grid({
id:"gridId",
store: store,
cacheClass: Cache,
structure: [
{
id: "0",
field: "CategoryID",
name: "Kategorie (ID)",
width: "100px"
},
{
id: "1",
field: "CategoryName",
name: "Kategoriename"
},
{
id: "2",
field: "Attributes",
name: "Attribute"
},
{
id: "3",
field: "Actions",
name: "Aktion",
widgetsInCell: true,
onCellWidgetCreated: function(cellWidget, column){
var btn = new Button({
label: "Click me!"
});
btn.placeAt(cellWidget.domNode);
}
}
],
modules: [
CellWidget
]
});
grid.placeAt("aGrid");
grid.startup();
}
);
I came across anotheer problem with VirtualVScrolling and found out that this was due to a defective gridx css file which contained a custom layout.
When using the standard css file, "onCellWidgetCreated" worked for me as well.
I've got a little question about the use of jqxGrid from jqWidgets.
I'm trying to select a row of my table dynamically from another page. I explain myself:
My first page contains a list of users. I want that when I choose an user on this list, it opens a new page with, by exemple, the ID of my user returned in GET through PHP. And then, I want to generate a new grid, with less information, but with the user already selected.
I've found how to select a row by her index $('#grid').jqxGrid('selectrow', 10); but it's not working, because if one table is sorted or filtered, the index is changed...
So, is there any way to do this ?
Here's the code wich is called when selecting a row on first table:
$('#search_right').bind('rowselect', function(event){
var iSocID = $('#search_right').jqxGrid('getcellvalue', event.args.rowindex, 'id');
$("#soci_right").load('activites/soc.search.php?a=form&id='+iSocID);
$('#content').jqxTabs('select', 3);
});
And here's the generation code of my second list:
var url = 'activites/soc.search.php';
var source = {
datatype: "json",
datafields: [
{ name: 'name', type: 'string'},
{ name: 'id', type: 'int'},
],
id: 'id',
url: url,
root: 'data'
};
dataSource = new $.jqx.dataAdapter(source);
$("#soci_table").jqxGrid({
source: dataSource,
theme: jqxGlobalTheme,
columnsresize: true,
sortable: true,
filterable: true,
showfilterrow: true,
columns: [
{ text: 'Name', dataField: 'name'},
{ text: 'ID', dataField: 'id', hidden:true},
]
});
After contacting the support of jqWidgets (who couldn't help me......) I've made a little snippet that does the tricks... But I think jqWidget should add this as a default functionnality of jqxGrid !
I paste you my code here, hope it'll help some of you !
$('#search_right').bind('rowselect', function(event){
var iSocID = $('#search_right').jqxGrid('getcellvalue', event.args.rowindex, 'id');
// Create filter
var filtergroup = new $.jqx.filter();
var filtervalue = iSocID;
var filtercondition = 'EQUAL';
var filter1 = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
var filter_or_operator = 1;
filtergroup.addfilter(filter_or_operator, filter1);
$("#soci_table").jqxGrid('addfilter', 'id', filtergroup);
// Apply filter
$("#soci_table").jqxGrid('applyfilters');
// Select row
$('#soci_table').jqxGrid('selectrow', 0);
// Remove filter
$("#soci_table").jqxGrid('clearfilters');
});
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;
}
}
})
]