We Keep Coding

How to add dynamic row ( with dropdown in column ) when we have an edit option already implemented in kendo grid

I have a kendo grid which contains dropdown as few column values. I could edit the particular grid it is giving the proper dropdown values but when I try to add a new row dynamically to the grid it shows error .
Live example link
What I am looking for is when i click on the add new item button in the grid it should add a new row with the given dropdown values.
I have tried to add toolbar: ["create"] for creating new toolbar
Inside data bound event I have tried to capture the button click and tried to add a new row but nothing is working
dataBound: function (e) {
$('.k-grid-add').unbind("click");
$('.k-grid-add').bind("click", function () {
dataSource.add({ brandId: 0, name: "" });
var data = dataSource.data();
});
},
Can someone help me to resolve this issue?

Sometimes you need to add data. in the templates in order to access a desired data property. Change your templates to:
template: "#= brandName(data.brandId) #"
and
template: "#= modelName(data.modelId) #"
Demo

Displaying dirty cell triangle on grid when changing datasource manually

I have a kendo grid with custom popup edit window to imitate popup edit, but with batch edit. Everything works fine, but I am experiencing a small issue. Whenever value is changed, the grid cell does not have that red triangle thingy in the corner indicating that this particular value different from original.
As I understand in this post, manually made changes in datasource does not appear on the grid, so I have to add them manually.
This post 'manually maintain dirty cell marker on paging in Kendo grid' gives an idea how to get it working. I could attach some listeners to kendoWindow inputs, track what fields are being edited, compare old and new values...
But is there a less painful way to achieve this functionality? Maybe there is some built in kendo function to achieve that?
Here's a small working example http://dojo.telerik.com/aSaXe/4

The red "dirty" marks appear automatically only when the built-in in-cell editing is used. From this point of view, your scenario requires these to be added manually after the custom editing popup is closed.
You may find the change event of the data item useful in the task. It will be fired each time a value in the popup is changed and the respective textbox is blurred.
var uid = $(e.target).parents('tr').attr('data-uid');
var grid = $('#grid').data("kendoGrid");
var dataItem = grid.dataSource.getByUid(uid);
dataItem.bind("change", function(args) {
// args.field
});
Finally, keep in mind that each change in the Grid dataSource causes the whole table to be redrawn (unless the built-in in-cell editing is used), so you will lose any previously applied custom styling.

You can use the save event on your kendo grid as:
save: function (e) {
addDirtyUid(e.model.uid);
setTimeout(refreshVisualDirtyElements, 100);
}
Other functions and var:
var dirtyIds = [];
function addDirtyUid(currentUid) {
if (dirtyIds.indexOf(currentUid) === -1) {
dirtyIds.push(currentUid);
}
}
function refreshVisualDirtyElements() {
for (var i = 0; i < dirtyIds.length; i++) {
var thisUid = dirtyIds[i];
$("tr[data-uid='" + thisUid + "']").find("td:eq(0)").addClass("k-dirty-cell");
$("tr[data-uid='" + thisUid + "']").find("td:eq(0)").prepend('<span class="k-dirty"></span>');
}
}

Sencha ExtJS 4.2: how can I synchronize two combo editors in a grid?

I need to edit two columns of my grid using combos as editors, and I need the values shown in the second to be filtered accordingly to the value selected in the first one.
There is also the problem that I need to show the "bound" value (i.e. "description") instead of the Id, in the grid cell.
I prepared a (very simplified) fiddle to show the problem here
Click here for the fiddle
Looking at the fiddle, I'd need to select the brand in the first combo and then a model in the second, but I should obviously find only the models from the selected brand in there.
How can I show the descriptive text in the cell?
How can I filter the second combo?
Thanks

The editing plugin has an beforeedit event you can use, for example:
listeners: {
beforeedit: function(editor, context) {
var record = context.record;
if (context.field !== 'modelId') {
return;
}
models.clearFilter(true);
models.filter({
property: 'brandId',
value: record.getId()
});
}
}
Working example: https://fiddle.sencha.com/#fiddle/12hn

How to add a grid of image buttons in ExtJS

I am new to ExtJS and I want to add something like a favorite button to each row of a data grid. I have gone through almost all sources after a lot of googling but I have not found anything. If anyone has a clear cut idea about how this can be done, please let me know.

First of all adding ExtJS Component inside grids is not supported by default, and the tutorials I've seen out there are kinda hacky. So this is what I would do.
I assume your grid is bound to a store, and each record in the store is a row in your grid.
I assume you have a field in each record that represents the "fav" status of that record, maybe a boolean value.
if the above assumptions are true, I've done something like this before:
add a column in your grid with id "fav-col" that has the dataIndex pointing to the fav field of your store.
{
id : 'fav-column',
dataIndex : 'fav',
sortable : true,
hideable : false,
menuDisabled : true,
fixed : true,
width : 20,
renderer : renderFav
}
add a renderer to that column that render different HTML depending if the row is fav'ed.
function renderFav(favAdded, metaData, record){
if (favAdded === true){
return 'fav added'; //something to represent already added to favourite ;
}else{
return 'fav not added'; //something to represent non-fav'ed row;
}
}
add a listener to 'cellclick' event on the grid, check if the cell being clicked on is a fav cell and toggle the fav value of the record, the grid will re-render automatically once the data in the store is changed
cellclick : function(grid, cellEl, cellIdx, record, rowEl, rowIdx, evtObj){
if (this.columns[cellIdx].getId() === 'fav-col'){
record.set('fav', !record.get('fav')); //toggle the fav state
grid.getStore().sync(); //if the store is a REST store, update backend
record.commit(); //commit the record so the red triangle doesn't show
this.doLayout(); //might not need this.
}
}

ExtJS4 editable grid getting selected row returns empty

Trying to get the selected row index (and set another field value of the record afterwards) on a grid with CellEditing plugin, but getSelection() method returns an empty array. I have a listener for select event on the combobox, when that is changed I need to get the index of the edited row.
...
lazyRender: true,
listClass: 'x-combo-list-small',
listeners: {
scope: this,
select: function(field, value, options) {
var selection = Ext.getCmp('lineItemsGrid').getSelectionModel().getSelection();
console.log(selection);
}
}
...
I'm using ExtJS 4.0.2a release. I'm a newbie when it comes to ExtJS, so I might be missing something.
Here is JSFiddle file in cas you want to have a look.
http://jsfiddle.net/Z6b7a/8/
Any help is greatly appreciated.
Thanks
Oz

You don't need to use the getSelection() method, you can update the record directly from the edit event.
http://jsfiddle.net/Z6b7a/7/
I've updated the fiddle, and also here is the code to update the record after edit:
edit: function(editor, e, options) {
e.record.set('light', 'Shade');
//var selections = Ext.getCmp('lineItemsGrid').getSelectionModel().getSelection();
//console.log(selections);
}