Super easy concept !...
At some point, my editable grid, (and detail grids), must be set to read only... so i would like to do something like:
var grid = $("#grid").data("kendoGrid");
grid.options.editable = false;
Of course this doesn't work as it would be too simple...
Thanks for any help !
I would propose you having two grids: one read-only and one read-write but only one is visible. Both share the DataSource definition, so they are always in sync. When you want to change from one to the other, you hide the visible and display the other.
Example: I create two grids, exactly the same definition and just differ in that one is hidden and one is visible, one is editable and one is not. Since both share the same DataSource it actually works perfect because changing page in one changes in the other, editing one, updates the other.
Something like:
1- A CSS definition used for toggling visibility:
.ob-hide {
display : none;
}
2- A DataSource definition:
var ds = new kendo.data.DataSource({
transport : {
read : {
url: ...
},
update : {
url: ...
},
create : {
url: ...
},
destroy : {
url: ...
}
},
pageSize: 10,
schema : {
model: {
id : ...,
fields: {
id : { type: '...' },
...
}
}
}
});
Next the two grids:
$("#grid-editable").kendoGrid({
editable: "inline",
dataSource : ds,
...
}
$("#grid-not-editable").kendoGrid({
editable: false,
dataSource: ds,
...
});
$("#grid-editable").addClass("ob-hide");
And finally the function for switching modes:
function gridEditable() {
$("#grid-editable").removeClass("ob-hide");
$("#grid-not-editable").addClass("ob-hide");
});
function gridNotEditable() {
$("#grid-editable").addClass("ob-hide");
$("#grid-not-editable").removeClass("ob-hide");
});
See it running here: http://jsfiddle.net/OnaBai/bCEJR/2/
I've worked on a better style, by adding the disabled="disabled" on the elements needed. Using angular JS with kendo, worked like a charm, as by setting the grid to disabled doesn't allow the user to edit it. Try it, might work without angular as well!
Related
I am unable to get the built-in search for Kendo DropDownList to use the templated text instead of the raw text from the dataSource. I want to strip off the leading slash from the dataSource name for display, value, and search purposes.
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: [ "/Apples", "/Oranges" ],
// None of these templates appear to fix the search text.
// Kendo is using the dataSource item to search instead of the template output.
// I want to be able to search using 'a' (for Apples) or 'o' (for Oranges).
// If I use '/' then it cycles through the items which proves to me that the search is not using templated text.
template: function(t) { return t.name.slice(1); },
valueTemplate: function(t) { return t.name.slice(1); },
optionLabelTemplate : function (t) { return t.name.slice(1); },
});
</script>
Here is a non-working sample in Kendo's UI tester:
http://dojo.telerik.com/#Jeremy/UvOFo
I cannot easily alter the dataSource on the server side.
If it's not possible to change how the search works then maybe there is a way to alter the dataSource after it's been loaded into the client from the server?
I'm not sure if this will help you at all, but I was able to force it to work. The control allows for you to subscribe to the filtering event on init. From here, you can set the value of the filter before it is submitted.
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: ["/Apples", "/Oranges"],
template: function(t) { return t.slice(1); },
valueTemplate: function(t) { return t.slice(1); },
optionLabelTemplate : function (t) { return t.slice(0); },
filter: "startswith",
filtering: function(e) {
e.filter.value = '/'+e.filter.value;
}
});
</script>
Does anyone know if the kendo grid could be always set to edit mode at all times?
We don't want the user to click on a cell or a button to activate the edit mode. We want it the widgets to be displayed and available at all times.
Is it possible at all?
Apart from using batch editing mode you can try setting the template of every column and binding the input elements to the data items using MVVM.
$("#grid").kendoGrid({
dataSource: {
schema: {
model: {
id: "id",
fields: {
id: { editable: false }
}
}
}
data: [
{ id:1, age: 30, name: "John Doe" }
]
},
columns: [
{ field: "id", width: 50 },
{ field: "age", template: "<input data-bind='value: age' data-role='numerictextbox'>" },
{ field: "name", template:"<input data-bind='value: name' >" }
],
dataBound: function() {
var rows = this.tbody.children();
var dataItems = this.dataSource.view();
for (var i = 0; i < dataItems.length; i++) {
kendo.bind(rows[i], dataItems[i]);
}
}
});
Here is a live demo: http://jsbin.com/ApoFobA/2/edit
Out of the box, not exactly. You can enable Batch editing which displays everything normally, but clicking a cell will switch it to an editor automatically.
Example
To enable it, set { batch: true } on the table's datasource. Otherwise you're off to some deeper scripting. Checked and simply calling editRow on all rows doesn't do it. Default behavior is to disable editing on a row when a new one is taken into edit mode.
So, quick look says Batch mode - won't display editors all the time, but works and out of the box.
I found the above answer to be excellent. One issue though, is that Kendo doesn't clean up bindings when it refreshes the grid (such as when sorting or filtering or when refresh() is called) and deletes the grid's DOM elements. The result is the dataItems will have an increasing number of "change" events queued up -- a bit of a memory leak. This can be avoided by unbinding in the dataBinding event, as below:
dataBinding: function() {
var rows = this.tbody.children();
for (var i = 0; i < rows.length; i++) {
kendo.unbind(rows[i]);
}
}
I'm a newb in KendoUI and I'm trying to bind object like this:
var dataSource = new kendo.data.DataSource({
data: {
a:"A",
b:{
c:"C",
d:"D"
}
},
schema:{
model:{
fields:{
a: "string"
b: ???
}
}
}
})
to the kendo Grid. It's alright with "a" property, but I have no idea how to bind (and is it even possible) the content of "b".
Should I declare "b" as a separate DataSource?
I have googled a lot, but it seems, like I can't to formulate my problem correct...so, can anybody help with that?
This kind of binding is possible in kendo grid. you will be using something like the one given below
var dataSource = new kendo.data.DataSource({
data: {
a:"A",
b:{
c:"C",
d:"D"
}
},
schema:{
model:{
fields:{
a: "string"
'b.c': "string",
'b.d':"string"
}
}
}
})
This kind of binding works fine for me. Do check this out. If you are working with ASP.Net MVC, the posted JSON data is model bound perfectly too.
I'm new to Kendo and the Kendo grid but I'm trying to learn how to use the master detail Kendo grid where the detail grid is supposed to support batch editing. The data is available in a local JavaScript object.
This jsFiddle demonstrates the problems I'm seeing.
Here's how the grid is being created - see the jsFiddle for the complete snippet -
$("#grid").kendoGrid({
dataSource: items,
detailInit: createDetail,
columns: [
{ field: "Item", width: "200px" },
]
});
function createDetail(e) {
$("<div/>")
.appendTo(e.detailCell)
.kendoGrid({
dataSource: {
batch:true,
transport: {
read: function (options) {
options.success(e.data.SubItems);
}
}
},
editable:true,
pageable:true,
toolbar: ["save", "cancel"],
columns: [
{ field: "SubItem", title: "Sub Item", width: 200 },
{ field: "Heading1", title: "Heading 1", width: 100 }
]
});
}
When you edit an item in the grid and click to the next cell, the details grid automatically collapses not matter where I click, even in an adjacent cell. When I open it again, I don't see the change indicator in the cell (red notch) but the new value is there.
If I were to hook up the save to an ajax call, Kendo sends the right detail item(s) that were edited.
Nothing happens when I click cancel changes.
How do I get the grid to not collapse and see the change indicators ?
How do I get canceling of changes to work correctly ?
[Update] - Further investigation reveals that if I use an older Kendo version 2011.3.1129 , this works as expected. But if I use the newer 2012.3.1114, it doesn't. Dont know if this is a bug or a change in behavior.
After much effort, I found that the cause seems to be that the master grid is rebinding automatically causing the behavior I observed. I was able to get around this by handling the dataBinding event in the master grid and within that, checking if any of the detail datasources were dirty and if so, calling preventDefault.
Here are relevant code snippets :
dataBinding: function (e) {
if (masterGrid.AreChangesPending()) {
e.preventDefault();
}
}
AreChangesPending : function () {
var pendingChanges = false;
// I gave each detail div an id so that I can get a "handle" to it
$('div[id^="detail_"]').each(function (index) {
var dsrc = $(this).data("kendoGrid").dataSource;
$.each(dsrc._data, function () {
if (this.dirty == true || this.isNew()) {
pendingChanges = true;
}
});
// For some reason, Kendo did not detect new rows in the isNew()
// call above, hence the check below
if (dsrc._data.length != dsrc._total) {
pendingChanges = true;
}
});
return pendingChanges;
}
I have a store being used by several charts. I get my data remotely with an ajax call. In the php script that I link it too, I'm just going to change the parameters of my query to adjust for the different charts.
Here's my idea: I pass the title of the chart's panel as a parameter to my php script. That'll tell me which chart it is.
How do I access the title of whatever chart the store is being used by?
var my_store = Ext.create('Ext.data.JsonStore', {
fields: ['project', 'accepted', 'rejected', 'deleted', 'undefined'],
proxy: {
type: 'ajax',
url: 'generate_proj.php',
extraParams: {foo: **chart.id**},
reader: {
type: 'json'
}
},
autoLoad: true,
listeners: {
beforeload: function(store,operation) {
//operation.params.foo = this.idname;
},
load: function(obj,records) {
var text = Ext.decode(obj.responseText);
Ext.each(records,function(rec) {
});
}
}
});
Here's what I've done so far. Getting the name of a single chart/panel is no problem. I want the store to be able to dynamically read the name of what's using it. How?
Somewhere, you have some code that switches between the various charts. During that code, you could do something like
activeChart.getChartStore().proxy.extraParams.foo = activeChart.getId();
where activeChart is whatever reference you have to the chart you are about to show. Then when you load the store, it'll send the correct parameter.