Does anyone know if it's possible to change the increment value of the number "spinner" in a Kendo UI grid field? I know it can be done in a stand-along numbericTextBox but I haven't been able to find any information about values inside a grid.
Ideally I'd like it so when I increment or decrement using the up and down arrows, it does so by .5 instead of 1.
I know this is late but for future reference, you can use the editor field for manipulating your numeric textbox.
{ 'field': 'count', title: 'Count', editor: numericEditor }
In your js file, you initialize the numeric textbox
function numericEditor(container, options) {
$('<input type="number" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
min: 1,
step: .5,
});
}
Here's a Dojo for demo
Related
Is it possible to change the style of a column based on whether it's pinned or not?
I'm able to change the style based on the value while the table is rendered for the first time. What I'm trying to do is change the style when the column is pinned using the mouse (drag and pin).
I'm able to figure out which column has been pinned by firing the ColumnPinnedEvent in gridOptions. I tried modifying the cellClass of the column obtained from 'event.column' but it does not get reflected on the table.
onColumnPinned(event: ColumnPinnedEvent) {
const column = event.column;
if (column) {
const columnDef = column.getColDef();
const userProvidedColDef = columnDef;
userProvidedColDef.cellStyle = event.pinned ? { color: 'white', backgroundColor: 'black' } : {};
column.setColDef(columnDef, userProvidedColDef);
}
}
You can achieve the same by just with the CSS.
Have a look at the plunk I've created: Column Pinning and styling. Add or remove any column to see the styles updated for it.
.ag-body-viewport .ag-pinned-left-cols-container .ag-row {
background-color: yellow;
}
Here .ag-body-viewport .ag-pinned-left-cols-container hierarchy is important. Just using .ag-pinned-left-cols-container .ag-row will not work as some row levels' styling of ag-grid will overwrite it.
So far this information is enough to solve your challenge, let me know in addition to this, you have some more details to provide.
We'd like to use React Data Grid from Adazzle (as mentioned in the tag with this question) now that we're using React (16.xx) and the older jsGrid is less appealing.
Two questions:
Our old jsGrid had a data type to include in the grid called Checkbox. This was immensely helpful. I haven't found a similar type in the React Grid. Have I just missed it or is it not a part of the library?
In each row, in some columns, we'd like to actually have two rows of data inside the column -- i.e., two lines of text separated by carriage return. But the react-data-grid demos only seem to show one line per column. Is this a limitation, or can we use CSS in the values inside columns?
Is there search included for the rows shown in the table at any given point in time?
I will provide answer to your question part by part
1) In react-data-grid column you can include a checkbox by using the formatter
attribute that is specified while the columns are defined.
Consider the following example
let columns = [
{
key: 'name',
name: 'Name',
resizable: true,
width: 100
},
{
key: 'checkbox',
name: 'CheckBox',
formatter:checkBoxFormatter,
resizable: true,
width: 100
}
]
class checkBoxFormatter extends React.Component {
render() {
return (
<div>
<CheckBox></Checkbox> //Provide your checkbox code here
</div>
)
}
}
2)You can exapand the rows for that you need to use getSubRowDetails and onCellExpand attributes of ReactDataGrid component .For example refer this documentation
3)Search is available for filtering .For example refer this documentation
I have problem with changing position of the records which are displaing in the grid. I have added arrows into column and wrote handler like below:
{
text: "Down",
width : 80,
xtype: 'actioncolumn',
tdCls : "row-shifter",
icon: appContext + "/images/arrow-dark-down-40.png",
handler: function(grid,index,c,d,f,row){
if(index >= grid.all.endIndex){
return;
}
index++;
grid.store.remove(row, true);
grid.getStore().insert(index, row);
},
dataIndex : "Down",
textResource : "Down"
}
When i click arrow button, the row is moved correctly but when i change displayed page (via pagination) the old records order is back. What should i do to do this changes permanent?
I suggest a new approach... You should set a new field to your model, call it 'order' for example with type 'number', then add sorter to your store to sort by this new field.
In your handler, just set a new value to the order field of the record according to the direction (add for up, subtract for down) and you have the up and down effect on the rows. This will also handle the paging correctly.
And its easier to restore the rows order if you save the order field with the rows.
I have areacharts with 2 series. Each of both has the same data, but different values. When I select one of the point, I want to know index of point. For example. when I select first point, I want take "1" and so on. Like here.
For instance they used
formatter: function() {
return 'point ' + this.point.myIndex;
}
but it is for javascript
formatter: function() {
return 'point ' + this.point.myIndex;
}
Does anybody know how to do it from gwt wrapper Moxie Apps GWT Highcharts?
In my form text input bar, the json returned by the autocomplete widget will be, [{id = 1,lable="lable1"},......]
[{id = 1,label="label1"},{id = 2, label="label2"},......]
and I want the input box display value to be "label" which works as default, but I want to the input value to be "id" when I submit the form..
Many thanks!
I usually keep a <input type='hidden'> right next to the autocomplete input, and then on the select event of the complete I populate that with the ID:
$("#autocomplete-input").autocomplete({
minLength: 2,
select: function (event, ui) {
$("#autocomplete-input-id").val(ui.item.id);
}
});