Questions on Kendo UI for jQuery Forum

3 answers

180 views

Why is my template adding extra top and bottom spacing on a row?

I have a GridView with a custom rowtemplate, looking like this:

@(Html.Kendo().Grid(Model.UnitTypes)

.Name("Grid")

.RowTemplate(@<tr>

<td>

<div>@item.Name</div>

</td>

<td>

<div>@item.CurrentRun.Operation.WellContract.Location</div>

</td>

<td>

<div>@item.CurrentRun.Operation.WellContract.Name</div>

</td>

<td>

<div>@item.CurrentRun.Id</div>

</td>

<td>

<div>@item.CurrentRun.RunTask</div>

</td>

<td>

<div>@item.Status.StatusText</div>

</td>

<td>

<div>Lamp</div>

</td>

<td>

<div>

<div class="progress progress-warning">

<div class="bar" style="width: 50%">

<span class="offset6" style="color: #676767;">@Math.Round(item.CurrentRun.LatestWellLogEntry.Depth.Value, 2)</span>

</div>

</td>

<td>

<div>@Math.Round(item.CurrentRun.LatestWellLogEntry.Speed.Value, 2)</div>

</td>

<td>

<div>@Math.Round(item.CurrentRun.LatestWellLogEntry.Tension.Value, 2)</div>

</td>

<td>

<div>@item.CurrentRun.Name</div>

</td>

<td>

<form method="POST" action="~/UnitDetails/Index/@item.Id">

<input type="submit" class="k-button" value="Details" />

</form>

</td>

</tr>

)

.HtmlAttributes(new { style = "height:430px;" })

.Columns(columns =>

{

columns.Bound(p => p.Name).Title("Unit");

columns.Bound(p => p.CurrentRun.Operation.WellContract.Location).Title("Site");

columns.Bound(p => p.CurrentRun.Operation.WellContract.Name).Title("Well");

columns.Bound(p => p.CurrentRun.Id).Title("Run");

columns.Bound(p => p.CurrentRun.RunTask).Title("Task");

columns.Bound(p => p.CurrentRun.Operation.Description).Title("Operation");

columns.Bound(p => p.Status.StatusText).Title("Status");

columns.Bound(p => p.CurrentRun.LatestWellLogEntry.Depth).Title("Depth (m)");

columns.Bound(p => p.CurrentRun.LatestWellLogEntry.Speed).Title("Speed (m/min)");

columns.Bound(p => p.CurrentRun.LatestWellLogEntry.Tension).Title("Weight (kg)");

columns.Bound(p => p.CurrentRun.Name);

columns.Command(command => command.Custom("Edit Unit").Action("Index", "UnitDetails")).Width(85);

})

.DataSource(dataSource =>

dataSource.Server().Model(m => m.Id(p => p.Id)))

.Pageable()

.Scrollable(builder => builder.Height(250))

.Sortable())

Whenever I open my page and look at the grid, it contains spacing both at the top and bottom of each row, causing the lines that separates the columns to be spaced apart vertically. (See attached image)

Am I doing the template thing wrong or am I missing something?

Grid

answered on 30 May 2013

1 answer

39 views

How to export chart that including many pictures,not only one picture?

How to export chart that including many pictures,not only one picture?I can export one picture,How to export more than one chart?

Charts

answered on 30 May 2013

2 answers

403 views

Grid in refresh() popup window can't fire databound event

Hello:

this is the continue of my previous post: No scrollbar on tablets when window is created by Refresh()
however this is a different issue, not about srollbars, so i am opening a new thread.

The popup is generated by calling refresh() method, because I need to pass in a parameter dynamically, this is working all fine. The problem is in this popup, I have a Kendo Grid, and it needs to fire the DataBound event, but it doesn't work. Using F12 in chrome, under 'Console', it shows this error:

Uncaught ReferenceError: xxx is not defined

where xxx is the databound function name. (see attached screen shot)

however, if popup window is called just by $("#winName").data("kendoWindow").center().open();
the grid inside the popup has databound event works fine.

These are changes I've made to the test.zip project provided by Petur Subev in reply to my previous post.

on Home/About.cshtml:

@{

ViewBag.Title = "About Us";

}

<h2>About</h2>

<p>

Put content here. ABOUT

</p>

@(Html.Kendo().Grid<KendoMVCWrappers.Models.Person>()

.Name("gridEle2")

.Columns(cols =>

{

cols.Bound(e => e.Name)

.ClientTemplate("<span id='btn_#=PersonID#' >#:PersonID#</span>");

cols.Bound(e => e.Name)

.ClientTemplate("<span id='btn2_#=PersonID#' >#:PersonID#</span>");

})

.DataSource(dataSource => dataSource

.Ajax()

.Read(read => read.Action("GetPeople", "Home").Type(System.Web.Mvc.HttpVerbs.Post))

)

.Events(events => events.DataBound("xxx"))

)

<script>

function xxx(e) { alert('xxx');}

</script>

<p>

кст. Неговите корени са в класическата Латинска литература от 45г.пр.Хр., ... ...

