Questions on Kendo UI for jQuery Forum

1 answer

490 views

[Solved] Passing Route Parameters to a View

I'm starting a new project and would like to use Kendo's SPA along with RequireJS for the design; however, I'm running into a roadblock that I just can't get by and I'm hoping someone here has dealt with it in the past. My issue comes down to passing route parameters to a view for rendering. My current sample code is as follows:

main.js

(function () {

require.config({

deps: ["js/jquery"]

});

require(['app'], function(App){

App.start();

});

})();

app.js

define([

'kendo/js/kendo.all.min',

'controllers/ListController'

], function (kendo, list) {

var router = new kendo.Router({

routeMissing: function (e) {

console.log('No Route Found', e.url);

}

});

router.route("list/(:id)", function(id) {

var myIdParameter = id;

// TODO Find a way to pass the myIdParameter to the view I'm about to render.

// Render the view in the "app" div

list.render("#app");

});

return router;

});

ListController.js

define(['kendo/js/kendo.all.min'], function (kendo) {

// TODO I would like to have the "1234" value passed from the route parameter

var viewModel = kendo.observable({

id: "1234"

});

var options = {

model: viewModel

};

return new kendo.View(

"index",

options

);

});

My goal is to use the ListController for the various js logic for creating various kendo widgets for the view I'm trying to render; however, If I can't find a good way to pass parameters along to use with my future datasource calls I going to be stuck. Any push in the right direction here would be greatly appreciated.

Thanks,
-Brendan

SPA

answered on 30 Dec 2014

3 answers

275 views

Weird warning icon shows up

Hi,

I am using multiselect along with other controls on the form.
When submitting a form I get weird icon inside the multiselect (see attached screen shot)
If I remove validator initialization script from document.ready function (turn off valdation) this icon does not show.

What should I do? Do you have an example with multiselect with other controls in the form and validation?

Thanks

Miroslav

MultiSelect

answered on 30 Dec 2014

1 answer

1.8K+ views

change css of Multiselect dropdown list div

how can i change the div property of multiselect dropdown from absolute to relative and
i want to apply change on particular page multiselect dropdown not on all the pages in application please guide me.
These are my firebug code
<div id="select-list" class="k-list-container k-popup k-group k-reset" data-role="popup" style="height:auto; display: none; font-size: 13.6px; font-family: "Segoe
UI",Verdana,Helvetica,sans-serif; font-stretch: normal; font-style: normal; font-weight: 400; line-height: 19px; width: 492px; transform: translateY(-191px);position: absolute;">
<ul id="select_listbox" class="k-list k-reset" unselectable="on" style="overflow: auto; height:auto;" tabindex="-1" role="listbox" aria-hidden="true" aria-live="polite">
<li class="k-item" unselectable="on" data-idx="0" role="option" tabindex="-1" style="display:listitem;">Africa</li>
<li class="k-item" unselectable="on" data-idx="1" role="option" tabindex="-1" style="display:listitem;">Europe</li>
<li class="k-item" unselectable="on" data-idx="2" role="option" tabindex="-1" style="display:listitem;">Asia</li>
<li class="k-item" unselectable="on" data-idx="3" role="option" tabindex="-1" style="display:listitem;">NorthAmerica</li>
<li class="k-item" unselectable="on" data-idx="4" role="option" tabindex="-1" style="display: list-item;">SouthAmerica</li>
<li class="k-item" unselectable="on" data-idx="5" role="option" tabindex="-1" style="display:list-item;">Antarctica</li>
<li class="k-item" unselectable="on" data-idx="6" role="option" tabindex="-1" style="display: list-item;">Australia</li>
</ul>
</div>

i also attach the image of my control

MultiSelect

answered on 30 Dec 2014

3 answers

193 views

[Solved] Problem integrating with Handlebar templating library

I saw it mentioned in this article that kendoui integrates with any 3rd party templating libraries.

