We Keep Coding

Kendo grid on edit number display `,` seperator

I create a simple demo here. When edit at amount field I want to display , separator ? Currently it only display the , when not in edit mode. Any idea how to achieve this?
DEMO IN DOJO
var data = [{ "name": 'Venue A', "amount": 10000.50},
{"name": 'Venue B', "amount": 250000.00},
{"name": 'Venue C', "amount": 1500000.43 }];
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "id",
fields: {
name: { type: "string" },
amount: { type: "amount" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
toolbar: [{ name: "create", text: "Add" }],
columns: [
{ field:"name" , title: "Name"},
{ field: "amount", title: "Amount", format: "{0:n}" }],
editable: true
});
});
<div id="grid"></div>

Per the documentation you only have the following types allowed:
The available dataType options are:
"string"
"number"
"boolean"
"date"
"object"
(Default) "default"
I suggest you to use "number" in this case, as it will work for sorting and filtering.
You can check that Kendo doesn't understand the "amount" type by writing some incorrect text in the editor and see it stays as it was.
You can create your own editor as shown in this dojo:
{ field: "amount", title: "Amount", format: "{0:c}",
editor: function(container, options) {
const input = $(`<input name="${options.field}">`).appendTo(container);
input.kendoNumericTextBox({
format: "c"
});
}
}
However, if you test Kendo NumericTextBox here, you'll see it doesn't display the section separators when editing.
You could do a custom text editor and handle all the events - that's a pure JavaScript question.

How to know how many items were selected in a multiSelect combobox

I have a combo box with the multiSelect property and I want to know how can I know how many items were selected. I tried with:
combobox.store.getCount();
but it tells me the total of items in my combo box instead of the total of items selected by the user. Basically I want to make a condition that will trigger when the user selects more than one option in the combobox

You can use combo.getPicker() method and picker have method to get selected records
In this FIDDLE, I have created a demo using combobox with multi-select. I hope this will help you to achieve your requirement.
CODE SNIPPET
Ext.application({
name: 'Fiddle',
launch: function () {
// The data store containing the list of states
Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
storeId: 'states',
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.panel.Panel', {
title: 'Combo Example',
renderTo: Ext.getBody(),
items: [{
xtype: 'combo',
margin: 10,
fieldLabel: 'Choose State',
store: 'states',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
multiSelect: true,
}],
bbar: ['->', {
text: 'Get Selected',
handler: function () {
var selectionModel = this.up('panel').down('combo').getPicker().getSelectionModel();
record = selectionModel.getSelection();
console.log(record);
Ext.Msg.alert('Info', 'Number of Selected record is ' + selectionModel.getCount());
//Ext.Msg.alert('Info', 'Selected record is <br> '+ record.map(r=>{return r.get('name')}).join('<br>'));
}
}]
});
}
});

Here is a possible solution. Go to multiselect-demo.html, open your browser console (F12 on Google Chrome and Firefox) and type :
f = Ext.getCmp("multiselect-field");
f.on("change", function () {
console.log(this.getValue().length)
});
Then see what's happening when you change the selected values in the "MultiSelect Test". For more informations, see : http://docs.sencha.com/extjs/4.2.5/#!/api/Ext.ux.form.MultiSelect-method-getValue.

Define sort options of Kendo Grid in Angular

I'm trying to create a Kendo Grid in Angular. I originally had something like this:
<div kendo-grid k-options="gridOptions" k-data-source="myArray"></div>
In my scope, myArray is an array that gets dynamically assigned. gridOptions was defined as something like this:
gridOptions = {
dataSource: {
sort: { field: "number", dir: "asc" }
},
columns: [
{ field: "number", title: "Number" }
],
sortable: true
};
But the problem here is that the default sort is ignored, presumably because Kendo is using the k-data-source instead and totally ignoring this in the options. However, if I try removing k-data-source, and modifying my gridOptions to this:
gridOptions = {
dataSource: {
data: myArray,
sort: { field: "number", dir: "asc" }
},
columns: [
{ field: "number", title: "Number" }
],
sortable: true
};
Then I can see that the grid is sorted, but when myArray gets assigned, the grid does not populate with the data (I just end up with an empty grid).
What's the best way to achieve a default sorted grid using Kendo Angular directives? Thanks.

Try this for the dataSource part of the options:
dataSource: {
data: new kendo.data.ObservableArray(myArray),
sort: { field: "number", dir: "asc" }
}

ExtJS 6 grid doesn't update/refresh column headers properly

