Questions on Kendo UI for jQuery Forum

5 answers

96 views

In the attached image you can see an issue we have with multiple charts in the same page.

Each bar in this image is a stand alone chart, and the first time we get into the view, one of them is distorted. When we get into the page in subsequent entries, it looks OK (if we use a back button and revisit the page, for example).

Any ideas?

Charts

answered on 14 Jun 2013

3 answers

174 views

Kendo validator js syntax error using checkbox within template editor

I'm using MVC4 with KendoUI 2012.3.1114
I have a model like this...

class Contact {

Phone WorkPhone {get;set;}

Phone HomePhone {get;set;}

}

class Phone {

string PhoneNumber {get;set;}

bool IsPrimary {get;set;}

}

The contact view is using an editor template to display the phones:

@Html.EditorFor(m=>m.WorkPhone)

@Html.EditorFor(m=>m.HomePhone)

and in the Phone editor template, I have a checkbox...

@Html.TextBoxFor(m => m.PhoneNumber)

@Html.CheckBoxFor(m => m.IsPrimary)

everything works fine... until I add a kendo validator...

$("#formId).kendoValidator().data("kendoValidator");

Now when I check/uncheck the checkbox and click away (to trigger blur), I get a js error:

Webpage error details

Message: Syntax error, unrecognized expression: input:hidden[name=WorkPhone.IsPrimary]
Line: 2
Char: 59140
Code: 0
URI: .../Scripts/kendo/2012.3.1114/jquery.min.js

Is there fix for this?

Validation

answered on 14 Jun 2013

1 answer

116 views

use kendo web ui upload control in kendo mobile app

hi guys
i built an app using icenium and kendo mobile.
one of the views is responsible to upload selected files and upload them to my server.
to do that i use kendo web upload element. in icenium simulator every thing work fine but on my phone, after i select the file, the app behave like it restarting it self and it goes back to square one..
any ideas why?
regards maor

Application

answered on 14 Jun 2013

6 answers

643 views

Best practice Add/Remove Content & unload Widgets correctly

Hi all

I was looking for a best practice to handle Load/Unload Content and removing widgets.

For example.

1. User clicks a button, an existing tabStrip is Extended by a new tab
2. In the new tab Content gets loaded via an Ajax request
3. The new Content contains an html form with autocomplete, datepicker, Editor elements.
4. The user fills out the form, clicks a button to send serialized form to remote Server via Ajax
5. On success, remove the tab from tabstrip and all widgets that have been initialized on the fly bevor

So until Point 4 its clear to me how to make it. But what is the best way, to remove the new Content and all the widgets, so nothing is left in the Memory?

Thanks for advice.

Duke

General Discussions

answered on 13 Jun 2013

1 answer

125 views

HTML not rendering properly

I'm trying to display an image on the page, I'm using javascript to write out the image tag with the source pulled from the data source. When debugging, the value that is being passed is:

<img align='Left' style='width:100px;' alt='sample alt text.' src='http://www.website.com/IMAGE-05185619.jpg>.

But what is in the page is:

<img align='Left' style='width:100px;' alt='sample alt text.' src='http://www.website.com/IMAGE-05185619.jpg>

So when viewing the page, I see the img tag instead of the image.

My code:

<span data-bind="text: myImgFunc"></span>

var model = JSON.parse($('#cg-jsonall').text());
var viewModel = kendo.observable({
    model: model,
     myImgFunc: function() {
        if (this.get('model.org.org_logo'))
{
    var img = "<img align='Left' style='width:100px;' alt='" + this.get('model.org.name') + ".' src='http://reach.hillel.org/cache/upload/" + this.get('model.university.univ_picture') + ">";

    return img;
}};
kendo.bind($("span"), viewModel);

Any suggestions?

Thanks.

MVVM

answered on 13 Jun 2013

3 answers

1.2K+ views

Chart series colors based on datasource groups

Hi Kendo team,

Scenario:
Let's say I am building a chart (bar, column etc.). The data comes from a datasource and the datasource has grouping applied to it. How can I map series color to a group value. For example, datasource can be something like:
year: 2000, agegroup: group_a, pop: 1000
year: 2000, agegroup: group_b, pop: 1200
year: 2001, agegroup: group_a, pop: 1001
year: 2001, agegroup: group_b, pop: 1201
year: 2002, agegroup: group_a, pop: 1002
year: 2002, agegroup: group_b, pop: 1202

Say I group by 'year' and 'agegroup'. I want to apply series colors mapped to the groups. Also, the groups can be dynamic meaning, I can have group_c, group_d and so on in there returned by the server-side. I also have colors corresponding to a group value already there in the database, meaning group_a - red, group_b - green etc.

Hope I was able to provide sufficient details above.

Thanks,
Amrinder

Charts

answered on 13 Jun 2013

0 answers

123 views

View's data-show only firing once - within SplitView Pane

Hello,

I'm unsure why but the side Pane within a SplitView, containing a view, is only calling it's data-show function once. It is not being called upon navigation to the view a second time. I've stripped the following code down to keep it simple.

<div data-role="splitview" id="events-split-view">

<div data-role="pane">

<div data-role="view" data-show="testDataShow">

Side Pane

</div>

<div data-role="pane" data-layout="main-default">

<div data-role="view">

Main Pane

</div>

<div data-role="layout" data-id="main-default">

<div data-role="header">

<div data-role="navbar">

<a data-role="button" href="#contact-details-view" data-align="right" data-target="_top">Go back</a>

</div>

<script>

function testDataShow() {

alert("View's data-show called");

}

</script>

Solution
The data-show needs to reside on the data-role="splitview" element rather than the view itself.

SplitView

asked on 13 Jun 2013

7 answers

275 views

MVVM KendoGrid and 1-D arrays

I have created an online CodePen Demo: http://codepen.io/DrYSG/pen/wnDxL where I have a Grid bound to a KendoObservable 1-D array. The Array is meant to be (Item, Value) pairs. There are a number of clumsy things here that I would like to clean up.

1. I would love it if you supported Grid's that had Vertical Orientation, so that I could just have display 1-D array, and use the Column Headings for each item: see: http://www.kendoui.com/forums/ui/general-discussions/vertical-grid-property-grid.aspx
2. Doing the lookup for the value and changing it involves hard constants (stateTable[1].Value = foo. Do I have to have a use an index table that translates integers to keys. I.e. var StatusKey = 0, TileCountKey = 1, etc. (then it would be stateTable[TileCountKey] = 2) Still seems clumsy.
3. This would be especially fragile, if the user could add and delete rows. (batch editing).
4. The KendoObservable.set() is not working for this example. So I am doing a manual trigger, which I saw in a post by Alexander Valchev, but I don't see documentation for trigger() anywhere., is this a hidden (unsupported feature?) This also feels a bit clumsy.
Why is there a scroll bar on my Grid?

Bottom line. It works now, but I want to know if there is something in KendoUI today, that would make this cleaner, and if not, do you have anything in UserVoice planned to fix this up?

Grid

answered on 13 Jun 2013

2 answers

242 views

Validation incorrect when using Chrome

I'm using an EditorTemplate to render the DateTimePicker of kendo. Everything is working fine on Internet Explorer and Firefox, but when testing the site in Chrome, I always receive a validation error on a valid date. (see attachment)

This is my editor template

@model DateTime?

@(Html.Kendo().DatePickerFor(m => m).Format("dd/MM/yyyy").ParseFormats(new List<string> { "dd/MM/yyyy", "MM/dd/yyyy"}))

Inside the _Layout page we register kendo and set the specific culture.

<script src="/Virteo.Fidiem.Presentation.Mvc/Scripts/kendo/2013.1.514/cultures/kendo.culture.nl.min.js"></script>

<script type="text/javascript">

kendo.culture("nl");

</script>

Any idea why I still get the validation error ?
Kendo version 2013.1.514.340

DatePicker

answered on 13 Jun 2013

3 answers

652 views

Checkbox in grid not owrk on paging and sorting

Hi,

This issue has been raised many times but no answer or support is provided till now.

I have Kendo UI Grid Ajax binding with Checkbox column in Client template. I have implemented select all but there is no feature to support checkbox checked when changing paging or sorting. I have downloaded one of solution given by kendo team but that also has same issue. Again attaching that solution with more data and paging. Please provide some solution or let me know if cannot be achieved in Kendo grid?

Grid

answered on 13 Jun 2013