Questions on Kendo UI for jQuery Forum

1 answer

490 views

Dear all;
I really needhierarchical dropdownlist. I have not found any solution to this.
How can I do to implementation ahierarchical dropdownlist?

DropDownList

answered on 30 Dec 2014

4 answers

479 views

Masked TextBox inside listview | regular expression not working

Hi friends

I am new to Kendo controls. I have a specific situation in which the regular expression for phone number is not working.
I am using Masking for Phone number textbox. I have this kind of text box for phone number in multiple pages but somehow its not working in listview(edit).
Please have a look at the below code and if i have missed anything, please let me know. I have used the code of existing Kendo Listview MVVM sample and made changes for Product Name. when 'edit' is clicked it will change the product name to masked text box. I have given regular expression for Phone number masked text box to accommodate 10 digits phone number, but somehow its not working here. Please see this part of the code.
<dd>
<input title="Phone Number"
name="PhoneNumber"
type="text"
class="k-textbox k-invalid"
required=""
data-bind="value: PhoneNumber"
data-mask="(000) 000-0000"
data-role="maskedtextbox"
data-value-update="keyup"
placeholder="Phone Number"
pattern="^$([0-9]{3})$ {1}([0-9]{3})-{1}([0-9]{4})$" />
</dd>

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/listview/mvvm">

<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />

<script src="http://cdn.kendostatic.com/2014.3.1119/js/jquery.min.js"></script>

<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>

<link rel="stylesheet" href="../content/shared/styles/examples-offline.css">

<script src="../content/shared/js/console.js"></script>

</head>

<body>

<div id="example">

<div class="demo-section k-header">

<div class="box-col" style="width: 420px;">

<h4>Update a record</h4>

<div data-role="listview"

data-edit-template="edit-template"

data-template="template"

data-bind="source: products,

visible: isVisible,

events: {

save: onSave

}"

style="width: 420px; height: 200px; overflow: auto"></div>

</div>

<div class="box-col console-section">

<h4>Console</h4>

<div class="console"></div>

</div>

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

<div class="product-view k-widget">

<div class="edit-buttons">

<a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>

<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>

</div>

<dl>

<dt>Product Name</dt>

<dd>#:ProductName#</dd>

<dt>Unit Price</dt>

<dd>#:kendo.toString(UnitPrice, "c")#</dd>

<dt>Units In Stock</dt>

<dd>#:UnitsInStock#</dd>

<dt>Discontinued</dt>

<dd>#:Discontinued#</dd>

</dl>

</div>

</script>

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

<div class="product-view k-widget">

<div class="edit-buttons">

<a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a>

<a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>

</div>

<dl>

<dt>Product Name</dt>

<dd>

<input title="Phone Number"

name="PhoneNumber"

type="text"

class="k-textbox k-invalid"

required=""

data-bind="value: PhoneNumber"

data-mask="(000) 000-0000"

data-role="maskedtextbox"

data-value-update="keyup"

placeholder="Phone Number"

pattern="^$([0-9]{3})$ {1}([0-9]{3})-{1}([0-9]{4})$" />

</dd>

<dt>Unit Price</dt>

<dd>

<input type="text" data-bind="value:UnitPrice" data-role="numerictextbox" data-type="number" name="UnitPrice" required="required" min="1" validationMessage="required" />

<span data-for="UnitPrice" class="k-invalid-msg"></span>

</dd>

<dt>Units In Stock</dt>

<dd>

<input type="text" data-bind="value:UnitsInStock" data-role="numerictextbox" name="UnitsInStock" required="required" data-type="number" min="0" validationMessage="required" />

<span data-for="UnitsInStock" class="k-invalid-msg"></span>

</dd>

<dt>Discontinued</dt>

<dd><input type="checkbox" name="Discontinued" data-bind="checked:Discontinued"></dd>

</dl>

</div>

</script>

<div class="box">

<div class="box-col" style="width: 420px;">

<h4>Configuration</h4>

<div>

<label><input type="checkbox" data-bind="checked: isVisible">Visible</label>

</div>

<div class="box-col">

<h4>Information</h4>

Kendo UI ListView supports the

<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,

<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and

<a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.

</div>

<script>

var viewModel = kendo.observable({

isVisible: true,

onSave: function(e) {

kendoConsole.log("event :: save(" + kendo.stringify(e.model, null, 4) + ")");

},

products: new kendo.data.DataSource({

schema: {

model: {

id: "ProductID"

}

},

batch: true,

transport: {

read: {

url: "http://demos.telerik.com/kendo-ui/service/products",

dataType: "jsonp"

},

update: {

url: "http://demos.telerik.com/kendo-ui/service/products/update",

dataType: "jsonp"

},

destroy: {

url: "http://demos.telerik.com/kendo-ui/service/products/create",

dataType: "jsonp"

},

parameterMap: function(options, operation) {

if (operation !== "read" && options.models) {

return {models: kendo.stringify(options.models)};

}

})

});

kendo.bind($("#example"), viewModel);

</script>

<style scoped>

.product-view

{

float: left;

position: relative;

width: 400px;

margin: -1px -1px 0 0;

}

.product-view dl

{

margin: 10px 0;

padding: 0;

min-width: 0;

}

.product-view dt, dd

{

float: left;

margin: 0;

padding: 3px;

height: 32px;

width: 180px;

line-height: 32px;

overflow: hidden;

}

.product-view dt

{

clear: left;

padding: 3px 5px 3px 0;

text-align: right;

opacity: 0.6;

width: 100px;

}

.product-view .k-textbox {

width: auto;

}

.edit-buttons

{

position: absolute;

top: 0;

right: 0;

width: 26px;

height: 160px;

padding: 2px 2px 0 3px;

background-color: rgba(0,0,0,0.1);

}

.edit-buttons .k-button

{

width: 26px;

margin-bottom: 1px;

}

.k-pager-wrap

{

border-top: 0;

}

span.k-invalid-msg

{

position: absolute;

margin-left: 6px;

}

</style>

</div>

</body>

</html>

I will really appreciate some help on this.

Regards
Varun

MaskedTextBox

answered on 30 Dec 2014

1 answer

506 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

282 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

197 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

104 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

683 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