I've got a basic ExtJS gridpanel on which I can apply custom state on the fly. Using another control such as a combobox or another grid, my application applies the selected state on the grid. An example of this state:
{
"height": 384,
"columns": [{
"id": "h107"
},
{
"id": "h1",
"width": 30
},
{
"id": "unplannedtasks_ActualEndDate",
"hidden": true,
"width": 100
},
{
"id": "unplannedtasks_ActualNoResources",
"hidden": true,
"width": 100
},
{
"id": "unplannedtasks_ActualResponseDateTime",
"hidden": true
},
{
"id": "unplannedtasks_ActualTotalDurationInSeconds",
"width": 100
},
"filters": []
}
Here's the corresponding columns section of the grid declaration:
Ext.define('Ext.grid.Stateful', {
extend: 'Ext.grid.Panel',
stateEvents: ['columnmove', 'columnresize', 'sortchange', 'hiddenchange', 'groupchange', 'show', 'hide'],
// CODE OMMITTED FOR BREVITY
initComponent: function () {
Ext.apply(this, {
columns: [
filterAction,
new columns.tasks.ActualEndDate({ id: 'unplannedtasks_ActualEndDate', hidden: false }),
new columns.tasks.ActualNoResources({ id: 'unplannedtasks_ActualResponseDateTime', hidden: false },
new columns.tasks.ActualResponseDateTime({ id: 'unplannedtasks_ActualResponseDateTime', hidden: false },
new columns.tasks.ActualTotalDurationInSeconds({ id: 'unplannedtasks_ActualTotalDurationInSeconds', hidden: false }
]
});
}
})
An example of a column definition:
Ext.define("columns.tasks.ActualNoResources", {
extend: "Ext.grid.column.Column",
text: 'ActualNoResources',
dataIndex: 'ActualNoResources',
editor: {
allowBlank: false
}, filterable: true,
filter: {
type: 'string'
}
});
Everything goes as I expected except the column headers don't seem to refresh properly. If I open the columns panel in the grid, it is showing the correct amount of visible and hidden columns. Same story with the filters: if there's a filter in the state, it applies the correct value on the correct field. It's as though the column headers need to be refreshed in some way.
I tried to use grid.getView().refresh() but that doesn't work. Instead, if I resize the grid, it does refresh the hidden columns but not the columns that were initially hidden but now visible.
I think I am missing a simple line of code that belongs in the applyState method of the grid so I can command the grid to refresh the grid with the new state rather than the previous or initial state.
Any ideas on how to solve this?

As it turns out, the scenario that I pursue is not possible out of the box with ExtJS. What I'm asking can only be done during startup (without intervention of a developer's custom code) so I had to quit this approach and provide custom code. In the end, I had to rebuild the columns and then pass that collection to the reconfigure(store, columns) method of the grid.

ShieldUi datagrid shows 'no data to display' if there is only a single data set result

I am using shieldui's grid to display some data. If there is only a single node of data, the table renders and says 'There is no data to display'. If there are two or more results, it shows fine. Here is the code I'm using to display the data -
$('.data-holder').shieldGrid({
dataSource: {
data: jsonFromXML.HistoricalQuotes.HistoricalQuote
}
});
Multi-node xml like this below displays just fine -
<IRXML CorpMasterID="xxxxx">
<HistoricalQuotes Ticker="xxx" Date="03/03/1992">
<HistoricalQuote>
<Bid>0</Bid>
<Ask>0</Ask>
<High>28.1643892082794</High>
<Low>27.7277320112518</Low>
<Volume>583524.1048</Volume>
<Open>27.8368963105087</Open>
<SharesOutstanding>0</SharesOutstanding>
<Last>28.1643892082794</Last>
<AdjustmentFactor>1.145063</AdjustmentFactor>
<RollingEarnings>0</RollingEarnings>
<ShortInterest>0</ShortInterest>
</HistoricalQuote>
<HistoricalQuote>
<Bid>0</Bid>
<Ask>0</Ask>
<High>28.1643892082794</High>
<Low>27.7277320112518</Low>
<Volume>583524.1048</Volume>
<Open>27.8368963105087</Open>
<SharesOutstanding>0</SharesOutstanding>
<Last>28.1643892082794</Last>
<AdjustmentFactor>1.145063</AdjustmentFactor>
<RollingEarnings>0</RollingEarnings>
<ShortInterest>0</ShortInterest>
</HistoricalQuote>
</HistoricalQuotes>
</IRXML>
But if I get returned a single node of data like this, I get the 'no records to display message' -
<IRXML CorpMasterID="xxxxx">
<HistoricalQuotes Ticker="xxx" Date="03/03/1992">
<HistoricalQuote>
<Bid>0</Bid>
<Ask>0</Ask>
<High>28.1643892082794</High>
<Low>27.7277320112518</Low>
<Volume>583524.1048</Volume>
<Open>27.8368963105087</Open>
<SharesOutstanding>0</SharesOutstanding>
<Last>28.1643892082794</Last>
<AdjustmentFactor>1.145063</AdjustmentFactor>
<RollingEarnings>0</RollingEarnings>
<ShortInterest>0</ShortInterest>
</HistoricalQuote>
</HistoricalQuotes>
</IRXML>
I read through the documentation I found and I don't see any limitations around this. Does anyone have any thoughts on this?
Any input at all is greatly appreciated.

I tried to reproduce the described issue but to no avail. On my side binding the grid to a single object show it and there is not "no records to display message". My setup is:
var products = [{
ProductID: 1,
ProductName: "Chai",
SupplierID: 1,
CategoryID: 1,
QuantityPerUnit: "10 boxes x 20 bags",
UnitPrice: 18.0000,
UnitsInStock: 39,
UnitsOnOrder: 0,
ReorderLevel: 10,
Discontinued: false
}];
$("#grid1").shieldGrid({
dataSource: {
data: products
},
columns: [
{ field: "ProductName", title: "ProductName", width: "330px" },
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" }
]
});
What is yours setup? Also can you confirm that the jsonFromXML.HistoricalQuotes.HistoricalQuote contains one record? Also please note that this record needs to be in a json array like in my example. Can you confirm that when xml contain one record the object in jsonFromXML.HistoricalQuotes.HistoricalQuote is wrapped in an array?
Regards,
Kat