Questions on Kendo UI for jQuery Forum

1 answer

139 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

147 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

772 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

250 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

85 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

602 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

265 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

599 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