kendo grid sorting not working in Chrome - google-chrome

I have problem with sorting in Kendo grid. Here is my example: http://dojo.telerik.com/iVATi
In IE sorting works fine: default view and asc sorting view are the same: first going elements starting with symbols, second elements with a-z letters, third elements with а-я letters. But in Chrome and Firefox I see three other results:
1). default view: first going element starting with symbols, second elements with a-z letters, third elements with а-я letters. (correct!)
2). asc sorting: first going elements starting with symbols, second elements with а-я letters, third elements with a-z letters. (bad!)
3). desc sorting: first going elements with z-a letters, second elements with я-а letters, third sorted elements with symbols. (correct!)

The problem is caused by Chrome's unstable sorting and adding an auxiliary data field is the standard way to resolve this limitation.
In case you don't want to add indexes in the data items array, it is also possible to add them on the fly with schema.parse:
var dataSource = new kendo.data.DataSource({
data: [
{ Name: "!asdgad" },
{ Name: "#sgjkhsh" },
{ Name: "adfadfka" },
{ Name: "tgjbndgnb" },
{ Name: "xsdfvks" },
{ Name: "абдваолптрв" },
{ Name: "пролрлитс" },
{ Name: "юатроваро" },
{ Name: "юдвлоитвт" }
],
schema: {
parse: function(data) {
for (var i = 0; i < data.length; i++) {
data[i].index = i;
}
return data;
}
}
});
You will still need to use a custom comparer function though.

I solved this problem. I extended sorted datasource with index field and added comparer-function by index for field name:
http://dojo.telerik.com/UKimo
May be exists other solutions?

Related

renderAllRows: false still renders all rows

I am creating a table and have renderAllRows:false and it still renders all rows, giving me the 'performance tip:
*VM6606 handsontable.full.min.js:61 Performance tip: Handsontable rendered more than 1000 visible rows. Consider limiting the number of rendered rows by specifying the table height and/or turning off the "renderAllRows" option.
*
I don't know why it isn't working, and being a newbie at HOT, I don't know if placement is a problem, or some other issue. Any help appreciated.
My data set has 18k rows, so I would LOVE to disable it, but it doesn't seem to work.
any ideas why it doesn't work? Additionally, the readonly:true doesn't work either.
Here's the code:
HOT_prg_grp = new Handsontable(HOTcontainer, {
data: data_bucket,
renderAllRows: false,
columns: [{ type: 'text', readonly:true },
{ type: 'text', readonly:false }],
colHeaders: ["Program", "Group"] ,
afterChange: (changed) => {
changed?.forEach(([row, col, oldValue, newValue]) => {
var prg = HOT_prg_grp.getDataAtCell(row, 0);
chg = [prg, newValue];
changes.push(chg);
});
},
licenseKey :'blah blah'
});
}
I would expect the 'renderAllRows: false to work. also, renderAllRows: False fails.

Remove spacing between bar in bar graph( react-chart-js)

issue that i am facing is, i have my bar graph made using react-chart-js. i want to remove space between the bar and center align the bar's . The bar's should have Thickness equal to 50
I try using dummy data ,that way i got the desired output but that is not the correct way of doing . Also I try using barPercentage , categoryPercentage option but didnt get the desired output
Link for CodeSandbox
I don't know if this actually works out of the box. There is nothing in the documentation about this use case either.
You could do it with ghost values to extend the chart in general.
This is not really a solution, but it may be an option.
const labels = ["","","January", "February", "March","",""];
export const data = {
labels,
datasets: [
{
label: "Dataset 1",
data: labels.map((elem, index) => {
if (index > 1 && index < 5)
return faker.datatype.number({ min: 0, max: 1000 })
}),
backgroundColor: "rgba(255, 99, 132, 0.5)",
barThickness: 50
}
]
};

Implement Angular range slider using months

I'm implementing a range slider by months using ngx-slider.
I want the value to be 1-12 and the display legend to be January-December.
I achieve it using the code below.
export class AppComponent {
minValue: number = 3;
maxValue: number = 9;
options: Options = {
floor: 1,
ceil: 12,
translate: (value: number, label: LabelType): string => {
switch (label) {
case LabelType.Low:
return "<b>March</b>";
case LabelType.High:
return "<b>October</b>";
default:
return "$" + value;
}
}
};
}
And the result is this one:
Link to the image result
How can I remove the dollar sign of the start and end value?
Or do you have better recommendation npm library for range slider for months?
Hello this time slider I used in the project
https://refreshless.com/nouislider/examples/
You can change the style using CSS,
Hope it can be adopted.

