Questions on Kendo UI for jQuery Forum

7 answers

767 views

Change event not firing when making items draggable

I want to add drag/drop functionality to a listview. Therefore I made the items of the listview draggable. As a result of this, the change event is not raised anymore when clicking the items.

$("#listView").kendoListView({

dataSource: dataSource,

selectable: true,

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

change: function (e) {

alert('change');

},

dataBound : function () {

$(".product").kendoDraggable({

hint: function (element) {

return element.clone();

}

});

}

});

See http://jsfiddle.net/OnaBai/MYbgy/1 for the full example

ListView

answered on 11 Jul 2014

1 answer

204 views

[Solved] How to change a PanelBar Image

I am planning to use Panel bars with section of user input fields, a verification will happen for each section and a the image of the panel should show error or success validation result.

How can I change a panel bar image using javascript.

Thanks.

PanelBar

answered on 11 Jul 2014

2 answers

98 views

[Solved] KendoUi format broken after require.js optimize

Hi all,

I have a Backbone application with multiple KendoUi [v2013.2.918; kendo.all.min.js] components e.g. Grid, NumericTextBox. To display this value "12,5 h" in a numericTextBox, I use this:

this.$('.kendoHourInput').kendoNumericTextBox({

format: '#.0 h'

});

For the development Version, not optimized with r.js (requie.js), everything works as expected. For the production Version, after the r.js optimizer, this format breaks the app:

Uncaught TypeError: Cannot read property 'numberFormat' of null

The predefined formats like "c2" or "p" works without a problem. Could it be a problem with the kendo.culture('de-DE') I use? I had similar problems with the library globalize.js, which overrides the kendo.culture. Is there a known dependency to another library who could break the optimized-code? There is a 2nd library with dependencies to globalize.js:

require.js-config

