Questions on Kendo UI for jQuery Forum

7 answers

620 views

Tooltip with passing object to Controller action

Hi All

How to pass object to controller action through LoadContentFrom method or is there any alternative option to pass object to controller action.

Right now I am able to pass the string value to controller action but I want to pass the @model.ClientInfo object to action from controller.

So please help me how do I achieve this scenario. Here is my all code.

@model ViewModel

<div class="f-group">

<div>
<ul id="Section">
<li><a class="Tooltip" href="#" data-id="Client1">@Model.Client1.Name</a></li>
<li><a class="Tooltip" href="#" data-id="Client2">@Model.Client2.Name</a></li>
<li><a class="Tooltip" href="#" data-id="Client4">@Model.Client3.Name</a></li>
<li><a class="Tooltip" href="#" data-id="Client4">@Model.Client4.Name</a></li>
</ul>
</div>

@(
Html.Tooltip()
.For("#Section")
.Filter("a")
.LoadContentFrom("LoadPopup", "Client")
.Position(TooltipPosition.Bottom)
.Width(250)
.Events(events => events.RequestStart("requestStart").Show("showTooltip"))
)

function requestStart(e) {
e.options.data = {
baseModel: e.target.data("id")
};
}

function showTooltip() {
this.refresh();
}
</div>

public ActionResult LoadPopup(ClientInfo baseModel)
{
return this.PartialView("_ClientPopup", baseModel);
}

ToolTip

answered on 21 Jan 2014

3 answers

200 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

382 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

133 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

227 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

319 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

167 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

383 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

75 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

DatePicker

answered on 21 Jan 2014

1 answer

107 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