We Keep Coding

Prevent row selection in Ag Grid for some columns

I have an Ag Grid table. In that table one pinned column is with action buttons (like edit row, print row item, open in popup, etc). I want to prevent row selection when user clicks on any cell in column with action buttons, but at the same time I need common row multiSelection behaviour with Shift button for all other columns. How can I achieve this?

You can use the onCellClicked event of the Ag-Grid API. In the event callback, you can check the column that was clicked, and if it is the column with the action buttons, you can call the stopPropagation() method on the event object to prevent the row from being selected. For all other columns, you can continue to allow the default row selection behavior.
const gridOptions = {
onCellClicked: (event) => {
if (event.column.colId === 'actionColumnId') {
event.stopPropagation();
}
}
};
For the Multi-Selection behavior with shift button, you could enable the suppressRowClickSelection flag on the grid options and handle the multi-selection by your own by listening to the 'rowSelected' event and use the shift button detection or programatically change the selection via the API.
const gridOptions = {
suppressRowClickSelection: true,
onRowSelected:(event)=>{
//Check if the shift button is pressed and act accordingly
}
};

Change input values inside responsive datatables

I've a datable with responsive active.
Inside a column i've a input field PRICE. When i change it, it update automatically 1 or more input fields inside others column.
Now if i've a large screen and responsive is not active. All works ok.
But if i've a small screen and responsive active itself, i've problem: input field OUTSIDE the screen are not update.
See the fiddle example trying change PRICE input: http://jsfiddle.net/ebRXw/5349/
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
$(".price").on("change", function(e) {
e.preventDefault();
var tr = $(this).closest("tr");
var total = $(this).val() * ( 1 + tr.find(".vat").val() / 100 );
tr.find(".txt_no_responsive_column").val(total);
tr.find(".txt_responsive_column").val(total);
});
} );
I think i've to modify this logic: var tr = $(this).closest("tr"); .Now i've disabled responsive in all my tables and activated scrollX to get it working. But i'd like to activate responsive in all my tables without pain and without doing deep update to javascript! Any solution valid for responsive triggered and responsive not triggered using unique code?
UPDATE: I tried solution provided by #Yash Shukla: jsfiddle.net/ebRXw/5361 but i get problem if I resize windows. Value inside new TR back to original value. See pic

I checked you jsfiddle in both cases if responsive is true or false the value in txt_responsive_column input is getting updated.
What is your main issue? If responsive is false then there is no x scroll bar and you are not able to see the input is this the issue?
Edited :
When you click on + sign it creates a new row with child class, so I have updated the jsfiddle with updated code. You just need to pick that new row also and update input values accordingly.
//code here
http://jsfiddle.net/ebRXw/5361/

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>');
}
}

kendo ui grid excel like behaviour

Is there a way to make data entry on a kendo ui grid behave like excel?
i.e using the arrow keys and just entering data without pressing the enter key.
I am using the javascript version of kendo ui grid. Our users have an excel background,
so we are trying to make the transition easy.
Thanks in advance

