Questions on Kendo UI for jQuery Forum

1 answer

138 views

I have a grid with a popup edit window. The edit window comes up without problem. When I edit I get the popup window with the appropriate fields. When I click update after editing the description the javascript fails with the following code highlighted:

return isFinite(b.valueOf())?b.getUTCFullYear()+"-"+pad(b.getUTCMonth()+1)+"-"+pad(b.getUTCDate())+"T"+pad(b.getUTCHours())+":"+pad(b.getUTCMinutes())+":"+pad(b.getUTCSeconds())+"Z":null}

Anyone have any thoughts on why this is happening?

Page code is as follows:

@model HopitelNetworksPlatform.Models.FacilityProblem

@{

ViewBag.Title = "ProblemTracking";

}

<h2>Problem Tracking<br />

Facility: @Model.FacilityName

</h2>

<p>

@Html.ActionLink("Add Problem", "CreateProblem", new { facilityID = Model.FacilityID } )

</p>

<div id="test"></div>

<div id="problemGrid"></div>

<script type="text/javascript">

var gridLoaded = false;

var categoryData = new kendo.data.DataSource({

schema: {

model: {

id: "ProblemCategoryID",

fields: {

ProblemCategoryID: { type: "int" },

ProblemCategoryName: { type: "string" }

}

},

transport: {

read: {

url: "@Url.Action("ProblemCategoryList", "Diagnostic")",

type: "POST"

}

});

categoryData.read();

var bedData = new kendo.data.DataSource({

schema: {

model: {

id: "RoomBedID",

fields: {

RoomBedID: { type: "int" },

RoomBedName: { type: "string" }

}

},

transport: {

read: {

url: "@Url.Action("RoomBedList", "Facility", new { facilityID = Model.FacilityID })",

type: "POST"

}

},

change: function(e) {

if(gridLoaded == false) {

DisplayGrid();

gridLoaded = true;

}

});

bedData.read();

function lookupCategoryName(ProblemCategoryID)

{

if(ProblemCategoryID == undefined) {

return "";

}

else {

var problemCategory = categoryData.get(ProblemCategoryID);

return problemCategory.ProblemCategoryName;

}

function lookupBedName(RoomBedID)

{

if(bedData.total() == 0)

{

return RoomBedID.toString(); //(todo)(change to unknown or something)

}

else

{

if(RoomBedID == undefined) {

return "";

}

else {

var roomBed = bedData.get(RoomBedID);

return roomBed.RoomBedName;

}

function DisplayGrid() {

$("#problemGrid").kendoGrid({

pageable: true,

columns: [

{ field: "RoomBedID", title: "Location", width: "5%",

editor: function(container,options) {

$('<input name="' + options.field + '"/>').appendTo(container).kendoDropDownList({

dataSource: bedData,

dataValueField: "RoomBedID",

dataTextField: "RoomBedName",

autobind: false

});

},

template: "#= lookupBedName(RoomBedID) #"

},

{ field: "DateReported", title: "Date Reported" },

{ field: "ProblemCategoryID", title: "Problem Type",

editor: function(container,options) {

$('<input name="' + options.field + '"/>').appendTo(container).kendoDropDownList({

dataSource: categoryData,

dataValueField: "ProblemCategoryID",

dataTextField: "ProblemCategoryName",

autobind: false

});

},

template: "#= lookupCategoryName(ProblemCategoryID) #"

},

{ field: "ProblemDescription", title: "Problem Description" , width: "30%" },

{ field: "DateResolved", title: "Date Resolved" },

{ field: "ResolutionDescription", title: "Resolution", width: "30%" },

{ command: "edit", title: "Edit", width: "110px" }

],

editable: "popup",

toolbar: ["create", "save", "cancel"],

dataSource: {

schema: {

model: {

id: "ProblemID",

fields: {

ProblemID: { type: "int", editable: false, nullable: true },

RoomBedID: { type: "int", nullable: true },

RoomBedName: { type: "string" },

DateReported: { type: "date", editable: false },

ProblemCategoryID: { type: "int", nullable: true },

ProblemCategory: { type: "string" },

ProblemDescription: { type: "string" },

DateResolved: { type: "date", nullable: true, editable: false },

ResolutionDescription: { type: "string", nullable: true }

}

},

batch: true,

pageSize: 10,

transport: {

create: {

url: "@Url.Action("CreateProblem2", "Diagnostic")",

type: "POST"

},

read: {

url: "@Url.Action("ProblemList", "Diagnostic", new { facilityID = Model.FacilityID })",

type: "POST"

},

update: {

url:"@Url.Action("UpdateProblem", "Diagnostic")",

type: "POST"

},

destroy: {

url: "@Url.Action("DestroyProblem", "Diagnostic")",

type: "POST"

}

});

}

</script>

Grid

answered on 11 May 2012

1 answer

102 views

Creating url in true RESTful convention

Hi,

Is it possible to creating own url query string to web service in DataSource and how to do that?

Instead of making request with url generated from DataSource like /data/GetAll?take=5&skip=5...
I want to create request with url in RESTful convention like data/GetAll/take/5/skip/5...

Data Source

answered on 11 May 2012

3 answers

676 views

Move whole data from one grid to another

Hi,
I want to move the data that are checked in the grid to another grid when i clicked the button and if it is check all all then i have to move all the data from one gird to another and empty the other grid please find the screen shots below

Very urgent

Thanks in advance.

Grid

answered on 11 May 2012

1 answer

179 views

CRUD operations on datasource in different remote view

I am building a mobile application and am using the datasource feature to perform CRUD operations. The buttons that initiate the destroy and update on the transport are in a different view from where the datasource is described.

For example, the listmessages view has a listView widget to display all the messages (from the datasource), when one is selected, they are directed to the viewmessage remote view.

When in this view I want to initiate the update and destroy on the datasource in the previous view (listmessages ).

I currently use PHP to display the data on viewmessage view and would prefer to access the relevant dataSource id to display the selected data.

Hope this makes sense. Please see my code for a better idea of what I am trying to achieve.

<div data-role="view" data-title="Mobile" id="listmessages" data-init="listMessagesInit">

<h2>Customer Messages</h2>

<p><?php echo $unread_messages . ' - unread messages'; ?></p>

<ul id="message_list"></ul>

</div>

<script id="message_list_template" type="text/x-kendo-template"><a href=""><div style="float:left; width:150px; height: 50px" class="isnew_#= isnew #">#= customer_name #<br />#= created #</div><div style="height: 50px"id="message_#= id #" class="isnew_#= isnew #">#= message #</div></a></script>

<script>

function listMessagesInit(){

var dataSource = new kendo.data.DataSource({

transport: {

read: "/messages/data",

dataType: "json",

update: {

url: function() {

//where id is a global variable

var url = "/messages/markasread/" + id + "/" + read;

return url;

},

type: "POST",

dataType: "json"

//other configurations

},

destroy: {

url: function() {

//where id is a global variable

var delurl = "/messages/delete/" + id;

return delurl;

},

type: "DELETE",

dataType: "json"

}

},

schema: {

model: {

id: "id",

fields: {

created: { type: "string" },

message: { type: "string" },

customer_name: { type: "string" },

isnew: { type: "string" }

}

});

$("#message_list").kendoMobileListView({

dataSource: dataSource,

//pullToRefresh: true,

//appendOnRefresh: true,

style: "inset",

click: function(e) {

var id = e.dataItem.id;

var selected = dataSource.get(id);

window.kendoMobileApplication.navigate("/messages/view/" + id);

},

template: $("#message_list_template").text()

});

}

</script>

<style>

#listmessages div.isnew_1 {font-weight:bold}

#listmessages div.isnew_0 {font-weight:normal}

</style>

<div data-role="view" data-title="Mobile" id="viewmessage" data-init="viewMessageInit">

<h2>Message</h2>

<p>Date: <?=$message->message->created?></p>

<p>From: <?=$message->message->customer_name?></p>

<p>Email: <a href="mailto:<?=$message->message->email?>" target="_blank"><?=$message->message->email?></a></p>

<p>Telephone: <?=$message->message->customer_telephone?></p>

<p>Location IP:<?=$message->message->ip?></p>

<div data-role="scroller">

<p><?=$message->message->message?></p>

</div>

<?php $read_text = ($message->message->isnew == 1 ? 'Mark as read' : 'Mark as unread'); ?>

<?php $read = ($message->message->isnew == 1 ? 0 : 1); ?>

<p><a data-align="left" data-role="button" id="markasread" ><?=$read_text?></a>

<a data-align="right" data-role="button" id="delete">Delete</a></p>

</div>

<script>

function viewMessageInit(){

//var selected is defined in previous view - how to access this?

$("#markasread").click(function(){

selected.set("isnew", read);

dataSource.sync();

});

$("#delete").click(function(){

dataSource.remove(selected);

dataSource.sync();

});

}

</script>

Many thanks in advance for any advice.

Application

answered on 11 May 2012

3 answers

151 views

Can't return html text?

I want a function to return some html into a data-bind="text: getText" but it comes across literally...like if I do

return "<span class='incomplete'>InComplete</span>";

then it renders

<span class='incomplete'>InComplete</span>

And if I encode it, it just renders the encoded strings.

Suggestions?

MVVM

answered on 11 May 2012

1 answer

107 views

Chart Support for Android

Hi, I would like to now if there is Chart support for Android 2.3.4?

After testing on different devices we found that devices running Android 2.3.4 do not show the charts.

Thanks in advance.

Charts

answered on 11 May 2012

2 answers

297 views

Create - What is the expected server response?

I have a KendoUI grid which is getting data from an ASP.NET MVC application. The grid populates itself fine but I'm having problems with the create function.

The data is correctly sent to the controller action and the object persisted to the database but I'm unsure as to what I'm supposed to return. Currently I'm returning the object but I'm getting a Javascript error on the client "Uncaught TypeError: Cannot read property 'length' of undefined". The result is the new entry in the grid remains with a "null" Id value and the Name field has a red triangle on the top-left corner.

Controller Action:

[HttpPost]

public JsonResult Create(Department dept)

{

_session.Store(dept);

_session.SaveChanges();

return Json(dept);

}

Grid configuration:

$(document).ready(function () {

$("#grid").kendoGrid({

dataSource: {

type: "json",

serverPaging: true,

pageSize: 10,

batch: false,

transport: {

read: {

url: "Departments/GetAll",

dataType: "json"

},

create: {

url: "Departments/Create",

type: "post",

dataType: "json"

}

},

schema: {

data: "Departments",

total: "TotalCount",

model: {

id: "Id",

fields: {

Id: {

type: "number",

editable: false,

nullable: true

},

Name: {

editable: true,

nullable: false,

validation: {

required: true

}

},

height: 400,

toolbar: ["create"],

pageable: true,

columns: [

{

field: "Id",

title: "Dept Id"

},

{

field: "Name",

title: "Name"

}

],

editable: {

mode: "popup",

update: false,

destroy: false

}

});

Grid

answered on 11 May 2012

1 answer

150 views

Theme and style

Hi, I am new to Kendo UI. I have just tried to integrate it into my app which is using jQuery UI now (since some widgets such as Accordion is missing in Kendo UI). I know there is a Theme builder which is able to fine-tune the style of Kendo widgets. May I know how to style to basic HTML controls such as Input (text, radio), Textarea and button etc?

Thank you.

General Discussions

answered on 11 May 2012

5 answers

410 views

Custom Validation Does Not Work

[Edited] Ok, rephrasing this question after looking at it again. I'm trying to use both the HTML5 validation, and then also add one extra check that password and password-confirm contain the same value. It is working now, however, the message for that extra validation is not overriding the validationMessage value. Is there a straightforward way to do this?

And again, your documentation is a nice start, but it really needs more complete examples, and thorough coverage of options and capabilities. Thanks.

<html>

<head>

<link href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>

</head>

<body>

<form id="foo-form" name="foo-form" action="/foo" method="get">

<select id="test-combo" multiple="multiple">

<option value="1">Option 1</option>

<option value="2">SmOption 2</option>

<option value="3">BlOption 3</option>

<option value="4">GOption 4</option>

</select>

<br />

<label for="org" class="required">Organization</label>

<input id="org" name="org" required="required"

type="text" validationMessage="Organization required" />

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

<label for="zip" class="required">Zip Code</label>

<input id="zip" name="zip" pattern="\d{5}([\-]\d{4})?" required="required"

type="text" validationMessage="Valid zip code required" />

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

<label for="fullname" class="required">Name</label>

<input id="fullname" name="fullname" required="required"

type="text" validationMessage="Please enter full name" />

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

<label for="email" class="required">Email</label>

<input id="email" name="email" required="required"

type="email" validationMessage="Valid email required" />

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

<label for="password" class="required">Password</label>

<input id="password" name="password" required="required"

type="password" validationMessage="Please enter password" />

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

<label for="password-confirm" class="required">Confirm Password</label>

<input id="password-confirm" name="password-confirm" required="required"

type="password" validationMessage="Please confirm password" />

<span class="k-invalid-msg" data-for="password-confirm"></span><br />

<input id="register-submit" name="register-submit" type="submit" value="Sign Up" />

</form>

<script type="text/javascript">

$(document).ready(function(){

$("#test-combo").kendoComboBox({

filter: "contains",

suggest: true,

});

$("#foo-form").kendoValidator({

rules: {

verifyPasswords: function(input){

var ret = true;

                             if (input.is("[name=password-confirm]")) {

                                 ret = input.val() === $("#password").val();

                             }

                             return ret;

}

},

messages: {

verifyPasswords: "What's going on?"

}

});

</script>

</body>

Validation