</p>

I am using kendo version of 2013.1.514

please advise,
Thank you

Window

answered on 30 May 2013

2 answers

6.1K+ views

Unable to get Custom Validation Working on a Grid

I have a grid bound to a datasource containing a list of poeple defined with 4 fields (Id, FirstName, LastName, and Birthday). I would like to perform custom validation on the Birthday field. The DataSource is defined as follows:

var peopleData = [

{ Id: 1, FirstName: "Person", LastName: "One", Birthday: new Date(1973, 11, 30) },

{ Id: 2, FirstName: "Person", LastName: "Two", Birthday: new Date(1967, 9, 5) }

];

var peopleDataSource = new kendo.data.DataSource({

data: peopleData,

schema: {

model: {

id: "Id",

fields: {

Id: { type: "number" },

FirstName: { type: "string" },

LastName: { type: "string" },

Birthday: {

type: "date",

validation: {

rules: {

custom: function(input) {

if (console != undefined) { console.log(input); }

var today = new Date();

return input < today;

}

},

messages: {

custom: "Birthday cannot be in the future"

}

});

The grid is defined as follows:

$("#personGrid").kendoGrid({

dataSource: peopleDataSource,

editable: true,

columns: [{

field: "FirstName",

title: "First Name"

},{

field: "LastName",

title: "Last Name"

},{

field: "Birthday",

title: "Birthday",

template: "#= kendo.toString(Birthday, 'MM/dd/yyyy') #"

}]

});

When I edit the Birthday field, the custom validation defined in the peopleDataSource for the Birthday field is not called.

What am I doing wrong?

I am using Kendo UI, version: 2012.1.322.open-source.

Code is attached.

Regards,

John DeVight

Validation

answered on 29 May 2013

6 answers

93 views

Why is kendo.bind needed?

I am using declarative binding like so:
<div id="main" data-role="view" data-model="viewModel">
Foo: <span data-bind="text: bar"></span>
</div>

Since I specified data-model I would expect 'bar' to be binded, but that's not the case. It doesn't work.

It only comes together when I call kendo.bind('#main', viewModel).

Do I always need to call kendo.bind() for all of my viewModels to work?

MVVM

answered on 29 May 2013

4 answers

93 views

Maintaining views in Multiple html files throwing error

Hi,

I am trying to maintain views in multiple html files so that different pages does not redefine references to the Kendo UI Mobile script or CSS resources like

<script src="lib/jquery-1.8.3.js"></script>
<script src="lib/kendo.mobile.min.js"></script>
<link href="lib/styles/kendo.mobile.all.min.css" rel="stylesheet" />

But when references are not added to different html files, the styling does not work and gives the error "Uncaught ReferenceError: kendo is not defined ".

PFA the sample application in which i am trying to maintain views in multiple html files.

Any help for the resolution of the error will be most appreciated.

General Discussions

answered on 29 May 2013

1 answer

104 views

cascading combobox work with ASMX

hi,

because our team still relies on the traditional web service (ASMX) to get data. can anyone kindly advise how to integrate the cascading combo with ASMX service?

my code doesn't seem to work, found many 'undefined' in the dropdown list.

View

var categories = $("#cmbWidgetCat1").kendoComboBox({

dataTextField: "Display",

dataValueField: "Value",

dataSource: {

type: "json",

transport: {

read: wsPath + "/GetTabItems"

}

}).data("kendoComboBox");

ASMX

[WebMethod(EnableSession = true)]

[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true)]

public WidgetComboItem[] GetTabItems()

{

return new List<WidgetComboItem>

{

new WidgetComboItem {Display = "System Info", Value = "1"},

new WidgetComboItem {Display = "Datasets", Value = "2"},

new WidgetComboItem {Display = "Charts", Value = "3"},

}.ToArray();

}

Thanks in advance!

ComboBox

answered on 29 May 2013

0 answers

87 views

ASP.NET MVC model binding

Hi! We want to use treeview with strongly-typed model binding.
Is it possible to submit and bind dynamically added treeview nodes with model? Thanks!

TreeView

asked on 29 May 2013

2 answers

65 views

(bug?) scatter chart loses content on .refresh()

Here refresh() is called on window resize:
http://70.43.83.4/test/scatter/date-axis.html
But refresh() would fail the same way even if the new height is not set.

It works fine when data is set via datasource (commented out), but then multiple series with different data cannot be set.

Charts

answered on 29 May 2013

2 answers

598 views

Menu always under the windows

I'm currently working on an MDI style application.

I want the Menu to be displayed on top of the Windows but Kendo is always setting z-index style when the Menu and Window are created.

The z-index of the k-animation-container is always set to 10002. The k-window z-index are set to 10003.

With those z-index, the menu items are always hidden behind the windows.

Is there a way to tell the Menu it should be displayed over the Windows without overwriting kendo's generated style because there's a lot of kendo widget that required a specific z-index and I don't want to create new issue with existing item (like the k-overlay for the modal windows)?

Best regards,

Simon

Menu

answered on 29 May 2013