Questions on Kendo UI for jQuery Forum

2 answers

375 views

For the case of user based selection of an item, the change event is fired.

For the case of programmatic selection by way of select(), value() or search() it appears that the change event is not fired.
Q: Is this a design feature ?
Q: If yes, would there be any reason not to use a programmatic _change() after the selection?

DropDownList

answered on 21 Jan 2013

1 answer

368 views

How to access custom data attributes in a Switch's data-change function

I've seen various comments on best practice for doing this, but nothing definitive (that I've found) on the proper way to do this.

Given this:

<input data-role="switch" data-change="switchChangedHandler" data-subscriptionId="10" id="switch1"/>

<input data-role="switch" data-change="switchChangedHandler" data-subscriptionId="9" id="switch2"/>

<input data-role="switch" data-change="switchChangedHandler" data-subscriptionId="8" id="switch3"/>

How best to access subscriptionId in the handler function?

function switchChangedHandler(e) {

// I've seen this in a forum example but is it really the best way?

var subscriptionId = e.sender.element.context.dataset.subscriptionId;

// How to best get it?

}

somehow the solution shown doesn't seem like the "Kendo" way.

Switch (Mobile)

answered on 21 Jan 2013

2 answers

130 views

Kendo vs Vs2012 and intellisense

Hi, I've searched much for this topic but I din't find a solution that works for me..

I'm developing a web site with html5/css 3/jquery and Kendo web.

I have a main page (aspx) that references all the global js like kendo, jquery and the vsdoc files.
than I have some userControl page (ashx) that does not reference the same file but just their own js (ex users.ashx with user.js)

now, the intellisense works fine in the main page (in a script tag) and just there...
any other js referenced from the main page does not have the intellisense on kendo (or jquery)...

do you have any idea on how to set vs to use kendo intellisense on every js page? (without referencing again the vsdoc file in every page)?

thanks to all!

General Discussions

answered on 21 Jan 2013

3 answers

281 views

Splitter panes defined with data attributes

I'm just getting started with a Kendo UI evaluation and am trying to define a splitter using data attributes (vs. the jquery .kendoSplitter() approach), but can't find examples of how to define the panes this way. I'm trying to set up simple 2-panes, 50/50 split.

Thanks in advance.

Splitter

answered on 21 Jan 2013

4 answers

156 views

Dublicate Node Delete

Hi all,

So I'm adding some duplicate nodes on my tree like this:

var fatherNode_DataItem = treeview.dataItem(treeview.select());

var nodeText = prompt("Please enter desired Node Name to be copied:","default");

var dataItem_toBeCopied = treeview.dataItem(treeview.findByText(nodeText));

fatherNode_DataItem.append(dataItem_toBeCopied);

So I get a copy of the node I inputed on the prompt.
Which means when I select one of the copies,all the node copies and the original are selected.
And if I change the dataItem attributes of one of the copies,all the dataItems are changed even though separate copies for each one of the copies is kept on the data Source.
I am ok with that,it's what I wanted.

The problem is that I want to delete one of the copies later,but If I try

var dataItem = treeview.dataItem(treeview.select());

treeview.remove(dataItem);

all the copies and the original are deleted alltogether!
I also tried:

$("#treeview").find(".k-state-selected").each(function() {

if(confirm("Delete: " + $(this).text() + " with Father: " + treeview.text(treeview.parent($(this).closest(".k-item"))))) {

treeview.remove($(this).closest(".k-item"));

}

});

But on the first "ok" of a confirm, every node copy along with the original gets deleted again...not only the copy that I clicked ok for...

Is there a way I can delete only one of the copies based on it's parent?? (the copies will never have the same parent that's why I want to select which one to delete based on their parents)

TreeView

answered on 21 Jan 2013

8 answers

169 views

bottom tabbar on android

Hello,

I would like to have bottom tabbar on android, like it's on Iphone.
How to do this?

Best regards,
Tobias