Formatting a text area field in NetSuite to span over 3 columns

I was wondering if anyone knows how I could make text area fields in NetSuite span over the 3 columns.
These fields will have lots of text, so it would be nice to have the whole width of the page for each field.
Help would be much appreciated, thanks
A possible solution is to replace the field group Notes with a tab called Notes and add the text area to the tab instead of to the field group (container property set to ID of tab). A test looks like this (I started with the sample Suitelet from Answer Id: 43586):
Here's the relevant snippet:
var subtab = form.addTab({
id : 'custpage_subtab',
label : 'Subtab'
});
var field = form.addField({
id: 'textfield',
type: serverWidget.FieldType.TEXTAREA,
label: 'Text',
container: 'custpage_subtab'
});
Field groups will always use a common layout, according to my tests. So, if there is one field group with 3 columns, then all field groups will have 3 columns and a field cannot span multiple columns, so the idea behind my solution is to use another element, in this case a tab element to display the field content. The tab label is not displayed because there is only one tab. Hope this helps.
The following worked for me:
var fieldGroup = form.addFieldGroup({
id: 'group_notes',
label: 'Title'
});
var field = form.addField({
id: 'textfield',
type: ui.FieldType.TEXTAREA,
label: 'Notes',
container: 'group_notes'
});
field.updateLayoutType({
layoutType: serverWidget.FieldLayoutType.OUTSIDEBELOW
});
Relevant Netsuite documentation can be found here

How to add legend for a bar chart with different colors in dc.js?

Below is the code snippet for a barchart with colored bars:
var Dim2 = ndx.dimension(function(d){return [d.SNo, d.something ]});
var Group2 = Dim2.group().reduceSum(function(d){ return d.someId; });
var someColors = d3.scale.ordinal().domain(["a1","a2","a3","a4","a5","a6","a7","a8"])
.range(["#2980B9","#00FFFF","#008000","#FFC300","#FF5733","#D1AEF1","#C0C0C0","#000000"]);
barChart2
.height(250)
.width(1000)
.brushOn(false)
.mouseZoomable(true)
.x(d3.scale.linear().domain([600,800]))
.elasticY(false)
.dimension(Dim2)
.group(Group2)
.keyAccessor(function(d){ return d.key[0]; })
.valueAccessor(function(d){return d.value; })
.colors(someColors)
.colorAccessor(function(d){return d.key[1]; });
How do I add a legend to this chart?
Using composite keys in crossfilter is really tricky, and I don't recommend it unless you really need it.
Crossfilter only understands scalars, so even though you can produce dimension and group keys which are arrays, and retrieve them correctly, crossfilter is going to coerce those arrays to strings, and that can cause trouble.
Here, what is happening is that Group2.all() iterates over your data in string order, so you get keys in the order
[1, "a1"], [10, "a3"], [11, "a4"], [12, "a5"], [2, "a3"], ...
Without changing the shape of your data, one way around this is to sort the data in your legendables function:
barChart2.legendables = function() {
return Group2.all().sort((a,b) => a.key[0] - b.key[0])
.map(function(kv) {
return {
chart: barChart2,
name: kv.key[1],
color: barChart2.colors()(kv.key[1]) }; }) };
An unrelated problem is that dc.js takes the X domain very literally, so even though [1,12] contains all the values, the last bar was not shown because the right side ends right at 12 and the bar is drawn between 12 and 13.
So:
.x(d3.scale.linear().domain([1,13]))
Now the legend matches the data!
Fork of your fiddle (also with dc.css).
EDIT: Of course, you want the legend items unique, too. You can define uniq like this:
function uniq(a, kf) {
var seen = [];
return a.filter(x => seen[kf(x)] ? false : (seen[kf(x)] = true));
}
Adding a step to legendables:
barChart2.legendables = function() {
var vals = uniq(Group2.all(), kv => kv.key[1]),
sorted = vals.sort((a,b) => a.key[1] > b.key[1] ? 1 : -1);
// or in X order: sorted = vals.sort((a,b) => a.key[0] - b.key[0]);
return sorted.map(function(kv) {
return {
chart: barChart2,
name: kv.key[1],
color: barChart2.colors()(kv.key[1]) }; }) };
Note that we're sorting by the string value of d.something which lands in key[1]. As shown in the comment, sorting by x order (d.SNo, key[0]) is possible too. I wouldn't recommend sorting by y since that's a reduceSum.
Result, sorted and uniq'd:
New fiddle.