Questions on Kendo UI for jQuery Forum

1 answer

270 views

Validation patern does not work for kendoComboBox

Hello,

I cannot get patern to work, can get requiredto work but not patern.

<li>

<label for="cities" >

Zip code:</label>

<input id="contact_cities" data-bind="value: contact_zip" name="contact_cities" pattern="\d{5}" placeholder="Invalid zip code"

validationmessage="Invalid zip code." /><span class="k-invalid-msg" data-for="cities"></span></li>

<li>

.....

$(document).ready(function () {

var viewModel = kendo.observable({

firstName: $.cookie("firstName"),

lastName: $.cookie("lastName"),

email: $.cookie("email"),

phone: $.cookie("phone"),

contact_zip: $.cookie("zip"),

valid: false,

contactseller: function () {

if (validator.validate()) {

$.cookie("firstName", $("#firstname").val(), { expires: 7, path: '/' });

$.cookie("lastName", $("#lastname").val(), { expires: 7 , path: '/'});

$.cookie("email", $("#email").val(), { expires: 7 , path: '/'});

$.cookie("phone", $("#phone").val(), { expires: 7 , path: '/'});

$.cookie("zip", $("#contact_cities").val(), { expires: 7 , path: '/'});

status.text("Hooray! Your tickets has been booked!").addClass("valid");

} else {

status.text("Oops! There is invalid data in the form.").addClass("invalid");

}

});

kendo.bind($("#contactSeller"), viewModel);

var validator = $("#contactSeller").kendoValidator().data("kendoValidator"), status = $(".status");

$("#contact_cities").kendoComboBox({

placeholder: "Select zip code",

dataTextField: "Label",

dataValueField: "Value",

filter: "contains",

dataSource: {

serverFiltering: true,

transport: {

read: {

url: '@Url.Action("GetCities", "MainSearch")',

data: function () {

var combobox = $("#contact_cities").data("kendoComboBox");

return {

zip: combobox.input.val()

};

}

});

$("img[title]").tooltip();

$('.submit-link').click(function () {

var input = $(this).attr('id');

$("#lastId").val(input);

var window = $("#contactSeller").data("kendoWindow"); window.center(); window.open();

});

var window = $("#contactSeller").kendoWindow({

title: "Contact Seller",

visible: false,

modal: true,

resizable: false

}).data("kendoWindow");

});

Validation

answered on 02 Jul 2012

0 answers

92 views

multiple grids displaying inside the panel bar

hi,
I have a panel bar and grid.I want to display grid inside the panel bar.I loaded the panel bar using ajax.I created the grid in a separate view.I have loaded the grid inside the panel bar using "contentUrl".it is displaying in side the panel bar but the grid is displaying two times as shown in the following attachment. can u tell me what is the reason for displaying the grid multiple times.

Grid

asked on 01 Jul 2012

3 answers

152 views

Globalization of filter popups

Hi
We are using a Kendogrid with filtering options, which should be internationalized.
I refer to the popup window with the text "Show rows with value that". Also the operators and the "Filter" and "Clear" text on the buttons
should be internationalized.
Is it possible to do this with kendo cultures? Or could I make a template for the popup, which would take this into account?

Best Regards
Thomas

Grid

answered on 01 Jul 2012

1 answer

331 views

Set focus on autocomplete control?

Seems like a dumb question but I can't figure out how to set focus. I tried:

$("#controlName").data("kendoAutoComplete").input.focus();

the above works for a dropdown but not autocomplete, input appears to be undefined. How do I manually set focus on a kendoAutoComplete?

AutoComplete

answered on 30 Jun 2012

0 answers

96 views

Cancel Select event stack overflow

I am loading a panel by AJAX call
I tried to cancel the select event by calling

 e.preventDefault();

I got a stack overflow

[UPDATE]
I figured out that I got this error because my underlying ajax url was null.!!!
However, I can't prevent the panel from being opened even I cancelled the event

PanelBar

asked on 30 Jun 2012

0 answers

161 views

Using jquery to hide and then show divs leaves the kendo control hidden

I have a set of divs that I hide and only show one at a time according to a menu item.
The initial div has a bound kendo control inside it.
I use jquerys .hide() method to hide the div with the kendo grid inside it.
I DO NOT call .hide() on the grid, just its parent div.

Later on when I call .show() method the div shows up including other normal text inside the div shows up but not the kendo grid??

Once a kendo grid has its parent div hidden how do I make it appear again?

Is this a bug?

General Discussions

asked on 30 Jun 2012

0 answers

105 views

Kendo UI Js conflict with json.js

Hi Team,

We have requirement to pass the different data based on the date selection, for that we are using the following two files to search in json file and parsing the data.

json.js ( https://github.com/douglascrockford/JSON-js/blob/master/json.js)
jsonxpath.js(http://goessner.net/articles/JsonPath/)

When we use json.js we are getting "f.createElement is not a function" error and chart is not created.
If we remove json.js chart works fine.

we are in tight schedule , Kindly do let me know what's need to done to make it work,

Thanks
Moovendan

Charts

asked on 30 Jun 2012

1 answer

521 views

Change AutoComplete Drop Down Width

Is it possible to change the width of the drop down. Right now I have a text box that is about 100 pixels wide. The drop down that slides down is exactly the same size. However, the autocomplete results come back with both a code and a description. Each item in the drop down is wrapped across 2 to 3 lines. I would prefer to have each item to fit on one line (roughly 300 pixels wide). I adjusted the template to ensure each item had a width of 300 pixels, but all that did was put a horizontal scroll bar in the drop down.

I suspect it is not possible out of the box since there isn't any documentation on doing so. It also appears that the drop down is wrapped in a div that had its width set through JavaScript. Nonetheless, has anyone successfully implemented this?

AutoComplete

answered on 29 Jun 2012

2 answers

138 views

Problem using get and set on data in an array

I have a view-model with a property called fields that is attached to my datasource's view, which will have some data similar to this:

[{

Id: 1,

Name: 'Email',

Type: 'Email',

Default: '',

Display: true,

Identifier: true

}, {

Id: 2,

Name: 'First name',

Type: 'Text',

Default: 'Fistname',

Display: true,

Identifier: false

}, {

Id: 3,

Name: 'Last name',

Type: 'Text',

Default: 'Lastname',

Display: true,

Identifier: false

}, {

Id: 4,

Name: 'City',

Type: 'Text',

Default: '',

Display: true,

Identifier: false

}]

I'm using the following row-template to make a sort of grid with a column that has an edit button in it.

<script id="row-template" type="text/x-kendo-template">

<tr data-uid="#= Id #">

<td align="center">

<a href="javascript:void(0);" data-bind="click: edit" class="editRow">edit</a>

</td>

<td data-bind="text: Name"></td>

<td data-bind="text: Type"></td>

<td data-bind="text: Default"></td>

<td align="center"><input type="checkbox" data-bind="checked: Display" /></td>

<td align="center"><input type="checkbox" data-bind="checked: Identifier" /></td>

</tr>

</script>

This all works great until the click event (edit function in view-model) is called. While I am inside the edit function I can not use the get or set functions to work with the data unless I state the index of the entry from the view-model I want to edit.

edit: function(e){

this.set('fields[' + (e.data.Id -1) +'].Default', 'Clicked');

}

This will only works as long as the Ids in my data start at 1 and are always sequential, which is not very likely. You can see this here (http://jsfiddle.net/garrett55/aYMRn/) in the fiddle I created for this post.

Am I missing the right way to do this? Is there an easier way to get the index of the data I want in the view-model?

MVVM

answered on 29 Jun 2012

0 answers

104 views

Is there a Columns.LoadSettings() equivalent for chart series?

Hi,

Currently in KendoUI for MVC, one can load the columns for a KendoGrid by writing this in the view,

@(Html.Kendo().Grid<Object>(
    .Name("Some name")
    .Columns(columns =>
    {
        columns.LoadSettings((IEnumerable<GridColumnSettings>)ViewData["Columns"]);
    })
    // ...
)

where ViewData["columns"] has been set in the controller.

I'm wondering if there is some similar way of loading several series for a KendoChart. I know I could probably accomplish this using javascript and an AJAX call, but I would rather use Razor for as much as I can, and I would like to avoid making too many server calls.

Thanks!

Charts

asked on 29 Jun 2012