Questions on Kendo UI for jQuery Forum

4 answers

529 views

How can I sort a telerik grid template column?

Hi,

I have a telerik grid which contains a template column.

What I would like to do is only apply sorting to this template column and NO other column in the grid.

Please can someone advise me on how I can go about doing this for the Name column?
Any help would be much appreciated as I am new to using Telerik grids.

Thank you very much

 @(Html.Telerik().Grid(Model.MyGrid)
                 .Name("MyGrid")
                 .Columns(columns =>
                              {
                                  columns.Template(c => @Html.ActionLink(c.Name, "Action", "Controller", new { id = c.Id }, null)).Width(100).Title("Name");
                                  columns.Bound(c => c.Title).Width(100);
                                  columns.Bound(c => c.Occupation).Width(100);
                              })
                 .Sortable(sorting => sorting.Enabled(true)))

Grid

answered on 11 Nov 2012

3 answers

840 views

Kendo Ui Grid Popup Template Positioning Issue

HI,
we are showing a Popup from Kendo Ui Grid, The page is a Searc Page which has Dropdownlist and by selecting the value,
a kendo ui grid will be shown with data and by clicking the Edit button a popup is displayed. By using Ajax editing in grid, the popup is shown in center of the browser. but page refresh is not happening and dropdownlist is not populated.

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

.Name(

"Grid")

.Columns(columns =>

{

columns.Bound(p => p.RoleType).Width(80);

columns.Bound(p => p.Name).Width(100);

columns.Bound(p => p.Status).Width(70);

columns.Command(command => { command.Edit(); }).Width(100);

})

.Editable(editable => editable.Mode(

GridEditMode.PopUp).TemplateName("ManageRolePop").Window(w => w.Title("Manage Role").Name("editWindow")))

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(

false)

.Model(model => model.Id(p => p.RoleID))

.Read(

"ManageRole", "ManageRole")

.Update(

"Update", "ManageRole")

)

By using Server editing the Popup orientation is at the bottom of the page and thewe are not able to set in center of the browser. Request you to help us in this issue.

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

.Name(

"Grid")

.Columns(columns =>

{

columns.Bound(p => p.RoleType).Width(80);

columns.Bound(p => p.Name).Width(100);

columns.Bound(p => p.Status).Width(70);

columns.Command(command => { command.Edit(); }).Width(100);

})

.Editable(editable => editable.Mode(

GridEditMode.PopUp).TemplateName("ManageRolePop").Window(w => w.Title("Manage Role").Name("editWindow")))

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Server()

.ServerOperation(

false)

.Model(model => model.Id(p => p.RoleID))

.Read(

"ManageRole", "ManageRole")

.Update(

"Update", "ManageRole")

)

Request you to help us in this

Grid

answered on 11 Nov 2012

1 answer

220 views

KendoUI grid InCell editing style issue

Hi All,

I am using ASP.NET MVC 4 and Telerik's KendoUI grid control with in grid editing (GridEditMode.InCell). I am able to see data in the grid and edit data, but the problem is that when I click cell for editing I am not getting Kendo UI controls (DatePicker, ...). Controls that I am getting for editing are plain without any styles. When I add any Kendo control on the page I am getting right control, such as DatePicker control. So style and controls' js are there. The only problem is I am not getting Kendo control inside of the grid.

Index.cshtml

@using Kendo.Mvc.UI

@using KendoGrid.Models

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

.Name("Grid")

.Columns(columns => {

columns.Bound(p => p.FirstName).Width(140);

columns.Bound(p => p.LastName).Width(140);

columns.Bound(p => p.DayOfBirth).Width(200);

columns.Bound(p => p.Age).Width(150);

columns.Command(command => command.Destroy()).Width(110);

})

.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("error_handler"))

.Model(model => model.Id(p => p.Id))

.Read("Read", "Grid")

.Create("Create", "Grid")

.Update("Update", "Grid")

.Destroy("Destroy", "Grid")

)

<div style="margin-top: 20px">

@(Html.Kendo().DatePicker()

.Name("datepicker")

.Value("10/10/2011")

.HtmlAttributes(new { style = "width:150px" })

)

</div>

<script type="text/javascript">

