Questions on Kendo UI for jQuery Forum

1 answer

167 views

Hey Guys,

I'm binding a grid to a table (using the kendo-knockout) library and my table has a caption. Unfortunately when the binding takes place the caption is no longer in the right place. It stays on the content table thus appearing between the headers and the main table content.

So..
<table>
<caption>Caption</caption>
<thead>...</thead>
<tbody>...</tbody>
</table>

Get's rendered as

Headings
Caption
Data

rather than

Caption
Headings
Data

as you might expect.

Is there any way to have captions supported. I can easily overcome this by having my caption above the table in a span or some such but I'd really like to keep my html as semantic as possible.

Chris

Grid

answered on 31 May 2013

1 answer

479 views

Grid popup editor. How to update field value on drop down list change

I have a grid set up with my datasource and working properly with popup editing. My popup has two drop down lists and a number field. What I would like to do is set the value of the number field to a specific value when the user makes their selection from the first drop down list, essentially pre-populating the number value to "highest entered value for the user selected item + 5".

Is there a way to hook up to the "change" event for the drop down list in the popup editor and as part of the function for the change event, query the current dataset bound the grid to retrieve a value, then set that value to the numeric field in the popup editor?

Robert

Grid

answered on 31 May 2013

3 answers

128 views

Kendo UI Mobile & Photoswipe

Hi ,
I'm trying to build a image gallery with options on swipe the image to the next image and prev image location of an array of images.

The best next thing i could find was the following http://www.webresourcesdepot.com/image-gallery-for-mobile-and-touch-devices-photoswipe/
which does the job perfectly on any browser and with custom toolbar where you can add options for close and etc.
The problem is when i compile the kendo application for ipad 2.0 using phonegab and the latest xcode version the gallery opens fine but i have no event custom listeners except the ones the gallery supports.
I mean if on the toolbar i attach a div with a ID and i try call that id onclick or on tap the event doesnt triggers.
The gallery appends classes on the body and adds some html as well.

So i cant find a relative solution to this problem , is there any other gallery someone could suggest to use that runs on kendo ui mobile?

General Discussions

answered on 31 May 2013

1 answer

6.1K+ views

How to load window content from PartialView

Hi
I'm using Kendo window in my MVC application. I was wondering if there is any way to fill the content of the window from partialView ?
For example I have a partial view stored in file PartialViewSample.cshtml

@model Product

@using(Html.BeginForm("InsertProduct","Product"))

{

Html.TextBoxFor(val => val.Name);

Html.TextBoxFor(val => val.Id);

}

and in some other place I would like to load this content to kendo window.

<button id="addButton">Add</button>

<script type="text/javascript">

$(document).ready(function () {

var window = $("#window").kendoWindow({

height: "200px",

modal: true,

title: "Centered Window",

visible: false,

width: "200px"

}).data("kendoWindow");

});

If the user clicks the button I would like to load content of the window. I was trying to do this that way

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

var window = $("#window").data("kendoWindow");

window.content("@Html.Partial("PartialViewSample ",new Product()).ToHtmlString()");

window.center();

window.open();

});

Unfortunatelly it doesnt work. Is there any way to load content of the window from using Html.Partial or sth like that ?

Window

answered on 31 May 2013

1 answer

203 views

How to: Display grouped data from datasource using listview Template

Hello Telerik,
I have a kendo datasource that will load the following json data

[{"pedidoId":1,"supervisorId":"manuel","vendedorId":"1","clienteId":"1","total":12345.0000,"hora":"12:00"},{"pedidoId":2,"supervisorId":"manuel","vendedorId":"1","clienteId":"1","total":54321.0000,"hora":"12:06"},{"pedidoId":3,"supervisorId":"luis","vendedorId":"2","clienteId":"2","total":4521.0000,"hora":"12:10"}]