TabStrip (Mobile)

answered on 21 Jan 2013

5 answers

399 views

Problems customizing listview edit demo

I have taken the listview edit demo customized it. Can anyone please help me with the following issues I am having?

1. I would like the listview item to go into edit mode upon selection (instead of using the edit, save, cancel button if possible)
2. Currently when I enter in values for multiple lines, if I hit cancel on one line item, the values clear out for all other list items.

Here is my example code...

//JSON file data

[

{"questiontext":"Please enter the first name.","control":{"type":"textbox","label":"First Name"},"answer":"","comment":"This is where the comment goes"},

{"questiontext":"What is the status?","control":{"type":"combobox","label":"Status:","item":[{"itemtext":"Open","itemvalue":"OP"},{"itemtext":"Canceled","itemvalue":"CA"},{"itemtext":"Closed","itemvalue":"CL"},{"itemtext":"Complete","itemvalue":"CO"}]},"answer":"","comment":""},

{"questiontext":"What is the status?","control":{"type":"radiobutton","label":"Status:","item":[{"itemtext":"Open","itemvalue":"OP"},{"itemtext":"Canceled","itemvalue":"CO"},{"itemtext":"Closed","itemvalue":"CL"},{"itemtext":"Complete","itemvalue":"CO"}]},"answer":"","comment":""},

{"questiontext":"What was the date of the incident?","control":{"type":"datetime","mask":"datetime","label":"Date:"},"answer":"","comment":""},

{"questiontext":"What was the date of the incident?","control":{"type":"datetime","mask":"dateonly","label":"Date:"},"answer":"","comment":""},

{"questiontext":"What was the date of the incident?","control":{"type":"datetime","mask":"timeonly","label":"Time:"},"answer":"","comment":""}

]

<!DOCTYPE html>

<html>

<head>

<title>Editing</title>

<link href="../../iqaListTest/content/kendo/2012.3.1114/examples-offline.css" rel="stylesheet">

<link href="../../../iqaListTest/content/kendo/2012.3.1114/kendo.common.min.css" rel="stylesheet">

<link href="../../../iqaListTest/content/kendo/2012.3.1114/kendo.default.min.css" rel="stylesheet">

<script src="../../../iqaListTest/scripts/kendo/2012.3.1114/jquery.min.js"></script>

<script src="../../../iqaListTest/scripts/kendo/2012.3.1114/kendo.web.min.js"></script>

<script src="../../iqaListTest/scripts/kendo/2012.3.1114/console.js"></script>

</head>

<body>

<a class="offline-button" href="../index.html">Back</a>

<div id="example" class="k-content">

<div class="k-toolbar k-grid-toolbar">

<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a>

</div>

<div class="listview-holder">

<div id="listView"></div>

</div>

<!--<div id="pager" class="k-pager-wrap">

</div>-->

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

<div class="iqa-view">

<dl>

<dt>Question</dt>

<dd>${questiontext}</dd>

<dt>${control.label}</dt>

<dd>${answer}</dd>

<dt>Comment</dt>

<dd>${comment}</dd>

</dl>

<div class="edit-buttons">

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

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

</div>

</script>

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

<div class="iqa-view">

<dl>

<dt>Question</dt>

<dd>${questiontext}</dd>

<dt>${control.label}</dt>

<dd>

#if (control.type == 'textbox') { #

<input type="text" data-bind="value:answer" name="answer" required="required" validationMessage="required" />

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

# } else if (control.type == 'combobox') { #

<select data-role="combobox" data-text-field="itemtext" data-value-field="itemvalue" data-bind="source:control.item, value:answer"></select>

# } else if (control.type == 'datetime' && control.mask == 'datetime') { #

<input data-role="datetimepicker" data-bind="value:answer" />

# } else if (control.type == 'datetime' && control.mask == 'dateonly') { #

<input data-role="datepicker" data-bind="value:answer" />