function error_handler(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>

_Layout.cshtml

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta charset="utf-8" />

<title>@ViewBag.Title</title>

<link rel="stylesheet" href="@Url.Content("~/Content/kendo.common.min.css")">

<link rel="stylesheet" href="@Url.Content("~/Content/kendo.default.min.css")">

<link rel="stylesheet" href="@Url.Content("~/Content/examples-offline.min.css")">

<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>

<script src="@Url.Content("~/Scripts/console.min.js")"></script>

<script src="@Url.Content("~/Scripts/prettify.min.js")"></script>

@RenderSection("HeadContent", false)

</head>

<body>

<div class="page">

<div id="example" class="k-content">

@RenderBody()

</div>

</body>

</html>

I also posted the same question on Stack Overflow KendoUI grid InCell editing style issue with images, so you can see what I am talking about.

Thanks in advance.

Sincerely,
Vlad.

Grid

answered on 11 Nov 2012

0 answers

76 views

Nav Bar/Scolls/Truncates is cutt off with Form Input on iPhone

My navbar truncates on when I select a form field. The navbar is cut almost in half and the back button is hard to reach. Only a full page refresh restores the natural size.

You can reproduce the problem with the following link on an iphone device:
http://www.veterinaryclipboard.com/#dosagecalcview?isfeline=true

NavBar

asked on 11 Nov 2012

0 answers

68 views

Regarding filterable and groupable used together in a grid

I want to use dynamic groupable and my aggregate value should be displayed only once..i.e if we group n no of columns the aggregate value displayed should be only once i.e the aggregate value of all the columns grouped..I am using normal javascripts and html for manipulation..

In filterable part I want to display the entire set of values present in that column i.e like a drop dowm menu...how to do that???

and when both filterable and dynamic groupable are used together how to get the aggregate value of the n filtered columns..

Grid

asked on 11 Nov 2012

0 answers

477 views

Is there a way to disable swipe events?

I'm using a ScrollView as a carousel to house some questions and need to disable swipe events for it (I'm using "next" and "previous" buttons to control it). The problem I'm coming across is that I have a jQuery-UI slider inside the ScrollView, but when I try to change the slider value, it starts to move the ScrollView to the next "page".

I was hoping there was a native way to disable "swipe to move", but it doesn't appear that there is.

I've played around with catching the events on the ScrollView pages, but haven't been able to get something that works on an actual device:

$('#scrollview-container [data-role="page"]').on('mousedown', function(e) {

console.log('mousedown');

e.stopImmediatePropagation();

});

$('#scrollview-container [data-role="page"]').on('touchstart', function(e) {

console.log('touchstart');

e.stopImmediatePropagation();

});

Any ideas or help would be appreciated.

ScrollView (Mobile)

asked on 10 Nov 2012

13 answers

701 views

Knockout Tutorial #2

Hi:

I am trying to convert the Knockout tutorial #2 to Kendo MVVM. Learn knockout Tutorial Collections
Not doing well.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Tutorial2_4.aspx.cs" Inherits="KnockoutApp.Tutorials.Tutorial2_3" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

<style type="text/css">

.deleteLink

{

color: red;

font-weight: bold;

}

</style>

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<div id="mvvmRegion">

<h2>Your seat reservations (<span data-bind="text: seats.length" ></span>)</h2>

<button id="addSeatButton" data-bind="click: addSeat">Reserve another seat</button>

<div style="width: 600px;">

<table id="reservationTable">

<thead><tr>

<th data-field="name" style="width: 160px;">Passenger name</th>

<th data-field="meal.mealName" style="width: 160px;">Meal</th>

<th data-field="meal.price" style="width: 100px;">Surcharge</th>

<th> </th>

</tr></thead>

<tbody>

</tbody>

</table>

</div>

<h3 data-bind="visible: surcharge">

Total surcharge: $<span data-bind="text: totalSurcharge00"></span>

</h3>

</div>

<script id="reservationTemplate" type="text/x-kendo-template">

<tr>

<td style="width: 160px;"><input id="nameTextBox" value="#= name #" data-bind="value: seats.name" /></td>

<td style="width: 160px;"><input id="mealDropDown" class="mealDropDownClass" value="#= meal.mealName #" data-bind="value: seats.meal.mealName" /></td>

<td style="width: 100px;">#= meal.price #</td>

<td><a href="" class="deleteLink">Remove</a></td>

</tr>

</script>

<script type="text/javascript">

// Class to represent a row in the seat reservations grid

function SeatReservation(fname, initialMeal) {

var self = this;

self.name = fname;

self.meal = initialMeal;

}

//

var availableMeals = [

{ mealName: "Standard (sandwich)", price: 0.0 },

{ mealName: "Premium (lobster)", price: 34.95 },

{ mealName: "Ultimate (whole zebra)", price: 290.0 }

];

//

