Questions on Kendo UI for jQuery Forum

5 answers

309 views

Scatter Chart Dynamic Series (ASP.NET MVC)

Hi,

I've created a Scatter chart in ASP.NET MVC with the code below:

@(Html.Kendo().Chart<GIPM.DAL.ViewModels.ProductsCountByCountryYear>()

.Name("linechart")

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom)

)

.DataSource(ds => ds

.Read(read => read.Action("GetProductsCountByCountry", "Products", new { country = ""}))

.Group(group => group.Add(model => model.Country))

.Sort(sort => sort.Add(model => model.Year).Ascending())

)

.Series(series =>

{

series.ScatterLine(model => model.Year, model => model.Count)

.Name("Country")

.GroupNameTemplate("#= group.value #");

})

.Legend(legend => legend

.Position(ChartLegendPosition.Bottom)

)

.YAxis(axis => axis.Numeric()

.Labels(labels => labels

.Format("{0}")

)

.MajorUnit(1)

)

.XAxis(axis => axis.Date()

.Labels(labels => labels.Format("{0}"))

.MajorUnit(1)

)

The above is calling a method in the Products controller below:

public ActionResult GetProductsCountByCountry( string country

{

var query = _customsService.GetExportSeizedCountByCountry(country);

return

Json(query, JsonRequestBehavior.AllowGet);

}

The chart will refresh when a new country is selected by the script below:

$("#chart").data("kendoChart").dataSource.read({ country: strcountry });

However, the page will freeze at times due to a "long running script". The DataSource of the chart calls the action GetProductsCountByCountry and groups the data. I want to do the grouping on the server side but I'm not sure how to change the code for my chart for dynamic series without doing what I'm currently doing.

This is the first time I'm using Kendo DataViz and I really could use some help.

Thanks!

Charts

answered on 01 Jul 2013

5 answers

264 views

Touch Highlight Remains After Button Processed

Hi,

My Phonegap/Cordova app uses several remote views, many use a button to call a method to process user input and move on to a different remote view page. (i.e. <button class="btn-right" data-role="button" data-bind="click: chkInfoChangePage">Submit</button>) If I sooner or later programmatically navigate back to the page ( e.g. app.navigate("enteryourinfo.html");). the button that was originally touched to leave the page still shows the touch highlighting. I would like to reset that if I return to a page.

I tried setting data-reload="true" which does refresh the highlighting when it works, but I often get an error: "Uncaught TypeError: Cannot call method 'destroy' of undefined at file:///android_asset/www/js/kendo.mobile.min.js:13" Removing the data-reload="true" prevents the error.

I often use MVVM data binding to a simple JavaScript observable object, but it happens even to non-bound pages. Other than the persistent highlighting, I don't NEED to reload the page, but would like to have the option to do so.

Can someone point out what I am doing wrong; how do I untouch a button after I have processed the onclick event?

Thanks,
Kevin

Button (Mobile)

answered on 01 Jul 2013

1 answer

146 views

How to change value of Textbox in Editor Template for cell. Value provided to server differs to displayed value.

Dear KendoUI Team!
I hope you can help me out. I want to update some Editor Templates from the old Telerik Controls. I am using ASP.Net MVC 4.

My Editor Template looks like this

@model string

@using System.Collections

<div style="white-space:nowrap;">

@Html.TextBoxFor(m => m, new { onclick = "setInvisible(\"SplitCountryList#=Rid#\")", onfocus = "setInvisible(\"SplitCountryList#=Rid#\")", id = "CoPrefSplit#=Rid#" })

<button id="SplitCountryDisplay" onclick="setVisibleAndFocus('\\#SplitCountryList#=Rid#','\\#SplitCountryCombo-input')" style="background-color:White; width: 20px; height:22px; font-size: 6pt">...</button>

</div>

<div id="SplitCountryList#=Rid#" style="position: absolute; overflow:visible; width:250px; z-index:99; margin-top: 0px; visibility:hidden;">

@(Html.Kendo().ComboBox

.Name("SplitCountryCombo#=Rid#")

.BindTo(new SelectList((IEnumerable)ViewData["Countries"], "Code", "DisplayName"))

.HtmlAttributes(new {@ArticleID = "#=Rid#"})

.Filter(FilterType.Contains)

.Events(events => events

.Change("onSplitCountryChanged")

)

</div>

What I want to do is to set the value of the Textbox in the Change Event of the Combo-Box. My Approach is using .val()

$(elementName).val(e.sender.dataItem().Value);

The value displayed in the Textbox is changed then. BUT: The value transfered to the server is the old value of the Textbox.

Example:
The field has the value "US". I edit the row. I change the value to "CN" using the Combobox. "CN" is now displayed in the textbox in edit mode. When I want to update the row, "US" is provided as the value for the field in the model.

Is there a way to make kendoUI transfer the values that are displayed?

brgds
Malcolm Howlett?

Grid

answered on 01 Jul 2013

2 answers

155 views

Sparkline refreshing data

Hi there,

After successfully creating a sparkline with localdata, i am trying to then change the data in the spark line and refresh it.

I have tried setting the data directly and then using refresh as well as using the setDataSource method but have had no luck so far.

I have created an example in the link below which demonstrates the issue.
So when you click the "refresh new data" the data in the sparkline does not change.
http://jsbin.com/atezoj/36/edit

Is it possible to do this or do i need to dispose of the sparkline and create a new one with new data?

Thanks,

Rob

Sparkline

answered on 01 Jul 2013

1 answer

786 views

Popup editing + validation

Hello
I'm trying to solve some annoying issues related to Grid Pop-up Editing Validation:
1. Most annoying is validation errors are hiding my fields so user cannot edit anything - see screen shots. I need to display this error message in more user friendly way - e.g on the right side of input, but I cannot achieve that.
2. All validations are based on custom validation so when focus is lost it is not fired - how to force such validation.
My template is looking like that:

<div>

<div class="k-edit-label">Sort Code: </div>

<div class="k-edit-field">

<input class="k-input k-textbox" type="text" name="SortCode" data-bind="value: SortCode"

data-sortcodelength-msg="Sort Code should be empty or have 6 digits."

onkeypress="return isNumber(event)" pattern="[0-9]*" type="tel">

</div>

<div>

<div class="k-edit-label">Account Number: </div>

<div class="k-edit-field">

<input class="k-input k-textbox" type="text" name="AccountNumber" data-bind="value: AccountNumber"

data-accountnumberlength-msg="Account Number should be empty or between 8-10 digits."

data-accountnumbervalid-msg="Account Number is invalid."

onkeypress="return isNumber(event)" pattern="[0-9]*" type="tel">

</div>

<div>

<div class="k-edit-label">Action: </div>

<div class="k-edit-field">

<input name="Success" required="required" data-text-field="text" data-value-field="value" data-bind="value: Success"

data-required-msg="Action is required." />

</div>

java script for e.g. sortcode validation is - this part of dataSource schema:

SorCode: {

type: "string",

nullable: true,

validation: {

sortCodeLength: function (input) {

if (input.attr("name") == "SortCode") {

var strSortCode = input.val();

if (strSortCode.length === 0) {

return true;

}

if (!isNum.test(strSortCode)) {

return false;

}

if (strSortCode.length != 6) {

return false;

}

return true;

}

},

The validation messages are only show on Update button.
3. Errors from server - how to display them in the same way as client side validation messages. (I'm using MVC- but usually with plain JavaScript without wrappers). I'm parsing errors in following way and display them in alert, I want to display them in line and prevent close form on update.

error: function (e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

} else {

//alert("An error occured during saving call back.");

}

Grid

answered on 01 Jul 2013

1 answer

253 views

Two columns in one header

Hello! Please help me. How can I do that's it? File untitled.

Grid

answered on 01 Jul 2013

1 answer

88 views

Drawer broken when attaching events

Hello,

The drawer does not work as expected when data-show and data-hide events are attached:

See the JsBin demo:
http://jsbin.com/eqisip/9/edit

Thanks,
Martin

Drawer (Mobile)

answered on 01 Jul 2013

2 answers

607 views

Bindings doesn't works in header template of kendo grid

Hello,

I am using Kendo UI Web v2013.1.614 release with jQuery 1.9.1 and i have problems with header template in kendo grid.
Here is declaration of grid:

<div data-role="grid"

data-sortable="true"

data-scrollable="false"

data-sortable="{ allowUnsort: false }"

data-pageable="{ info: false }"

data-bind=

"source: drivesSource"

data-columns='[

{"field": "selected", "title": " ", "width": "auto", "sortable":false,

"template": "#=runTemplate(\"drive-select-template\", data)#",

"headerAttributes": {style: "text-align: right"},

"headerTemplate": "<input data-bind=\"checked: parent().parent().checkAll\"

class=\"grid-checkbox\" type=\"checkbox\" title=\"@Localization.Tooltips.Select_all\" />"} .....

]'>

</div>

The first problem i faced was that all templates stuff like '#=runTemplate()#' and so on doesn't work in header template. In item template it works ok.
So i declared inline template for header but haven't succeeded in binding it to something.
I tried several context like parent(), parent().parent(), $root and some custom bindings but nothing worked, looks like this is bug.

Best regards,
Alexander

Templates

answered on 01 Jul 2013

1 answer

274 views

Group header click

Hi,

I have a grid and its by default grouped through the datasource like below:

.DataSource(dataSource => dataSource

.Ajax().Group(g => g.Add(c => c.ProjectName))

.Read(read => read.Action("GetProjectItems", "Project"))

)

I would like to be able click the ProjectName which will then the project record in a popup.

How can I add a click event to the group header?

Thanks.

Grid

answered on 01 Jul 2013

5 answers

615 views

Unable to set a dot pressing shift+dot (azerty keyboard)

Dear Kendo Team,
In a numeric textbox, I can't put the decimal seperator via the non-numeric key that it's to say, i can't access to the dot key thanks to shift+dot (in a azerty keyboard)
I can acces it clicking on CAPS LOCK+dot
Could you reproduce it?That is normal?
Thanks in advance for your answer.
Kind regards

NumericTextBox

answered on 01 Jul 2013