Questions on Kendo UI for jQuery Forum

8 answers

136 views

I'm trying to get the Kendo UI grid connected in my MVC3 app, but I'm not getting any data displaying. I think it should be simple, but I'm not seeing it. Here is my code:

View:

@model List<pests.web.com.Models.Workitem>

@{
ViewBag.Title = "Worklist";
ViewBag.CurrentPage = "Worklist";
}

<div id="grid"></div>

<script type="text/javascript">
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "Home/GetWorklist",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: {}
}
},
columns: [
{
field: "PartNumber",
width: 90,
title: "Part Number"
},
{
field: "ProcurementCode",
width: 90,
title: "Procurement Code"
},
{
width: 100,
field: "Priority"
},
{
field: "Status"
}
]
}
});
</script>


<script type="text/javascript" src="../../Scripts/people.js"></script>
<script type="text/javascript" src="../../Scripts/kendo.web.min.js"></script>
<script type="text/javascript" src="../../Scripts/console.js"></script>
<link href="../../Styles/kendo.common.min.css" rel="stylesheet" />
<link href="../../Styles/kendo.default.min.css" rel="stylesheet" />

Layout page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Styles/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>

<body>

@RenderBody()

</body>
</html>

Controller code I'm trying to call from the view:

public class HomeController : Controller
{
[HttpPost]
public ActionResult GetWorklist()
{
List<Workitem> worklist = PestsLogic.GetWorklist();
return View("Home", worklist);
}
}

GetWorklist() is returning a few items. They are simple object with a few properties. Here's it is:

public class Workitem
{
public string PartNumber { get; set; }
public string ProcurementCode { get; set; }
public int Priority { get; set; }
public string Status { get; set; }
}

Is there anything obvious that I've got hooked up wrong? There are no error messages, just a blank page (with a title, though).

hanks!

Grid

answered on 30 Apr 2012

0 answers

229 views

How to get Total Filtered Record Count

Hi

dsEventsList = new kendo.data.DataSource({

data: JSON.parse(localStorage.getItem("EventsJson")),

filter: { field: "Events_ID", operator: "eq", value: g_Events_ID }

});

//Total Record --> 23

alert(dsEventsList.options.data.length);

How can i get the total filtered record count? In above case it should be 1.

Thanks
Jaydeep

Data Source

asked on 30 Apr 2012

0 answers

49 views

Using Mobile with Web Grid UI Widget

Hi there,

According to an item in this FAQ http://www.kendoui.com/faq/mobile-faq.aspx
Kendo UI web widgets can be used with Kendo UI mobile without any issues however when I try use the Grid widget in a mobile view I get some unexpected behavior for filtering and grouping functionality in the grid.

Here's a jsfiddle of what I have tried: http://jsfiddle.net/rwLCh/3/

Thanks,

Rob

General Discussions

asked on 30 Apr 2012

0 answers

117 views

Refreshing a Tabstrip?

In every Grid master row, I have 2 tabstrips populated when detailInit event happens.

If I click on the next master row, the tabstrip in that row detail doesn't seems to be updated with the new JSON datasource using AJAX.

How do I do that without using the Grid Refresh?

$("XXX").data("kendoGrid").dataSource.read();

Is there a detailRefresh or detailReload event for Kendo Grid?

I have written 2 methods to collapse the previous master row details when the next master row is clicked.

TabStrip (Mobile)

asked on 30 Apr 2012

0 answers

61 views

Using Grid with the Kendo UI Mobile Scroller

Hi There,

I've got a Kendo UI grid inside a Kendo UI mobile scroller and it works great but I was wondering if it would be possible to somehow setup the grid/scroller to only apply to the contents of the grid (The tbody tag) and keep the columns static at the top.

Thanks!
Rob

Grid

asked on 30 Apr 2012

2 answers

1.6K+ views

Editing only certain cells/columns

Hi,

I would like to make my Kendo Grid editable only for a certain cells (depends on a value in them) or only a certain columns (i.e. only the second column in grid). How can I achieve this goal?

Grid

answered on 30 Apr 2012

1 answer

127 views

close window

Hello how can i close the window after click some button into the current window????

thanks,

Window

answered on 30 Apr 2012

1 answer

154 views

Editor is broken.

Ok - so I thought I would give Kendo UI a go. I needed a basic html editor for adding and editing forum posts. Started with the Kendo Editor with THE most basic usage... and hey presto, problems immediately.

<script type="text/javascript">

$(document).ready(function () {

$("#reply").kendoEditor();

});

</script>

<textarea id="reply" rows="10" cols="30" style="width:740px; height="440px">

This is a test to see if the script shows up is the editor.

</textarea>

<button>

Save</button>

The toolbar icons rendering is broken....(they have partly rendered??). I tried a 2 other theme files... same issue. I tried specifying the tools collection directly .. No go.. . For the record, I am using Firefox 11.0 browser and a MVC 4 project with the HTML validation target set to XHTML 5.

Editor

answered on 29 Apr 2012

1 answer

292 views

Grid, PageSize - Possible bug?

Hello,

I have an issue pretty weird with PageSize of Grid. When I set page size to 2 and I have more elements, in the pager, there is only one page instead of 3 or 4 but when I do sort or group, all pages in the pager appear.

I attach a video.

Am I doing something wrong?

This is the code Javascript:

$(document).ready(function() {

var dataSource = new kendo.data.DataSource({

pageSize: 2,

transport: {

read: "dataSourceJson.php"

},

schema: {

data: "data"

},

error: function(e) {

// handle event

alert("error");

},

change: function(e) {

// handle event

//alert("change");

}

});

$("#grid").kendoGrid({

dataSource: dataSource,

pageable: true,

groupable: true,

scrollable: true,

sortable: true,

pageable: true

});

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

var Grid = $("#grid").data("kendoGrid");

var data = Grid.dataSource_data;

dataSource.read();

});

This is the code of dataSourceJson.php:

<?php

$array = Array(Array("from_user" => "daniel","from_user_id" => "1"),

Array("from_user" => "daniel","from_user_id" => "1"),

Array("from_user" => "daniel","from_user_id" => "1"));

header('Content-Type: application/json; charset=iso-8859-1');

echo "{\"data\":" .json_encode($array). "}";

?>

Thank you,
Daniel

Grid

answered on 29 Apr 2012

4 answers

719 views

KendoUI simple stuff like checkboxes?

UI Frameworks like Dijit routinely provide custom versions of all of the basic UI elements like buttons, radio buttons, checkboxes, toggle buttons, etc.

Often there is little added functionality, but the controls are at least styled to conform with the selected theme.

I can find no documentation on this sort of thing. I was able to find and use the "k-button" class by looking at the page code of one of the KendoUI demo pages, but couldn't find docs for it.

Am I missing something?

I am particularly interested in icon toggle buttons. In the demo of the KendoUI editor control the toolbar seems to use "k-tool-icon" and "k-editor-button" controls in the toolbar. Are these documented anywhere?

The KendoUI editor control uses browser-provided checkboxes, so Im guessing there's no kendo-specific styled one. Is that right?

General Discussions

answered on 29 Apr 2012