Questions on Kendo UI for jQuery Forum

1 answer

452 views

I had loading ajax spinner working in my MVC project. When I convert my project to use Kendo UI it stopped working. Because it there is no dialog method in Knedo Ui. I post my old code can you help me convert this code to work with Kendo
Thanks

var loader = $('#loader').dialog({ autoOpen: false, modal: true, resizable: false, width: 150, height: 50 });
$(".ui-dialog-titlebar").hide();

loader.ajaxStart(function () {
$(this).dialog('open');

}).ajaxStop(function () {
$(this).dialog('close');
});

Window

answered on 23 Oct 2013

1 answer

152 views

ListView + DataSource + odata + 2way Binding

Hi,

in my viewmodel i have defined a datasource with type: "odata".
The datasource is bound to a listview like this:

var template = kendo.template($("#Template_Pre").html()

+ viewModel.templates["someKey"].Item

+ $("#Template_Sub").html());

$("#mylist").kendoMobileListView({

dataSource: viewModel.listDataSource,

template: template,

appendOnRefresh: false,

pullToRefresh: true,

scrollThreshold: 30

});

The used template is a combination of parts defined in html and code. - including some if-statements.
Inside the template i have this textbox:

<input data-role="numerictextbox" data-bind="value: someIntValue" />

This should make it possible for the user to change the "someIntValue" directly from the list.
In another function i want to foreach all the bound items and submit the new "someIntValue" values to the server,
but every time i try that the values are still the original ones.

Any ideas what i'm missing to make this work?

Here is the model i defined in the schema of the datasource:

model: {

id: "myId",

fields: {

myId: { editable: false, type: "number" },

someStringValue: { editable: false, type: "string" },

someIntValue: { editable: true, type: "number", validation: { min: 0 } }

}

ListView (Mobile)

answered on 23 Oct 2013

1 answer

124 views

Focus lost on asyncronous data binding

Hello,

We encounter the following issue,
- a form with many combobox-es each of them will load its items using ajax from the server using ServerFiltering (true)
- sometime obtaining the filtered items takes a bit, and our users just go ahead and start to fill in the next combobox in the form.
- problem is that at some point the previous combo async operation completes and the dropdown of previous combobox will open and the focus is shifted back to the previous control

The behavior we consider appropriate here would be that the previous combo handles silently the end of async operation if it is no longer focused control on the form.
Can this behavior achieved somehow with current version.

As a side note there was something similar with TabStrip control where asynchronous tab contents were stacked as the asynchronous operation completed, I see now that this was solved in the last internal build (2013.2.1015) perhaps you can consider a similar fix for the combo async behavior explained above.

Thanks
Ovidiu

ComboBox

answered on 23 Oct 2013

1 answer

678 views

Disabling anchor tag button

I have a view that has a navigation button to another view that looks like this:

<a id="GoIssue" data-role="button" href="Main/Issue?priorPage=Picklist&fieldName=reqOrWO&value={TBS}" data-icon="details" ></a><br>

I'd like to disable it under certain conditions. I have tried adding a class to it and checking the class in the click handler:

// Start disabled until someone puts something IN the reqOrWO field

$('#GoIssue').addClass("disabled");

// disabled is implemented by returning false on the click action if it has the disabled class

// the disabled class also has visual aspects as well.

$('#GoIssue').click(function ()

{

event.preventDefault ? event.preventDefault() : event.returnValue = false;

return (!$(this).hasClass('disabled'));

});

At first, I just tried returning false, but navigation still occurred. So, I tried adding the additional code to call preventDefault() [if present] and event.returnValue [if not]. But none of this seems to prevent the navigation from going to the target page.

Am I missing something? Is there a simpler way?

Thanks

General Discussions

answered on 23 Oct 2013

3 answers

334 views

[Solved] Pie Chart Overlay Property

I have been trying to change the overlay property for a pie chart series. According to your documenation at http://www.kendoui.com/documentation/dataviz/chart/configuration.aspx and http://demos.kendoui.com/dataviz/pie-chart/index.html, I should able to set the overlay property of the pie series to the string "glass" as so:

series: [{

type: "pie",

field: "Amount",

categoryField: "DisplayName",

colorField: "color",

padding: 20,

overlay: "glass"

}]

However, this has no effect on the chart. After digging through the source code for the chart, I believe that overlay is not a string, but an object. So instead of the above, I should use this:

series: [{

type: "pie",

field: "Amount",

categoryField: "DisplayName",

colorField: "color",

padding: 20,

overlay: {

gradient: "glass"

}

}]

I think this is an error in your documentation that needs correcting.

Additionally, it would be great to know all of the possible values that can be supplied there. After further inspection of your source code, it appears that "none", "glass", "roundedBevel" are valid values that can be used. Are there others?

Thanks,
Sara

Charts

answered on 23 Oct 2013

10 answers

987 views

Full Calendar

Hi,

Does Kendo UI will have a full calendar? Like:

http://arshaw.com/fullcalendar/

Greetings.

Calendar

answered on 23 Oct 2013

3 answers

765 views

Kendo Grid ClientTemplate calling for a custom helper

I have tried several things with no success. The most I can is the helper to be called BUT instead of the value being passed it passes #: Style # as string instead of its value

without calling the helper i can display all values

My question is: how do I call a helper that has parameters inside a ClientTemplate?

Helper (MyHelpers.cshtml on app_code folder)

@helper ProductDisplay(string Style, string DefaultColor, string Name)
{
<div class="prodName" data-id="@(Style + "-" + DefaultColor)">@Name</div>
string img = "http://url/image/" + Style + DefaultColor + "_1?$ereredq$&bregc=0,0,0,0";
<text><img src="@img" /></text>
}

Grid
============================================
@(Html.Kendo().Grid<TestProject.Models.ProductModel.ProductInformation>()
.Name("webGrid").AutoBind(true).Scrollable(scr=>scr.Height(430))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetProducts", "Home")
)
.ServerOperation(false)
)
.Columns(columns =>
{
columns.Template(@<text></text>).ClientTemplate(@MyHelpers.ProductDetail("#: Style #, #: DefaultColor #, #: Name #").ToHtmlString());
})
.Pageable()
.Scrollable()
)

