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
Related
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 } }
I need to refresh the grid on a grid row add. I do this via the onRequestEnd() which I use to invoke kendoGrid's dataSource read() - Which works.
But I also use server side validation and use the grid's error event to cancel the popup closure - This works, but only if I comment out the onRequestsEnd's dataSource.Read().
Basically I can't do both, the onRequestEnd event fires before the error event, & it doesn't contain any error information, so I cant conditionally do the grid refresh.
Any ideas as to how I can refresh the grid only if the crud (row add) is successful, & have the normal server side validation behaviour.
dataSource ....
.Events(events => events.Error("myLib.error"))
.Events(e => e.RequestEnd("myLib.onRequestEnd"))
myLib ...
error: function (args) {
if (args.errors) {
var grid = $("#myGrid").data("kendoGrid");
grid.one("dataBinding", function (e) {
e.preventDefault(); // cancel popup closure
});
}
},
// on Grid's DataSource CRUD action completing
onRequestEnd: function (e) {
if ((e.type === 'create' || e.type === 'update' || (e.type === 'destroy'))) {
$("#myGrid").data("kendoGrid").dataSource.read();
}
},
How can i restrict users from deleting the already saved items in the Multi select widget. Users should not be able to delete existing values but can add or remove the new values.
The solution i tried was on databound remove the delete icon like below. It gets deleted but comes back after the call executes the databound method.
Any ideas?
onDataBound: function (e) {
e.preventDefault();
$(e.sender.tagList).find("li span.k-delete").remove();
}
This is the code in the view which calls the above js function on databound
#(Html.Kendo().MultiSelectFor(x => x.Documents)
.DataTextField("Description")
.DataValueField("Code")
.Placeholder("Select Attachment...")
.AutoBind(false)
.DataSource(source => source.Read(read => read.Action("GetCustomerDocuments", "CustomerRequest")).ServerFiltering(true))
.HtmlAttributes(new {style = "width:400px;"})
.Events(e => e.DataBound("onDataBound"))
)
Have your tried applying the same method on the change event as on the databound event?
Razor:
.Events(e => e.Change("onChange"))
Javascript:
onChange: function (e) {
e.preventDefault();
$(e.sender.tagList).find("li span.k-delete").remove();
}
I search for data and then bind to my grid. In the grid's databound event, I change the row background color according to the cell's value. This works OK. But when I click the Edit button in the grid and then click the Cancel button, the grid no longer has the background color set. I tried to call the databound event in the Cancel event, but it does not work. How do I prevent the Cancel Event from changing my grid color?
grid
#(Html.Kendo().Grid(Model)
.Name("mygrid")
.Events(e=>e.DataBound("dataBound"))
.Columns(columns =>
{
columns.Bound(p =>p.StudentName).Title("StudentName");
columns.Command(command =>
{
command.Edit().UpdateText("Edit");
command.Destroy().Text("Delete");
}).Width(160);
})
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.TemplateName("SudentEditor")
.Window(configurator=>configurator.Width(500)
.Title("EditStudent")))
.Scrollable()
.Events(events=>events.Cancel("onCancel"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model =>
{
model.Id(p => p.Id);
})
.Read(read => read.Action("GetStudentForGrid", "Student"))
.Create(create=>create.Action("CreateSudent","Equipment"))
.Update(update => update.Action("UpdateStudent", "Student"))
.Destroy(destory=>destory.Action("DestroyStudent","Student"))
.Events(events => events.Error("error_handler"))
))
databound event
//change grid color
function dataBound(e) {
$("#mygrid tbody tr").each(function(i) {
$(this).find("td:lt(9)").css("backgroundColor", '#000000');
});
}
cancel event
//I try to call preventDefault event and close the PopUp window
//,but the background is still grey
function onCancel(e) {
//e.preventDefault();
//e.container.parent().css("display", "none");
// e.sender.clearSelection();
dataBound();
}
Just refresh the grid in the cancel event. It will fire the onDataBound event again. I had the same issue and resolved it like this:
function onCancel(e) {
$("#GridName").data("kendoGrid").refresh();
}
//change grid color
function dataBound(e) {
$("#mygrid tbody tr").each(function(i) {
$(this).find("td:lt(9)").css("backgroundColor", '#000000');
});
}
You can use grid.cancelRow() in the cancel enent,and then refresh the grid.
If you don't want to refresh the grid but run code after the event has finished instead, you can use a setTimeout() in the cancel event.
function onGridCancel(e){
setTimeout(function() {
colorMyRowsBeutifully();
}, 0);
}
See this answer from Telerik:
https://www.telerik.com/forums/grid-cancel-event
I also ran into this problem and the solutions from above didn't work for me.
But I found another solution that did the trick, to use the Edit event of the Grid to attach event handler to the Deactivate event of the Window.
Grid events:
.Events(e => {
e.DataBound("onDataBound");
e.Edit("onEdit");
})
Grid event handlers:
function onDataBound(e) {
//Conditional formatting on DataBound
formatGridRows();
}
function onEdit(e) {
//Bind deactivate event to the Popup window
e.container.data("kendoWindow").bind("deactivate", function () {
formatGridRows();
})
}
function formatGridRows() {
$("#Grid tbody tr").each(function () {
grid = $("#Grid").data("kendoGrid");
dataItem = grid.dataItem($(this));
//Conditionally format the current row
if (dataItem.Discontinued) {
$(this).find(":nth-child(3):first").css("background", "red");
}
})
}
Here's the source:
http://www.telerik.com/forums/cancel-popup-clears-grid-background-color
I am using a Kendo-grid with inline editing Let's call this Grid3. The Grid is displaying a list of items from a referenced property of the page's view model. When an item on the grid has been saved, I would like to invoke a complete page refresh (or a refresh two other grids, Grid1 and Grid2 on the page). The reason is that when an items has been updated in the grid, values displayed in other grids are affected.
Any ideas?
Call datasource.read() at those grids you want to refresh.
$("#grid3").kendoGrid({
dataSource : dataSource,
save: function(e) {
grid1.dataSource.read();
grid2.dataSource.read();
}
}
Alternatively place the grid.datasource.read() call into your datasource complete.
var dataSource = new kendo.data.DataSource({
transport: {
update: {
complete: function (jqXhr, textStatus) {
grid1.dataSource.read();
grid2.dataSource.read();
}
}
}
});
This can be accomplished using the RequestEnd event.
The Kendo Grid declaration would have something like:
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(fi => fi.Id))
.Read(read => read.Action("Buildings_ReadForecast", "Plan", new {buildingId = Model.BuildingID}))
.Events(events => events.Error("error_handler"))
.Events(events => events.RequestEnd("OnRequestEnd_Grid"))
Then create the javascript method like:
function OnRequestEnd_Grid(e) {
if (e.type === "update") {
var forecastgrid = $('#ForecastGrid').data('kendoGrid');
var planGrid = $('#PlanGrid').data('kendoGrid');
planGrid.dataSource.read();
forecastgrid.dataSource.read();
}
}
That's it!