Questions on Kendo UI for jQuery Forum

1 answer

831 views

[Solved] Client, Require field validation messages showing below.

HI,

The Required field validation some times showing below the fields and for some fields beside the text box properly.Please find the attachment.

I have two fields State and Zip fields configured as below. Inspected items of the both the fields looks as below.

//State ComboBox

<td>

<span class="k-widget k-combobox k-header" style="width: 180px;">

<span class="k-dropdown-wrap k-state-default" unselectable="on" tabindex="-1">

<input class="k-input" type="text" autocomplete="off" name="State_input" style="width: 100%;" role="combobox" aria-expanded="false" placeholder="Select..." tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="State_listbox" aria-busy="false" aria-activedescendant="State_option_selected">

<span class="k-select" unselectable="on" tabindex="-1">

<span class="k-icon k-i-arrow-s" unselectable="on" role="button" tabindex="-1" aria-controls="State_listbox">select</span>

</span>

<input id="State" class="k-invalid" style="width: 180px; display: none;" validationmessage="This is a required field." required="required" data-value-primitive="true" data-bind="value:State.Code" name="State" data-role="combobox" aria-disabled="false" aria-readonly="false" aria-invalid="true">

<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" style="margin: 0.5em;" data-for="State" role="alert">

<span class="k-icon k-warning"> </span>

This is a required field.

<div class="k-callout k-callout-n"></div>

</div>

</span>

</td>

//ZIp text Box

<td>

<input id="Zip" class="k-input k-textbox k-invalid" type="Zip" style="width:180px;" validationmessage="This is a required field." required="required" maxlength="10" data-bind="value:Zip" name="Zip" aria-invalid="true">

<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" style="margin: 0.5em;" data-for="Zip" role="alert">

<span class="k-icon k-warning"> </span>

This is a required field.

<div class="k-callout k-callout-n"></div>

</div>

</td>

This is how I have configured both the fields on popup Template

 <tr>

  <td>

<

input type="text" id="City" class="k-input k-textbox" name="City" data-bind="value:City" maxlength="30" required="required" validationMessage="This is a required field." style="width:180px;"

/>    

  </td>

</tr>

<input id="State" name="State" data-bind="value:State.Code" data-value-primitive="true" required="required" validationMessage="This is a required field." style="width: 180px;"

/>

  </td>

</tr>

<input type="Zip" id="Zip" class="k-input k-textbox" name="Zip" data-bind="value:Zip" maxlength="10" required="required" validationMessage="This is a required field." style="width:180px;"

/>

<span data-for="Zip" class="k-invalid-msg"></span

>

 </td>

</tr>

Styles we have for server validation messages.

.k-tooltip-validation.k-invalid-msg

{

display:inline-block;

}

.k-invalid-msg .k-callout

{

display:none;

}

State Combobox

$("#State").kendoComboBox({

placeholder: "Select...",

dataTextField: "Code",

dataValueField: "Code",

headerTemplate: '<div class="dropdown-header">' +

'<span class="k-widget k-header">Code</span>' +

'<span class="k-widget k-header">Name</span>' +

'</div>',

valueTemplate: '<span>#:data.Code#</span>',

template: '<span class="k-state-default">#:data.Code#</span>' +

'<span class="k-state-default">#:data.Name#</span>',

dataSource: {

transport: {

read: {

url: crudServiceBaseUrl + "/GetStates"

}

},

filter:"startswith"

});

Validation

answered on 11 Jun 2014

1 answer

135 views

Datasource remove, unexpected behaviour

Hi,
The following is my (coffee) datasource code excerpt:

schema:
model:
id: 'id'
transport:
destroy:
url: (model) -> ApiUrl "transmittals/transmittal/#{model.id}"
type: 'DELETE'
data: {}

A few things:
.I'd expected the destroy to use type = delete by default, no?
.I'd expected it to add the id to the url itself - do i have to inject it myself (like above)?
.Currently kendo is sending my entire model along with the request, ho can i prevent that?

Grid

answered on 11 Jun 2014

1 answer

289 views

[Solved] 0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'replace': object is null or undefined

i was following the tutorial from
http://demos.telerik.com/aspnet-mvc/listview/editing

and i keep on getting this error,
Unhandled exception at line 9, column 6976 in http://localhost:50879/Scripts/kendo/2014.1.528/kendo.all.min.js

0x800a138f - Microsoft JScript runtime error: Unable to get value of the property 'replace': object is null or undefined

most of thread with similar question are asked to check for the duplicate jquery files so i checked mine and seems ok.

can any one help pls.

my code as below
===============BundleConfig.cs====================

public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/modernizr-2.6.2.js",
"~/Scripts/jquery-1.10.2.min.js",
"~/Scripts/bootstrap.min.js"
)
);

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/2014.1.528/kendo.all.min.js",
//"~/Scripts/kendo/2014.1.528/kendo.timezones.min.js",
"~/Scripts/kendo/2014.1.528/kendo.aspnetmvc.min.js"));

bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
"~/Content/kendo/2014.1.528/kendo.common-bootstrap.min.css",
"~/Content/kendo/2014.1.528/kendo.bootstrap.min.css"));

bundles.IgnoreList.Clear();
}
===============================_Layout.cshtml===================

@using System.Web.Optimization
@*@using Telerik.Web.Mvc.UI*@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@*<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />*@
@*@Html.Telerik().StyleSheetRegistrar().DefaultGroup(group =>group.Add("telerik.common.css").Add("telerik.vista.css"))*@

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
@Styles.Render("~/Content/kendo/css")

</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("Application name", "Index", "Home", null, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
</ul>
</div>
</div>
</div>

<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>

@*@Html.Telerik().ScriptRegistrar() *@
</body>
</html>

General Discussions

answered on 11 Jun 2014

1 answer

369 views

Date format for cultures does not respect the local format

The long date format on calendar for several cultures does not respect the local format.

Cultures having problem are : zh-tw, ko-kr, ja-jp, pt-pt, pt-br, es-es, es-co, es-cl, fr-ca

The expected behavior for different cultures are as:
       For zh-tw/ko-kr/ja-jp markets, the "MM" are displayed in front of "YYYY" instead of displayed after "YYYY".
       For pt-pt/pt-br/es-es/es-co/es-cl markets , lacked "de" between "MM" and "YYYY".
       For fr-ca market, lacked "," between "MM" and "YYYY".

Is this the bug with Kendo? How can we fix this?

Calendar

answered on 11 Jun 2014

1 answer

365 views

Angular kendo window and file upload dialog

Hi,

I wish to have file upload control within kendo window dialog box. We are using angularjs and on kendo-angular labs page, I can't find file upload control present.

Is it possible to have file upload control on kendo window pop-up dialog? If yes, Can you share a sample?

Thanks!

Window

answered on 11 Jun 2014

3 answers

743 views

How to show wait cursor over grid

I have a 3 level hierarchical Kendo grid with command columns that invoke long-running JavaScript Ajax functions that invoke Controller methods which in turn act on database tables. I'm trying to show a wait cursor so the user has a visual cue that the system is busy and is waiting for a response from the server. Kendo grid CSS seems to be overriding my attempt to show and clear the wait cursor. How can I make this work properly?

My Javascript method is shown below:

function onClickPostBatch(e) {

var dataItem = this.dataItem($(e.target).closest("tr"));

//document.body.style.cursor = "wait";

$("html").css("cursor", "wait");

$.post('@Url.Action("PostBatch", "Home")', {

batchId: dataItem.BatchID

}, function (data) {

if (data.error) {

alert('' + data.message);

} else {

alert(data.message);

location.reload();

}

});

//document.body.style.cursor = "default";

$("html").css("cursor", "default");

}

Thanks!

Rich

Grid

answered on 11 Jun 2014

2 answers

188 views

Editable Grid with XML Datasource

I am trying use KendoUI javascript library to implement a web dashboard. I have implemented the view functions by getting data from a XML web service and it all works well. But got stuck when I try to introduce edit features.My KendoGrid's datasource schema is as

schema: {

type: "xml",

data: "/xmlResponse/Contacts/Contact",

model: {

id: "NameSequence",

fields: {

name: "Name/text()",

phoneNumber: "PhoneNumber/text()",

email: "Email/text()",

nameSequence: "NameSequence/text()"

}

Since i have to map the XML tags to fields in the model fields, how should I specify parameters like editable, nullable or validations. Documentation doesn't provide any help on this. Samples are like below but they only talk about json transports.

schema: {

model: {

id: "ProductID",

fields: {

ProductID: { editable: false, nullable: true },

ProductName: { validation: { required: true } },

UnitPrice: { type: "number", validation: { required: true, min: 1} },

Discontinued: { type: "boolean" },

UnitsInStock: { type: "number", validation: { min: 0, required: true } }

}

I want to combine the both worlds and don;t have a clue on how to do that.

Any help would be great...

Data Source

answered on 11 Jun 2014

3 answers

1.2K+ views

[Solved] How to extend the kendoListView widget

Hi:

I would like to add my own methods on the to ListView as follows:

$("#AlertListView").kendoListView({

dataSource: {

data: []

},

template: "<li>#: message #</li>",

displayMessages: function( messages ) {

...

},

hideMessages: function( ) {

...

}

});

Phil

ListView

answered on 11 Jun 2014

3 answers

271 views

Kendo Grid Date format Issue

Hi,

We are using the Kendo grid for angular, we are having issue with the date format -
We have tried below 2 ways and neither works:
$scope.dbColumns = [
{"field": "date",
"sortable": true,
"title": "First date",
"template": "#= kendo.toString(dateFirst, '{0:dd-MMM-yyyy}') #"
},
{
"field": "dueSecond",
"sortable": true,
"title": "Second date",
"type": "date",
"fomrat":"{0:dd-MMM-yyyy}"
}];
Both cases we get the format as => 2014-05-30T11:13:51.6006636-04:00

Grid

answered on 10 Jun 2014

1 answer

196 views

kendo ui - issue with binding of viewmodel

Here is the situation. I've 2 views: grid-view and add-view. When page loads, grid-view is visible. By clicking on "New" button, add-view comes into the picture. Both views are into the layout.Here's the code:

var customerSearchLayout = new kendo.Layout($('#customer-search-view-template').html());

customerSearchLayout.render($("#searchCust"));

var addCustomerView = new kendo.View($('#add-customer-view-template').html());

var customerGridView = new kendo.View($('#customer-grid-view-template').html());

var layout = new kendo.Layout("<div id='content' class='contentDiv'></div>");

layout.render($("#main"));

layout.showIn("#content", customerGridView);

"New" button is inside customer-search-view-template.

var customerSearch = kendo.observable({

customerName: "Customer name",

searchClicked: function() {

this.set("customerName", "Search clicked");

},

newClicked: function(e){

e.preventDefault();

this.trigger("newCustomerClicked");

}

});

customerSearch.bind("newCustomerClicked", function(){

layout.render($("#main"));

layout.showIn("#content", addCustomerView, "swap");

});

// Bind the view model to the customer element.

kendo.bind($('#searchCustomer'), customerSearch);

When "New" button is clicked, it triggers newCustomerClicked event and displays add-view. add-view has a form to add a new customer. The form is nested inside a <div>.

<form id="addCustForm">

<label for="txtFname">First name</label>

<input id="fname" data-bind="value: firstName" class="k-textbox" />

</form>

// observable object of add customer

var customerAdd = kendo.observable({

firstName: "Hello world!"

});

// Bind the view model to the customer element.

kendo.bind($('#addCustForm'), customerAdd);

Each template has a wrapping element.

I've tried to bind viewmodel customerAdd with form, with parent div, with container div but none of these worked.
I couldn't figure out what is the issue with binding here.
So, how do I bind viewmodel customerAdd with form ?????

MVVM

answered on 10 Jun 2014