Questions on Kendo UI for jQuery Forum

3 answers

223 views

Hi,

We want to have column resizing conditionally - so initially resizing should be enabled, then based on some condition, its should be disabled. Is this possible? If yes, can you please let know how.

Thanks in advance.

Grid

answered on 31 Oct 2014

2 answers

687 views

[Solved] How to hide the header column title when grid loads

Hi,

We want that when the grid loads, header bar should appear but column title should not display. When we tried to set as column title as '', still the field name showed up in the grid header.

Can you please let me know how to fix this.

Thanks a lot.

Grid

answered on 31 Oct 2014

1 answer

676 views

Adding the child nodes to the Kendo Tree dynamically

I am newbie to Kendo UI framework. I want to use Kendo_Tree view for my project purpose. Here i want to add some child nodes dynamically when the user tries to expand the tree. So my requirement is like the call to the server happens when the user expands the tree and the data which we got from server should be added to the tree dynamically.
I have tried the above scenario with some example, it is adding child nodes but the nodes are
overlapping(display is not following hierarchy). Please let me know how to add child nodes dynamically.
Please look at the following code:

<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/treeview/angular">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div class="box-col">
<h4>TreeView</h4>
<div kendo-tree-view="tree"
k-data-source="treeData"
k-template="itemTemplate"
k-on-change="selectedItem = dataItem" k-on-expand="onExpand(kendoEvent)"></div>
</div>
<div class="box-col" ng-show="selectedItem">
<h4>Selected: {{selectedItem.text}}</h4>
<button class="k-button" ng-click="addAfter(selectedItem)">Add item below</button>
<button class="k-button" ng-click="addBelow(selectedItem)">Add child item</button>
<button class="k-button" ng-click="remove(selectedItem)">Delete</button>
</div>
</div>
<style scoped>
.k-treeview .k-in {
padding: 5px;
}
</style>
</div>

<script>
angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope) {
$scope.treeData = new kendo.data.HierarchicalDataSource({ data: [
{ text: "Item 1" },
{ text: "Item 2", items: [
{ text: "SubItem 2.1" },
{ text: "SubItem 2.2" }
] },
{ text: "Item 3" }
]});

$scope.itemTemplate = "{{dataItem.text}} <button class='k-button' ng-click='click(dataItem)'>Select</button>";

$scope.click = function(dataItem) {
alert(dataItem.text);
};

function makeItem() {
var txt = kendo.toString(new Date(), "HH:mm:ss");
return { text: txt };
};

$scope.onExpand = function(e) {

if ($('li.k-item ul.k-group').find()) {
alert("finded");
$('ul').addClass("no-high");
}

// can't get this to work by just modifying the data source
// therefore we're using tree.append instead.
var dataItem = $scope.tree.dataItem(e.node);

var newItem = makeItem();
dataItem.items.push(newItem);
//$scope.tree.append(newItem, $scope.tree.select());
}


$scope.addAfter = function(item) {
var array = item.parent();
var index = array.indexOf(item);
var newItem = makeItem();
array.splice(index + 1, 0, newItem);
};

$scope.addBelow = function() {
// can't get this to work by just modifying the data source
// therefore we're using tree.append instead.
var newItem = makeItem();
$scope.tree.append(newItem, $scope.tree.select());
};

$scope.remove = function(item) {
var array = item.parent();
var index = array.indexOf(item);
array.splice(index, 1);
};

window.$scope = $scope;
}
</script>
<style scope>
.no-high {
height:-1px !important;
color: red;
}
</style>
</body>
</html>

TreeView

answered on 31 Oct 2014

3 answers

353 views

Filter is very slow - kendo tree view

Hi,

I am forming the JSON object as below manually, pushing it to an array and provide it as datasource to kendo tree view.

Everything seems to work fine except for filter functionality..
Filtering seems to happen very slow when there are more entries in the tree hence I assigned
the below array to hierarchical data source and assigned the hierarchical datasource as source for
tree view. This solved the filtering issue but whenever I click any particular node it takes sometime
to view its child nodes. Is there a way to avoid this delay in loading child nodes when using 
hierarchical data source?

