Kendo grid drop down not translating numeric values - javascript

I have managed to set the options array on a kendo grid column after the grid has been initialised. During initialisation I pass the column in question an empty array then this array is populated with an array of objects after initialisation using JavaScript. The option objects are of the type { value: 1, text: 'text' } with the 'text' begin the displayed value & when selected translated into the corresponding value - 1.
However when the grid is loaded with data the number values are not being translated into their corresponding text values and are being displayed as numbers. Interestingly when you click on a cell of this column type the translation is then performed. How can I get the number value to be translated into its text value when the grid is loaded with data, is there an option setting that I am missing?
var optCategory = [];
$('#grid').kendoGrid({
dataSource: [],
columns: [ { field: 'Category', title: 'Category', width: '100%', values: optCategory } ],
editable: true
});
(function getCategoryValues () {
var grd = $('#grid').data('kendoGrid');
var o = { value: 1, text: 'Option 1' };
grd.columns[0].values.push(o);
var o = { value: 2, text: 'Option 2' };
grd.columns[0].values.push(o);
var o = { value: 3, text: 'Option 3' };
grd.columns[0].values.push(o);
})();
var products = [ { Category: 2 } ];
var ds = new kendo.data.DataSource({
data: products
});
$('#grid').data('kendoGrid').setDataSource(ds);
// $('#grid').data('kendoGrid').dataSource.read(); - no effect
// $('#grid').refresh(); - no effect
http://jsfiddle.net/EddyBu/c7kztssq/2/
Thank you!

Related

