Hi all,
I'm trying out Kendo as an alternative to jQuery-UI and so far it is working nicely.
One thing I couldnt really figure out (I'm probably missing something....) - I created a grid from an array.
Now, I want to redraw the grid using the same element but with a different data set.
With jQuery-UI I simply could destroy the grid and the recreate it. How do I do it in Kendo?
I'm having a problem setting an edited row to be called for updating back to the server. The default edit along with save using the toolbar works perfectly. However, i wish to make use of a form. Somewhere somehow I have to either set an attribute or throw the item into a queue so that Kendo knows it needs to perform an update query.
<code>
$("#form-edit").live("submit",function(e) { // Declaring grid var grid = $("#grid").data("kendoGrid"); // Getting values of selected item var row = grid.dataItem(grid.select(grid.tbody.find())) // Declaring window var window = $("#window-edit").data("kendoWindow"); // Setting variables for editable row row.Name = $("#form-edit-name").val(); row.GeoLocation = $("#form-edit-location").val(); row.Active = $("#form-edit-activity").val(); row.ContactNo = $("#form-edit-number").val(); // Grid refreshing and database sync // grid.refresh(); grid.saveChanges(); // Closing form window window.close();
});
</code>
The default kendo way (using inline as well as the toolbar save) works 100% thus proving that my datasource has been successfully set up.
I know that, using the .value(); method I can retrieve the TEXT of the currently selected item ...but what if we want to get the entire object, with all of its existential data intact?
Currently, the only method I have found is the following ...
var combobox = $("#input").data("kendoComboBox");
console.log(combobox.dataSource.view()[combobox._current.index()]);
This seems hardly intuitive and excessively redundant. The code is relatively simple, can't we just get a simple .selected() or a .current() method attached to it that pulls this?
"change" event is being generated when I click on already selected row.
Moreover the event is generated when I click in any place of detail row (in master-detail mode) if it contains a table with td's.
Also the event's handler arguments don't have any data about event context (i.e selected row), so I have to call "select()". That's not obvious. It's more naturally to get selected row in event handler. Also there's "current()" method which seems to be more suitable for getting currently selected row, but it returns undefined.
UPDATE: When you're creating kendo.ui.Selectable inside Grid :
that.selectable = new kendo.ui.Selectable(that.table, {
filter: cell ? CELL_SELECTOR : ROW_SELECTOR,
multiple: multi,
change: function () {
that.trigger(CHANGE);
}
});
where ROW_SELECTOR = "tbody>tr:not(.k-grouping-row,.k-detail-row):visible"
you should specify "direct" selector:
ROW_SELECTOR = ">tbody>tr:not(.k-grouping-row,.k-detail-row):visible",
But unfortunetly it doesn't help when detail panel constains another grid.
Just take you sample http://demos.kendoui.com/web/grid/detailtemplate.html and add "seletable: 'row'" into the first grid. And add handle for "change" event:
element.bind("change", function (e) {
var td = this.select();
console.log("selected: " + td);
});
then notice that it logs rows when you selected rows inside nested grid.
Is that possible to use scrollview or any other widget to implement the touch slide in panel like the one you have on the twitter ipad or facebook ipad?
I've made some complex editing to test my grid. But i found "__id" attribute in my JSON. I didn't know where was it come from. It makes my deserialization from json to my model failed (I used MVC).... When i test a simple editing like combination of two delete and two insert operation, there is no "__id" attribute. It only happens when i test the grid with complex query like three insert and three delete alternately..
Is it bug from Kendo UI Grid ? Did anyone find a solution ?
I would like to have a view that requests one of two things, License plate number and/or a Last name.
With a Search button in the footer, on click I would like to determine whether a License plate was entered, if so retrieve data from the server, if found I would like to transition to the vehicle view, if not found display an error on my current view. I a Last name was entered I would like to do the same process but display the customer view on success.
How would I set up the buttons to call a common function, and programmatically switch views or re-display the current view if there is an error?