Kendo treeview checkchildren ie - kendo-ui

I have a treeview
$("#treeview").kendoTreeView({
dataSource: { data: dati.toJSON()
},
checkboxes: {
checkChildren: true
},
selected: false
});
But on ie when i check on the Root node the childreb don't checked..
Someone know how to resolve?
The Treeview is in a kendo modal window.

This issue is solved in the latest KendoUI release 2012.03.1315. Now it works fine.

Related

How to control enabled state of a button in a Kendo UI Grid

I have up and down arrows in my Kendo UI grid. For the first item on the grid I do not want do allow the item to move down (it is impossible) and for the last item I do not want the item to move up (also impossible).
How can I do this?
$(document).ready(function() {
//Set URL of Rest Service
var loc = (location.href);
var url = loc.substring(0,loc.lastIndexOf("/")) + "/xpRest.xsp/xpRest1";
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: url,
type: 'GET'
},batch: false
}});
dataSource.read();
$("#gridIDNoScroll").kendoGrid({
dataSource: dataSource,
pageSize: 15,
noRecords: true,
selectable : false,
columns : [{
field : "name"
},{
field : "strDate",
width : 150
},{
field : "$10",
width : 150
},{
command: [
{
text: "&nbsp",
//click: moveDown,
imageClass: "k-icon k-i-arrow-s",
icon: "k-icon k-i-arrow-s",
title: "Up",
enable: false
},
{
text: "&nbsp",
//click: moveUp,
imageClass: "k-icon k-i-arrow-n",
icon: "k-icon k-i-arrow-n"
}
],
width:"90px"
},
]
});
});
This worked for me when I needed to disable the button. Use the databound event to basically change the state, use off to remove the event handler, and then override the click event. Something like this:
$('.k-grid-add').addClass('k-state-disabled');
$('.k-header').off('click').on('click', '.k-grid-add', function (e) {
// add new logic here or ignore it
});
If you have multiple buttons in the toolbar, the something like this:
$('.k-grid-add').addClass('k-state-disabled');
$('a.k-grid-add').on("click", function (e) {
e.preventDefault();
e.stopPropagation();
});
You can use the dataBound event of the Grid to apply a k-state-disabled CSS class to the desired buttons in the first and last row of the Grid.
Keep in mind that k-state-disabled only applies a "disabled" look, but the click event will still fire and the command function will execute. You can skip the row move logic for disabled buttons.
On a side note, you can use a command name to find buttons in the DOM more easily. For example, a command button with a name foo will have a CSS class of k-grid-foo.

Grid editing in Kendo

I hava a kendo grid which is set to be editable. It is working fine. all I need is to show a empty row in my grid regardless of any items present or not. This editable row should always come. for that I have searched various questions here also but none of them is working except the below:
$("#Grid").kendoGrid({
dataSource: TableDataSource,
autoBind: true,
scrollable: true,
sortable: {
allowUnsort: false
},
pageable: {
refresh: true,
buttonCount: 5,
pageSizes: 5
},
noRecords: {
template: "No records found."
},
dataBound : function () {
var firstItem = this.dataSource.view()[0];
if (firstItem.isNew() == false) {
firstItem.isNew();
this.addRow();
}
},
editable: true,
But here the problem is that it only shows a new row if grid have atleast one record coming from database . If Grid is empty, it is not adding a row in grid.
If I remove if condition , then the grid goes into infinite loop and crashes the browser.
I also tried this in document.ready but there is no success. Grid just don't respond
$(function(){
var grid = $("#Grid").data("kendoGrid");
grid.dataSource.insert( {} );//Not working
grid.addRow(); // Not working
});

kendo combobox datasource filtering before bind is not working

I am working on a web application using kendo UI. I have a kendo combobox and binding via remote datasource. I need to filter kendo combobox datasource before binding.
here's my code:
$("#abc").kendoComboBox({
dataSource:{
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
filter: { field: 'Freight', operator: 'neq', value: 11.61 }
},
dataTextField: 'Freight',
dataValueField: 'Freight'
});
JSFiddle
Any help?
I have fixed by using oData filtering.Here's my code. jsfiddle.net/MG89G/1497.

Need to highlight the column when header is dragged from one position to other position in jqgrid

In sortable jquery start event is present when we start dragging event is fired but in jqgrid its not working
Here update is working but when i replace update with start/stop/change events it is not working how to get drag event for reordering the columns.
sortable: {
update: function(event, ui)
{
window.setTimeout(setColor, 500);
}
},
Start event started working when it is inside the options tag
sortable: { options : {
cursor:'move',
start: function(event, ui)
{
alert('hi');
}
}},
}

Kendo UI Dropdownlist in Grid Edit mode

Basically I have a Kendo UI Dropdownlist as my first grid column called "instrumentName"
In popup EDIT mode, I can see the correct instrumentName in the dropdown but there's one problem when I change the value:
As soon as I select a new instrument - the instrument ID shows up on the grid (in the background). The updated INSTRUMENT NAME should appear on the grid.
And once I click UPDATE, it does NOT show the instrument NAME, but rather the instrument ID (which is a number).
Some code snippets:
instrDropDown.value(e.model.instrumentId);
nodeGrid = $("#curvesGrid").kendoGrid({
dataSource: new kendo.data.DataSource({ ... });
columns: [
{
field: "instrumentName",
editor: instrumentsDropDownEditor, template: "#=instrumentName#"
},
{
field: "instrumentTypeName"
},
edit: function(e){
var instrDropDown = $('#instrumentName').data("kendoDropDownList");
instrDropDown.list.width(350); // widen the INSTRUMENT dropdown list
if (!e.model.isNew()) {
instrDropDown.value(e.model.instrumentId);
}
}
});
and here's my template editor for that Dropdown :
function instrumentsDropDownEditor(container, options) {
// INIT INSTRUMENT DROPDOWN !
var dropDown = $('<input id="instrumentName" name="instrumentName">');
dropDown.appendTo(container);
dropDown.kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
dataSource: {
type: "json",
transport: {
read: "/api/breeze/GetInstruments"
},
},
pageSize: 6,
//select: onSelect,
change: function () { },
close: function (e) {
},
optionLabel: "Choose an instrument"
}).appendTo(container);
}
Do I need to do anything special on change of the Dropdown ?
thanks.
Bob
dataFieldValue is what is going to be saved as value of the DropDownList. If you want name to be saved then you should define dataValueField as name.
Regarding the background update that's the default behavior since this is an ObservableObject and as consequence changes are automatically propagated. If you don't want this you should probably try using a fake variable for the drop-down and in the save event copy it to the actual field. Do you really need this?

Resources