So I tried converting one of the sample programs to use handlebars. But unfortunately it doesn't work.

Here is the jsfiddle (note, i've commented out the kendoui template)

http://jsfiddle.net/ZpCAy/64/

What am I doing wrong?

Templates

answered on 30 Dec 2014

20 answers

2.2K+ views

Syntax...

Here's the thing...templates are cool, I love templating...however I'm not a fan of the Kendo syntax.

I think jQuery templates got it right with ${name}

<# name #> becomes confusing when you start having templates with html tags...

'<a class="videolink" href="http://url.com?id=<#= nodeid #>">link to video </a>'

vs

'<a class="videolink" href="http://url.com?id=${nodeid}">link to video </a>'

Of anything Kendo...the template syntax is by far I think the worst design decision (only bad one?)

Templates

answered on 30 Dec 2014

1 answer

16.0K+ views

How to display JSON data source in Kendo UI Grid

I have an existing REST service which returns JSON. I have been instructed to use this REST service and display the returned JSON in a Kendo UI Grid.

My call to the REST service (through JavaScript) returns a JSON object, so I already have the JSON -- my understanding is that I do not have to add a "url" property to the dataSource.

My question is, if you have the JSON object how to you build/write the dataSource to populate the Kendo UI Grid? Or did I ask a question that has been already answered?

Something like this:

JSONObj // returned object from REST call

// formatted like:

/*

{

"items": [

{

"employee": "John Doe",

"team": "INFRASTRUCTURE"

}

]

}

*/

// Build Kendo UI grid datasource...

var sharedDataSource = new kendo.data.DataSource({

data: [JSONObj;]

});

$("#grid").kendoGrid({

dataSource: sharedDataSource,

columns: [

{

field: "employee",

title: "Employee"

},

{ field: "team",

title: "Team",

}

]

});

I hope this makes sense.

I appreciate any help with this -- I am still learning Kendo UI.

Thanks!

Data Source

answered on 29 Dec 2014

3 answers

103 views

Sortable panels broken in v2014.3.1119

Try the demo at http://demos.telerik.com/kendo-ui/sortable/sortable-panels
Panels cannot be dragged in Chrome (latest version) on WIndows 8.1 (latest updates)
It works in IE and Firefox though.

Sortable

answered on 28 Dec 2014

6 answers

668 views

Group Header - Date Format

Hi Guys,

I'm hitting a slight problem with the formatting of dates in a group header.

The situation is as follows:-

- I have a template on a cell to format an ISO 8601 date string into the user's preference using an AngularJS filter

{field: "LOG_CREATED_ISO", title: "Date/Time", width:"150px", template: "{{dataItem.LOG_CREATED_ISO | date:localeShortDate + ' HH:mm:ss'}}"},

Where localeShortDate in this instance is $scope.localeShortDate = 'dd MMM yyyy';

- This works well within the confines of the cell which shows

24 Dec 2014 08:10:42

- But when you group on this column, the header shows

Date/Time: Wed Dec 24 2014 08:10:42 GMT+0000 (GMT Standard Time)

(See attached image)

- I have searched the docs & forums for help on how to format the Group Header to be same as the cell, but have so far drawn a blank.

Therefore any guidance on this matter would be much appreciated.

Regards
Alan

Grid

answered on 27 Dec 2014

6 answers

217 views

Activate Event Issue

In this html (img1), I am trying to re-size the content area of the tabstrip. But on the activate event of the tab strip, the event handler is executed earlier than it is supposed to. So I have to use the setTimeout function to get my page to work properly. I want to make this work without the setTimeout.

If anyone has come across this issue or is willing to help find a solution, it would be great help.

TabStrip

answered on 27 Dec 2014

3 answers

357 views

[Solved] Selecting a sub item in a panelbar

Hello,

Is there a way to capture the select event of a sub item in a panel bar?

Based on the sub item selected, I want to navigate to a different page.

Thanks for your time and help.

PanelBar

answered on 27 Dec 2014