Questions on Kendo UI for jQuery Forum

3 answers

191 views

How to prevent inline styles from the tools

I was working with the editor today and noticed that for underline it does an inline <span style="text-etc wrapper on the element instead of the <u> I was expecting.

Why does it do this, cross-browser issue or something?

Editor

answered on 18 Nov 2014

2 answers

757 views

Triggering a change event on the parent observable when calling kendo.data.Model accept method

Although undocumented, the accept method is very useful in certain scenarios, for example when models have a load and save method. In such scenarios, you do not want an object to create a new object that replaces it in the parent viewModel.

var Contact = kendo.data.Model.define({

id: 'id',

fields: {

...

},

load: function(id) {

var that = this;

return $.ajax(...).done(function(data) {

that.accept(data);

});

},

save: function() {

return $.ajax(...);

}

});

Model.accept is especially good in this case because the result is dirty = false, which you want since the data is fresh from database. Unfortunately, this does not cope with MVVM because no change event is raised.

var id=153, viewModel = kendo.observable({

contact = new Contact({});

});

contact.load(id); //does not raise a change event on the viewModel

As a consequence, I have implemented a BaseModel to inherit from that overwrites the accept method as follows:

var BaseModel = Model.define({

accept: function(data) {

var that = this;

//Call the base accept method

Model.fn.accept.call(that, data);

//Trigger a change event on the parent observable (possibly a viewModel)

if ($.type(that.parent) === 'function') {

var observable = that.parent();

if (observable instanceof kendo.Observable) {

$.each(Object.keys(observable), function(index, key) {

if(observable[key] instanceof that.constructor && observable[key].uid === that.uid) { //we have found our nested object in the parent observable

observable.trigger(CHANGE, { field: key }); //otherwise UI won't be updated via MVVM

return false; //once we have found the key and triggered the change event, break out of iteration

}

});

}

});

Is this a fix you would not recommend (any side effects)?
Is there an alternative use of the api that should be preferred?
Otherwise, is this something that could be fixed in Kendo UI?

MVVM

answered on 18 Nov 2014

2 answers

184 views

[Solved] Scrollview headaches

Here is a jsbin:
http://jsbin.com/yacexujequ/6/edit

In second view there's a ScrollView which I want to initialize dynamically via a button.
The problem is the ScrollView is unresponsive. You simply can't swipe through pages.
But if I initialize it on view show, it works without a hitch.
Please tell me what am I doing wrong...

ScrollView (Mobile)

answered on 18 Nov 2014

2 answers

214 views

Parsing on initialization of kendo.data.Model

Initialization of kendo.data.model does not parse fields:

var BadModel = kendo.data.Model.define({

id: 'id',

fields: {

id: {

type: 'string',

},

date: {

type: 'date',

}

}),

now = new Date(),

badObject = new BadModel({

id: '1234567890',

date: now.toISOString()

});

expect(badObject).to.have.property('date').that.is.a('string'); //Mocha test

but setters parse fields:

badObject.set('date', now.toISOString());

expect(badObject).to.have.property('date').that.is.an.instanceof(Date); //Mocha test

So I have defined a subclassed model as follows:

var FixedModel = Model.define({

...

init: function(data) {

var that = this;

$.each(Object.keys(data), function(index, key) {

if ($.type(that.fields[key]) === 'object') {

data[key] = that._parse(key, data[key]);

}

});

Model.fn.init.call(that, data);

}

});

The same applies to Model.accept, which does not parse fields either.

Is this a fix you would not recommend (any side effects)?
Is there an alternative use of the api that should be preferred?
Otherwise, is this something that could be fixed in Kendo UI?

MVVM

answered on 18 Nov 2014

1 answer

174 views

Mobile ListView with Endless scrolling issue

Hi,

I'm having major performance issue with the default example from http://docs.telerik.com/kendo-ui/mobile/listview/endless-scrolling when trying to deploy on an Android device. I tried to turn off the hardware acceleration but still when I scroll down the list loads like 50% height (top of the page) and the loading icon is just flickering.

<div id="orders" data-title="Orders" data-role="view" data-layout="default" data-show="showOrders" data-init="OrdersListInit">
<ul id="ordersList"></ul>
</div>
<script>
function getOrders() {
var data = [], idx = 0;
for (; idx < 1000; idx++) {
data.push({
id: "#" + idx,
amount: "$00" + idx
});
}
return data;
}
var ordersSource = new kendo.data.DataSource({ data: getOrders() });
function OrdersListInit() {
$("#ordersList").kendoMobileListView({
dataSource: ordersSource,
template: "Order #: id # - #: amount #",
endlessScroll: true,
virtualViewSize: 30
});
}
</script>

ListView (Mobile)

answered on 18 Nov 2014

3 answers

341 views

Ranking selections within multiselect

I would like to use a multiselect control to not only pick multiple selections, but rank them in the DB so they appear in that order elsewhere. Once the selections and rankings are saved, other areas in the application will display them in that order, or possibly pick the first/default option.

I'm assuming the order of selected items reflects the order items appear within the multiselect control? So I could just pull them out in order and assign a rank? But if I want to re-order selections, I would have to clear all of them, and re-add in the desired order. Is there any way I could enable drag-drop or some other form of simple re-ordering?

Or maybe there's a better control or method for doing what I'm trying to do. My options, as I see it:

1. Use multi-select (I like the UI), and just instruct users to pick them in the desired order of precedence.
2. Use multi-select to initially select, and another control to pick the default or rank them.
3. Enable/add some more advanced re-ordering UI to multi-select.
4. Use a different control to both select and rank.

Please let me know if I've made any faulty assumptions, or a better option is available.

MultiSelect

answered on 18 Nov 2014

8 answers

274 views

Selecting Event programatically

Hi there
I urgently need to select an event by its ID programatically after the scheduler data has been loaded the first time. How can I achive this?

Best regards

Scheduler

answered on 18 Nov 2014

2 answers

1.4K+ views

[Solved] showColumn() breaks dynamic column sizing

Hi,

My kendoui grid sizes nicely with the parent container size, which is absolutely positioned, so when the window is resized the column elegantly resizes. This works nicely on the x axis, columns are resized appropriately. Unfortunately as soon as I call showColumn() or hideColumn() the dynamic sizing stops, and the column sizes are frozen, causing big white blank space to the right of the grid.

This is quite a serious problem for me, as with one of my datasets, I need to show or hide columns based on the grid data returned. I need to be able to programmatically do this post-grid being populated, and would like it to continue to size dynamically.

Is there any internal method or property I can use, to force the columns back to dynamic sizing after a column is shown or hidden?

Grid

answered on 18 Nov 2014

2 answers

142 views

How can I revert back my selection made to a Datasource Text?

Hi,
I have a dropdown list of say
-Fruits
-Apples
-Orange
-Nothing
-Banana

My initial selection is "Apples". When I select "Nothing" I can stop an event from doing anything but I want the display to not switch to "Nothing" but stay at the old selection say "Apples".

How can I achieve this?

Thanks and Regards
Devna

DropDownList

answered on 18 Nov 2014

3 answers

96 views

AUTOCOMPLETE - MULTIPLE GROUPS OF ELEMENTS - EACH WITH DIFFERENT STYLING - BUT SEARCH RULES SAME

HI,

I NEED TO HAVE MULTIPLE OF GROUPS OF ELEMENTS EACH WITH DIFFERENT STYLING RULES - BUT SAME SEARCH RULE.
ALSO, EACH GROUP OF ITEMS WILL HAVE ITS OWN HEADING AND STYLING.

FOR EXAMPLE
SEARCH FOR JOHN SHOULD FILTER JOHN IN NBA AND NHL TEAM:

NBA TEAM
JOHN DOE
WILL SMITH

NHL TEAM

DRAKE DEAN
JOHN SMITH

IS IT POSSIBLE?

THANKS IN ADVANCE

AutoComplete

answered on 18 Nov 2014