Questions on Kendo UI for jQuery Forum

3 answers

706 views

Hello,

I am currently evaluating the KendoUI product against other toolsets. I am looking to be able to drag and drop an item from the grid to the tree view. I seem to have almost everything working except for finding out what element I am hovering over in the tree.

I have debugged the code below in Chrome and I am able to see the text of the item I am hovering over but not the id I assigned to it. The application I am working on can have the same folder name in different parent folders.

Any suggestions as to how to get this to work? I would really like to use KendoUI but this seems to be a deal breaker.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>Viewer</title>

<script src="../../Scripts/kendoUI/jquery.min.js" type="text/javascript"></script>

<script src="/Scripts/kendoUI/kendo.all.min.js" type="text/javascript"></script>

<link href="../../Content/styles/kendo.common.min.css" rel="stylesheet" />

<link href="../../Content/styles/kendo.default.min.css" rel="stylesheet" />

<script src="../../Scripts/kendoUI/people.js" type="text/javascript"></script>

</head>

<body>

<div class="page">

<section id="main" >

<div id="example" class="k-content" style="height: 650px;">

<div id="horizontal" style="height: 100%; width: 100%;">

<div id="vertical">

<div>

<p>

Inner splitter :: Top

</p>

</div>

<div>

<ul id="treeview">

<li id="3.6" data-expanded="true">Item 1

<ul>

<li id="1.6">Item 1.1</li>

<li id="2.6">Item 1.2</li>

<li id="9.6">Item 1.3</li>

</ul>

</li>

<li id="4.6">Item 2

<ul>

<li id="7.6">Item 2.1</li>

<li id="5.6">Item 2.2</li>

<li id="6.6">Item 2.3</li>

</ul>

</li>

<li id="8.6">Item 3</li>

</ul>

</div>

<div>

<div id="grid" style="height: 100%; width: 100%;"></div>

</div>

<script>

function droptargetOnDrop(e) {

var treeView = $("#treeview").data("kendoTreeView");

var selectedNode = treeView.select();

treeView.append({ text: "Add test node..." }, selectedNode);

}

