Questions on Kendo UI for jQuery Forum

5 answers

450 views

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

819 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")

DatePicker

answered on 21 Jan 2013

4 answers

235 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

245 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

2 answers

144 views

[Solved] ListView & paging = loss of styles

Hi all,

Thanks for your great & quick support. Glad I chose Kendo :-).

My problem is that I'm losing button's styles on the 2nd page of a listview when paging is activated. Even clicks are not working anymore for those buttons.

I made a JSBin with this problem: http://jsbin.com/atataj/4/edit (scroll & click on "Load More" and you will notice that all buttons of the 2nd page are not styled & not working)

Hope somebody can help me.

Thanks,
Bastien

ListView (Mobile)

answered on 21 Jan 2013

2 answers

117 views

Using data-modal="false" not working as expected?

Hi all,

When I put data-modal="false" on my modalview, clicking on the screen is closing the modalview, but even if I click inside the modalview it's closing it.

I was expecting that the modalview would close only if the user is clicking outside of it.

I have the following HTML

<div id="modalview-post-details" data-role="modalview" style="width: 100%; height: 70%;" data-modal="false">

</div>

As the height of the modalview is set to 70%, there's enough space to click outside of it to close it.

Is it a bug or is it working like this? And if it's working like this, how can I close the modalview only when the user clicks outside the modalview?

Thanks for your help!
Bastien

ModalView

answered on 21 Jan 2013

4 answers

310 views

Extreme performance issue with Hierachical DS/TreeView when loadOnDemand=false

Every node causes a call to _initChildren even if it doesn't have children.

If i have one root node with 1000 children (leafs w/o children) the call to _initChildren is made 1001 times. If you use load on demand the call is only done for the nodes you expand, and nodes without children can't be expanded. It is obvious that the information on wheter the node has children or not is available before the _initChildren is called. For larges datasources (~1000 nodes) this often causes the browser to halt (alerting ~A script is causing the page to run slowly..).

By changing kendo.data.js (start line 2832 in 2012.2.913) from:

load: function() {

var that = this,

options = {};

that._initChildren();

if (!that._loaded || that.hasChildren) {

options[that.idField || "id"] = that.id;

if (!that._loaded) {

that.children._data = undefined;

}

that.children.one(CHANGE, function() {

that._loaded = true;

})

._query(options);

}

},

To:

load: function() {

var that = this,

options = {};

if (that.hasChildren)

{

that._initChildren();

options[that.idField || "id"] = that.id;

if (!that._loaded) {

that.children._data = undefined;

}

that.children.one(CHANGE, function() {

that._loaded = true;

})

._query(options);

}

},

The loading time is cut by ~80% (one typical example would be from 30s to 7s) in my average trees (a lot more in the example given above).

Though I don't now it the above code change can have any unforseen consequences, or if there is a better way to accomplish a similar effect.

Would love to hear you thoughts on this.

Hierarchical Data Source

answered on 21 Jan 2013

2 answers

86 views

Event getting fired after 5 to 6 clicks (Responsiveness very slow) for input tag

Implemented camera feature using HTML5 input tag.
code :
--------
<div data-role="view" id="tabstrip-camera" data-title="camera" data-layout="mobile-tabstrip" id="Camera">

<input data-click="alert('clciked');" type="file" name="image" accept="image/*" capture>
</div>

When tried on iOS 6 safari browser and Android chrome browser the camera is getting opened after 5 to 6 clicks.
File is attached for reference. The responsiveness of the button is very bad.
Please let me know if any js or css file to be added or modified.

General Discussions

answered on 21 Jan 2013

7 answers

470 views

Not resizing properly - Landscape/Portrait

When switching between landscape to portrait view and vice-versa... the scrollview is not re-adjusting it's width correctly, what would be causing this to occur?

ScrollView (Mobile)

answered on 20 Jan 2013

2 answers

268 views

[Solved] .scrollTo() without animation

Hello

Is any way to temporary disable animation for .scrollTo(page) method?
I tried something like this:

that._ScrollView.duration = 1;

that._ScrollView.scrollTo(activePage);

that._ScrollView.duration = 300;

but with no success...

I am trying to implement infinite scroll view (for swiping between news articles).
My Scroll view has 3 pages. So, when user swipes from 2 -> 3 the content moves from 2 to 1, from 3 to 2, and the new article loads into the third page, and ScrollView scrolls to the second page again (without animation).

ScrollView (Mobile)

answered on 20 Jan 2013