Questions on Kendo UI for jQuery Forum

10 answers

409 views

How to do editing on grid expanded template tab view

Hi:
Do you have example on how to do editing on grid templating in your example detail template where the Contact tab data is from the same datasource and when editing is enabled and when user changed the data on the tab form, how can the save button will do the saving for the grid including the customer tab form data changed.

Also the field template of setting null to blank is not carrying over to the tab templated form data?

Thanks,

Grid

answered on 14 Oct 2014

1 answer

340 views

Kendo Templates Are Not Working With Typescript (parent().parent() is missing)

Hello There

I'm trying to convert the WebSushi application for Typescript.

For some reason, when you use a class the Kendo Template is not able to discover the parent().parent().

class MyViewModel extends kendo.data.ObservableObject {

items: kendo.data.DataSource;

constructor(myItems: kendo.data.DataSource) {

super();

super.init(this);

this.items = myItems;

}

addToCart(e): void {

alert("Hello There!");

}

var myData: Array<any> = [

{ "id": 1, "name": "Sashimi salad", "price": 12.0, "image": "http://demos.telerik.com/kendo-ui/content/spa/websushi/images/200/sashimi-salad.jpg", "category" : "Cold starters", "description" : "Organic greens topped with fresh sashimi, wasabi soy vinaigrette.", "featured" : true },

{ "id": 2, "name": "Chirashi sushi", "price": 21.0, "image": "http://demos.telerik.com/kendo-ui/content/spa/websushi/images/200/chirashi-sushi.jpg", "category" : "Cold starters", "description" : "Sushi bar variety with sushi rice.", "featured" : false

}];

var myItems = new kendo.data.DataSource({ schema: { model: {} }, data: myData });

var viewModel: MyViewModel = new MyViewModel(myItems);

var myView = new kendo.View("index-template", { model: viewModel });

myView.render($("#application"));

Here are the templates, the same as we have in WebSushi:

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

<ul data-role="listview" data-bind="source: items" data-template="item" id="main"></ul>

</script>

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

<li class="products">

<a class="view-details" href="\#">

<img class="main-image" src="#= image #" alt="#: name#" title="#: name #" />

<strong data-bind="text: name"></strong>

<span class="price"><span>$</span><span data-bind="text: price"></span></span>

</a>

<button class="add-to-cart" data-bind="click: addToCart">Add to cart</button>

</li>

</script>

<div id="application"></div>

The point is, I cannot catch the addToCart click event with MyViewModel.
If I debug, the model.parent().parent() is missing.

But! If I use only Javascript like the WebSushi it works.

var indexModel = kendo.observable({

items: myItems,

addToCart: function (e) {

alert("Hello There!");

}

});

What am I doing wrong?

Please, check the example here:
http://jsfiddle.net/ertzajLn/6/

Thanks!

Templates

answered on 14 Oct 2014

1 answer

110 views

Setting a filter causes treeview to lose important dom attributes

I have a treeview and implement drag and drop. I noticed that when I set a filter on the datasource, the treeview loses attributes like:

data-role="draggable"
data-role="drop-target"
data-expanded="true"

And the drag and drop stops working.

See this dojo for an example. Examine the dom to see the attributes are there on the first tree node. Click the "Set Filter" button, and observe the attributes are gone.

http://dojo.telerik.com/AvASa/6

This seems like a bug.. Maybe I'm doing something wrong here?

Thanks,
Ryan

TreeView

answered on 14 Oct 2014

2 answers

257 views

Problem with append of tabs

After appending tabs, the behavior when switching tabs is not correct (using Chrome at the moment). Please run the code sample below.

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

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

<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.1008/styles/kendo.rtl.min.css">

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

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

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

<link rel="stylesheet" href="//cdn.kendostatic.com/2014.2.1008/styles/kendo.mobile.all.min.css">

</head>

<body ng-app='app'>

<div ng-controller='Ctrl'>

<div>Add two tabs, click on the 2nd, then the 3rd. Then click on tabs 1 or 2.

<a href="" ng-click="addTab()">{{label}}</a>

</div>

<div id="tabstrip" kendo-tab-strip>

<ul>

<li class='k-state-active'>Tab 1</li>

</ul>

<div>This is content for tab 1</div>

</div>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

<script src="//code.angularjs.org/1.3.0/angular.min.js"></script>

<script src="//cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>

<script>

(function(){

var app = angular.module('app', ['kendo.directives']);

app.controller('Ctrl', function($scope) {

var i = 2;

$scope.label = "Add Tab";

$scope.addTab = function() {

$('#tabstrip').kendoTabStrip().data('kendoTabStrip').append({

text: 'Tab ' + i,

content: 'This is context for tab ' + i

});

i++;

};

});

})();

</script>

</body>

</html>

TabStrip

answered on 14 Oct 2014

1 answer

163 views

Mobile ListView - Press To Load More Issue

I have been unable to get the "Mobile ListView - Press To Load More" to function if I set the page size below 50. It also seems to mess up scrolling for some reason.

At first I thought that my OData implementation was at fault but then I realized that the Telerik Demo does the exact same thing.

To reproduce this simply go to
http://demos.telerik.com/kendo-ui/mobile-listview/press-to-load-more

Edit the example in the Kendo UI Dojo and change the page size to something like 20. After running the demo I am experiencing the following issues:

1. Scrolling to the bottom of the list then immediately back to the top creates a gap at the top of the list
2. After the initial scrolling of the list, if you use your mouse wheel the list behaves very erratically.
3. Clicking the "Press to Load More" button only causes the loading icon to appear but no additional results are loaded.

ListView (Mobile)

answered on 14 Oct 2014

1 answer

91 views

Window is not preventing access to the form it covers

I am using a KendoUI window to popup a search dialog. If the user tabs through the search criteria fields, when tabbing off the last form item, they end up in the form that is being covered by the overlay and can interact with the form in the background. Mouse clicks are prevented but pressing tab seems to not be limited in scope to only controls on the window.

Window

answered on 14 Oct 2014

3 answers

541 views

Dynamically change window actions

Hi

I created an error window using Kendo UI Window. In some error cases it should be possible to close the window and in some not.
Is there a way to change the window actions dynamically?

I tried:

errorWindow.data("kendoWindow").actions = ["Close"];

Recreated the window to the same id.
Both technics do not work...

Regards
Adrian

Window

answered on 14 Oct 2014

3 answers

131 views

[Solved] Export functionality

Hi,
Is there an export to pdf and export to excel functionality in the grid. I am not using the MVC model. I am implementing it in the normal HTML model.
Thanks in advance
Regards,
Vijay

Grid

answered on 14 Oct 2014

3 answers

102 views

Pre-populating a treeview with remote data source

Hello,

I would like to build a tree partially when the page is rendered and then tie it to a data source so that any subsequent node expansions will fetch data from a remote data source. What I am trying to accomplish is to restore the state the tree next time the user accesses the site.

Is this currently possible? Any examples you could provide would be very helpful.

Thanks and regards,
Mads

TreeView

answered on 14 Oct 2014

1 answer

230 views

[Solved] Scroll to anchor (widget)

I need to scroll window to anchor or specific element. I have several ListView in window content.
I would like to scroll to specific ListView on some user event. How?

Window

answered on 14 Oct 2014