Questions on Kendo UI for jQuery Forum

2 answers

115 views

I have a grid with a local data array.
how can I do a row select on it?
Thanks-


                         $("#dataGrid").kendoGrid({
                             dataSource: {
                                data: customerData, // local array
                                schema: { model: {id: "CustomerPK"} },
                                group: [ { field: "CustomerType", dir: "asc" }]
                             },
                             groupable: true,
                             selectable: true,
                            change: function() {
                                var custID = this.select().data("id");
                                alert("Selected " + custID); // 'undefined'
                                }
                         });

Grid

answered on 26 Jul 2012

1 answer

173 views

MVC Grid does not return data

I am new to this but I can't seem to find the answer.

In both MVC3 and MVC4 (I tried both), I create the vanilla project, define my table with EF and scaffold up the controller, repository and views. All works fine. The Index view returns hundreds of records.

2 problems: 1) When I try to use the Kendo Grid, 0 records are returned.
2) The GetCarriers method never seems to fire because I never hit the breakpoint.

Here is what I did to add the Kendo Grid to my Index view:
Referenced the .dll
Copied in the CSS and JS files and put them in the head tag section of my _layout.cshtml
Added the following method to my CarriersController

public ActionResult GetCarriers([DataSourceRequest]DataSourceRequest request)
{
var carriers = carrierRepository.All; // <<<=== Never breaks here if I set the break point
DataSourceResult result = carriers.ToDataSourceResult(request);
return Json(result);
}

Replaced the code in my Index.cshtml

@(Html.Kendo().Grid<TBCarrierTools.Data.Models.Carrier>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.CarrierID);
columns.Bound(p => p.CarrierName);
})
.DataSource(datasource => datasource
.Ajax()
.Read(read => read.Action("GetCarriers", "Carriers")
))
)

Here is the Page Source:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="../../Content/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="../../Content/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/kendo.all.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

<script src="/Scripts/modernizr-1.7.min.js" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
[ <a href="/Account/LogOn">Log On</a> ]

</div>
<nav>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
<li><a href="/Carriers">Carriers</a></li>
</ul>
</nav>
</header>
<section id="main">

<h2>Carriers</h2>

<div class="k-widget k-grid" id="Carriers"><table cellspacing="0"><colgroup><col /><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="CarrierID" data-title="Carrier ID" scope="col"><span class="k-link">Carrier ID</span></th><th class="k-header" data-field="CarrierName" data-title="Carrier Name" scope="col"><span class="k-link">Carrier Name</span></th></tr></thead><tbody><tr class="t-no-data"><td colspan="2"></td></tr></tbody></table></div><script>
jQuery(function(){jQuery("#Carriers").kendoGrid({columns:[{title:"Carrier ID",field:"CarrierID",encoded:true},{title:"Carrier Name",field:"CarrierName",encoded:true}],scrollable:false,dataSource:{transport:{read:{url:"/Carriers/GetCarriers"}},serverPaging:true,serverSorting:true,serverFiltering:true,serverGrouping:true,serverAggregates:true,type:"aspnetmvc-ajax",filter:[],schema:{data:"Data",total:"Total",errors:"Errors",model:{fields:{CarrierID:{type:"number"},CarrierName:{type:"string"},CarrierAddress:{type:"string"},CarrierCity:{type:"string"},CarrierState:{type:"string"},CarrierPostal:

... omitted for brevity

{type:"number",defaultValue:null},usrDate:{type:"date",defaultValue:null},usrMemo:{type:"string"},TypeID:{type:"number"},PayMethod:{type:"number"},UserGUID:{type:"object"},tblCarrierContacts:{type:"object"}}}}}});});
</script>
</section>
<footer>
</footer>
</div>
</body>
</html>

Any ideas?
Thanks
P

Grid

answered on 26 Jul 2012

0 answers

83 views

Documentation error: .Sorting() -> .Sortable()

On page http://docs.kendoui.com/api/wrappers/aspnet-mvc/Kendo.Mvc.UI.Fluent/GridSortSettingsBuilder, the API docs refer to the a .Sorting() method. The correct name of the method is Sortable().

Grid

asked on 26 Jul 2012

0 answers

96 views

Batch Editing a Grid

Hi,

I have services already developed to update, delete and add information. So I need know how can I discover the updated rows to implement myself a batch update. How can I do that ?

Thanks in advance

Grid

asked on 26 Jul 2012

1 answer

106 views

Copy excel cells to grid

Hi:

Is it possible to copy cells from excel back to the editable grid cells?

Thanks

Grid

answered on 26 Jul 2012

0 answers

322 views

Grid's k-grid-content div renders twice

The entire grid doesn't render twice. Just the content div. Also, the second content div contains an ajax loader that never goes away (See attached image).

Not sure what I'm doing incorrectly. I've tried removing the grid from the Panel Bar, but it hasn't made any difference yet.

I'm not sure if it's a library thing or some configuration issue. I had typed everything in plain jQuery, and that worked, but I have recently switched over to this format because I found it easier to write.

Info:
Kendo UI Version: kendoui.web.2012.2.710
Browser: Firefox - v15.0
OS: Windows 7
jQuery: Same version packaged with Kendo UI download

Thanks in advance!

@model Company.Domain.MVC.Models.ShipmentModel

@using Kendo.Mvc.UI

@{

Layout = "~/Views/Shared/_StandardLayout.cshtml";

ViewBag.Title = "Home";

}

<script type="text/javascript">

function QuoteItemGrid_ErrorHandler(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);

}

