how to revert single edited row in dojo dgrid? - javascript

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

Related

Non editable kendo grid ID

I'm new using kendo grid UI, i'm trying to make a non editable column (when updating) using a simple code :
schema: {
id: 'ID',
fields: {
id: { editable: false }
}
}
This default schema, makes by default non editable id column, and i can't even create a new row with id .
I want to make it non editable (when updating) but i want the possibility to create a row and assign an id from user (when creating).
Any ideas ?
Edit :
PS : the proprety is not related to only id, it can be on every column (can't update but can create)
The editable required a function instead of a value.
columns: [
{ field: 'value', editable: function () { return false; } }
],
Checkout here:
https://dojo.telerik.com/oROJayAd
I always doubt about that model editable option. It never really worked for me. It should have something very deep in the setup to make it work which I never realized what it. So this is a way to acomplish what you need that I know it indeed works: To cancel the edit event. Check it out:
edit: function(e) {
// Cancels a new row
if (arguments, e.model.isNew()) {
this.cancelRow(e.container.parent());
}
else { // Cancels a cell editing
this.closeCell(e.container);
}
}
Demo
Now, if you like to add a condition in that event based on what you have set in your model, you can access it within event as well:
edit: function(e) {
let currentColumn = this.options.columns[e.container.index()].field,
model = this.dataSource.options.schema.model.fields[currentColumn];
if (model.editable === false) {
// Cancels a new row
if (arguments, e.model.isNew()) {
this.cancelRow(e.container.parent());
}
else { // Cancels a cell editing
this.closeCell(e.container);
}
}
}
Demo
You can add an option yourself in the model to set if the column can be updated or only created, and handle that information inside the event, canceling the editing whenever you like.
This is how I just did it, though there are other ways.
In columns option if you remove the field option from a column it doesn't know from where to bind it.
Then use the template option to show(bind) the id. Thus making it readonly
columns: [
{
title: 'Id', width: "40px",
template: "#= id #",
},
...]

Pass params to the loadData() to override the emptyText prop in viewCconfig method-EXTJS

I want to load the store with no records unless I check for certain condition. However I want to pass params to my loadData() in such a way that I can override the emptyText property with some other text.
this.superclass.constructor.call(this, Ext.apply({
viewConfig:{
emptyText: "No Records"
},
fields: [],
});
this.on('afterrender', function(){
new Ext.util.DelayedTask(function() {
this.getStore().loadData([]); //loading empty data
}, this).delay(300);
}, this);
So when I load the store I want to replace the emptyText: "Select actions" and once action selected it will display records or no records depending on the data.
If I insert the "Selection actions' text above in the viewConfig, it works ok on page load, but when no records found, it still displays the "Select actions".Is there any way I pass params to the loadData() function to override the text?
Thanks!
While #Saloo's example works, let me show you what object orientation can do for you.
If you don't want to copy the code over and over, behind every loadData, you can, in your store definition, override the existing loadData function to add another parameter, for example:
loadData:function(data, append, emptyText) {
if(emptyText) {
grid.emptyText = '<b> ' + emptyText + ' </b>';
grid.getView().refresh();
}
this.callParent(arguments);
}
and there you go.
loadData() method doesn't take any parameter.
loadData( data, [append] )
You have to handle any other event like select of combo and then change the viewConfig emptyText manually based on your condition and then refresh the view.
I have done this on grid component like this:
if (Ext.isEmpty(records)) {
grid.emptyText = '<b> No Document Found </b>';
grid.getView().refresh();
}

Component lost during rerender, how to reattach?

I am rendering a component into a grid rowExpander plugin rowBodyTpl:
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : [
'<div id="contact-row-{Id}"> </div>'
]
}],
var row = 'contact-row-' + record.get('Id'),
grid = Ext.getCmp(gridId),
if(!grid) me.createSubGrid(record,gridId).render(row);
This works fine. But when the grid receives an update event for a record with certain modifiedFields, that record's rowExpander is rerendered using the rowTpl only, and the inner grid is dangling somewhere. I can access the grid using Ext.getCmp, and grid.rendered is true, but it is not shown. So I guess I have to reattach the grid after the row has been rerendered.
I think I can attach to the update event, and find out whether the rowTpl has been rerendered without the child grid using
if(!grid.container.contains(grid.el))
But is there a way to put the grid back into the dom?
I have tried
grid.container.insertFirst(grid.el);
but this does not work. The element is inserted but the grid is not displayed.
Any ideas?
The way you are doing leads to memory leaks (because your component is not destroy when the grid is re-render).
I suggest to check at : Component Template (http://skirtlesden.com/ux/ctemplate) or if you try to render a nested grid, there was several attempt to build something correct and I think a working one is the following : http://blogs.walkingtree.in/2015/06/30/nested-grid-in-sencha-ext-js/
With my trials, I already was on the right track, and the error was somewhere else entirely. The problem was that my update event fn which did the reattach was executed before the update event fn that broke everything, because the fn was fired on the same event and had the same priority, but was attached to the store earlier. Changing the priority was one option, but I just put the creation into the boxready event, which is executed after the view has attached its events to the store:
xtype:'grid',
listeners:{
boxready:function(grid) {
var store = grid.getStore();
...
store.on({
update:function(store, record) {
me.restoreSubgridDom(record);
},
beforeload:function(store) {
var records = store.getRange();
Ext.each(records,me.destroySubgrid);
}
});
}
}
with the two functions:
restoreSubgridDom: function(record) {
var row = 'contact-row-' + record.get('Id'),
gridId = 'ContactRow'+record.get('Id')+'Grid',
grid = Ext.getCmp(gridId);
if(grid && !grid.container.contains(grid.el))
{
grid.container.insertFirst(grid.el);
}
},
destroySubgrid: function(record) {
var gridId = 'ContactRow'+record.get('Id')+'Grid',
grid = Ext.getCmp(gridId);
if(grid) grid.destroy();
}

Add new Row in Kendo Grid with some default values

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
}
}

Problem with ExtJs editor grid panel

I've an extjs editor grid panel(3.3.1) that is binded to a store. New records are added to the grid by an empty row at the top. On the load of the store I'm adding an empty row at the top of the grids. When the user adds a new value and the focus loses out I'm adding another empty row.
AV.ClassifiedCategories = Ext.extend(Ext.grid.EditorGridPanel, {
....
initComponent: function(){
this.store = this.initialConfig.store;
//add an empty row at top
this.store.on('load', this.addCategory, this);
Ext.apply(this,
{
clicksToEdit: 1,
listeners:
{
afteredit : function(e){
this.addCategory();
},
scope: this
}
});
},
//adds an empty row and insert a record to store
addCategory: function(){
var Category = this.getStore().recordType;
var cat = new Category({ cat_id: null, cat_name: "" });
this.stopEditing();
this.store.insert(0, cat);
this.startEditing(0, 0);
return cat;
},
...
});
The problem is facing here is once the afteredit event is fired and an empty row is added the focus is not moving to the first row i.e. the second row is still in edit mode. How I can solve that?
I've taken your code and have created this demo. As you can see everything works as expected. Are you sure you have provided us with non-working code?

Categories