I have a kendo grid in column user can edit . I am using editor and datachange even firing to server for validation if inavid data then revert to previous value. Everything working fine but unable to revert to previous value as of now clearing field. Can anyone help me on this
dataChange:function(changedatta)
{
If(changedatta.column name==="abc")
{
// do something
}
}
Related
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();
}
});
I'm using Telerik Kendo UI Professional. I have a grid with an edit template, and several controls on it. I ran into a weird little requirement, where I needed to programmatically set the value of one of the controls, based on another control being changed. The actual change of value seems to happen just fine. However, when I submit the form to save changes, the new, programmatically-set value is ignored; it sends the original value instead. If the user changes the value himself, the new value is submitted just fine.
Here is a sample:
http://dojo.telerik.com/#wittca/otoxO
This is not my original code, but it shows the same problem. In this version, upon opening the edit popup, I programmatically modify the value of the UnitsInStock KendoNumericTextBox. Then when I save the form, I would expect to see the new value, but I still see the old value in the grid. So it does not take the programmatically-generated new value.
My original code is trying to set the value of a KendoComboBox, when one of the other controls changes, and the same situation happens. I didn't have time to create the exact same situation, but most likely if we can fix that dojo sample, the same fix would apply to my ComboBox.
Here is the response I got from Telerik support:
You will need to trigger the change event as well, as the Grid listens for it in order to update the value. Please see the updated example here:
http://dojo.telerik.com/UjUkE
var units = e.container.find("[name='UnitsInStock']").data("kendoNumericTextBox");
units.value( <insert new value here> );
units.trigger("change");
The key line of code is that last one; that manually triggers the "change" event on the control, which forces the Grid to update the value.
This fix also works with my original problem involving ComboBoxes.
He is a solution for you:
If you change the edit function that you have from:
edit: function (e) {
var units = e.container.find("[name='UnitsInStock']").data("kendoNumericTextBox");
var unitsValue = units.value();
units.value(unitsValue+1);
}
to this:
edit: function (e) {
var val = e.model.UnitsInStock;
e.model.set("UnitsInStock", val+ 1);
}
It will bind the updated value for you.
Here is my updated code for you to test:
http://dojo.telerik.com/OHaKA/2
I turn to you stackoverflow!
I'm using a kendo ui batch grid with InCell editing set and am wanting to know a way to set a particular column into edit mode.
I've tried using editCell, and so far it hasn't caused any of the cells to go into edit mode :(
In this particular case, we have a ClientTemplate column specified which has a button (really its a link...) in it. When the user clicks the button I would like a particular cell in that row to switch to edit mode. For reference here's what the specific column template looks like:
columns.Template(t => { }).HeaderTemplate("")
.ClientTemplate(#"
<a href='javascript: void(0)' class='abutton SecondaryActiveBtn' onclick='editVariableRate(this)' title='Edit'>Edit</a>")
.Width(100).Title("");
Here is the particular javascript method that gets called on the button click:
function editVariableRate(element) {
grid = $("#variableFee").data("kendoGrid");
var cell = $(element).closest("tr").find("td:eq(2)");
grid.editCell(cell);
}
Am I doing something wrong here because the particular column never goes into edit mode?
For reference, I can do the following successfully using the same "cell" variable:
var cellIndex = grid.cellIndex(cell);
and cellIndex gets assigned correctly, so I don't think its a problem of selecting the particular cell...
Anybody have any ideas?
Figured it out! It was the link that was the cause of the problem :( Swapping that to be an input button was the only thing that was needed. bangs head into desk.
Browser: IE 9
Context: An editable, sortable(server side) KendoUI grid is populated.
Issue: The objective is to pop up a message if there are any unsaved changes.
User clicks on a cell
User edits the text in the cell
User clicks on the column header
The grid’s datasource does not catch the edit. Dirty property of the data item is false.
Kendo UI grid always sorts the column. I have been unable to find a way to intercept the sort event and warn the user and cancel the sort event.
Any help is appreciated.
Version: kendoui.aspnetmvc.2013.2.716
In order to cancel the sort event, call event.preventDefault() in the requestStart event of the datasource.
hasChanges() method of the datasource returns false if
Grid columns are reorderable. (.Reorderable(r => r.Columns(true))
//Kendo htmlhelper code)
Sorting is done on the server
User edits the text in a cell and click on the column header
If you remove the Reorderable setting, hasChanges() method of datasource returns true.
Opening a support ticket for this issue.
In the meantime, if you would like to catch the edit with hasChanges() method when user edits the cell and clicks the column header do not set the Reorderable to true.
Here is a video demonstrating the KendoUI Grid issue
Response from Telerik
Basically this is happening because when reordering the event that is used is the mousedown event.
When the mousedown event is triggered the model is still not updated.
As a work-around I can suggest you the following resolution:
Put this in a script block after initializing the Grid. This way if the Grid is still in edit mode, no matter if you have made a change or not the Dragging will be prevented.
$(function () {
var gr = $('#Grid').data().kendoGrid;
gr.thead.on('mousedown', function (e) {
if (gr.tbody.find('.k-edit-cell').length) {
e.stopImmediatePropagation()
}
});
})
I#m using Telerik Grid and MVC3. I managed it to build my own filterDialogs, we had to create custom filter for each column. Everything works fine, when I click on my filter button, the gridData gets filtered. The only thing is that the filter icon doesnt change its state to active. So i went along and added the needed class after my filter command:
grid.filter(filterSettings)
$j('#targetColumn').addClass('t-active-filter');
When I filter for a first column, it works. But if I filter for a second column, the filter icon of the first column turns its state back to inactive. There must be some information that is sended from the server to the grid, so the grid goes along and adds/removes the class to the column header.
I got the answer from here. Before filtering I have to set the column filtersetting mannually:
var column = grid.columnFromMember(PropertyName);
if (column) {
column.filters = [filterSettings];
}
grid.filter(filterSettings)
And everythin works :)