</script>

<div id="ShipmentForm">

@(Html.Kendo().PanelBar()

.Name("panelBar")

.ExpandMode(PanelBarExpandMode.Single)

.HtmlAttributes(new { style = "width:100%" })

.Items(panelBar =>

{

panelBar.Add().Text("Shipment Items")

.Expanded(true)

.Content(@<div>

@(Html.Kendo().Grid<Company.Domain.MVC.Models.ItemModel>()

.Name("QuoteItemGrid")

.Columns(columns =>

{

columns.Bound(i => i.FreightClass).Width(50);

columns.Bound(i => i.Length).Width(50);

columns.Bound(i => i.Width).Width(50);

columns.Bound(i => i.Height).Width(50);

columns.Bound(i => i.DimensionUnitOfMeasure).Width(50);

columns.Bound(i => i.QuantityValue).Width(50);

columns.Bound(i => i.QuantityUnitOfMeasure).Width(50);

columns.Bound(i => i.Weight).Width(50);

columns.Bound(i => i.WeightUnitOfMeasure).Width(50);

columns.Bound(i => i.NmfcCode).Width(50);

columns.Bound(i => i.ItemDescription).Width(50);

})

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Save();

})

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Events(events => events.Error("QuoteItemGrid_ErrorHandler"))

.Model(model => model.Id(i => i.ItemID))

.Create(create => create.Action("CreateProducts", "Home"))

.Read(read => read.Action("GetProducts", "Home"))

.Update(update => update.Action("UpdateProducts", "Home"))

.Destroy(destroy => destroy.Action("DeleteProducts", "Home"))

)

</div>);

panelBar.Add().Text("Services")

.Content(@<div>Services here</div>);

panelBar.Add().Text("Address Information")

.Content(@<div style="margin-left:1%;">

HTML omitted for brevity

</div>);

panelBar.Add().Text("Miscellaneous")

.Content(@<div>

HTML omitted for brevity

</div>);

})

)

</div>

Grid

asked on 26 Jul 2012

0 answers

303 views

open Detail Template for the selected Row

Migrating from Telerik to Kendo Grid, Now Im having a problem auto-opening the detail template for the selected row within a grid...

See the following...

<script type="text/javascript">
function products_onRowSelect(e) {
collapseAll(e);
var grid = $("#Products").data("kendoGrid"),
row = grid.tbody.find(">tr.k-master-row k-state-selected");
if (row.has(".k-collapse").length) {
grid.collapseRow(row);
} else {
grid.expandRow(row);
}
}
function collapseAll(e) {
var grid = $("#Products").data("kendoGrid");
var allMasterRows = grid.tbody.find('>tr.k-master-row');
//Loop through each row, if a row has a detail row following it then collapse that master row
for (var i = 0; i < allMasterRows.length; i++)
{
if (allMasterRows.eq(i).next('tr.k-detail-row').length > 0)
{
grid.collapseRow(allMasterRows.eq(i));
}
}
}
</script>

Runs without error, collapse all works fine, but the expand never happens... Breakpoint hits just fine, but the row doesnt expand through code, it does however if I click the expand icon within the grid, just the jScript function doesnt do it.. Any ideas?

Grid

asked on 26 Jul 2012

1 answer

540 views

Disable date tooltips/titles

When hovering over a date in the kendo calendar, a tooltip appears showing the full date. The calendar generates the following HTML:

<td><a class="k-link" href="#" data-value="2012/7/14" title="Tuesday, August 14, 2012">14</a></td>

If I use a template, it gets inserted inside the anchor link which is still subject to the tooltip/title. Here's the code generated using a template:

<td class=""><a class="k-link" href="#" data-value="2012/6/10" title="Tuesday, July 10, 2012">

<div title="" class="selectedDate">10</div>

</a></td>

I've tried to override the title by setting it to "" in my template but the browser just uses the outer title instead.

How can I disable the tooltip?

Calendar

answered on 26 Jul 2012

2 answers

107 views

EmptyTemplate?

Is there a way in Kendo to define an empty data template?

ListView

answered on 26 Jul 2012

4 answers

386 views

grid: Client Template problem

I appreciate any help.. I am trying to use ClientTemplate.

@Html.Raw(Html.ActionLink("Select", "SelectIt", new { SelectedQueueLevel = "#= QueueLevel #" }, new { @class = "btn" }).ToHtmlString()).ToHtmlString();

as a result I have:
<a class="btn" href="/Core/CollectorQueue/SelectIt?SelectedQueueLevel=%23%3D%20QueueLevel%20%23">Select</a>;

What I am doing wrong?

Here is the whole thing for grid below:
@(Html.Kendo().Grid(Model.CollectorQueueGrid)
.Name("CollectorQueueGrid")
.Columns(columns =>
{
columns.Template(item => Html.ActionLink("Select", "SelectIt", new { SelectedQueueLevel = item.QueueLevel }, new { @class = "btn" }))
.ClientTemplate(Html.ActionLink("Select", "SelectIt", new { SelectedQueueLevel = "#=QueueLevel#" }, new { @class = "btn" }).ToHtmlString());
columns.Bound(item => item.QueueDate).Width(30).Format("{0:MM/dd/yyyy}");
columns.Bound(item => item.QueueLevel).Width(150);
columns.Bound(item => item.ScheduledTime).Width(20);
})
.DataSource(dataSource => dataSource.Ajax().ServerOperation(false))
.Sortable()
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Groupable()
)

Thank you.

Grid

answered on 26 Jul 2012