Questions on Kendo UI for jQuery Forum

1 answer

126 views

I'm using the following code to define a custom button background icon:
<style>
.km-root .km-pane .km-view .km-logo {
background-image: url(styles/images/icon40.png);
background-size: 100% 100%;
}
</style>

For some reason it only works on android. IOS shows a blank button. Any thoughts?

Also, is there any way to make the icon span the entire button? Or else to set the gray part to transparent?

Button (Mobile)

answered on 19 Nov 2013

1 answer

100 views

dataSource.add() on Kendo Mobile?

Hi,

i am Using Icenium with kendo.mobile.min.js , jquery.min.js

i am trying to add some data to my datasource.

Let's assume i am in a for loop and every time i go through the loop i want to add some data to my dataSource.

--
var datasource = [ ];

for (var k = 0; k < subjson.length; k++) {
                                                         for (key in subjson[k]) {
                                                             if (subjson[k].hasOwnProperty(key)) {
                                                                 if (key == "name") {
                                                                     var arraycount = array + 1;
                                                                     output = subjson[k][key]

                                                             }
                                                             // retrieve other keys, like link, image, etc.
                                                         }
                                                     }

I tried to use

dataSource.add({ 
name: output });

However i am not getting any luck, since it's always throwing 
Object [object Array] has no method 'add'

Any ideas?

Rgds

General Discussions

answered on 19 Nov 2013

1 answer

5.8K+ views

[Solved] DropdownList dataSource.read and refresh the parameters

Greetings,

I have a problem that probably has a simple solution that I am overlooking. I have created a widget to extend Kendo widget. In the widget I have a DropDownList that seems to "cache" the read.data. I want to be able to have the datasource re-read the data on each post. In the code below the initial read has the correct values, however, when I call datsource.read the data function is not being called again as I would expect.



that.divTestDropDownList.kendoDropDownList({
    dataTextField: "TypeName",
    dataValueField: "TypeID",                
    dataSource: {
        transport: {                        
            read: {
                dataType: "json",
                url: that.options.testUrl,
                data: getTestData()
            }
       }
  }
 
 
function getTestData() {
    return {
        testID: that.divOtherDropDownList.val()
    }
 };
 
//When I Call that.divPlayListDropDownList.data("kendoDropDownList").dataSource.read(); 
//in response to another control change the testID does not change 
//although I can see it has changed in the console

DropDownList

answered on 19 Nov 2013

6 answers

331 views

Fix for iOs 7 status bar problem

I just tried one of our apps in the iOs 7 simulator, and it seems to work fine except for one thing: The status bar change in iOs affects the header in the Kendo Mobile app. The elements from the iOs status bar overlays the title and the button in the header.

What's the recommended way to fix this?

I was thinking about expanding the header, so that enough pixels are reserved for the status bar without it overlaying the other elements. But that should ideally just be done when on iOs 7.

Screenshot attached.

General Discussions

answered on 19 Nov 2013

1 answer

75 views

confirm msg in drop event triggering twice

Hello,
I'm trying to show a confirm message in the drop event that allows the user to cancel the move.

onDrop(e){
e.setValid(confirm('Are you sure you want to move this folder?'));
}

the functionality seems to work, but the confirm message seems to be triggering twice. I am using the latest version (2013.2.1104) and this seems to be occurring in all browsers.

TreeView

answered on 19 Nov 2013

1 answer

206 views

Bubble Chart - is it possible to show labels on individual entries ONLY WHEN THEY'RE BIG ENOUGH?

See the attached image - that's what I want to do :-) Is it possible?

Charts

answered on 19 Nov 2013

8 answers

156 views

ModalView input field and keyboard

Hi,
I have found a bug in Kendo mobile demo. If you open ModalView in the demo and click on the input field, the native keyboard pushes the whole modal up, and you can no longer see the input field, even when typing.

Bug is reproducible on Android 4.1.2 native browser. Samsung Galaxy S2 phone.

Any ideas on how to fix this?

ModalView

answered on 19 Nov 2013

4 answers

295 views

Using Window with MVVM

I am attempting to use the Kendo Window system with an MVVM model, where the window pops up to edit data, and then returns it to the opening page, but I am having a difficult time finding any examples of this... Even the documentation seems very unhelpful. Are there any samples of such a thing?

Window

answered on 19 Nov 2013

3 answers

258 views

How to instantiate declarative widgets within content template

I have a kendo window with the content property set to an object as follows:

content: {

url: "/api/agent/genealogyupline?agentNumber=" + agentNumber,

dataType: "json",

template: kendo.template($("#genealogy-upline-template").html())

}

The template is defined as follows:

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

<div data-role="grid" data-columns='["Level", "AgentName", "Status"]' data-bind="source: data"></div>

</script>

The window opens but the declarative grid widget isn't initialized. Is there a need to call kendo.init() explicitly after the template is created? If so, I'm not sure how to inject the applicable code.

Thanks,
Gary

Window

answered on 19 Nov 2013

3 answers

231 views

Change Event not firing from splicing nested ObservableArray

Using the following code, splicing the ObservableArray does not seem to appropriately fire the change event.

kendo.data.ObservableArray.prototype.remove = function (value) {

var array = this;

$.each(array, function (idx, item) {

if (item !== undefined) {

if (value.data.uid === item.uid) {

array.splice(idx, 1);

return true;

}

});

}

Now I call it like this, within the view model.

onRemove: function (e) {

e.data.parent().remove(e);

}

Where this function is on a nested child, so an array like this ...

{

Name: "Top Level",

Collection: [

{

Name: "First Child",

SubCollection: [

{

Name: "First Sub Child",

onRemove: function (e) {

e.data.parent().remove(e);

}

},

{

Name: "Second Sub Child",

onRemove: function (e) {

e.data.parent().remove(e);

}

]

},

{

Name: "Second Child",

SubCollection: [

{

Name: "Third Sub Child",

onRemove: function (e) {

e.data.parent().remove(e);

}

},

{

Name: "Fourth Sub Child",

onRemove: function (e) {

e.data.parent().remove(e);

}

]

}

Using this templating...

<div data-role="listview"

data-template="tmpl-demo-first-child"

data-bind="source: Collection"></div>

<script type="text/html" id="tmpl-demo-first-child">

<div>

<h2 data-bind="text: Name"></h2>

<div

data-role="listView"

data-template="tmpl-demo-sub-children"

data-bind="source: SubCollection"></div>

</div>

</script>

<script type="text/html" id="tmpl-demo-sub-children">

<div>

<div

style="width: 120px;

float: left;

text-align: center;

font-size: 1.6em;

vertical-align: middle;"

data-bind="text: Name, click: onRemove">

</div>

</script>

Using this setup, when I click on the sub child, with the intention to use its OnRemove function to remove it from its parent, it does update the actual view model, which is apparent because I can have the view model in a pane to the side with its change event subscribed, printing out the JSON. But the actual
HTML doesn't update, because the item does not vanish from the DOM.

MVVM

answered on 19 Nov 2013