var viewModel = kendo.observable({

// type array populates the drop down

meals: availableMeals,

// array will hold the grid values

seats: [

new SeatReservation("Steve", availableMeals[1]),

new SeatReservation("Bert", availableMeals[0])

],

// Computed data

totalSurcharge: function () {

var total = 0;

for (var i = 0; i < this.get("seats").length; i++)

total += this.get("seats")[i].meal.price;

return total + 0.00;

},

totalSurcharge00: function () {

var total = this.totalSurcharge() + 0.00;

return total.toFixed(2);

},

surcharge: function () {

var total = this.totalSurcharge() + 0.00;

if (total > 0) return true;

return false;

},

//

maxSeating: function () {

if (this.seats.length < 5) return true;

return false;

},

// seats.length < 5

// event execute on click of add button

addSeat: function (e) {

// add the items to the array of expenses

this.get("seats").push(new SeatReservation("", self.availableMeals[1]));

return false;

},

removeSeat: function (seat) {

var seats = this.get("seats");

seats.splice(seats.indexOf(seat), 1);

}

});

// apply the bindings

kendo.bind($("#mvvmRegion"), viewModel);

//

var reservationDataSource = new kendo.data.DataSource({

data: viewModel.get("seats"),

schema: {

model: {

id: "name",

fields: {

// data type of the field {Number|String|Boolean|Date} default is String

name: { type: "String" },

meal: {

mealName: { type: "String" },

price: { type: "Numeric" }

}

});

//

$("#reservationTable").kendoGrid({

dataSource: reservationDataSource,

rowTemplate: kendo.template($("#reservationTemplate").html()),

dataBound: function (e) {

$(".deleteLink").click(function (e) {

e.preventDefault();

if (confirm("Do you what to delete this?")) {

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

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

viewModel.removeSeat(dataItem);

}

return false;

});

}

});

$(".mealDropDownClass").kendoDropDownList({

dataTextField: "mealName",

dataValueField: "mealName",

dataSource: availableMeals

});

//

</script>

</asp:Content>

Problem is the binding is not happening and the dropdown loses it's dropdownlist on add or remove.

Note: Kendo does not seem to have the calculated (logical) binding like Knockout does for visible and enabled.

Phil

MVVM

answered on 10 Nov 2012

0 answers

145 views

Pie chart not full

I'm trying to make a pie out of this JSON data:

[{"status":"Received","number":"2"},{"status":"In Progress","number":"1"}]

Here's my function:

function createChart() {

$("#chart").kendoChart({

theme: $(document).data("kendoSkin") || "default",

dataSource: {

transport: {

read: {

url: "http://dev.openbill.co.uk/admin/crud/projects/chart.json.php",

dataType: "json"

},

sort: {

field: "status",

dir: "asc"

},

chartArea: {

height: 125,

width: 125

},

legend: {

visible: false

},

seriesDefaults: {

type: "pie"

},

series: [{

field: "number",

categoryField: "status",

padding: 10

}],

tooltip: {

visible: true,

template: "#= dataItem.status #: #= dataItem.number #"

}

});

}

Interestingly though, the pie only occupies 1/4 of a circle. I've been playing around with the numbers to try and grow and shrink them, but I just can't seem to make the thing occupy more than 1/4 of a pie.

I've attached a screenshot.

Could someone please let me know what I'm doing wrong?

Charts

asked on 10 Nov 2012

0 answers

287 views

Custom header title in MVC Grid

Hi, I am trying to set the Header title for a field a parameter value.

eg. something like the below (I would like the value in bold FIRST_HEADER to be for example x.FIRST_HEADER derived from the model and not a static string.

Thanks in advance
Manos

@(Html.Telerik().Grid<CheckoutConfirmDeliveryModel>()
.Name("gvDelivery")
.ClientEvents(events => events
.OnDataBinding("onDataBinding"))
//.OnDataBound("onDataBound"))
//.OnComplete("onComplete"))
.Columns(columns =>
{
columns.Bound(x => x.FIRST_ID).Hidden(false);

columns.Template(x => Html.ActionLink(x.FIRST, "FIRSTACTION", "CheckoutController", new { x.TIME_ID })).Title(FIRST_HEADER).ClientTemplate("<a href=\"" + Url.Action("SelectDeliveryDateTime", "CheckoutController") + "/<#= FIRST#>\">" + "<#= FIRST #>" + "</a>");
})
.DataBinding(dataBinding => dataBinding.Ajax().Select("DeliveryList", "Checkout", Model))
.EnableCustomBinding(true))

Grid

asked on 10 Nov 2012

0 answers

206 views

How to set grid height to 100%

Hi,

I'm modifying Row Template sample to put three grids horizontally. My questions are:

How can I set the height of the grid to the height of my browser? I tried to change the grid height to 100% but it does not work.
rowTemplate: kendo.template($("#rowTemplate").html()),
height: 100%
In my case, three grids cannot fit in my screen a scroll bar showing at the bottom as expected. When I testing my modified version on my iphone and swiping the grid's body, I expect the content will move but it does not. If I swiping the grid's header the content moved. Just wonder how can I move the content when swiping the grid's body.

Thank you very much for your time.
puyo

Grid

asked on 10 Nov 2012