I've created a kendo grid, and need to insert kendo drop down into one of the columns. I need to get the data for the drop down from another data source. It kind of works, however, the problem is when I have chosen a value from the drop down and the drop down closes, instead of displaying that value it goes into editable mode. Only when I click outside of the dropdown, it displays the correct value. Here is a gif of the issue:
https://media2.giphy.com/media/KyMGB7FmFQMVTChFA7/giphy.gif
How could this issue be solved?
I have successfully created a kendo grid with a drop down list already. The only difference seems to be that there only one data source is used, but here two are used. Here is some of the code for the drop down:
title: "Type",
field: "productType.name", //this property is from the data source used for grid
template: "<kendo-drop-down-list k-value=\"dataItem.productType.id\"
k-options=\"productTypeOptions\" ng-change=\"productTypeChanged(dataItem, 'productType')\"
ng-model=\"dataItem.productType.id\"></kendo-drop-down-list>"
}...];
$scope.productTypes = {
data: [{ name: "Value 1", id: "1" }, { name: "Value 2", id: "2" }]
}
$scope.productTypeDataSource = new kendo.data.DataSource({
schema: {
data: "data",
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
},
data: $scope.productTypes,
serverPaging: true,
serverSorting: true,
serverFiltering: true
});
$scope.productTypeOptions = {
dataSource: $scope.productTypeDataSource,
dataTextField: "name",
dataValueField: "id"
};
$scope.productTChanged = function (dataItem, field, productArray, dataSource) {
var index = dataSource.indexOf(dataItem);
var c = productArray.data[index];
if (c == null) return;
c[field] = dataItem[field];
return c;
};
$scope.productTypeChanged = function (dataItem, field) {
$scope.productTChanged(dataItem, field, $scope.products, $scope.productDataSource);
};```
I'm trying to bind an array of id-value pairs to a kendo grid popup editor.
Got everything to work for creating a new record. Popup editor loads the custom editor and successfully submits the data to the controller.
The problem is when I try to edit records. The records displays properly in the row, but when I try to edit it, the multiselect does not hold the values.
Grid Markup
$("#ProjectSites-SubContract-grid").kendoGrid({
dataSource: {
type: "json",
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
DateOfContract: { type: 'date', editable: true },
DateOfCompletion: { type: 'date', editable: true },
AmountOfContract: { type: 'number', editable: true },
Contractor: { defaultValue: { id: "", name: "" } }
}
}
},
},
columns: [
{
field: "ScopeOfWork",
title: "Scope of Work",
template: "#=parseScopeOfWork(ScopeOfWork)#",
editor: scopeOfWorkEditor
},
]
});
});
Scope of Work editor
function scopeOfWorkEditor(container, options) {
$('<input data-text-field="name" data-value-field="id" data-bind="value:ScopeOfWork"/>')
.appendTo(container)
.kendoMultiSelect({
dataSource: {
data: [
#foreach (var scopeOfWork in Model.AvailableScopeOfWork)
{
<text>{ id : "#scopeOfWork.Value", name : "#scopeOfWork.Text" },</text>
},
]
}
});
parseScopeOfWork -
this method guys iterates through the object list and concats the name.
function parseScopeOfWork(scopeOfWork) {
var result = "";
for (var i = 0; i < scopeOfWork.length; i++) {
result += scopeOfWork[i].Name;
if (i < scopeOfWork.length - 1)
{
result += ", <br/>";
}
}
return result;
}
Here's a screenshot:
You're binding the SpaceOfWork to the new widget, but how that widget knows your Model ? I mean, just using data-bind doens't binds the model to the widget, it can't figure that by itself. I have two suggestions:
Set the value in the widget's initialization:
.kendoMultiSelect({
value: options.model.ScopeOfWork
Demo
Bind the model to the widget for good:
let $multiSelect = $('<input data-text-field="name" data-value-field="id" data-bind="value:ScopeOfWork"/>');
kendo.bind($multiSelect, options.model);
$multiSelect
.appendTo(container)
.kendoMultiSelect({ ...
Demo
Note: Edit the category cell in both demos to see the changes.
I currently have a simple extJS Grid which is pulling data from a server and presenting it to the viewer. I would like to grab the value of the selected row, and then pass it to another PHP script for processing in order to display the results in another grid.
var roleInformationStore = Ext.create('Ext.data.Store', {
autoLoad: true,
autoSync: true,
model: 'RoleInformation',
proxy: {
type: 'ajax',
url: 'data.php',
reader: {
type: 'array',
},
writer: {
type: 'json'
}
}
});
var roleInformationGrid = Ext.create('Ext.grid.Panel', {
store: roleInformationStore,
width: '100%',
height: 200,
title: 'Roles',
columns: [
{
text: 'Name',
flex: 1,
width: 100,
sortable: false,
hideable: false,
dataIndex: 'role'
}
],
listeners: {
cellclick: function(view, td, cellIndex, record, tr, rowIndex, e, eOpts) {
roleInformationStore.proxy.extraParams = record.get('role');
//Ext.Msg.alert('Selected Record', 'Name: ' + record.get('role'));
}
}
});
Using the listener in the current grid, I am able to get the value and show it using the alert method. Any suggestions on how to accomplish this?
Thanks
For this to work, extraParams has to be an object of key-value string pairs, because an URI has to be something like data.php?key1=value1&key2=value2.
Style-wise, Sencha advises to use getters and setters, whenever possible.
Together, you get:
var store = Ext.getStore("roleInformationStore");
store.getProxy().setExtraParam("myRoleParamKey",record.get('role'));
store.load();
In PHP, you would get the parameter then using
$role = $_GET['myRoleParamKey'];
You can of course substitute myRoleParamKey for any alphanumeric literal you want, but make sure you use the same key on both server and client side. ;-)
Docs: setExtraParam
I have built a dojo OnDemandGrid that has a couple columns that have editors (NumberTextBox, and FilteringSelect) so I can modify values in the grid. I have also added some validation on these columns to help make sure the values that are entered are correct. This all appears to be working fine and when I enter an invalid value I get an indication that the value is incorrect.
My problem is when I try to send this data back to the server. When I get the grid data with a ui.searchResultGrid.collection.data, any of the fields that are invalid have not been updated in the collection and still have their original values. My guess is that when the cell is updated and does a save it does its validation, and if that validation fails it doesn't update the collection. How can I tell that some cells have failed validation and have issues?
Here's how I'm defining my grid if it helps:
require(["dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/Keyboard", "dgrid/Selection", "dgrid/Editor",
"dgrid/extensions/ColumnResizer", "dgrid/extensions/DijitRegistry", "dijit/form/NumberTextBox",
"dijit/form/FilteringSelect", "dojo/_base/lang", "dojo/domReady!"],
function (declare, OnDemandGrid, Keyboard, Selection, Editor, ColumnResizer, DijitRegistry, NumberTextBox, FilteringSelect, lang) {
var CustomGrid = declare([OnDemandGrid, Keyboard, Selection, Editor, ColumnResizer, DijitRegistry]);
ui.searchResultGrid = new CustomGrid({
columns: {
newItemAmount: {
label: "# of New Item",
editor: NumberTextBox,
editorArgs: {
constraints: {
min: 0.0001,
max: 999.9999,
allowNegative: false,
places: 4
},
style: "width:90px;",
required: true
},
autoSave: true,
resizable: false,
sortable: false,
width: 100
},
newItemUnitId: {
label: "Unit of New Item",
editor: FilteringSelect,
editorArgs: {
style: "width:130px",
searchAttr: "name",
labelAttr: "name",
required: true
},
autoSave: true,
resizable: false,
sortable: false,
width: 140
}
},
selectionMode: "none",
cellNavigation: false,
}, "searchResultGrid");
});
From what I was able to find, you have to look at each cell you want to validate and check .element.widget.isValid() to see if that widget passes validation. I wrote a function to validate a grid with parameters:
grid - the grid to validate
cols - an array of strings of the column names to validate
function gridValid(grid, cols) {
for (var i = 0; i < grid.collection.data.length; i++) {
var rowId = grid.collection.getIdentity(grid.collection.data[i])
for (var c = 0; c < cols.length; c++) {
if (!grid.cell(rowId, cols[c]).element.widget.isValid()) {
return false;
}
};
}
return true;
}
and I called the function like this:
if (gridValid(ui.searchResultGrid, ["newItemAmount", "newItemUnitId"])) {
var toSave = ui.searchResultGrid.collection.data;
//TODO: save the grid data
}
This may not be the best way to validate the grid, but it appears to be working.
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.