$(document).ready(function () {

$("#vertical").kendoSplitter({

orientation: "vertical",

panes: [

{ collapsible: true, size: "50%" },

{ collapsible: true, size: "50%" }

]

});

$("#horizontal").kendoSplitter({

panes: [

{ collapsible: true, size: "20%" },

{ collapsible: true, size: "80%" }

]

});

$("#treeview").kendoTreeView({

dragAndDrop: true

});

$("#grid").kendoGrid({

dataSource: {

data: createRandomData(50),

pageSize: 10

},

selectable: true,

groupable: true,

scrollable: true,

sortable: true,

pageable: true,

columns: [{

field: "FirstName",

width: 90,

title: "First Name"

}, {

field: "LastName",

width: 90,

title: "Last Name"

}, {

width: 100,

field: "City"

}, {

field: "Title"

}, {

field: "BirthDate",

title: "Birth Date",

template: '#= kendo.toString(BirthDate,"dd MMMM yyyy") #'

}, {

width: 50,

field: "Age"

}

]

});

$("#grid").kendoDraggable({

filter: "tr",

hint: function () {

var g = $("#grid").data("kendoGrid")

return g.select().clone()

}

});

$("#treeview").kendoDropTarget({

drop: droptargetOnDrop

});

</script>

</section>

<footer>

</footer>

</div>

</body>

</html>

Drag and Drop

answered on 09 Mar 2012

9 answers

235 views

More IE8 issues

I've looked at all the IE8 issues in the forums so far, but I haven't seen this problem yet.

I'm running with jQuery 1.7.1, but this particular page is NOT using any jQuery UI scripts.

There are 4 graphs that render on the page...they render using Firefox, Chrome, IE7 and even IE8 on a Windows 2008 server. They will not render, however, on IE8 running on Windows XP. I get the chart grid and the axis labels, but no lines on a line graph.

I tried adding the easing workaround, but that didn't change anything.

Anyone have any suggestions for this setup? Unfortunately, our entire company is using IE 8 on Windows XP, so it's killing me that this is the one browser combination that I can't get to work. Thanks.

Charts

answered on 09 Mar 2012

2 answers

116 views

Pie Chart Series Explosion

Is it possible to have a Piece of the Pie Chart exploded? eg. like Excel where a piece can be shown extracted from the pie slightly

Charts

answered on 09 Mar 2012

1 answer

459 views

DataSource.sync() doesn't call create.

I would like to add data to a kendoGrid from a form, not a grid toolbar.
I'm able to add data to the grid with the add() method but when I call sync() on dataSource, create: it never gets called.

This example code it's close to my original code statement even if - in fact - I'm using remote data binding. Anyway, it gives me the same results

HTML:

<div class="k-toolbar">

<input type="text" id="inputColor"></input>

<button id="addColorButton">Add Color</button>

</div>

<div id="grid"></div>

JS:

var colors = [{

"ID": 1,

"Name": "Blue"},

{

"ID": 2,

"Name": "Red"

}];

var dataModel = new kendo.data.Model.define({id: "ID"});

var localDataSource = new kendo.data.DataSource({

transport:{

read: function(options){

options.success(colors);

},

create: function(){

alert('Creating...');

}

},

schema: {

model: dataModel

}

});

$('#grid').kendoGrid({

dataSource: localDataSource,

columns: [{title:"Color", field:"Name"}]

});

$('#addColorButton').bind("click", function(){

localDataSource.add({

Name: $('#inputColor').val()

});

localDataSource.sync();

});

I'm doing something wrong? Any ideas?

Data Source

answered on 09 Mar 2012

1 answer

179 views

template is encoding results from function

Hello all,

I have a template in a column in which I want to dive into logic and show or now show a link based on other values

{ title: "Job Location Notes", template: "${ showLogLink(JobLocationNotes,JobID) }" },

and the function is something simple like

function showLogLink(JobLocationNotes, JobID) {

if (JobLocationNotes != null && JobLocationNotes != "") {

return JobLocationNotes +

" <a href='javaScript:;' data-url='../ModalWindows/JobLocationNotes.aspx' title='Location Notes' class='jobLocationLink' data-id='"

+ JobID + "'>Log</a>";

}

else {

return "";

}

It works except the output is encoded.
So instead of seeing "Log"
I see "

 <a href='javaScript:;' data-url='../ModalWindows/JobLocationNotes.aspx' title='Location Notes' class='jobLocationLink' data-id='7

'>Log</a> "

Thanks!

Grid

answered on 09 Mar 2012

1 answer

183 views

Load On Demand

I want to only initialize\kendoify (tm) the window after a button click to help with performance...so the question is how can I check to see if it's ALREADY been initialized when the button is clicked again.

Is it like $("#window").data("kendoWindow") === null or something?

What's the proper syntax for that?

Window

answered on 09 Mar 2012

1 answer

1.0K+ views

Creating Hyperlinks on Grid Row Items?

HI All,

I have been trying to create hyperlinks on Grid Items, i mean to say when a row item is clicked i want to navigate it to a different page based on the selection. I'm trying to achieve it using the change event and attaching an handler to it. I have attached the partial code snippet in here, but it doesn't seem to be working. Can anyone help me with this or is there a work around?

Thanks & Regards,

Harsha

---
$("#grid").kendoGrid({

height: 250,
groupable: true,
selectable: "row",
change: onSelect,
scrollable: true,
sortable: true,
columns: {}
})
---
function onSelect(arg){
var clicked = $("#grid").data("kendoGrid");
$(clicked).prop("href", "newPage.html");

)

Grid

answered on 09 Mar 2012

1 answer

125 views

Showing Remote Data using Primary Key

Hello,

I'm looking at the Demo for Binding the DataSource to Remote Data (http://demos.kendoui.com/web/datasource/remote-data.html). Based on the demo, I was wondering if it's possible, rather than searching tweets by the text of a tweet, to show all the information of the tweet from the tweet's id (it's primary key).

I've stripped down the demo and created a jsfiddle to kind of demonstrate what I need: http://jsfiddle.net/NAFfD/1/ For now, the code receives the string "kendo ui" and shows tweets containing the string, as well as the from_user, from_user_id, and id. I would rather the code receive an id (the primary key), then return the from_user, from_user_id and text. Is that possible?

Any help would be greatly appreciated.

Data Source

answered on 08 Mar 2012

4 answers

208 views

Implementation In Zend Framework

I am PHP developer. Can anybody tell me how Kendo UI can be integrated with Zend_View.
Thank you

General Discussions

answered on 08 Mar 2012

1 answer

132 views

Autocomplete drop down is too narrow for me

I am trying KendoUI for the first time. Auto complete is the first UI I tried. I could get the selection working. I am using local data sample. But the drop down is too narrow and not even the first character is visible. But when I select right selection happens. I have enclosed the picture here. When I type s all the countries starting with s are lined up in the drop down. But does not show. Please let me know. Thank you.

-Anand

AutoComplete

answered on 08 Mar 2012