Questions on Kendo UI for jQuery Forum

2 answers

198 views

grid loading json data from php datasource that contains html

Ok, bear with me on this one.

My grid is being populated by a basic php get request that pulls all records from the database. Basic, it works like a charm.
However, the content that is pulled from the db does contain html formatting. I can strip the html via php before it gets encoded into the json object (I've confirmed this does work) however, once it becomes json, the html tags are back and the grid displays all the content in a not so human friendly way.

so 2 questions...
1- is there a better way of getting rid of the html content in the json data, as it's not specifically necessary in the grid view but used elsewhere on the site it is so removing completely is not possible.
2- or is there a way to get the html content to display in the grid?

Any help in a timely manner would be beneficial as I'm likely to drop using Kendoui at some point today as this has already cost me about a days worth of time. And I want to keep Kendo ;)

Thanks!

Grid

answered on 09 Mar 2012

3 answers

724 views

Drag and drop item from Grid to Tree

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

249 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

131 views

[Solved] 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

475 views

[Solved] 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

192 views

[Solved] 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

200 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.1K+ 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

135 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