Questions on Kendo UI for jQuery Forum

1 answer

83 views

I can't seem to get the chart to render in IE (above mentioned versions). It does work fine in chrome. Any ideas? The script below simply creates a datasource in a server side class and returns the data to create a pie chart.

{edit} I was able to display a chart in IE8 but only if I copied my script/html into a .HTM file. If I run the same "code" in an ASPX file within my asp.net application it fails within one of the .js files. Does this mean that this particular set of lightweight UI controls would not work using asp.net?

var graphData = new kendo.data.DataSource( {

transport: {

read: {

type:

"POST",

url:

"data_reader_webservice.asmx/GetDataJSON",

data: { DeviceID: $(

"#deviceList").data("kendoDropDownList").value(),

ParameterID: $(

"#parameterList").data("kendoDropDownList").value(),

startDate: $(

"#startDate").data("kendoDatePicker").value(),

endDate: $(

"#stopDate").data("kendoDatePicker").value()

},

contentType:

"application/json; charset=utf-8",

dataType:

"json"

},

parameterMap:

function (options) {

return JSON.stringify(options);

}

},

schema: {

data:

"d",

model: {

fields: {

ParameterID: { type:

"string" },

ParameterName: { type:

"string" }

}

},

error:

function (e) {

alert(e[0].responseText);

}

});

graphData.read();

$(

"#chart_test").kendoChart({

title: { text:

"Tha Chart!" },

chartArea: { width: 600, height: 400 },

seriesDefaults: { type:

"pie" },

dataSource: graphData,

series: [{field:

"ParameterValue", name: "value"}],

categoryAxis: { field:

"DeviceID", name: "id" }

});

Charts

answered on 15 Feb 2012

1 answer

150 views

No Text on buttons

Hi,

Is there away to make the buttons don't have text? Just the icon? suggested code below.

<a href="#" data-role="button" data-icon="add" data-style="notext"></a>

Button (Mobile)

answered on 15 Feb 2012

1 answer

340 views

Dynamically Loading Content

Coming from Silverlight, I am looking to create remote widgets (or components) that encapsulate all of their operation and look and feel into a single html/script file which can be loaded dynamically.   I would like to stay within the confines of HTML/JS/CSS rather than dipping into ASP.NET MVC.

The widgets need to be displayed within the div they are assigned to and automatically handle window/container re-sizing events, as well as pass context information from the controller to the component/widget.   (Think portal/dashboard).

Are there any examples which illustrate how to accomplish this?

Also, while looking at the Kendo source, I noticed that the components use kendo.ui.widget framework.   Should this be the mechanism that I use to create these components?   If so, are there any documents or examples which illustrate how to roll-your-own?

Thanks.

General Discussions

answered on 15 Feb 2012

3 answers

365 views

[Solved] Changing dataSource on chart won't update my chart.

I want to update the dataSource of my chart based on a selection in a kendoDropDownList, however no change is applied (and neither do I see exceptions).

$('#parking-filter-select').kendoDropDownList({

dataSource: usageData,

change: function (e) {

var value = $('#parking-filter-select').val();

var chart = $('#chart-utilization').data("kendoChart");

chart.dataSource = new kendo.data.DataSource({

data: usageData[value].Usage

});

chart.refresh();

}

});

$('#chart-utilization').kendoChart({

title: {

text: "Parking utilization for week"

},

dataSource:{

data: usageData[0].Usage

},

series:[{

type: "column",

field: "Max",

name: "Max utilization"

}],

categoryAxis:{

field: "Week"

},

tooltip: {

visible: true,

template: "${ Max } of ${ Capacity }"

},

legend: {

visible: false

}

});

I tried setting chart.dataSource.data too, but that also didn't work.

Charts

answered on 15 Feb 2012

3 answers

67 views

Bug(?): Column bars don't animate up to the right height when system under slight but not extreme load.

All values from datasource are exactly '1'. As you can see the bars don't render up correctly, when the animation is running it seems to hit the right height, and then shoot back.

Chrome: 18.0.1025.11 beta-m
KendoUI: 2011.3.1129. (from NuGet, no updates available on 15-2-2012).

Charts

answered on 15 Feb 2012

0 answers

154 views

splitter resizing

Posted 13 minutes ago (permalink)

hello,

here is my html code
<div id="splitter1">
            <div id="splitter1leftpane"></div>
            <div id="splitter1rightpane">
                <div id="splitter2" >
                    <div id="splitter2toppane"></div>
                    <div id="splitter2bottompane"></div>
                </div>
            </div>
        </div>
</div>
i am setting min = 100 max = 300 orientation horizontal on splitter1,
i am setting min = 100 max = 300 orientation vertical on splitter2,
initially splitter 1 is sized to max
but when i resize splitter 1 to min, it gets stuck & doesnt again resize to max

thanks & regards

chirag jani

Splitter

asked on 15 Feb 2012

4 answers

217 views

Splitter problem with expand

http://jsfiddle.net/WNcQJ/2/

1. drag the splitter to the left
2. Collapse it to the right.

The splitter stays at the same place and icons dissapear.

What am I doing wrong.

Splitter

answered on 15 Feb 2012

2 answers

306 views

Ruby on Rails - JSON and Nested Grids

Hello,

I saw this Kendo blog post on how to do nested Grids in PHP: http://www.kendoui.com/blogs/teamblog/posts/12-01-18/get_rolling_with_kendo_ui_and_php_ndash_part_1.aspx

I am essentially trying to do the same thing, however I have data coming from Rails and I can't seem to get this example to work with my Rails code. If I need to provide you more code, please let me know.

The project is using nested models - Posts and Comments. Each Post has a 'title' and 'content' field. Each Comment also has a 'title' and 'content' field.

Posts have many Comments and each Comment has a post_id associated with it in the database.

When I render views on the server, I use this path to get comments:

http://localhost:3000/posts/1/comments

This would render all the comments for Post #1. And the Post JSON would look like this:

{"content":"My first post","created_at":"2012-02-07T18:56:16Z","id":1,"title":"Hello","updated_at":"2012-02-07T18:56:16Z"}

If I wanted a specific comment, I would put

http://localhost:3000/posts/1/comments/7

The Comment JSON would come out like this:

{"content":"Interesting","created_at":"2012-02-10T22:16:45Z","id":7,"post_id":1,"title":"Great post!","updated_at":"2012-02-10T22:16:45Z"}

Since there is a post_id attribute on the Comment, I'm assuming I'd need to filter for that on the sub-grid.... but I'm not sure how to do that.

Here is what I have so far:

var PostsData = new kendo.data.DataSource({

transport: {

read: "/posts.json"

}

});

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

dataSource: PostsData,

columns: [

{

field: "title",

title: "Title"

},

{

field: "content",

title: "Content",

}],

detailTemplate: kendo.template($("#posts-grid-template").html()),

detailInit: detailInit

});

