Questions on Kendo UI for jQuery Forum

3 answers

171 views

Cascading combo boxes and timed out authentication

Can anyone advise on the recommended approach to cascading combo boxes when the user could be "timed out" from their session when they select from the first list.

Basically, the first list is populated by being bound to the mvc model on page load. However, the second is defined to pull data from the server via a json Response.

The issue is that if, between loading the first page and the user selecting something from that list, the user is timed out of their session the list doesn't get populated, not error is display, and the list is populated with a lot of "undefined" values.

So, my question is, what's the best practice for handling this situation with kendo mvc?

here's the code for the view..

<div class="row">

<div class="leftbox">

@Html.LabelFor(m => m.OrganisationId)

</div>

<div class="rightbox">

@(Html.Kendo().ComboBoxFor(m => m.OrganisationId)

.BindTo(Model.OrganisationList)

.Placeholder("Select Organisation")

.Suggest(true)

.Filter(FilterType.Contains)

.HtmlAttributes(new { @class = "kendoDropdown wideDropdown", selectWidth = "400" }))

</div>

<div class="row">

<div class="leftbox">

@Html.LabelFor(m => m.UserId)

</div>

<div class="rightbox">

@(Html.Kendo().ComboBoxFor(m => m.UserId)

.Placeholder("Select User")

.DataSource(source => source.Read(read => read.Action("GetUsers", "Auth").Data("getOrganisationId")).ServerFiltering(true))

.DataTextField("value")

.DataValueField("id")

.HtmlAttributes(new { @class = "kendoDropdown wideDropdown"})

.Enable(false)

.AutoBind(false)

.CascadeFrom("OrganisationId")

.Events(e => e.Change("enableButton") )

</div>

ComboBox

answered on 21 Jan 2014

1 answer

334 views

using 'template' property with grid with typescript

Using the official Kendo UI typescript definitions, trying to use the "grid" in the following manner refuses to compile; The error points to the toolbar property. This code works fine in normal javascript, and has never given me any trouble until I tried to use TypeScript.

this.elements.grid = $('#grid').kendoGrid({

dataSource: {

transport: {

read: {

url: "/administrator/data/items",

dataType: "json",

type: 'GET',

cache: false

}

},

schema: {

total: "total",

data: "data"

},

page: 0,

pageSize: 15,

take: 15,

serverPaging: true,

serverFiltering: true,

type: "aspnetmvc-ajax"

},

toolbar: kendo.template($("#search-byName").html()),

pageable: {

refresh: true,

pageSizes: true

},

selectable: "row",

columns: [

{

field: "Id",

width: 25,

title: "Identity"

},

{

field: "Name",

width: 40,

title: "Name",

template: "<div class='#: Quality.CSS #'>#: Name #</div><div>#: (Origin.Label != null) ? Origin.Label : '' #</div>"

}

],

change: function (e) {

// get the selected row from the grid

var selected = this.select();

// get the data from the selected row

var data = this.dataItem(selected);

// update the model

viewModel.map(data.toJSON());

// perform binding as needed

viewModel.subscribe();

// set the mode to editing, since we have

// selected an existing item

viewModel.set("Editing", true);

},

}).data("kendoGrid");

Grid

answered on 21 Jan 2014

1 answer

113 views

Async (AutoUpload Off): Attach metadata per file uploaded

I have my upload set to be async with the autoupload off. I have created a list template which adds a dropdown to each of the files to be uploaded. How can I on upload reference the dropdown for each of the corresponding file uploads and pass that dropdown's value as metadata along with the file. I know how to attach meta data, but I don't know how to get the current file's, that is being uploaded, container so I can get the correct dropdown value to attach to the metadata. I have read that the files can upload out of order, so I can't depend on the files being uploaded in a perfect order.

Thanks,
Joe

Upload

answered on 21 Jan 2014

1 answer

183 views

Serie labels of pie/donut chart not completely shown

Hello,

the labels of pie/donut chart are not completely shown under certain circumstances. Please see the attached screenshot.
The left label reads 'Verpasst 0%', the right one 'Angenommen 100%'

As a workaround at this time I set left and right margin (according to german text).
Since the text varies according to languages this workaround does not work under all conditions.

Is this a bug and is there another workaround?

TIA
Dirk

Charts

answered on 21 Jan 2014

3 answers

282 views

Specifying field type as 'date' produces weird formatting

I have the following Data Source in my page:

var dsAll = new kendo.data.DataSource({

serverFiltering: true,

transport: {

read: {

type: 'POST',

url: '/pages/ajax/page.ashx',

dataType: 'json',

data: {

action: 'model',

modelname: function () {

return $('#txtModelName').val()

}

},

cache: false

}

},

schema: {

data: function (response) {

if (response == undefined) {

$('#spanDateRange').hide();

$('#gridTrend').hide();

}

else {

console.log('DataSource "dsAll" Bound');

$('#spanDateRange').show();

$('#gridTrend').show();

return response;

}

},

model: {

fields: {

TrendModelId: { type: 'number' },

EOM: { type: 'date' },

Seg: { type: 'string' },

LostPriceQty: { type: 'number' },

LostPriceRev: { type: 'number' },

LostAvailQty: { type: 'number' },

LostAvailRev: { type: 'number' }

}

});

The date is passed to the Data Source in this format '2009-12-31T00:00:00'.

But when I bind to a grid or dropdownlist, the format is a weird 'Thu Dec 31 00:00:00 PST 2009'. Strangely enough, creating a template and using kendo.toString(EOM, "d") does produce '12/31/2009'. If I bind a dropdownlist to the Data Source the selected value is returned in the weird format, even if I define a valuetemplate.

I need the to date to be in some valid format and I'm not sure how to fix it.

Edit:
Ok after further testing I found that the strange formatting only occurs with IE. But I'm still trying to figure out why the value is returned in that format, rather than in the format I specifiy in the valuetemplate.

Data Source

answered on 21 Jan 2014

1 answer

148 views

how to import excel data in kendoui chart

i want to get data from excel file,
And draw chart using excel data,

Charts

answered on 21 Jan 2014

3 answers

349 views

how to filter json data using kendoui

hi,
i am struggling to get particular(filter) data from json file ,

i want to filter json data and display chart for that filtered data only,

please any one can help.

Charts

answered on 21 Jan 2014

1 answer

44 views

Windows 8 style date/time picker

Hello all,

I'm looking for a date/time picker control that functions the same way that the control that is included with the RadControls for Windows 8 does. Basically I would like the ability to have the user be able to select the Year, Month, Day, etc individually.

I've been through the documentation and I know this isn't possible today, is this something that could possibly be done in the future?

Thanks,

Greg

Date/Time Pickers

answered on 21 Jan 2014

1 answer

97 views

Determinig which icon to use from remote data

Hello,
I am trying to create a directory view using the Kendo UI Web Treeview and the coloricons-sprite.png. I have the directory view working using Web API, but I cannot find any sample code that shows how to associate a specific icon based on the file extension. The only samples I have found hard code the values. Is there a sample that shows how this can be achieved?
Thanks,

Scott

TreeView

answered on 21 Jan 2014

2 answers

119 views

custom colors for stock charts

this is relative to this thread
http://www.kendoui.com/forums/kendo-ui-dataviz/chart/how-to-customise-color-of-bars-in-stock-chart.aspx#boMy966aG2OF1P8AAFTdxQ

i wasnt sure if you saw my response or not
so im repoosting

here is my stock chart code

$J($chartD).kendoStockChart({

dataSource: wData,

series: [{

type: "candlestick",

openField: "open",

closeField: "close",

highField: "high",

lowField: "low",

categoryField: "cat",

colorField: "color",

notes:{

line: {

width: 0,

length: 0

},

label: {

font: "bold 9px Open Sans, sans-serif"

},

icon: {

border: {

width: 0

}

},

tooltip:{

format: "{4}:<br /> {0:n0} -> {3:n0}"

}

}],

navigator:{

visible: false

},

categoryAxis:{

categories: cats,

type: "category",

labels: {

font: "bold 9px Open Sans, sans-serif",

rotation: 90,

step: 1,

skip: 0

}

},

valueAxis: {

labels: {

format: "N0"

}

});

here is a portion of the data as outputted by the console:

[Object, Object, Object, Object, Object, Object, Object, Object]

0: Object

cat: "2009"

close: 6831

color: "#75B5CD"

high: 6831

low: 0

noteText: 6831

open: 0

__proto__: Object

1: Object

cat: "Direct Hire"

close: 9185

color: "#4E503F"

high: 9185

low: 6831

noteText: 2354

open: 6831

however just by adding the colors im now getting a js err:
Uncaught TypeError: Object [object global] has no method 'forEach'

without all the color stuff the chart works great
but i really want custom colors

can you give me ideas why this is happening
thanks!

Charts

answered on 21 Jan 2014