Questions on Kendo UI for jQuery Forum

1 answer

672 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

347 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

114 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

146 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

179 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

651 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

4 answers

359 views

ColumnMenu doesn't display correct title when used with AngularJS template

Hi,
I have to translate column titles of a kendo grid created with AngularJS directives.

I used ngTranslate to manage translations and set the column title like

title : "{{ 'FIRSTNAME' | translate }}"

All works fine, including live language switch. Columns titles reflect language changes and display the correct translation.
Unfortunately the column menu display wrong titles.

When I expand column menu I see the following text

{{ 'FIRSTNAME' | translate }}

instead translation.

I have attached
- a zip including an html file (create with your dojo) to replicate the issue
- an image that show as column menu appears when AngularJS filter are used in column title

I need that column menu display translation in the same way the grid do.

Can you help me?

Thanks

Grid

answered on 31 Oct 2014

9 answers

434 views

Chart Tooltips with buttons

Hello,

I'm playing around with chart tooltips (kendo.dataviz.chart & kendo.dataviz.sparkline)
Using a function to provide the tooltip content I'm able to customize its content in order to add some buttons (used to launch actions from each tooltip directly).
The problem that I'm having is that I can't figure out how to keep mouse focus while staying over of the tooltip and trying to click anyone of the buttons. I need to prevent the chart control to draw a new tooltip when the pointer is moving away from the original chart point.

Is there any way to handle the mouse behaviour over a tooltip object? (I've checked with autoHide: false and showOn: "click" - no luck)
Is there a better way to have "buttons" or "actions" associated to points in charts?

Thanks,
Walid

Charts

answered on 31 Oct 2014