function detailInit(e) {

// Reference current row being initialized

var detailRow = e.detailRow;

// Create a subgrid for the current

// detail row, getting comments for the post

detailRow.find(".posts-grid").kendoGrid({

dataSource: {

transport: {

read: "comments"

},

schema: {

data: "content"

},

serverFiltering: true,

filter: { field: "post_id", operator: "eq", value: e.data.post_id }

},

columns: [{ title: "Comments", field: "content" }]

})

}

Here is the html code that contains the templates:

<h1>Kendo Grid Test</h1>

<div id="nav"></div>

<div id="container">

</div>

<script type="text/template" id="users-grid-template">

<p>Users Grid Template</p>

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

</script>

<script type="text/x-kendo-template" id="posts-grid-template">

<div class="comments-grid"></div>

</script>

<script type="text/template" id="nav-template">

<div>

<ul id="nav_container">

<li><a href="#users">Users</a></li>

<li><a href="#posts">Posts</a></li>

</ul>

</div>

</script>

Any help is greatly appreciated!

Grid

answered on 15 Feb 2012

1 answer

237 views

Hyphens in Xml element names breaks DataSource

Kendo DataSource does not appear to work with XML that has hyphenated (element) names.

For instance, try a working XML-bound demo and change the XML source element names and field references to include hyphen(s).

I'm not expecting to have to escape the '-' character in the field XPath expressions... am I overlooking something?

I don't have the luxury or modifying the web service that provides this data.

Would appreciate comments from anyone able to reproduce, work around, or otherwise enlighten me about this issue.

Data Source

answered on 15 Feb 2012

2 answers

499 views

Validator does not work out of box for select elements with "multiple" attribute

Kendo Validator does not process the required rule as expected for select elements that have the "multiple" attribute.

E.g. consider the following example code:

<div id="myform">

<select name="color" required multiple>

<option value="">Select...</option>

<option value="red">Red</option>

<option value="orange">Orange</option>

<option value="yellow">Yellow</option>

<option value="green">Green</option>

</select>

<button id="save" type="button">Save</button>

</div>

<script>

$(document).ready(function(){

var validatable = $("#myform").kendoValidator().data("kendoValidator");

$("#save").click(function() {

if (validatable.validate()) {

alert('Valid');

} else {

alert('Not valid');

}

});

</script>

Action:

No options are selected (or only "Select..." is selected)
Click "Save"

Expected result:

validatable.validate() returns false and "Not valid" shows in the alert box.

Actual result

validatable.validate() returns trueand "Valid" shows in the alert box.

If you remove the "multiple" attribute from the example code, validatable.validate() returns false as expected when "Select..." is selected.

[EDIT]
Apologies. I did not include all information requested in the sticky topic, nor did I really ask a question.

The above is true on the following set-up:

Kendo UI version: v2012.3.106
OS: Windows 7
Browsers: Chrome 18.0.1025.11, Internet Explorer 8.0.7601.17514
jQuery version: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

And I suppose my question would be: Has anyone else here run into this issue and found a robust solution? I am currently investigating some hackish workarounds using the custom rule configuration.

TIA

Validation

answered on 15 Feb 2012