I want to add a change event to all cells in a specified column using Kendo UI. Something like:
this.myGridVariable.table.on("change", "--InsertMyColumnNameHere--", (e) => { this.doStuff(e) });
I thought this worked:
this.myGridVariable.table.on("change", "[name=ColumnName]", (e) => { this.doStuff(e) });
but it doesn't, at least not with the latest update.
You need to specify what change event you mean:
The HTMLElement change event in JavaScript, which is fired for <input>, <select>, and <textarea>, but not a table cell, see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
The Kendo Model or DataSource change event documented here: https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/events/change
I believe you'll want the second one. You can't bind it to a single field, but it has e.field and you can execute code depending on its value.
add .Events(e => { e.Change("onEdit"); }) under .DataSource(dataSource => dataSource
onEdit is a javascript function. In this function add this code -->
function onEdit(e) { if (e.action == "itemchange") { doStuff } }
Related
I'm dynamically editing some fields using JavaScript. But the problem is Kendo's dataSource doesn't recognize them as changed cells.
Grid's edit mode is InCell.
This is my current JavaScript code:
tablesGrid.tbody.find("input[type='checkbox']").each(function () {
$(this).on('change', function () {
var isChecked = $(this).prop('checked');
var dataItem = tablesGrid.dataItem($(this).closest('tr'));
var currentTr = $(this).closest('tr');
var i = $('td:visible', currentTr).index($(this).closest('td'));
var head = tablesGrid.thead.find('th:visible')[i];
var headName = $(head).prop('dataset').field;
tablesGrid.editCell($(this).closest('td'));
dataItem[headName] = isChecked;
tablesGrid.refresh();
});
});
And if you're wondering about this code, I should note that I'm using client template to show checkboxes. But I don't want the user to double click the cell for editing, once to put it in the edit mode, and another one to change the checkbox. I'm not sure if I'm using the right solution, but the JS code works for sure. If I click in the cell and put it in the edit mode, I'll see the change.
#(Html.Kendo().Grid<grid>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(x => x.field)
.ClientTemplate("<input type='checkbox' class='checkbox-inline' #=field? checked='checked':''# />")
.EditorTemplateName("Checkbox");
Well, the best solution I came up with is to put the cell in edit mode when mouse enters that cell! So instead of the entire JS code in the question, I simply use this.
tablesGrid.bind('dataBound', function () {
tablesGrid.tbody.find('td').each(function () {
$(this).mouseenter(function () {
tablesGrid.editCell(this);
});
});
});
Please let me know if you have any better or more efficient way to use editable
checkboxes inside a Grid.
In our application we have more than 100 grids and we need to display help button on Title bar of grid, for that I have created a plugin using
$.jgrid.extend({
EnableHelpButton: function(value) {
var $t = this;
...............;
}
});
Currently, I go to each .html page of grid and need to call the EnableHelpButton as shown in below code.
-----------------Index1.html-------------------------
$("#TestGrid1").bind("jqGridInitGrid", function () {
$(this).EnableHelpButton(true);
});
-----------------Index2.html-------------------------
$("#TestGrid2").bind("jqGridInitGrid", function () {
$(this).EnableHelpButton(true);
});
How I can create a generic way to call this EnableHelpButton on jqGridInitGrid events of each grid. It should write once on single place and it should work for each grid.
You have to have some specific call of your custom function on every page. One way will be to define you plugin so
$.jgrid.extend({
EnableHelpButton: function(value) {
var $t = this;
...............;
},
myInit: function () {
return this.each(function () {
$(this).bind("jqGridInitGrid", function ({
$(this).EnableHelpButton(true);
});
});
}
});
Even in the case you need to include .jqGrid("myInit") call on every page. You can make the call of myInit before the <table> is converted to grid. For example instead of
$("#grid").jqGrid({
... // parameter used to create jqGrid
});
you will be use now
$("#grid").jqGrid("myInit").jqGrid({
... // parameter used to create jqGrid
});
Only if you never use onInitGrid callback in any your grids you can use the callback instead of jqGridInitGrid. In the case you need just define the callback in some JavaScript code which you included in every your page:
$.extend(true, $.jgrid.defaults, {
onInitGrid: function () {
$(this).EnableHelpButton(true);
}
});
In the way you will set default implementation of onInitGrid for every grid.
Thus the definition of common initialization inside of onInitGrid callback produces the shortest implementation, but have restriction that you shouldn't use the callback in no of your grids. Alternatively you defines the method myInit which makes all bindings add you can add .jqGrid("myInit") on every your grids. The last approach will work for every jqGrid.
I have a scenario where I have a Kendo dropdown, Kendo Datepicker as couple of columns in the grid.
On Add new record, the dropdown should be editable, on Edit mode, this drop down should be non Editable.
I have declared Grid to be Editable in declaration using
.Editable()
model.Field(p => p.CountryName).Editable(true); // where CountryName is kendo dropdown
I am trying to do on Edit this way,
function OnEdit(e) {
if (e.model.isNew() == false) {
e.model.fields["CountryName"].editable = false
}
THe behaviour I observe is Initially on load, Editable is set to true (due to cshtml declaration). When I click on Edit too, the drop down is Editable because of the page load flag that is set.
Even though OnEditmethod is executed and editable is set to false, the grid seems to have loaded before this code execution, hence editable =false is not reflected.
If I click on Edit second time, now the editable is set to false due to the previous call, Hence the dropdown is non editable as expected.
In Summary, the flag setting is not effective for the current action, but for the immediate next action. I am not sure if I have made it clear. Can you guys help?
Update - The other option I tried, during databind to the grid, I tried explicitly settign editable to false to all the grid data. My assumption here was only the loaded rows will have this field set to false. But in this case even the add new record takes Editable false.
var grid2 = $("#Gridprepayment").data("kendoGrid").dataSource.data(requiredData);
$.each(requiredData, function (i, row) {
var model = $("#Gridprepayment").data("kendoGrid").dataSource.at(i);
if (model) {
model.fields["CountryName"].editable = false;
}
});
The best way is to make the column editable .
e.g.
model.Field(d => d.CountryName).Editable(true);
and Onedit function, replace the inner html like mentioned below, for just to display it as label.
function OnEdit(e) {
e.container[0].childNodes['0'].innerHTML = e.model.CountryName;
}
Try disabling the kendo dropdown in the following manner:
function OnEdit(e) {
if (e.model.isNew() == false) {
$("#CountryName").data("kendoDropDownList").enable(false);
}
}
You can try this if you want to show the dropdownList as label in edit mode
function OnEdit(e) {
if(e.container.find("input").attr("id") === 'CountryName') {
this.closeCell();
}
}
Note: The above code was written considering "CountryName" as the id of the dropdown. Please change if the id is different.
I tried this which worked.
It's only a work around :
function OnEdit(e) {
if (e.model.isNew() == false) {
if (e.container.find("input").attr("id") === 'CountryName') {
e.container.find("td:eq(0)").html($("#CountryName").val());
}
}
}
I have a kendo grid using MVVM.
My problem is I can't seem to set column visibility using the hidden attribute and an expression:
data-columns=
"[{'template':'# if (User!=null) { # #=User.Name# # } #',
'title':'User', 'hidden': User==null}
The template works, but the 'hidden' attribute doesn't seem to.
Is there any way to get this to work?
As an alternative, you could bind to the dataBinding or dataBound event to hide the column conditionally:
data-bind="events:{ dataBinding: onDataBinding }"
View model:
var viewModel = kendo.observable({
User: null,
showHideUserColumn: function (e) {
var grid = e.sender;
if (this.User) {
grid.showColumn("User");
} else {
grid.hideColumn("User");
}
},
onDataBinding: function (e) {
this.showHideUserColumn(e);
// if you want to track changes, (re)bind change tracking
this.unbind("change", this.showHideUserColumn);
this.bind("change", this.showHideUserColumn);
}
});
Only the properties specified via the data-bind attribute participate in MVVM change tracking. The other data attributes are mapped to widget configuration properties and are not evaluated against the view model.
Currently there is no binding which will allow you to hide and show grid columns.
I am using Kendo Grid to sorting table data. I want an event which fire after sorting is completed. i want like below code.
$("#innergrid").kendoGrid({
sortable: true,
Aftersorting : function(event) { alert('sorting is done') }
});
You can use the change event of the dataSource (will be created automatically when you init the grid). Check this: http://jsbin.com/buten/1/edit
I am not sure is there any event which can be triggered after sorting but you can do this
********************Grid************************
#(Html.Kendo().Grid<>()
.Name("CompanyServicesGrid")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => e.RequestEnd("onRequestEnd"))
)
**************************Javascript********************
function onRequestEnd(e)
{
if (e.type == "read"){
if(e.sender_sort=="ColumnName")
alert("sorting is done")
}
}
have a look at this as well
onRequestEnd-Link
OnComplete-Link