In my asp.net MVC application I am using Kendo grid to display data from a database table. Below code is used to display the "Price" column up to six decimal places. It displays "Price" value fine on load but when I click on Price to edit,its values automatically rounded off to two decimal place. For example, if it loads value 456.345674 from database, in edit mode textbox will round off the value to 456.35 I don't want values to be rounded off to two places. It should keep decimal places intact. Please suggest.
{
field: "Price",
type: "number",
filterable: {
cell: {
template: function (args) {
args.element.kendoNumericTextBox({
format: "#.######",
decimals:6
});
},
operator: "gte"
}
},
width: 140
}
KendoNumericTextBox ain't expecting a #.###### format. If you want to force 6 decimals, the correct format would be n6. If you want to display the entire number without rounding, the format would be n.
You can refer to kendo's number formatting documentation to see what are the available formats.
Related
My example: http://dojo.telerik.com/irEQo
Problem: When I go about resizing a column I click on the gap between them and drag, at which point the column widths become messed up (See screenshot and video below).
https://vid.me/TmkP
My Fix:
Instead of using fixed width using pixels values, I set the fixed width using percentages.
Example:
Before
{
field: 'statusId',
title: 'Type',
width: 50,
filterable: true,
attributes: {
"class": "someClass"
}
After
{
field: 'statusId',
title: 'Type',
width: '15%',
filterable: true,
attributes: {
"class": "someClass"
}
This happens when you set a fix width to all columns but the sum of all widths does not match the grid's with. So if you have 3 columns all with width 100px, but your grid is 400px wide, the columns are stretched to e.g.133px each. As soon as you 'grab' column, the original size (100px) is used which makes the column jump.
This is a Kendo problem so there is no real solution for this (at least I haven't found one), but there are possibilities to avoid the 'jumping':
You can either set no with for one column, this column then fills the rest of the space.
Or add an empty column as last column which then fills the space while your real columns all keep the size they are set to.
To add an empty column just add
{
field: ""
}
to your columns list.
Regarding free-jqgrid 4.9.2, does it automatically handle column width? No, then what's the proper way to handle this?
1) VIN & Year columns contain too much free spaces
2) Trim contains few records that are too long to fit into column's width (Such as 1993 Mitsubishi 3000GT 2 Dr VR-4 Turbo AWD Hatchback)
Also, does jqGrid have true/false "word wrap" setting somewhere?
Demo is found at link removed
Auto-width adjustment exist in free jqGrid starting with 4.8 version. Free jqGrid still not handle the width of all columns automatically. One need add some additional properties in colModel for the columns which width should be set based on the width on the most long content and to set some additional options.
Your current code uses width: 190 for the column 'Vin' and don't specifies any width property for any other columns, so default value width: 150 will be used. Additionally you use width: 1022 option of jqGrid and wrong option autoWidth: true (instead of autowidth: true) which will be ignored. It means that the width of the div (bDiv or body div) over the grid will be set to 1022px and the user can use horizontal scrollbar to see all columns.
I would recommend you to read the wiki article. You can add autoResizable: true property to some specific columns or to use cmTemplate: { autoResizable: true } to add the property in all columns. As the result the content of every cell of the grid will be wrapped in <span class="ui-jqgrid-cell-wrapper">...</span>. It allows free jqGrid to get the exact width of content for all cells of the column and then calculate the max from the values. So the user can double-click on the column resizer (between the columns) to set the width to the best value. During the width calculation jqGrid the width of the column header with the width of sorting icon additionally to the width of the grid cells of the column. One can use autoResizing: { compact: true } option to reduce the width of the columns which don't have visible sorting icon. The last common option is autoresizeOnLoad: true which I would recommend you to use. It will set the width of the columns having autoResizable: true property to the best value.
So I would recommend you to add the following option to your grid:
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
autoresizeOnLoad: true
After that the width of column will looks much better.
If you prefer to wrap the text of some columns if it is too long then you can use CSS settings described in the old answer and set maxColWidth property of autoResizing of the column (in colModel) or global setting maxColWidth of autoResizing option of the grid to the max width of the column. More long text will be wrapped.
I'm working on a visualization tool for time series with multiple dimensions.
To simplify my case, each data-point has a dimension on type, clusterId and a set of months:
{
type: "green",
clusterId:42,
months:[1392185580000, 1394604780000, 1397279580000]
}, {
type: "red",
clusterId:43,
months:[1392185580000]
}
Now I would like to show the dates in a dc.barChart, which shows the months of all datasets as keys(bars), and the number of observations of each month as value of the bar.
In the given case, it would result in 3 bars, the first one with a height of 2, and the other with a height of 1.
How can I create this dimension and implement the grouping/reducing function?
You don't have to worry about filtering by this dimension, I already have a custom filter for this dimension. The only thing is displaying the bars on the barChart.
If i get this correctly, you need some code, that outputs: 1392185580000: 2, 1394604780000: 1, 1397279580000:1?
arr.forEach(function(d) {
d.months.forEach(function(month) {
if (!store.hasOwnProperty(month)) {
store[month]=0;
}
store[month]++;
});
});
demo fiddle
is there a way to not display a series label in the legend when label is entered in the series options (something like a showLabel:false) ?
Reason : I actually need a more explicit identifier that 1,2... to know which series I'm checking within a python script that will build the different buttons used to display or not some series.
Any help will by really appreciated.
If no such options is present for series I could just enter a brand new one option and fill it with the identifier anyway to perform the check in my python script afterward.
Regards
You can use the showLabel option for each series. For example if you have 3 series and you want to not display the label of the second serie you can use something like the following :
series: [
{showLabel: true},
{showLabel: false},
{showLabel: true}
]
Please see an example on jsfiddle here
Edit
An alternative can be to define a variable with your own labels and to use it then in jqplot (example n°2 here:
var mylabels = ["This", "particular", "way"];
var plot = jQuery.jqplot('chart', [data], {...
legend: {
labels: mylabels
}
}
I am using kendo UI dataviz charts to display data that has text(symbols) on x-axis and a numerical value on the y-axis. I have serverside datasource that provides the data. How can I achieve this?
I tried to use Scatter charts but they are XY charts and need numerical values on both x and y axis. I can display the data as a linecharts which are categorical but the line connecting the markers is meaningless in my case and I don't need that displayed.
here's an example of my data
var data = [{id:"1", number:"1.23", label:"A"},{id:"2", number:"4.11", label:"B"}]
You could use simple line chart and set
markers visible
series.opacity to 0
series: [{
field: "value",
type: "line",
opacity: 0,
markers: {
size: 5,
visible: true,
}
}]
http://docs.kendoui.com/api/dataviz/chart#configuration-series.opacity