Using Mobile ListView Template, I want to display only the grouped data, for example:
<li>supervisorId = manuel, Total = 66666 </li> (that is the result of 12345+ 54321
<li>supervisor Id = luis, Total = 4521 </li>

Please refer to my attach files for the complete code.

Thank you for your help.

ListView (Mobile)

answered on 31 May 2013

3 answers

203 views

populating an observable with with single object as opposed to a collection of objects

i am populating multiple observables and binding them to grids without much problem. for example i have code like this that i am using to populate a grid:
var viewModel = kendo.observable({
partsSource: new kendo.data.DataSource({
transport: {
read: {
url: "/api/Parts",
dataType: "json"
}
}
})
});

this is calling a service that returns IEnumerable<Part>. if i only want to return a specific part i call my service like this /api/Parts/7 and i know from fiddler that it returns that single part but i can't get it populate my observable.

i guess the issue is that the service now returns only <Part> and not the enumerable. in fiddler it looks identical to the data used in the examples that seem to work flawlessly but i can't seem to find the proper syntax with remote data.

any ideas? thanks!

MVVM

answered on 31 May 2013

2 answers

44 views

Grouped data for every series

Good morning

I have 2 separate data sources with the same length and same values for the category field.
[{"category":"a","value":1},{"category":"b","value":2},{"category":"c","value":3}]
and
[{"category":"a","value":2},{"category":"b","value":3},{"category":"c","value":4}]

Is it possible to apply these data sources to series1 and series2 on the same line chart?

Thanks.
Raido

Charts

answered on 31 May 2013

5 answers

477 views

ASP.NET MVC model binding

Hi! We want to use treeview with strongly-typed model binding (not AJAX).

This is our TreeView:

@(Html.Kendo().TreeView().Name("treeviewDepartments")

.BindTo(Model.Departments, (NavigationBindingFactory<TreeViewItem> mappings) =>

{

mappings.For<AddDepartmentTreeModel>(binding => binding.ItemDataBound((item, dapartment) =>

{

item.Text = dapartment.Name;

})

.Children(department => department.Departments));

})

)

We would like to add new node using this function.

function addDepartment()

{

var treeView = $("#treeviewDepartments").data("kendoTreeView");

var selectedNode = treeView.select();

// passing a falsy value as the second append() parameter

// will append the new node to the root group

if (selectedNode.length == 0) {

selectedNode = null;

}

treeView.append({

text: "New department"

}, selectedNode);

}

Is it way to bind and submit to server dynamically added treeview nodes with model?
Thanks!

TreeView

answered on 31 May 2013

7 answers

709 views

MVVM vs Knockout

I just had a quick glance at the MVVM section of the docs today so I may be missing something. But the Kendo UI MVVM looks a lot like KnockoutJS implementation. Is it the same code base?

That would explain why there was KnockoutJS support from the early beta's before release.

MVVM

answered on 31 May 2013

2 answers

268 views

Grouping and Aggregates in grid - multiple problems in IE8

I'm running into separate problems with setting up grouping and aggregates with the Kendo Grid in an asp.net mvc 3 project (using razor/fluent syntax). The problems exist even in the sample code provided in the Kendo grid demo page. I have the commercial version of Kendo 2013 Q1 release. I'm using jquery 1.9.1 version.

Here is my grid configuration in razor -

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

.Name("productsGrid")

.Columns(columns =>

{

columns.Bound(p => p.ProductName)

.ClientFooterTemplate("Total Count: #=count#")

.ClientGroupFooterTemplate("Count: #=count#");

columns.Bound(p => p.UnitPrice).Format("{0:C}")

.ClientFooterTemplate("<div>Sum: #= sum #</div>")

.ClientGroupFooterTemplate("<div>Sum: #= sum #</div>");

columns.Bound(p => p.UnitsOnOrder)

.ClientFooterTemplate("Average: #=average#")

.ClientGroupFooterTemplate("Average: #=average#");

columns.Bound(p => p.UnitsInStock)

.ClientGroupHeaderTemplate("Units In Stock: #= value # (Count: #= count#)")

.ClientFooterTemplate("<div>Min: #= min #</div><div>Max: #= max #</div>");

})

.DataSource(dataSource => dataSource

.Ajax()

.Aggregates(aggregates =>

{

aggregates.Add(p => p.UnitsInStock).Min().Max().Count();

aggregates.Add(p => p.UnitsOnOrder).Average();

aggregates.Add(p => p.ProductName).Count();

aggregates.Add(p => p.UnitPrice).Sum();

})

.Group(groups => groups.Add(p => p.Category))

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

)

And here is the relevant code from my controller class -

public ActionResult Products([DataSourceRequest] DataSourceRequest request)

{

return Json(GetProducts().ToDataSourceResult(request));

}

private IEnumerable<ProductViewModel> GetProducts()

{

var products = new List<ProductViewModel>();

products.Add(new ProductViewModel() { Category = "Food", ProductName = "Pasta", UnitPrice = 39.00m, UnitsInStock = 1, UnitsOnOrder = 5 });

products.Add(new ProductViewModel() { Category = "Food", ProductName = "Salami", UnitPrice = 21.00m, UnitsInStock = 2, UnitsOnOrder = 3 });

products.Add(new ProductViewModel() { Category = "Food", ProductName = "Bratwurst", UnitPrice = 39.00m, UnitsInStock = 2, UnitsOnOrder = 7 });

return products.AsEnumerable();

}

Problem #1: Grouping - Grouping does not work in IE8. I get a javascript error from kendo js file (i've tried both kendo.web.js or kendo.all.js, instead of the minified versions to see the full method. Screenshot attached.) and the grid get stuck on "loading". It runs fine on IE9 and Chrome but not in IE8 or IE9-compatibility mode. I've also tried downgrading my jquery from 1.9.1 to 1.8.x or even 1.7.x and gives the same error.

I really need to get it working in IE8. If you need, i can send you the full sample code/project to reproduce this.

To get around this grouping problem, I tried to change my approach to not use an ajax call but pass the fully populated model to the View. After removing the .Ajax() config and adding .Server() config setting in the datasource, what I found that is that the grouping starts working in IE8 (and remains functional in other browser versions) but the aggregates stop adding up - they always show a value of 0 after that. Which brings me to my second problem.

Problem #2: Aggregates - Aggregates functions not working when not using ajax call to read data. This is a consistent problem no matter which browser version I'm using IE8/9 or Chrome. The grid configuration is very similar to the above -

@model IEnumerable<ProductViewModel>

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

.Name("productsGrid")

.Columns(columns =>

{

columns.Bound(p => p.ProductName)

.ClientFooterTemplate("Total Count: #=count#")

.ClientGroupFooterTemplate("Count: #=count#");

columns.Bound(p => p.UnitPrice).Format("{0:C}")

.ClientFooterTemplate("<div>Sum: #= sum #</div>")

.ClientGroupFooterTemplate("<div>Sum: #= sum #</div>");

columns.Bound(p => p.UnitsOnOrder)

.ClientFooterTemplate("Average: #=average#")

.ClientGroupFooterTemplate("Average: #=average#");

columns.Bound(p => p.UnitsInStock)

.ClientGroupHeaderTemplate("Units In Stock: #= value # (Count: #= count#)")

.ClientFooterTemplate("<div>Min: #= min #</div><div>Max: #= max #</div>");

})

.DataSource(dataSource => dataSource

.Server()

.Aggregates(aggregates =>

{

aggregates.Add(p => p.UnitsInStock).Min().Max().Count();

aggregates.Add(p => p.UnitsOnOrder).Average();

aggregates.Add(p => p.ProductName).Count();

aggregates.Add(p => p.UnitPrice).Sum();

})

.Group(groups => groups.Add(p => p.Category))

)

When i use this configuration, my grid rows show correctly and my group is created but the aggregate values are always zero. Is there some additional configuration I need to set in the grid?

Ideally I would like to fix both problems # 1 & #2 but I'd be happy if I can find a fix for problem #1 at least.

Grid

answered on 31 May 2013