Questions on Kendo UI for jQuery Forum

1 answer

6.2K+ 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

218 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

216 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

56 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

489 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

738 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

285 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

6 answers

1.0K+ views

Multiple row drag and drop in Kendo UI Grid

Is there any way to get this working? tried a few ideas but nothing worked - if its not possible whens this likely to be available?

Thanks
Gregor

Grid

answered on 30 May 2013

3 answers

73 views

kendo UI grid in SharePoint 2010 - the column Grouping feature does not work (drag'n'drop issue ?)

in SharePoint 2010, I have an ASPX page with a kendo UI grid.
I have configured the grid to have the column Grouping feature turned ON:

groupable: true

the grid loads, and the toolstrip above the grid, tells user to drag'n'drop columns, in order to have them grouped.

However, I cannot drag'n'drop the column header:
the 'drag' does not start.

The same code works fine outside of SharePoint (in a ASP.NET project).

It looks like SharePoint javascript is preventing kendo UI from receiving the 'drag' event ?

note: the feature to re-order columns also does not work (also because the 'drag' operation does not start)

There are no browser errors (in Chrome console, OR in IE9 console).

has anyone experienced a similar issue - or maybe you know how to prevent SharePoint from blocking the 'drag' event ?

Grid

answered on 30 May 2013

1 answer

153 views

How to Keeping TreeView in sync with DB using webservice?

Problem: Ensure TreeView is constantly checking for updates?
--------------------------------------------------------------------------------------------
I need to keep data shown in treeview constantly in sync and up-to-date with the tables in my database. How can i do this when my webpage never interacts directly with the database and only talks directly with a web service( which does the hands on communication with the actual database ).

Html/javascript page
|
|
ASP.NET MVC Web Service( WEB API )
|
|
SQL Server 2012 Database

TreeView

answered on 30 May 2013