I want to add new Row in Kendo Grid which is having Default value in First Cell.
How can I set the Default Value in that added Row of Kendo Grid
I am adding New Row in Kendo Grid as::
$('#AddSingleSuppliment').click(function () {
grid.addRow();
});
But I want to Set the Value of First cell on the Basis of Value of Clicked DOM element, Like
$('#AddSingleSuppliment').click(function () {
var temVal=$(this).text();
grid.addRow(tempVal);
});
But we can't do it in that Manner.
So please help me on this, For adding New Row in Kendo Grid with one Cell having Value of Button clicked.
Now I am able to Add New Row in Kendo Grid as,
$("#AddSingleSupplement").click( function(){
var tempSupplement = $(this).val();
//alert(tempSupplement);
grid.addRow(tempSupplement);
grid.dataSource._data[0].Description = $(this).text().trim();
});
But the Value is not Directly Shown while adding new Row. It is Shown after we click on some other element.
Please Suggest me wether this one is the Correct way to do this or there is any other way than this.
For dynamic defaults you can wire up your logic on Edit event, something like:
<script>
$('#AddSingleSuppliment').click(function () {
grid.addRow();
});
function onEdit(e)
{
//Custom logic to default value
var name = $("#AddSingleSuppliment").text();
// If addition
if (e.model.isNew()) {
//set field
e.model.set("Name", name); // Name: grid field to set
}
}
</script>
As per Kendo team , Default value cannot be changed dynamically.
However, we can make use the Grid edit event to pre-populate the edit form:
edit: function(e) {
if (e.model.isNew() && !e.model.dirty) {
e.container
.find("input[name=ProductName]") // get the input element for the field
.val("MyCustomValue") // set the value
.change(); // trigger change in order to notify the model binding
}
}
Related
I am using ag-Grid to create a grid within a grid using a cell renderer. This is the code for the cell renderer.
// cell renderer class
function TestCellRenderer() {
}
// init method gets the details of the cell to be rendered
TestCellRenderer.prototype.init = function(params) {
this.eGui = document.createElement('div');
// console.log('params.value:', params.value);
// console.log('eGui', this.eGui.style);
this.eGui.style.width = '70%';
this.eGui.classList.add("ag-theme-balham");
this.gridOptions = {
columnDefs: params.columns,
rowData: rowDataContained,
domLayout: "autoHeight",
rowHeight: 50,
// suppressRowClickSelection: true,
popupParent: document.querySelector('body'),
rowDragManaged: true,
components: {
'actionCellRenderer': ActionCellRenderer,
'selectCellRenderer': SelectCellRenderer
},
onCellEditingStopped: function(event) {
console.log('cellEditingStopped');
},
onRowClicked: function(event) { console.log('A row was clicked:', event); },
}
// console.log('gridOptions:', this.gridOptions);
new agGrid.Grid(this.eGui, this.gridOptions);
};
TestCellRenderer.prototype.getGui = function() {
return this.eGui;
};
This screenshot will better explain what I've done.
My problem is, I have created a select2 cell editor for the "Dropdown" column but am having issues calling the api.StopEditing() function when the user clicks on an option in the select menu because it requires the gridOptions that were created on the fly using the renderer.
If the user changes focus to a different cell, the editing does stop but I want to be able to have it stop the moment the user selects a value. I was able to print something to the console when the user selects something, but I don't know how to access the gridOptions of that specific grid.
For anyone wondering, I solved the problem by adding the following to my selectCellEditor.prototype.init function:
$(this.eInput).on('select2:select', function(e) {
console.log('Works!', this);
params.stopEditing();
});
What's happening there is, the moment the user selects an option, the menu is closed and the value is changed in the cell.
I have a datatable from ajax source. I want to display a checkbox in one column based on its value.
If the value is active, checkbox should be checked, otherwise it remains unchecked.
I am using Switchery JS to stylize the checkbox. It works fine in normal HTML body, but not inside a datatable column.
Here is the fiddle:
https://jsfiddle.net/sohal/gfuuazxL/4/
The problem is that you are doing the Switchery' before the dataTable is populated with data. And even if you did it after, you would still end up not having Switcherys on hidden rows, i.e on page #2, #3 and so on.
So you must initialise Switchery after the dataTable is initialised and do the Switchery on all rows. You can do this in the initComplete() callback, and iterate over all rows by using the API every() method :
$(document).ready(function() {
var table = $('#datatable-buttons').DataTable({
initComplete : function() {
this.api().rows().every( function ( rowIdx, tableLoop, rowLoop ) {
this.nodes().to$().find('.js-switch').each(function(i, e) {
var switchery = new Switchery(e, {
color: '#26B99A'
})
})
})
},
...//rest of the options
})
})
forked fiddle -> https://jsfiddle.net/jpkysyp1/
I want an auto increment column in my Kendo Grid. This field isn't server side auto increment, because I want the user to see the value and be able to change it.
My current solution is to add a click attribute to Create button and loop over rows to find the highest value and increment it.
But how can I insert this value inside the newly created row? Click event happens before the new row is created.
So there is two possible solution:
Have a variable as default value and update it in my JS code.
Access the newly created row somehow, and update the value.
This is my JS code:
function createClick(id) {
var grid = $("#" + id).data('kendoGrid');
var highestRadif = 0;
grid.tbody.find('>tr').each(function () {
var dataItem = grid.dataItem(this);
var radif = dataItem.SRadifReqR;
highestRadif = highestRadif < radif ? radif : highestRadif;
})
alert(++highestRadif);
}
You can use Grid's edit event to add your new generatedId value to new Grid's model.
This is some explanation from their documentation:
Edit
fired when the user edits or creates a data item.
e.container jQuery, jQuery object of the edit container element, which wraps the editing UI.
e.model kendo.data.Model, The data item which is going to be edited. Use its isNew method to check if the data item is new
(created) or not (edited).
e.sender kendo.ui.Grid, The widget instance which fired the event.
I suppose your click have something like this
//generate id code
vm.newId = ++highestRadif; // we need to store generated Id
grid.addRow();
then on edit event
edit: function(e) {
var model = e.model; // access edited/newly added model
// model is observable object, use set method to trigger change event
model.set("id", vm.newId);
}
Note: Your schema model's field must set property editable: true, due to enable us to change model field value using set method. Also if your field schema have validation required, you need to remove it.
model: {
id: "ProductID",
fields: {
ProductID: { editable: true, nullable: true },
}
}
Sample
I was able to put a function in the datasource schema for this.
schema: {
model: {
id: "id",
fields: {
currencyType: { defaultValue: getDefaultCurrency },
invoiceDate: { type: "date" }
}
}
}
function getDefaultCurrency() {
return _.find(vm.currencyTypes, { id: vm.currencyId });
};
I have a situation where I need to dynamically add or remove grids selection model.
Searching the documentation I see that the selection model doesn't have a destroy() method or anything similar. How can I remove or destroy a selection model from a grid in ext js 4.x.?
If this is not possible I still have an option to revert some functionallity and dynamically add the selection model to an already created grid. But I'm also not sure if this is possible.
I'd suggest to disable the selection model instead of destroying it.
You can clear the current selection (deselectAll) and lock the selection model to prevent further selection (setLocked):
selModel.deselectAll();
selModel.setLocked(true);
As you're using a checkbox selection model, you'll also need to hide the corresponding column which is added to the grid:
grid.headerCt.child('gridcolumn[isCheckerHd]').hide();
Selection models are not designed to be replaced, so... it's gonna be complicated!
You'd have to reproduce the initialization of the sel model, unwire the previous one, and rewire the new one...
Here's an example that works in substituting a row selection model for a checkbox model. It may still contains memory leaks from listeners registered by the first selection model that I would have forgot. The creation of the new selection model relies on the getSelectionModel method of the grid, which implements the disableSelection, simpleSelect, and multiSelect options of the grid (see the code).
Ext.widget('grid', {
renderTo: Ext.getBody()
,store: ['Foo', 'Bar', 'Baz']
,selType: 'checkboxmodel'
,columns: [{
dataIndex: 'field1'
,text: "Name"
}]
,listeners: {
selectionchange: function(sm, records) {
var grid = sm.view.up(),
item = grid.down('tbtext');
if (records.length) {
item.setText(
'Selection: ' + Ext.pluck(Ext.pluck(records, 'data'), 'field1').join(', ')
);
} else {
item.setText('No selection');
}
}
}
,tbar: [{
text: "Replace selection model"
,handler: function(button) {
var grid = button.up('grid'),
headerCt = grid.headerCt,
checkColumn = headerCt.down('[isCheckerHd]'),
view = grid.view,
previous = grid.selModel,
sm;
// try to clean up
previous.deselectAll();
previous.destroy();
// sel model doesn't clear the listeners it has installed in its
// destroy method... you'll have to chase the listeners that are
// installed by the specific type of sel model you're using
if (previous.onRowMouseDown) {
view.un('itemmousedown', previous.onRowMouseDown, previous);
}
if (previous.onRowClick) {
view.un('itemclick', previous.onRowClick, previous);
}
// clear references
delete grid.selModel;
delete view.selModel;
// create another selModel
grid.selType = 'rowmodel';
//grid.disableSelection = true;
sm = grid.getSelectionModel();
// assign new sel model
view.selModel = sm;
sm.view = view;
// remove checkbox model column
if (checkColumn) {
headerCt.remove(checkColumn);
}
// init sel model is trigerred in view render events, so we must do it
// now if the view is already rendered
if (view.rendered) {
sm.beforeViewRender(view);
sm.bindComponent(view);
}
// finally, refresh the view
view.refresh();
}
}]
// a place to display selection
,bbar: [{
xtype: 'tbtext'
,text: 'No selection'
}]
});
Is there a way to revert/reset the edited row in the dojo-dgrid ?
I can see the grid.revert() which does clear the dirty items and calls the refresh method, which will refresh the whole grid. I don't want this whole grid-refresh.
Is it possible to reset/revert only that single edited row, upon clicking a Revert/Cancel Icon on the Actions-column (which will be the last column in the grid as mentioned here and here)
If you're wrapping your store with Observable, you can use notify() to update a single row.
For example, you can create the following code for onClick event of your Revert/Cancel button:
renderCell: function(object, data, cell){
var btnRevert = new Button({
label: "Revert",
// ...
onClick: function(evt){
var dirty = that.grid.dirty,
id = object.id;
if(dirty.hasOwnProperty(id)){
// remove dirty data
delete dirty[id];
// ..and notify the store to update
myStore.notify(object, object.id);
}
}
}, cell.appendChild(put("div")) );
return btnRevert;
}
Here is a jsfiddle with an example: revert example