Questions on Kendo UI for jQuery Forum

6 answers

219 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

171 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

308 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

238 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

100 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

68 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

170 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

3 answers

119 views

Chart navigator

I'm having trouble getting the navigator to display.

See below code that should run in the dojo.

I've also tried this from the stock chart example:

navigator: {

series: {

type: "area",

field: "value"

},

select: {

from: "7/6/2014",

to: "7/7/2014"

}

},

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/financial/index">

<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

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

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

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

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

<script src="http://cdn.kendostatic.com/2014.1.528/js/jquery.min.js"></script>

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

</head>

<body>

<div id="example">

<div class="demo-section k-content">

<div id="chart"></div>

</div>

<script>

var categories = ["7/5/2014", "7/6/2014", "7/7/2014", "7/8/2014"];

var initialData = [{ value: 33, date: "7/5/2014" }, { value: 20, date: "7/6/2014" }, { value: 15, date: "7/7/2014" }, { value: 21, date: "7/8/2014" },

{ value: 5, date: "7/5/2014" }, { value: 3, date: "7/6/2014" }, null, { value: 25, date: "7/8/2014" },

{ value: 1, date: "7/5/2014" }, { value: 1, date: "7/6/2014" }, { value: 1, date: "7/7/2014" }, { value: 1, date: "7/8/2014" },

{ value: 10, date: "7/5/2014" }, { value: 10, date: "7/6/2014" }, { value: 1, date: "7/7/2014" }, { value: 7, date: "7/8/2014" },

]

var initialSeries = [{

name: "Product Nuggets",

data: [{ value: 33, date: "7/5/2014" }, { value: 20, date: "7/6/2014" }, { value: 15, date: "7/7/2014" }, { value: 21, date: "7/8/2014" }],

color: "#f43c42"

},

{

name: "Product Costco Colombian Blend",

data: [{ value: 5, date: "7/5/2014" }, { value: 3, date: "7/6/2014" }, { value: 3, date: "7/6/2014" }, { value: 25, date: "7/8/2014" }],

color: "#f3ac32"

}, {

name: "Station Line",

data: [{ value: 1, date: "7/5/2014" }, { value: 1, date: "7/6/2014" }, { value: 1, date: "7/7/2014" }, { value: 1, date: "7/8/2014" }],

color: "#b8b8b8"

}, {

name: "Blox 130514000002",

data: [{ value: 10, date: "7/5/2014" }, { value: 10, date: "7/6/2014" }, { value: 1, date: "7/7/2014" }, { value: 7, date: "7/8/2014" }],

color: "#bb6e36"

}];

function createChart() {

$("#chart").kendoChart({

title: {

text: "Recall"

},

legend: {

visible: true,

position: "left"

},

seriesDefaults: {

type: "line",

missingValues: "gap",

//stack: {

// type: "1"

//}

},

series: initialSeries,

valueAxis: {

line: {

visible: false

},

minorGridLines: {

visible: true

}

},

dateField: "date",

dataSource: { data: initialData },

categoryAxis: {

categories: categories,

majorGridLines: {

visible: false

}

},

navigator: {

series: [

{ field: "value", type: "area"}

]

},

tooltip: {

visible: true,

shared: true,

format: "N0"

//template: "#= series.name #: #= value #"

}

});

}

$(document).ready(createChart);

$(document).bind("kendo:skinChange", createChart);

</script>

</div>

</body>

</html>

Charts

answered on 10 Jul 2014

5 answers

189 views

Kendo grid issue in iPAD

Hi Team,

kendo Grid not showing all records in last page in iPad. Issue replicating in Demo site also. URL: http://demos.telerik.com/kendo-ui/web/grid/index.html

Steps to reproduce: 1. Load the above URL.2. Arrange the items per page to ‘20’3. Click on the last but one pagination link (ex: 4 in above URL) and scroll down to the bottom of the grid.4. Click on the pagination link for the last page. Observe blank grid or grid loading with only few records. If we tap on the grid/try to scroll up on the grid then it will show all the records.

thanks
Sekhar.

Grid

answered on 10 Jul 2014

1 answer

92 views

conversion of kendo by clicking on button

Hi All,

I want to display kendo multi select in each row of a grid which has 2000 records, somehow page gets hanged.
I log an SO : http://stackoverflow.com/questions/24607953/kendo-multi-select-initialization-for-two-thousand-records

I m using JgGrid to do populate the grid. I there any way to restrict the page from hanging or to increase the performance..

Any help is deeply appreciated..

MultiSelect

answered on 10 Jul 2014