How to insert kendo drop down list into kendo grid, but with a different data source?

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);
};```

Populate BootstrapTable x-editable select box based on another column

I have a BootstrapTable select box. I know you can use a function to populate the values in the select box. I'd like that function to change which array it provides based on the value of a second column (called Text_example).
So in my example, if Text_example for that row is 1, the select box should have the following data: [{1:1}]. if Text_example for that row is 2, the select box should have the following data: [{2:2}]
I think my problem is that I don't know how to pass just the row's data to the function get_values as my method seems not to be working.
Full Fiddle: http://jsfiddle.net/goxe6ehg/
var data = [{"Text_example": 1},{"Text_example": 2}];
function get_values(data) {
if (data['Text_Example'] === 1) {
return [{1:1}];
}
else {
return [{2: 2}]
}
}
$('#table').bootstrapTable({
columns: [
{
field: 'Select_example',
title: 'Select_example',
editable: {
type: 'select',
source: get_values($('#table').bootstrapTable('getData'))
}
},
{
field: 'Text_example',
title: 'Text_example'
}
],
data: data
});
EDIT: I over-simplified my example. Rather than having a static field for text_example I need it to be a select box, where the value for select_example changes based on what the user has selected in text_example.
Updated JSFiddle: http://jsfiddle.net/4wwv18Lq/4/
You can use the oninit handler on the bootstraptable library.And add the editables by iterating through the data object.
var data = [{"Text_example": 1},{"Text_example": 2}];
$('#table').on('editable-init.bs.table', function(e){
var $els = $('#table').find('.editable');
$els.each(function(index,value){
$(this).editable('option', 'source', data[index])
});
});
$('#table').bootstrapTable({
columns: [
{
field: 'Select_example',
title: 'Select_example',
editable: {
type: 'select'
}
},
{
field: 'Text_example',
title: 'Text_example'
}
],
data: data
});
JSfiddle link
http://jsfiddle.net/km10z2xe/

Kendo UI getByUid() not working in hierarchical data source

I have a Kendo UI hierarchical data source set up, but getByUid() does not work as expected for me. It returns 'undefined' when I search for a uid that I can see is in my hierarchical data source.
The twist is that I am searching for a node that I add after initially setting up the hierarchical data source, using the .data() method.
Here is a Kendo Dojo snippet to illustrate - you will see at the bottom I console.log the datasource, the uid I am searching for, and the response ('undefined'), so you can see that that uid is in there.
Kendo Dojo Snippet
I think I have set up my schemas and models correctly, and as far as I can tell from the Kendo documentation I should be able to populate the dataSource using .data() and populate it with a fresh JavaScript object, with more nested nodes, yet still I cannot search for these new nodes using getByUid().
Here is the JavaScript from the Dojo snippet as well:
var initColumns = [
{
id: 0,
Index: 0,
ResponsiveStyle: 3,
Widgets: []
},
{
id: 1,
Index: 1,
ResponsiveStyle: 3,
Widgets:[]
},
{
id: 2,
Index: 2,
ResponsiveStyle: 3,
Widgets: []
}
];
var Columns = new kendo.data.HierarchicalDataSource({
schema: {
data: "Columns"
}
});
var Rows = new kendo.data.HierarchicalDataSource({
schema: {
data: "Rows",
model: rowModel
}
});
var Widgets = new kendo.data.HierarchicalDataSource({
schema: {
data: "Widgets",
model: layoutWidgetModel
}
});
var layoutWidgetModel = kendo.data.Node.define({
id: "layoutWidget",
hasChildren: "Rows",
children: Rows
});
var rowModel = kendo.data.Node.define({
id: "rowModel",
hasChildren: "Columns",
children: Columns
});
var parentModel = kendo.data.Node.define({
id: "parentModel",
hasChildren: "Widgets",
children: Widgets
});
var validator;
var viewModel = kendo.observable({
//create a dataSource
dataSource: new kendo.data.HierarchicalDataSource({
data: initColumns,
schema: {
model: parentModel
}
}),
selected: {} //this field will contain the edited dataItem
});
viewModel.dataSource.read(); //invoke the read transport of the DataSource
//Create the variables to create an object for insertion into the main parent object for the HierarchicalDataSource
var Rows = [ { Index: 0, Columns: [
{
Index: 0,
ResponsiveStyle: 0
}]
} ];
var SubType = 'Joined';
var WidgetName = 'widget name';
var Type = 'widget type';
var DisplayType = 'widget subtype';
var Title = 'widget title';
var Collapsible = true;
var Borders = 1;
var TitleBackground = 4;
var TitleColour = 6;
var kendoLayoutWidget = new layoutWidgetModel({ Title: Title, Type: Type, SubType: SubType, WidgetName: WidgetName, Collapsible: Collapsible, DisplayType: DisplayType, Borders: Borders, TitleBackground: TitleBackground, TitleColour: TitleColour, Rows: Rows });
//Get the uid of the new widget
var GUID = kendoLayoutWidget.uid;
//Get the current object from the HierarchicalDataSource
var VBdata = viewModel.dataSource.data();
//Push in the newly created widget object
VBdata[0].Widgets.push(kendoLayoutWidget);
//Replace the old data in the dataSource with the new multilevel object
viewModel.dataSource.data(VBdata);
//find the layoutwidget by getByUid()
var theWidget = viewModel.dataSource.getByUid(GUID);
console.log(viewModel.dataSource);
console.log(GUID);
console.log(theWidget);

How to change model of a combobox (Ext JS) from outside its definition

i have two Ext Combo boxes here, i need to change values of second combobox when select event of combobox1 invokes, my problem is i don't know how to change model of a combobox.
items: [{
xtype:'combo',
fieldLabel: 'Course',
afterLabelTextTpl: required,
store: new Ext.data.SimpleStore({
data: [
[1, 'Bsc CS'],
[2, 'MSc CS'],
],
id: 0,
fields: ['value', 'text']
}),
name: 'first',
listeners:{
select: function( combo, records, eOpts )
{
if(this.getValue()=="Bsc CS")
{
// Ext.get('semcombo').getStore.loadData(msc);
}
else if(this.getValue()=="MSc CS")
{
}
}
},
editable:false,
allowBlank: false
},{
xtype:'combo',
fieldLabel: 'Semester',
id : 'semcombo',
afterLabelTextTpl: required,
name: 'last',
allowBlank: false,
}
For the second combobox, configure a combobox for each model type. Hide or show the appropriate combobox as a selection is made in the first combobox.
If you need to change the data completely (JSFiddle)
select: function(checkbox,records) {
comp.clearValue();
comp.bindStore(Ext.StoreMgr.lookup(records[0].data.store));
// you can change the value field if needed
comp.displayField = 'petname';
// you can change the display field if needed
comp.valueField = 'id';
// you can change the display template if needed
comp.displayTpl = new Ext.XTemplate(
'<tpl for=".">' +
'{[typeof values === "string" ? values : values["' + comp.displayField + '"]]}' +
'<tpl if="xindex < xcount">' + comp.delimiter + '</tpl>' +
'</tpl>'
);
comp.picker = null;
}
If you just need to filter (load) the data in second combox you can do something like this
On the select event of the first combobox prepare the second one to filter the data
combobox2.queryData = [{ property: 'fieldName', value: value}];
combobox2.reset();
combobox2.doQuery(combobox.queryData);
where combobox2 is a reference to the activated combo and value a propertyvalue from the combo. To ensure the use of your new query use
combobox2.on('beforequery', function (e) {
e.query = e.combo.queryData;
});

Json data not showing in extjs grid

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);

Categories