I have a Kendo (2013.2.716) grid with an Edit command (the edit button is in the first column) and 40+ other columns. I do NOT have Selectable set for the Grid. When the grid is populated, I can run my mouse down the Edit command column and each Edit button is highlighted in turn, and when I click on one, my editor comes up right away.
However, without the .Selectable option, I cannot tell which row I am on if I scroll the grid to see the 40+ columns. So, I set .Selectable(). This gave me the background highlighting that I expected whenever I clicked in a row. However, I have two negative side-effects: one, the selection of a new row takes about six seconds just to change (and highlight) a new row, and two, clicking the Edit button now accomplishes nothing: no editor comes up.
The documentation says, "Selection can be enabled in the grid simply by setting the selectable option to true." But there must be more to it than this... It shouldn't take any time to change the background color, and it shouldn't kill my edit buttons. What did I miss?
#(Html.Kendo().Grid(Model.Data)
.Columns(columns =>
{
columns.Command(command => command.Edit().Text("Edit").UpdateText("Submit")).Width(97).HtmlAttributes(new { style = "text-align: center;" });
...
})
.Selectable( )
.Editable(editable => editable
.Mode(GridEditMode.PopUp)
.TemplateName("MyEditor")
.Window(w => w.Width(500))
.Window(w => w.Title("My Editor")))
Provide a global variable to store the previously-highlighted row:
var previousHighlightedRow;
Provide a style for the desired highlighting:
.highlightTR {
background-color: #99CCFF;
}
In the GridBound event, wire the mouseup events for the rows to use removeClass on the previously-highlighted row, and addClass on the 'selected' row.
$('.k-grid-content tbody').off('mouseup');
$('.k-grid-content tbody').on('mouseup', 'tr', function () {
if (previousHighlightedRow != undefined) {
previousHighlightedRow.removeClass("highlightTR");
}
$(this).addClass("highlightTR");
previousHighlightedRow = $(this);
});
This approach is quick (with 500+ rows), and does not kill the Edit Command.
Related
Using this I can display a menu by right clicking a cell:
// right click context menu
grid.onContextMenu.subscribe(function (e) {
e.preventDefault();
var cell = grid.getCellFromEvent(e);
//grid.setSelectedRows(cell.row);
$("#contextMenu")
.data("row", cell.row)
.css("top", e.pageY)
.css("left", e.pageX)
.show();
$("body").one("click", function () {
$("#contextMenu").hide();
});
});
However I would like the row to be selected, both as visual confirmation that the correct row has been right-clicked, and because some of the menu items use the selected row for their functions.
This:
grid.setSelectedRows(cell.row);
doesn't work. What is the correct way?
It might be as simple as the fact that setSelectedRows takes an array of row indexes.
Try
grid.setSelectedRows([cell.row]);
I've got a Kendo grid with detail template. When I open the detail template, I want the respective row to be selected. By default, the detail expands but the row isn't selected.
.Events(e => e.Change("onChange").DetailExpand("jsFunction"))
I know there's a DetailExpand event that fires when the detail is expanded, I just don't know how to make it select the row to which it refers. I have tried:
function jsFunction() {
this.dataItem(this.select()); <--- breaks here because there's no row selected
}
How can I make it select the row?
Nothing is easier:
function jsFunction(e) {
e.sender.select(e.masterRow);
}
Grettings.
By Default when we enter a value inside a cell in Handsontable and the press Enter key or go to another cell or other part of the page, the value we have already entered into the cell will be committed automatically (after validation).
But I have a new requirement now. I want to manually commit the changes form outside of Handsontable (e.g. with calling a JavaScript function).
The real story is that I have rendered dropdown control inside some cells in Handsontable. When the user enters a number in a cell without pressing Enter key; and then clicks on the dropdown control in another cell; I do not have access to their new entered value.
I am going to commit their former changes when they click on the dropdown.
Any Idea?
Update:
I created a jsFiddle and did my best to keep it as simple as possible. http://jsfiddle.net/mortezasoft/3c2mN/3/
If you change the Maserati word to something else and without pressing Enter choose an option in dropdown, you can still see the name Maserati is shown as an alert dialog.
<div id="example"></div>
var data = [
["", "Maserati"],
["", ""],
];
$('#example').handsontable({
data: data,
minSpareRows: 1,
colHeaders: true,
contextMenu: true,
cells: function (row, col, prop) {
var cellProperties = {};
if (col===0 && row===0) {
cellProperties.renderer = selectBoxRenderer;
cellProperties.readOnly =true;
}
return cellProperties;
}
});
function selectBoxRenderer(instance, td, row, col, prop, value, cellProperties) {
var $select = $("<select><option></option> <option>Show the name</option></select>");
var $td = $(td);
$select.on('mousedown', function (event) {
event.stopPropagation(); //prevent selection quirk
});
$td.empty().append($select);
$select.change(function () {
//Default value is Maserati but we are gonna change it.
alert($('#example').handsontable('getData')[0][1]);
});
}
You can add instance.destroyEditor() to the mousedown handler on $select. This will commit the changes on first click, but will also require another click to open the select menu.
$select.on('mousedown', function (event) {
event.stopPropagation(); //prevent selection quirk
instance.destroyEditor();
});
The reason behind second click problem is that instance.destroyEditor() re-renders the table, which causes the original select element to be destroyed, so the click event cannot take effect.
To solve this, add
if ($td.find('select').length!=0) return;
at the beginning of the renderer. This way existing select elements will not be overwritten when re-rendering.
So I have a grid and the columns have the good ol' column menu on them with the filtering/sorting/excluding of columns and it all works fine.
The fly in the ointment is that I would like to allow the user to rename a column heading and the obvious place in the UI to allow this is in said column menu.
Something like this:
(where the red bit is just another option that I click on and popup a little window to let me type in a new heading)
Is this possible and how would I do it?
I see that menus can be customized and the grid demo shows how to adjust the stuff in the filter popup but I am not sure how I would add this item (I can see how I would programmatically do the rename but just this getting an option onto the menu has me stumped).
You can use the columnMenuInit event. Two possibilities:
$("#grid").kendoGrid({
dataSource: dataSource,
columnMenu: true,
columnMenuInit: function (e) {
var menu = e.container.find(".k-menu").data("kendoMenu");
var field = e.field;
// Option 1: use the kendoMenu API ...
menu.append({
text: "Rename"
});
// Option 2: or create custom html and append manually ..
var itemHtml = '<li id="my-id" class="k-item k-state-default" role="menuitem">' +
'<span class="k-link"><b>Manual entry</b></span></li>';
$(e.container).find("ul").append(itemHtml);
// add an event handler
menu.bind("select", function (e) {
var menuText = $(e.item).text();
if (menuText == "Rename") {
console.log("Rename for", field);
} else if (menuText === "Manual entry") {
console.log("Manual entry for", field);
}
});
}
})
See fiddle with two alternatives:
http://jsfiddle.net/lhoeppner/jJnQF/
I guess that the point of a filter is to filter, not to make changes on the grid.
But anyways i found this Kendo Post that may help you to achieve what you need.
You can also take a look a this one too.
I am using Kendo UI MVC grid. One of the properties of the model is bool, so I need to present it in grid as checkbox. By default Kendo UI present it as "true" and "false" values in the column. So you need to first time to click to get checkbox, then second time to click to change value of the combobox. Instead of having default values from grid, I set ClientTemplate, so I got checkbox instead of "true" and "false" values.
c.Bound(p => p.GiveUp)
.Title("Giveup")
.ClientTemplate("<input type='checkbox' id='GiveUp' name='GiveUp' #if(GiveUp){#checked#}# value='#=GiveUp#' />")
.Width(50);
This grid uses batch editing and in-grid editing (GridEditMode.InCell)
.Editable(x => x.Mode(GridEditMode.InCell))
.DataSource(ds => ds.Ajax()
.ServerOperation(false)
.Events(events => events.Error("error"))
.Batch(true)
.Model(model => model.Id(p => p.Id))
.Read(read => read.Action("Orders", "Order").Data("formattedParameters"))))
So what I would like to have is ability for user to click on checkbox and change value of my model, but unfortunately that doesn't work. I can see visually checkbox's value is changed but I don't see red triangle that marks cell as changed, and when I click on add new item button, value from checkbox disappear.
Please advice on what I am doing wrong.
Thanks in advance.
For those who would like to see how full code looks like.
Home.cshtml
#(Html.Kendo().Grid<OrdersViewModel>()
.Name("Orders")
.Columns(c =>
{
c.Bound(p => p.Error)
.Title("Error")
.ClientTemplate("<input type='checkbox' #= Error ? checked='checked': '' # class='chkbx' />")
.HtmlAttributes(new {style = "text-align: center"})
.Width(50);
<script>
$(function() {
$('#Orders').on('click', '.chkbx', function() {
var checked = $(this).is(':checked');
var grid = $('#Orders').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('Error', checked);
});
});
</script>
Basically when you add/remove records from the Grid the red triangles always disappear (or when you sort/page/filter etc), the checkbox is not the problem with the red triangles.
Now for the checkbox if you create a ClientTemplate which is again a checkbox you will need to click one time to put the cell into edit mode (you will see no difference because the editor template is again a checkbox) so you will need to click second time to actually change the value.
What I suggest you as best practice is to use the approach covered here - it is way more faster (less operations for the Grid) and it easier than applying extra logic to handle the two clicks with the approach above.