kendo grid frozen navigation - kendo-ui

I've a kendo grid with Navigatable option, and the grid navigation is working fine when I press Tab. But when I make some columns in grid as locked (frozen columns), the grid navigation is not working as expected. The navigation is working for only frozen columns and then for unfrozen columns.
#(Html.Kendo().Grid<ProcessModel>()
...
.Navigatable())
dojo.telerik.com/#joeTopazz/ODEbA
Thanks in Advance.

When the Grid has its keyboard navigation enabled, tabbing inside the widget is managed only when incell editing is used. In your example with inline editing, tabbing is managed by the browser and the observed behavior is expected due to the separate tables used for the locked and unlocked columns.
To achieve the desired tabbing order, use incell editing, or set a tabindex for all buttons and inputs from the edit row in the Grid's edit event:
http://dojo.telerik.com/EVuNe
$("#grid").kendoGrid({
navigatable: true,
editable: "inline",
edit: function(e){
e.sender.wrapper
.find(".k-grid-edit-row input,.k-grid-edit-row a")
.attr("tabindex", 1);
}
});

Related

How to show a column in the grid and hide it in the view dialog

I've used the information on this link to add a button to my grid and it works great. But I don't want that button to be displayed if the user opens that row in the view dialog. How can I hide this item in the view dialog?
I know that I can hide a column in the grid and then display it in the view dialog by using this syntax in the column definition:
, hidden: true, editrules: { edithidden: true },
But I see no way of reversing these options. I've played with different combinations of the above options, and the hidedlg option, but have had no luck.
To clarify, we are using the free version of jqGrid.
You wrote about "the view dialog" in the title of your question. Do you really mean View dialog or Edit dialog? View Dialog will be shown if you click on "View" button of navigator bar, but the button exists only if view: true option is used in navGrid. In the case you can use viewable: false property in the column.
If you want to hide the column in Edit dialog, then you can use editable: "hidden" property in the column (see the wiki article). The demo https://jsfiddle.net/OlegKi/ho803dvq/ uses properties
viewable: false, editable: "hidden"
in the last note column. The column will be shown in the grid, but the column is not visible in either View or Edit dialog.
If you use Guriddo jqGrid you can use the option viewable in colModel. Set this option to false in order to show the field in grid, but not in view form.
See the documentation for this here

Kendo UI treelist hide button

I am using Kendo UI TreeList & Grid for jquery. I want to hide a command button based on row values. In grid, I attached dataBound event to evaluate the model value and show/hide command button, below codes works fine
dataBound:function(e){
var delButton = e.container.find(".k-grid-Delete");
if (...) delButton.hide();
}
For TreeList, the same code seems also fine. However, when I add inline edit featrue, the same codes works differently.
When click "Edit" or "Add", the grid stay the original visible status, but treelist show all the button.
When click "Cancel", I triggered dataBound event in cancel event so the UI can be refreshed, then the grid show correctly but treelist still show all the buttons even if the dataBound is executed with correct logic.
Does anybody know how to resolve this issue?
Thanks,
Ziff Dai

Kendo Grid - Hide newly added row while editing in Popup

I am using Kendo grid with editable popup and I want to hide/not use the row which is showing editing changes on runtime.
Reason:
I have a kendo multiselect control in popup and on saving data it adds multiple rows in db and it should show in grid as well. That's why I don't want to show that editing changes line.
Solution
I was looking for a property of Kendo Grid to not show the editing row but didn't found so I removed the first row in edit function of Kendo Grid
$("#MyKendoGrid").kendoGrid({
dataSource: myDataSource,
//
// other properties
//
edit: function (e) {
$("#MyKendoGrid .k-grid-content table tr:first").remove();
}
});

jqGrid edit modal AJAX?

I have a table with data, which is taken from the server. The table shows only two column. But to edit the data I will have other columns. In other words, I need to change colmodel on edit modal window? How can I do that?
I use free jqGrid last version. I found example navGrid.
Simple
How get from server (AJAX) other columns for edit?
You can specify
editrules: { edithidden: true }
additionally to hidden: true in the columns which you want to allow to edit.
For example the demo have hidden column tax which can be editing using form editing. You can start editing in the demo in three ways: double-click on the row, click on the edit button in the row and selection of the row and then click on the edit button in the navigator bar of the pager.

Kendo UI Listview disable selection while editing

I would like to disable selection while the user is editing an item in an editable and selectable ListView
I've tried changing the selectable property of the Listview but it does not make any change.
See example here http://dojo.telerik.com/IvIkO
Hi for this add below given lines code after the initialization of list view in same example:-
$(document).on("click", ".product-view", function(e) {
//check any row in the List view is being edit
if (listView.items().hasClass("k-edit-item")) {
listView.clearSelection();
}
});
i have created a jsfiddle using your example and mine code, click on jsfiddle to see the working example for the same:-
http://jsfiddle.net/c2S5d/28/

Resources