I've got an ExtJS (4.0.7) GridPanel that I'm populating from a store. The values that I display in the GridPanel's column need to have a different view depending on the type of data that's in the record.
The ultimate goal is that records with "double" or "integer" value for the record's type property present a slider to the user that they can adjust, and a type of "string" just renders some read-only text.
I've created a custom Column to do this. It inspects the type in the renderer and determines what to render.
I've got the "string" working fine with the code below, but struggling with how I can dynamically create and render the more complicated slider control in the column.
This simplified example is just trying to render a Panel with a date control in it as if I can get that going, I can figure out the rest of the slider stuff.
Ext.define('MyApp.view.MyColumn', {
extend: 'Ext.grid.column.Column',
alias: ['widget.mycolumn'],
stringTemplate: new Ext.XTemplate('code to render {name} for string items'),
constructor: function(cfg){
var me = this;
me.callParent(arguments);
me.renderer = function(value, p, record) {
var data = Ext.apply({}, record.data, record.getAssociatedData());
if (data.type == "string") {
return me.renderStringFilter(data);
} else if (data.type == "double" || data.type == "integer") {
return me.renderNumericFilter(data);
} else {
log("Unknown data.type", data);
};
},
renderStringFilter: function(data) {
// this works great and does what I want
return this.stringTemplate.apply(data);
},
renderNumericFilter: function(data) {
// ***** How do I get a component I "create" to render
// ***** in it's appropriate position in the gridpanel?
// what I really want here is a slider with full behavior
// this is a placeholder for just trying to "create" something to render
var filterPanel = Ext.create('Ext.panel.Panel', {
title: 'Filters',
items: [{
xtype: 'datefield',
fieldLabel: 'date'
}],
renderTo: Ext.getBody() // this doesn't work
});
return filterPanel.html; // this doesn't work
}
});
My problem really is, how can I Ext.create a component, and have it render into a column in the gridpanel?
There are a few ways that I have seen this accomplished. Since the grid column is not an Ext container it can not have Ext components as children as part of any configuration the way other container components can. Post grid-rendering logic is required to add Ext components to cells.
This solution modifies your custom column render so that it puts a special css class on the rendered TD tag. After the grid view is ready, the records are traversed and the custom class is found for appropriate special columns. A slider is rendered to each column found.
The code below is a modified version of the ext js array grid example provided in the Sencha examples. The modification mixes in the custom column renderer and the post grid rendering of sliders to TD elements.
This example only includes enough modification of the Sencha example to show the implementation ideas. It lacks separated view and controller logic.
This is modified from here
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.data.Model'
]);
Ext.onReady(function() {
// sample static data for the store
Ext.define('Company', {
extend: 'Ext.data.Model',
fields: ['name', 'price', 'change', 'pctChange', 'lastUpdated', 'type']
});
var myData = [
['3m Co', 71.72, 2, 0.03, '9/1/2011', 'integer'],
['Alcoa Inc', 29.01, 4, 1.47, '9/1/2011', 'string'],
['Altria Group Inc', 83.81, 6, 0.34, '9/1/2011', 'string'],
['American Express Company', 52.55, 8, 0.02, '9/1/2011', 'string'],
['American International Group, Inc.', 64.13, 2, 0.49, '9/1/2011', 'integer'],
['AT&T Inc.', 31.61, 4, -1.54, '9/1/2011', 'integer'],
['Boeing Co.', 75.43, 6, 0.71, '9/1/2011', 'string'],
['Caterpillar Inc.', 67.27, 8, 1.39, '9/1/2011', 'integer'],
['Citigroup, Inc.', 49.37, 1, 0.04, '9/1/2011', 'integer'],
['E.I. du Pont de Nemours and Company', 40.48, 3, 1.28, '9/1/2011', 'integer'],
['Exxon Mobil Corp', 68.1, 0, -0.64, '9/1/2011', 'integer'],
['General Electric Company', 34.14, 7, -0.23, '9/1/2011', 'integer']
];
// create the data store
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Company',
data: myData
});
// existing template
stringTemplate = new Ext.XTemplate('code to render {name} for string items');
// custom column renderer
specialRender = function(value, metadata, record) {
var data;
data = Ext.apply({}, record.data, record.getAssociatedData());
if (data.type == "string") {
return stringTemplate.apply(data);;
} else if (data.type == "double" || data.type == "integer") {
// add a css selector to the td html class attribute we can use it after grid is ready to render the slider
metadata.tdCls = metadata.tdCls + 'slider-target';
return '';
} else {
return ("Unknown data.type");
}
};
// create the Grid
grid = Ext.create('Ext.grid.Panel', {
rowsWithSliders: {},
store: store,
stateful: true,
stateId: 'stateGrid',
columns: [{
text: 'Company',
flex: 1,
sortable: false,
dataIndex: 'name'
}, {
text: 'Price',
width: 75,
sortable: true,
renderer: 'usMoney',
dataIndex: 'price'
}, {
text: 'Change',
width: 75,
sortable: true,
dataIndex: 'change',
renderer: specialRender,
width: 200
}, {
text: '% Change',
width: 75,
sortable: true,
dataIndex: 'pctChange'
}, {
text: 'Last Updated',
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastUpdated'
}],
height: 350,
width: 600,
title: 'Irm Grid Example',
renderTo: 'grid-example',
viewConfig: {
stripeRows: true
}
});
/**
* when the grid view is ready this method will find slider columns and render the slider to them
*/
onGridViewReady = function() {
var recordIdx,
colVal,
colEl;
for (recordIdx = 0; recordIdx < grid.store.getCount(); recordIdx++) {
record = grid.store.getAt(recordIdx);
sliderHolder = Ext.DomQuery.select('.slider-target', grid.view.getNode(recordIdx));
if (sliderHolder.length) {
colEl = sliderHolder[0];
// remove div generated by grid template - alternative is to use a new template in the col
colEl.innerHTML = '';
// get the value to be used in the slider from the record and column
colVal = record.get('change');
// render the slider - pass in the full record in case record data may be needed by change handlers
renderNumericFilter(colEl, colVal, record)
}
}
}
// when the grids view is ready, render sliders to it
grid.on('viewready', onGridViewReady, this);
// modification of existing method but removed from custom column
renderNumericFilter = function(el, val, record) {
var filterPanel = Ext.widget('slider', {
width: 200,
value: val,
record: record,
minValue: 0,
maxValue: 10,
renderTo: el
});
}
});
I did something like this when I needed to render a small chart (essentially a spark chart) in a grid column. This solution is similar to sha's, but it's more robust and delegates the rendering to the component being rendered rather than the Column, which doesn't really have a render chain.
First, the column class:
Ext.define("MyApp.view.Column", {
extend: "Ext.grid.column.Column",
// ...
renderer: function (value, p, record) {
var container_id = Ext.id(),
container = '<div id="' + container_id + '"></div>';
Ext.create("MyApp.view.Chart", {
type: "column",
// ...
delayedRenderTo: container_id
});
return container;
}
});
Note the delayedRenderTo config option. Just like renderTo, this will be the DOM ID of the element that the chart component will render to, except that it doesn't need to be present in the DOM at the time of creation.
Then the component class:
Ext.define("MyApp.view.Chart", {
extend: "Ext.chart.Chart",
// ...
initComponent: function () {
if (this.delayedRenderTo) {
this.delayRender();
}
this.callParent();
},
delayRender: function () {
Ext.TaskManager.start({
scope: this,
interval: 100,
run: function () {
var container = Ext.fly(this.delayedRenderTo);
if (container) {
this.render(container);
return false;
} else {
return true;
}
}
});
}
});
So during initComponent(), we check for delayed render and prepare that if necessary. Otherwise, it renders as normal.
The delayRender() function itself schedules a task to check every so often (100ms in this case) for the existence of an element with the given ID — i.e., to check whether the column has rendered. If not, returns true to reschedule the task. If so, renders the component and returns false to cancel the task.
We've had good luck with this in the field, so I hope it works for you too.
By the way, I was developing this as a part of answering my own question about ExtJS charting. That thread has the results of my performance testing. I was rendering 168 chart components in grid columns in 3-4s across most browsers and OSes. I imagine your sliders would render much faster than that.
Try something like this:
renderNumericFilter: function () {
var id = Ext.id();
Ext.defer(function () {
Ext.widget('slider', {
renderTo: id,
width: 200,
value: 50,
increment: 10,
minValue: 0,
maxValue: 100,
});
}, 50);
return Ext.String.format('<div id="{0}"></div>', id);
}
But I must say whatever you're trying to do - it doesn't sound right :) I don't think a bunch of sliders inside the grid will look good to the user.
Related
ag-grid has a number of properties: enable*. Columns have a number of properties: suppress*. Setting a suppress* for a column has the effect of disabling the effects of some enable* property on the grid, for that column.
For example:
Docs
Interactive Code Demo on Plunker
var columnDefs = [
{field: 'athlete', suppressMovable: true, width: 150, cellClass: 'suppress-movable-col'},
{field: 'age', lockPosition: true, cellClass: 'locked-col'},
{field: 'country', width: 150}
];
var gridOptions = {
suppressDragLeaveHidesColumns: true,
columnDefs: columnDefs,
defaultColDef: {
width: 100
}
};
In the above example, the 'athlete' column is not movable due to suppressMovable:true. All of the other columns are movable.
I have a grid with enableRangeSelection: true
Docs
Interactive Code Demo on Plunker
I would like to prevent the first column from being included in a range selection.
However, no column property exists called suppressRangeSelection.
How can I prevent the user from including the first column in range?
Does not seem like ag-grid allows such behavior, but I managed to do so using Range Selection API:
var gridOptions = {
columnDefs: columnDefs,
enableRangeSelection: true,
rowData: null,
onRangeSelectionChanged: event => {
var cellRanges = event.api.getCellRanges();
if (!cellRanges || cellRanges.length === 0) return;
var excludeColumn = cellRanges[0].columns.find(
el => el.getColId() === 'athlete'
);
if (!excludeColumn) return;
var rangeParams = {
rowStartIndex: cellRanges[0].startRow.rowIndex,
rowStartPinned: cellRanges[0].startRow.rowPinned,
rowEndIndex: cellRanges[0].endRow.rowIndex,
rowEndPinned: cellRanges[0].endRow.rowPinned,
columns: cellRanges[0].columns
.map(el => el.getColId())
.filter(el => el !== 'athlete'),
};
event.api.clearRangeSelection();
event.api.addCellRange(rangeParams);
},
};
In an angular app I have a page that displays several Kendo-grids based on the data retrieved from an http request. The data comes back as json.
This is the function that executes on successful data retrieval. This is within a controller, and ctrl is the "this" object on the controller scope. Moment is a JavaScript library for managing dates. The only thing it's doing here is formatting as strings the date (MM/DD/YYYY) and the time (hh:mm A).
function (data) {
ctrl.dateGroups = {};
var currentDate = '';
data.Data.forEach(function (item) {
item.Date = item.StartDateTime ? moment(item.StartDateTime).format(HC_APP_CONFIG.dateFormat) : '';
item.ClockInTime = item.StartDateTime ? moment(item.StartDateTime).format(HC_APP_CONFIG.timeFormat) : '';
if ( angular.isEmpty(item.EndDateTime) ||
item.EndDateTime === '' ||
item.EndDateTime.format(HC_APP_CONFIG.dateFormat).match(HC_APP_CONFIG.badLocalDatePattern) !== null ){
item.ClockOutTime = '';
item.EndDateTime = '';
} else {
item.ClockOutTime = moment(item.EndDateTime).format(HC_APP_CONFIG.timeFormat);
}
var currentDate = 'd'+item.Date;
if (ctrl.dateGroups.hasOwnProperty(currentDate) &&
ctrl.dateGroups[currentDate].length > 0) {
ctrl.dateGroups[currentDate].push(item);
} else {
ctrl.dateGroups[currentDate] = [item];
}
});
}
The function (successfully) takes each returned item and puts it into an object as part of arrays named after the date, so that all items from Jan 14th, for example, end up in one array, and another for Jan 15th, etc.
This displays in the page with this loop:
<div class="col-sm-12" ng-repeat="(key,value) in punchList.dateGroups">
<h2 class="punch-heading">{{key.substring(1)}}</h2>
<div hc-grid id="grid-{{key}}"></div>
</div>
The result is a series of grids, each corresponding to a date and containing all the items for that date. This again, is successful.
The grid configuration:
gridConfig = {
uiOptions: {},
autoBind: false,
sortable: {
mode: 'single'
},
height: 'auto',
columnMenu: false,
filterable: false,
dataSource: {
type: 'json',
serverPaging: true,
serverFiltering: true,
serverSorting: true,
pageSize: HC_APP_CONFIG.defaultPageSize,
schema: {
data: 'Data',
total: 'TotalCount',
model: {
id: 'ShiftId',
fields: {
EmployeeName: {
type: 'string'
},
EmployeeCode: {
type: 'string'
},
JobName: {
type: 'string'
},
ClockIn: {
type: 'string'
},
ClockOut: {
type: 'string'
}
}
}
}
},
columns: [
{
field: 'EmployeeName',
title: 'Name',
sortable: false
},
{
field: 'EmployeeCode',
title: 'Employee Code',
sortable: false
},
{
field: 'JobName',
title: 'Job',
sortable: false
},
{
field: 'ClockInTime',
title: 'Clock In'
},
{
field: 'ClockOutTime',
title: 'Clock Out'
}
]
}
The problem is when I sort by the Clock In or Clock Out columns (the only sortable columns). At this point, the grid structure (pagination indicator, column heads, etc) remain in tact but the data disappears.
I'm using Kendo UI v2015.1.429
Kendo UI grids support direct server interaction via a built-in AJAX system for making API calls. It appears that setting serverSort:true may tell the Kendo UI grid to drop the current data model and query the server for newly sorted data (which it expects the server to provide). Since you are not using direct server interaction with the grid, it probably drops the model but then has no way to get a new one.
There is a sortable:true option that may be what you need for client side sorting of the existing data.
Link to Kendo UI grid server-side sorting article
I am adding new tabs dynamically with Extjs.. But is there a way I can save the newly added tabs somewhere(Probably in database), because I have to render all the tabs a user creates dynamically, whenever the user re-visits the page.
I can make tabs, save the state of the tabs in a cookie.. But I know that in order to save the state of a newly created tab, I have to first save the Html(?) snippet of the tab somewhere?
Here is my code:
var tab;
var tabIndex = 0;
var tabArray = [];
Ext.application({
launch: function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
expires: new Date(new Date().getTime() + (1000 * 60 * 60 * 24 * 7))
}));
Ext.create('Ext.container.Viewport', {
layout: 'absolute',
items: [{
x: 50,
y: 50,
width: 300,
height: 300,
xtype: 'tabpanel',
stateful: true,
stateId: 'tp1',
stateEvents: ['tabchange'],
getState: function() {
return {
activeTab: this.items.findIndex('id',this.getActiveTab().id)
};
},
applyState: function(s) {
this.setActiveTab(s.activeTab);
},
items: [{
id: 'c0',
title: 'Tab One'
}, {
id: 'c1',
title: 'Tab Two'
}, {
id: 'c2',
title: 'Tab Three'
}],
bbar: [
{
text: 'Add Tab',
//region: 'south',
xtype: 'button',
handler: function () {
var tabs = this.up('tabpanel');
tab = tabs.add({
title: 'Tab ',
closable:true,
xtype:'panel',
width: '100%',
height: '100%',
items: []
}).show();
}
}
]
}]
});
}
});
Am I trying to do something unrealistic here? or is it possible somehow to store the newly created tabs and render the whole tabpanel with the newly created tabs as it is on the page load?
I apologize for asking such a broad question :)
Thanks.
I have done a similar thing in the past. This is the design approach we had. Its vague, but we still did it
When you dynamically create a tab and add items(panels/input fields) into it and change the value of these items (say like entering a text in textbox, checking a checkbox) and when you finally hit save, we will extract all the data as JSON.
You need to custom build based on what values you need to save - say the type of the item, value, its child structure and so on.
Then when you want re-render the page, then you use the JSON to build it. It's not easy to build this solution. But, once you are done, its reusable for all the tabs - however dynamic is going to be.
And finally, its definitely possible
We are using kendo drag and drop functionality inside the kendo grid table.
1) If the user provide data on any editable fields and without saving the data, if user click/jump to other field for edit. User is loosing his updated data.
2) If the user update any records, we are refresh/regenerate table again Or if we refresh/regenerate outside from the function Or we added new records using outside the function. After that user are not able to drop row to replace with other.
Jsfiddel file
var data = [
{ Id: 1, Name: "data 1", Position: 1 },
{ Id: 2, Name: "data 2", Position: 2 },
{ Id: 3, Name: "data 3", Position: 3 }
];
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
Id: "Id",
fields: {
Id: { type: "number" },
Name: { type: "string" },
Position: { type: "number" }
}
}
}
});
var grid= $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
editable : true,
toolbar: ["save","cancel", "create"],
columns: ["Id", "Name", "Position"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr:not(.k-grid-edit-row)",
group: "gridGroup",
cursorOffset: { top: 10, left: 10 },
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function (e) {
var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.getByUid(dest.parent().data("uid"));
//not on same item
if (target.get("Id") !== dest.get("Id")) {
//reorder the items
var tmp = target.get("Position");
target.set("Position", dest.get("Position"));
dest.set("Position", tmp);
dataSource.sort({ field: "Position", dir: "asc" });
}
}
});
I've run into similar issue some time ago. And also I found the following thread on their forum - http://www.kendoui.com/forums/ui/grid/drag-and-drop-reordering.aspx#boD2qq6aG2OF1P8AAFTdxQ
So if you add one more additional column to the table and put an image there or some other element, then you'll be able to use that element as draggable target like:
grid.table.kendoDraggable({
filter: "tbody > .draggableTarget".....
The table is completely recreated in the DOM in the case when you refresh it, so you have to resubscribe your drag and drop functionality.
I was having similar issues using the newer kendoSortable with an editable grid to achieve drag/drop row sorting.
This fiddle http://jsfiddle.net/UsCFK/273/ works.
It uses a column with a drag handle as mentioned above to prevent cell edits being lost - the other cells are ignored in the setup:
grid.table.kendoSortable({
filter: ">tbody >tr",
hint: $.noop,
cursor: "move",
ignore: "TD, input",
placeholder: function (element) {
return element.clone().addClass("k-state-hover").css("opacity", 0.65);
},
container: '#grid tbody',
change: onGridRowChange
});
It also updates the position field in the datasource, rather than removing, then re-inserting the row as in some other examples - as this will cause a delete request request to the server for each row that is moved - which can cause issues when clicking the batch-editing cancel button. The position field is only shown for demonstration purposes - it should not be exposed for manual editing.
Given data in the form:
var grid_data = [ {Hello: 'World'}, {Jesus:'Navas'} ]
I wish to draw a grid like so:
The grid shows with 2 rows but with no data, I can't find the problem in the following code:
var grid_store = Ext.create('Ext.data.Store', {
fields: [
{name: 'Property'},
{name: 'Value'}
],
data: grid_data
});
// create the Grid
var grid_view = Ext.create('Ext.grid.Panel', {
store: grid_store,
renderTo: 'info_panel',
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Property',
width : 100,
sortable : true,
dataIndex: 'Property'
},
{
text : 'Value',
width : 80,
sortable : false,
dataIndex: 'Value'
}
],
height: 350,
width: 600,
title: 'Array Grid',
viewConfig: {
stripeRows: true
}
});
Renders to:
<div id="info_panel"></div>
If you're wondering how I got the example image, I changed the store to an ArrayStore and re-formatted the data into arrays, but I'd prefer to miss out that step and insert the data as-is.
edit:
I think what I'm really asking for is a way to alert extjs to use the JSON keys as values, as opposed to most of the grid examples out there that take the form:
{value: 'Hello'}, {property: 'World'}
As one of the commenters and your edit suggested, your grid is built to consume a json with 'Property' and 'Value' being the keys for the json objects. I don't know if it's possible for you to change the source of the data to send in the reformatted json, but if not, you can always just run a quick loop to do so after receiving the data:
var new_data = [];
Ext.each(grid_data, function(obj) {
for (var prop in obj) {
new_data.push({
Property: prop,
Value: obj[prop]
});
}
}, this);