Grid

answered on 23 Oct 2013

5 answers

277 views

Can you create view models as functions?

I currently use Knockout, but am trying out Kendo to see how the two compare. With Knockout there are a couple of potential view model creation patterns, one is to use a literal:

var viewModel = {
firstname: ko.observable("Bob")
};

ko.applyBindings(viewModel );

and the other is to use a function:

var viewModel = function() {
this.firstname= ko.observable("Bob");
};

My preference has always been to use a function because it essentially gives you a 'factory' allowing you to create multiple instances of the same view model.With KendoUI, all the examples I have seen use a literal syntax:

var viewModel = kendo.observable({
firstname: "Bob"
});

kendo.bind(document.body, viewModel);

My question is, with Kendo is it possible to emulate the Knockout style of view model creation via functions? This would allow me to create multiple instances of the same view model, add 'private' functions, etc ...

MVVM

answered on 23 Oct 2013

3 answers

1.9K+ views

[Solved] Grouping and Aggregating multiple fields from a JSON datasource within the chart

I've been able to accomplish such grouping in certain charts and not others.
For example, assume that I have a datasource that looks something like this:

var pictures = [

{ type: "JPG", len: 20, wid: 15, appr: 17.5, count: 2 },

{ type: "JPG", len: 22, wid: 17, appr: 12.5, count: 3 },

{ type: "JPG", len: 24, wid: 15, appr: 10.5, count: 1 },

{ type: "JPG", len: 22, wid: 4, appr: 17.5, count: 6 },

{ type: "PNG", len: 20, wid: 15, appr: 17.5, count: 4 },

{ type: "PNG", len: 25, wid: 7, appr: 9.5, count: 4 },

{ type: "PNG", len: 21, wid: 11, appr: 21.5, count: 1 }

];

I want to group by my category which in this case is "type", I want to sum all other fields.

I am able to do this quite simply with column charts, simply by setting:

series: [{aggregate: "sum",categoryField: "type"}]

However, this does not work with bullet or pie charts, so in search
of a more universal method. I "massage" the data first by adding this
at the beginning:

var dataSource = new kendo.data.DataSource({

data: pictures,

group: {

field: "type",

aggregates: [

{ field: "len", aggregate: "sum" },

{ field: "wid", aggregate: "sum" }

]

}

});

dataSource.read();

I don't know why just grouping the datasource isn't enough.. I
have to throw it into arrays and assign each array to a series like so:

var seriesA = [],

seriesB = [],

categories = [],

items = dataSource.view(),

length = items.length,

item;

for (var i = 0; i < length; i++) {

item = items[i];

seriesA.push(item.aggregates.wid.sum);

seriesB.push(item.aggregates.len.sum);

}

This works as long as having only one valueField per series works.
In the case of a bullet chart, or if I want to assign a field to a
plotband to a bar/column chart: it does not.

I believe I must be doing something completely wrong, as converting
my ungrouped JSON object to a grouped kendo datasource should be enough.
Below is my JSFiddle..

http://jsfiddle.net/DxMb8/4/

Any help would be greatly appreciated! thanks!

Charts

answered on 23 Oct 2013

2 answers

125 views

external views loaded from another domain

Hi there,

I am working on a mobile application to be deployed with cordova and am very excited about the Kendo Mobile UI. I have been playing with it for a couple of days and have this burning issue: When I try to load external view from local file on my machine everything runs smoothly but I was thinking of loading URLs remotely from the web site and keep the main kendo UI within the mobile application. So I figured I would just load the appropriate on the local application from the remote domain. But when I try to load a view with the full domain path like that:
<a data-role="button" href="http://www.comain.com/mobile_url.html" style="background-color: green">Go to</a>
The browser freezes and the view is not loaded. Does that mean that I can only include local files? If yes, maybe I can load external content with Ajaxor somethng of the sort? Or maybe there is a better approach I am missing?

And a second question - is there a way to tell kendo if a regular <a href... anchor should point to a view, or to a standard html page?

Thanks!

General Discussions

answered on 22 Oct 2013