# } else if (control.type == 'datetime' && control.mask == 'timeonly') { #

<input data-role="timepicker" data-bind="value:answer" />

# } #

</dd>

<dt>Comment</dt>

<dd>${comment}</dd>

</dl>

<div class="edit-buttons">

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

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

</div>

</script>

<script>

$(document).ready(function () {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: "iqaData.txt",

dataType: "json"

}

});

var listView = $("#listView").kendoListView({

dataSource: dataSource,

template: kendo.template($("#template").html()),

selectable: "single",

editTemplate: kendo.template($("#editTemplate").html())

}).data("kendoListView");

$(".k-add-button").click(function (e) {

listView.add();

e.preventDefault();

});

</script>

<style scoped>

.iqa-view

{

float: left;

width: 650px;

margin: 5px;

padding: 3px;

-moz-box-shadow: inset 0 0 50px rgba(0,0,0,0.1);

-webkit-box-shadow: inset 0 0 50px rgba(0,0,0,0.1);

box-shadow: inset 0 0 50px rgba(0,0,0,0.1);

border-top: 1px solid rgba(0,0,0,0.1);

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

}

.listview-holder

{

width: 700px;

margin: 0 auto;

padding: 0;

border: 0;

border: 1px solid rgba(0,0,0,0.1);

height: 400px;

overflow: auto;

}

.iqa-view dl

{

margin: 10px 0;

padding: 0;

min-width: 0;

}

.iqa-view dt, dd

{

float: left;

margin: 0;

padding: 0;

height: 30px;

line-height: 30px;

}

.iqa-view dt

{

clear: left;

padding: 0 5px 0 15px;

text-align: right;

opacity: 0.6;

width: 100px;

}

.k-listview

{

border: 0;

padding: 0;

min-width: 0;

}

.k-listview:after, .iqa-view dl:after

{

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

.edit-buttons

{

text-align: right;

padding: 5px;

min-width: 100px;

border-top: 1px solid rgba(0,0,0,0.1);

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

}

.k-toolbar, #listView

{

width: 660px;

margin: 0 auto;

-webkit-border-radius: 11px;

-moz-border-radius: 11px;

border-radius: 11px;

}

span.k-invalid-msg

{

position: absolute;

margin-left: 160px;

margin-top: -26px;

}

</style>

</div>

</body>

</html>

ListView

answered on 21 Jan 2013

1 answer

767 views

Kendo.DatePicker dissapears after Invalid date validation

Hi there,

We are experiencing an issue with the datepicker in IE 8, 9 and 10.

Steps to replicate:

1. Enter '15/31/2012' in the datepicker field.
2. Click on Save (do a post). You should get the invalid date message.
3. Delete the invalid date.
4. Click Save again. The datepicker disappears.

The date picked disappears. We tested on latest browser versions and this happens for IE and FF. Chrome doesn't seem to show the "invalid date" message and the datepicker stays visible.

Let me know if you need any more info.

View:

[Required]
[Display(Name = "Effective Date")]
[DataType(DataType.Date)]
public DateTime EffectiveDate { get; set; }

Editor Template:

@model DateTime?

@(Html.Kendo().DatePickerFor(m => m)
.Name("datePicker")

Date/Time Pickers

answered on 21 Jan 2013

4 answers

187 views

javascript debug with tabstrip

Hello Telerik,

I have now written a html 5 page with KendoUI TabStrip control to involve some other html pages in it. I am now stuck because I was wondering how to debug the inline javascript codes within nested paged. Neither firebug and chrome dev tools could detect the scripts, i mean i could not ever find the scripts file in the debugging tools. How coult i get over it, please help.

TabStrip

answered on 21 Jan 2013

3 answers

201 views

data-zoom

I've got a view with data-zoom="true" and an image in it for pinch and zoom... however I'd like to add a legend which I don't want zooming. is it possible to do that?

General Discussions

answered on 21 Jan 2013