Questions on Kendo UI for jQuery Forum

2 answers

268 views

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

179 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

461 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

0 answers

59 views

Adding components in Grid Paginator Div

Hi,

Is it possible to add some components like, dropdowns, buttons etc and binding event handler for them in the paginator div of the Grid?

Regards,
Khushali A Sandhi

Grid

asked on 15 Feb 2012

1 answer

83 views

columns show aggregates

how are you columns show aggregates of value in the cell?. these are standard sum, average, maximum, minimum and aggregate formulas built-in?

Grid

answered on 15 Feb 2012

1 answer

2.6K+ views

String.Replace in Template

I want to replace a character a string within a template, is there a way I can do that?

I tried the following but get an invalid template

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

#= kendo.toString(replaceString(#= Name #))#

</script>

<script type="text/javascript">

function replaceString(value) {

return value.replace(",", "<br />");

}

</script>

Templates

answered on 15 Feb 2012

2 answers

150 views

How can get Grid data from server using AJAX?

How can i get Grid data from server using JQuery AJAX?

Thanks in advance.

Atit

Grid

answered on 15 Feb 2012

1 answer

330 views

How to split the DataSource JSON response

I am presently returning dataType 'json' in a kendo DataSource that is assigned to a grid.

I would also like to display the total number of rows returned. Therefore, I modified my JSON result to include this information in the result, and I have assigned the data being returned to a rows property:

{ count: 99, rows: { ... } }

I need help with two things:

How do I associate the kendo Grid dataSource to the rows property of the JSON result?
How can I retrieve the count property from the dataSource result?

Thanks,
Gary

Data Source

answered on 15 Feb 2012

1 answer

77 views

sort by

Hello,

is it possible to show column A in the dropdownlist and sort by column B (data coming from json). And if so, how to do this in the code.

thanks in advance,
Gert-Jan

DropDownList

answered on 14 Feb 2012

1 answer

97 views

Code Library For KendoUI?

Are there any plans to add a code library on this site as you have for all other products? If not where should I post some useful code and files?

Thank you,
James Campbell

General Discussions

answered on 14 Feb 2012