contextpath= {
        text: "TreeRoot",
        items: [ {
            text: "subgroup1" ,
            items: [ {
                text: "subgroup2",
                items: [ {
                    text: "subgroup3"
                    }]
                }]
            }]
        }]
    };

contextpath1= {
        text: "TreeRoot",
        items: [ {
            text: "subgroup1" ,
            items: [ {
                text: "subgroup2",
                items: [ {
                    text: "subgroup3"
                    }]
                }]
            }]
        }]
    };

array1.push(contextpath)
array1.push(contextpath1).

   var localDataSource = new kendo.data.HierarchicalDataSource({
        data:array1
    });


    var groupTree1 = $("#"+elementId).kendoTreeView({
        dataSource: localDataSource
    }).data("kendoTreeView");

Thanks,
Barani

TreeView

answered on 31 Oct 2014

3 answers

1.0K+ views

Editor change events

I'm using the Editor control with Angular, and would like to only enable a "Save" button if the contents of the editor has changed. Once I load stored text into the editior, I'd like the Save button disabled until the contents have actually changed. Is this possible? Seems the change only fires when focus is lost.

Editor

answered on 31 Oct 2014

1 answer

119 views

adjustRowHeight issue

Inside the kendo.grid.js (or kendo.web.js) there is a function as below. This is called when there are locked columns and incell editing. While debugging, I notice that row1 and row2 has style="height: 27px" (for example) but the row1.clientHeight and row2.clientHeight returns only "23px" - so there is some mismatch in the height always.

Also in terms of jQuery this method is private. So unable to override the behavior.
-Piyush Bhatt

function adjustRowHeight(row1, row2) {
var height;
var clientHeight1 = row1.clientHeight;
var clientHeight2 = row2.clientHeight;

Grid

answered on 31 Oct 2014

1 answer

150 views

Treemap default field for text,value and color

As per the documentation found here (http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/treemap#configuration-valueField) , the default data item field for textField, valueField and colorField are "text", "value", "color" respectively. However, when I do not specify the field name, the default values are not chosen.

I have reproduced this over here : http://dojo.telerik.com/ahejo .
In the above exmaple, the treemap works, when I un-comment the 3 lines for textField, valueField and colorField, but not otherwise.

Am I missing something, or is it a bug?

Thanks,
Abhishek

TreeMap

answered on 31 Oct 2014

3 answers

1.3K+ views

Kendo Grid Sorting of dropdownlist

Hi Telerik Team,

We are
using kendo grid for our asp.net mvc4 application. We are facing below issue

Kendo grid has both text column type and dropdownlist column type in
its row cell.

The issue here is we were able to sort the columns that are text
but not the columns that have dropdownlist. Kindly let know the workaround for resolving this issue.

Thanks
Loga

Grid

answered on 31 Oct 2014

1 answer

181 views

Sparkline Pie Chart Not Respecting Height

I'm trying to use a sparkline pie chart, and it's not obeying the height restrictions imposed upon it. It renders at the correct width, but not the correct height. I considered other styles causing a conflict, but I've declared the CSS inline, which should beat out any styles specified elsewhere.

What am I missing?

<div kendo-sparkline style="width: 20px; line-height: 20px; display: inline-block; height: 20px;"

k-series="[{

type: 'pie',

data: [8,16],

}]">

</div>

Attached is the rendered html. As you can see, the inner span is set to a width of 100px instead of the 20px it should have.

Sparkline

answered on 31 Oct 2014

1 answer

663 views

KendoAngular - Grid with column DateTime and kendo.parseDate not working

Hi,

We are using angularJS and on a page we have a grid. One of the columns in the grid we are supposed to show DateTime. From the service we are getting the data in milliseconds, like: "myNewDate":1408441123075

So for the column in the grid options we:

{
field: "myNewDate",
title: "Date and Time",
width: "15%",
type: "date",
template: "#= kendo.toString(kendo.parseDate(myNewDate, 'yyyy-MM-dd HH:mms'), 'MM-dd-yyyy HH:mms') #"
}

But it is giving us an error on kendo.parseDate. We would like to show not only the Date but also the time in hours and seconds. The way we are assigning
data to the grid is by having an object of DataSource (kendo.data.DataSource).

Can you please let us know how shall we go about it?

Appreciate your quick help on this.

Thanks!

Grid

answered on 31 Oct 2014