shim: {

...

someLib: {

deps: ['globalize']

}

There is a forum entry on the kendo site, with a similar problem. The solution should be to load the kendo library before the globalize library. If I take a look to the script-tags on the index.html, kendo comes before globalize. So, this is not a solution that works for me.

For more information, please let me know.

Thanks

Sascha

Globalization

answered on 11 Jul 2014

6 answers

257 views

Donut Chart Explosion Distance & General Issues

Hello,

I have the following donut chart created by the latest build. (First image)
And it is my aim to create the given chart. (second image)

My questions are;

-Are there an option to change the distance of explosion?
-Is it possible to convert the label ": - %30" to only "%30" ?
-Is it possible to put a small circle behind those labels as in second image?

Thanks and hope to hear back from you asap!

Charts

answered on 11 Jul 2014

1 answer

187 views

Fire event without change

I'm trying to fire an event without change happening and I'm having some trouble figuring it out.

I have the Kendo UI widget on my webpage and the default value is #000000 when the color picker loads. If I click the Apply button in the color picker the 'change' event doesn't fire because I didn't change anything. If I change the slider and click 'Apply' then the value changes and is also put into the 'input text' field.
How do I get it so the value #000000 is set when I click Apply without changing anything?

Code snippet:
<input type="text" class="text colorPicker" size="25" maxlength="100" title="${geo:loc attribute="title" phrase="Please enter the hexadecimal value for the font color." /}" name="${geo:object name='CntwChooseColorScheme.PRIMHEAD_FONTCOLOR' attribute='name'/}" id="${geo:object name='CntwChooseColorScheme.PRIMHEAD_FONTCOLOR' attribute='id'/}" value="${geo:object name='DERIVED_COMPONENT.Wizard.GetValue(CntwChooseColorScheme.PRIMHEAD_FONTCOLOR)' attribute='value'/}" /> <input id="primaryheaderfontcolor" type="color" value="${geo:object name='DERIVED_COMPONENT.Wizard.GetValue(CntwChooseColorScheme.PRIMHEAD_FONTCOLOR)' attribute='value'/}" /> <script> $("#primaryheaderfontcolor").kendoColorPicker({ value: "#000000", buttons: true, change: function(e) { $('#prim_head_font_color').val(e.value); console.log("The picked color is ", e.value); console.log(e); } }); </script>

ColorPicker

answered on 11 Jul 2014

1 answer

335 views

Tab appended dynamically with close icon.

Hi,

I was wondering if it is possible to have in a tab created dynamically a close (X) icon and having a click event registered to it so when detected to fire remove() method and remove the specific tab from the tabstrip?
I imagine it similar to the tabs of Chrome or FireFox browsers.

I hope it's clear what I describe here.

Thanks!

George Panagopoulos

TabStrip

answered on 11 Jul 2014

2 answers

256 views

Scrollview in modalview not refreshing content

Hi,

we want to implement a image gallery with a scrollview within a modalview.
We have articles with different images and want to show these images if the user clicks on a link to the image gallery.
When the user clicks the link we replace the data source from the scrollview with the a new datasource with the new images (with setDataSource) and open the modalview. The pages are set with the help of a template.

The problem is, that the datasource doesn't get updated properly.
If we don't set a datasource for the scrollview on the init of the application the scrollview shows the amount of items (pager) but the the pages doesn't contain any data. The template doesn't is not set.
If we set a dummy data source at the beginning for the scrollview and change the datasource when the user opens the modalview the dummy data is still visible. Furthermore if the new datasource contains more items than the dummy datasource, the new items start after you scroll through the dummy pages.

This is the link to the dummy project in jsbin if no initial datasource is set: http://jsbin.com/IZaYexac/15/edit
and this is if a initial dummy datasource is set: http://jsbin.com/IZaYexac/16/edit

Am I doing anything wrong during setting the datasource?
Thank you very much

Here is the Code from JSbin

<!DOCTYPE html>

<html>

<head>

<title>KendoUI Test Page</title>

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

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

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

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

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>

</head>

<body>

<div data-role="view">

<br/>

<a data-role="button" data-click="openModal">Sign In</a>

</div>

<div data-role="modalview" id="scrollview-home" style="width: 100%; height: 100%" data-modal="false">

<div data-role="header">

<div data-role="navbar">

<span>Gallery</span>

<a data-click="closeModalViewLogin" data-role="button" data-align="left">Cancel</a>

</div>

<div id="scrollview-container">

<div id="scrollview" style="padding-top: 20%" data-role="scrollview"

data-template="tmpl"

data-items-per-page="1">

</div>

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

<div data-role="page"> #=title#</div>

</script>

<style>

</style>

<script>

function openModal(e) {

var dataSource = new kendo.data.DataSource({

data: [

{title:"Item 1", desc:"Description 1"},

{title:"Item 2", desc:"Description 2"},

{title:"Item 3", desc:"Description 3"},

],

pageSize: 7

});

$("#scrollview").data("kendoMobileScrollView").setDataSource(dataSource);

$("#scrollview").data("kendoMobileScrollView").refresh();

$("#scrollview-home").data("kendoMobileModalView").open();

}

var app = new kendo.mobile.Application(document.body, {skin: 'flat'});

</script>

</body>

</html>

Best regards
Mar

ScrollView (Mobile)

answered on 11 Jul 2014

1 answer

134 views

Why does mobile use data attribute initialization but web does not?

How come to mobile documentation has switched to using "<div data-role="view">
<a href="#my-modal" data-rel="modalview" data-role="button">Open Modal</a>
</div>

<div data-role="modalview" id="my-modal" style="width: 200px; height: 200px;">
Hello!
</div>

<script>
new kendo.mobile.Application();
</script>" as the new format for initializing widgets whereas the web documentation only uses "<select id="multiselect" multiple="multiple">
<option>Item1</option>
<option>Item2</option>
</select>
<script>
$("#multiselect").kendoMultiSelect({
animation: false
});
</script>" to initialize? Is there a reason why mobile is being done this way vs the javascript way? My company used the javascript initialization way for almost all widgets since that was what the API documentation used to show. Is javascript initialization no longer working in mobile? Most of my widgets work fine still, but the modalView specifically behaves completely wrong when initialized in javascript. Styles don't get applied at all.

General Discussions

answered on 11 Jul 2014

2 answers

83 views

When changing dropdown value there is error in console and model is not updated

Hi,
I have got problem with setting current value of selected dropdown value.
Now when I am changing dropdown the error occurs "Uncaught TypeError: undefined is not a function"
and model is not updated.
What is wrong with code ?
My problem is described by code available at http://jsbin.com/ritor/

MVVM

answered on 11 Jul 2014

2 answers

194 views

Reusing HTML

Hi,

I am writing a Kendo SPA application that uses MVVM. I have a bit of HTML and functionality (for choosing a user) that I will be reusing throughout my application. The functionality is as follows:
There will be a label containing a user name next to a button. The user can click on the button and a popup window appears containing a textbox and a button. The user puts a search term in the textbox and clicks the button. The user is presented with a list of relevant users under the button and textbox. Once they click on a user in the list, the window closes and the label in the main page contains the new user name.

I am able to package up the functionality in a requirejs module but not sure how to include the html and use it all in the Kendo window as described above.

Can you please point me in the right direction and let me know the recommended approach?

Thanks,

SPA

answered on 10 Jul 2014