There's no default way, but you can emulate it to a certain extent by adding custom behaviour to certain key navigation actions.
This answer will emulate the following from Excel:
Excel Navigation - Grid should be navigatable by arrow keys
Automatic Cell Entry - When a grid cell is navigated to, typing will automatically start editing the cell
Next Cell Navigation - When done editing the cell, pressing enter will exit the cell and then navigate to the next row's corresponding cell if the same data type (so that user can keep entering data concerning a specific data column)
Here is a DEMO, explanation is below.
Excel Navigation
Make your grid navigatable, this allows user to use keys to move to each cell with arrow keys just like excel. Also ensure your grid's editable property is set to "incell". This sets the grid into a cell by cell edit mode.
navigatable: true,
editable: "incell",
Automatic Cell Entry
Excel allows data editing without pressing Enter. Typically, Kendo Grid will only allow you to start editing after pressing enter. As long as the cell is focused, this code will allow user to immediately start typing without the Enter step. Put this after the initialization of your grid, bind the keypress event:
var grid = $("#grid").data("kendoGrid");
grid.table.bind("keypress", function (e) {
if (e.which !== 0 && e.charCode !== 0 && !e.ctrlKey && !e.metaKey && !e.altKey) {
//get currently navigated cell, this id follows user's navigation
var activeCell = $("#grid_active_cell");
//don't do anything if already editing cell
if (activeCell.hasClass("k-edit-cell")) return;
grid.editCell(activeCell);
var input = activeCell.find("input");
//number datatype editor loses key press character when entering edit
if (input.last().attr('data-type')==='number') {
input.val(String.fromCharCode(e.keyCode | e.charCode));
} else {
input.val("");
}
}
});
Basically I just make sure that the key pressed is a text character and not something like "ALT" or "ESC" for example. Then I programmatically set the cell into edit mode.
There are some quirks with different data types and different column editors. I found that the numeric datatype editor loses the keypress value, which is why I had to make a special case for it and re-enter the key character.
Next Cell Navigation
In excel, after you are satisfied with the data edit and you press Enter, the navigation goes to cell directly below it. This allows user to continuously go down a list of items and edit a specific column of information. To do this with Kendo Grid, add this code:
//Kendo "Enter" key input is captured through this binding
$("#grid table").on("keydown", "tr", function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
if (code == 13) { //If key is ENTER
//find index of the td element
var tdIndex = $(e.target).closest('td').index();
//get the next row's cell
var nextRow = $(e.target).closest('tr').next();
var nextRowCell = $(nextRow).find('td:eq(' + tdIndex + ')');
//focus the next cell on a different context
setTimeout(function () {
var grid = $("#grid").data("kendoGrid");
grid.current(nextRowCell);
}, 0);
}
});
The reason why this is different function binding is because Kendo Grid has a default keydown binding on the table object, so we must add our custom functionality to the tr element before the event bubbles up.
Notes
This is a baseline demo, more complicated things will most likely break this code like custom data editors, grid grouping, etc... in which case you'll have to add more code to handle all the situations as necessary.
Keypress event is used for automatic cell entry because it is more reliable in terms of character code determination.
Keypress event may not work on mobile, in which case keyup might be a better replacement event binding.
If you are using your mouse to edit the grid on my demo, it will still work as normal Kendo Grids do, but you're missing out on the point of my demo.

Disabling animation for filtering the Column in KendoGrid

As I am using KendoUI for development of my application.I have used Multiple Grid in my application.My Problem is that i want to disable the animation for filter option that is when we click on each column for filter the menu is slide down giving us various options to filter.
I want to disable the animation when i click that column for filtration that option must not slide down. Here i am adding an Image.

I don't think there are "official" configuration options for this.
You can disable it for all popups like this:
kendo.ui.Popup.fn.options.animation.open.duration = 0;
kendo.ui.Popup.fn.options.animation.close.duration = 0;
(demo)
Note that this will affect other widgets as well (e.g. the dropdowns inside the filter menu), so you may need to explicitly set the animation config for those if you need it.
An alterative would be to set the animation for all filter menus (there is one per column), for example like this:
$(".k-grid-header").find("th").each(function () {
var menu = $(this).data("kendoFilterMenu");
var init = menu._init;
menu._init = function () {
init.apply(this, arguments);
this.popup.options.animation.open.duration = 0;
this.popup.options.animation.close.duration = 0;
};
});
(demo)

The above answer was useful to me, however for how we were using kendo grid, the grid's column menu brought up another submenu (as seen here http://demos.telerik.com/kendo-ui/grid/column-menu). It turns out that though the initial dropdown is of Kendo type "Popup", the sub-menu is of Kendo type "Menu". So if you also want the sub-menu to have no animation, you would add these lines:
kendo.ui.Menu.fn.options.animation.open.duration = 0;
kendo.ui.Menu.fn.options.animation.close.duration = 0;
Alternatively, you can disable the animation with the shorthand of animation = false, so the final result could be:
kendo.ui.Popup.fn.options.animation = false;
kendo.ui.Menu.fn.options.animation = false;
Again note that this will turn off animations for all popups and menus.