Questions on Kendo UI for jQuery Forum

7 answers

728 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

273 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

151 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

1 answer

1.0K+ views

Add Custom CSS Class to Grid

Hi there,

I have occasion to style a few of my grids slightly differently to the defaults in my theme; what I really like to be able to do is specify, in the options for these grids, a custom CSS class to be applied to the generated k-grid element.

Basically, by default, my tables should not have any kind of border applied. However in several circumstances I do want to have a border applied around the whole grid. I have tried applying a CSS class to the table to which I bind (using kendo-knockout) but of course this table becomes the content table and thus the border does not appear around the header. Is there any way, save through JavaScript manipulation, that this can be achieved. I was hoping something like the columns.attributes configuration property would be available for the whole grid, but this, sadly, does not seem to be the case.

Regards,
Chris Meek

Grid

answered on 30 May 2013

1 answer

309 views

store window minimize state

Hi!

There is dashboard page with several kendo window objects.
I'd like to store window size, position, minimize state and z-order

I was able to retrieve and save window postion and size

('#div_widget').kendoWindow ({

actions: ["Refresh", "Maximize", "Minimize"],

height : get_widget_setting (id_widget, "height", "300px"),

width : get_widget_setting (id_widget, "width", "600px"),

minWidth: 600,

minHeight: 260,

title : w.label,

iframe : true,

content: w.href,

resize : function(e){

var widget = e.sender.element.data("kendoWindow");

var is_maximized = widget.options.isMaximized; // Is this a dirty hack? Are there another ways?

if (is_maximized) {

set_global_setting ("maximized_widget", id_widget);

return;

}

var wrapper = widget.wrapper;

save_widget_setting(id_widget, "height", wrapper.css("height"));

save_widget_setting(id_widget, "width", wrapper.css("width"));

},

dragend : function (e) {

var position = e.sender.element.data("kendoWindow").wrapper.offset();

save_widget_setting(id_widget, "top", position.top + "px");

save_widget_setting(id_widget, "left", position.left + "px");

}

})

- How can I catch minimize button click? I want to save window maximize/minimize state.
- Is there a way to determine window z-order change event and window currrent z-order?

Window

answered on 30 May 2013

3 answers

129 views

Charts Settings

Hello All,

I have started exploring the different types of charts. Mainly, I am looking for Pie and Bar charts. I have attached the razor file. I would like to create the charts like images.

What are the legend settings available to create the chart in the same manner for Pie chart?

How can I fill the bar with the data level and the rest should be transparent?

Let me know what are the solutions available to create such charts.

Thanks!

Charts

answered on 30 May 2013

6 answers

138 views

RTL not working in 2012 Q3 BETA

Just downloaded 2012 Q3 Beta with so much hope for RTL support, but sadly it's not working the way it should. Is it be cause of beta, or something in my pc configuration?

I tested it with Chrome 22, Firefox 14 and IE 9 on my win 7 64bit.
In all of theme layout was not rtl, and column header's weren't align with their body.

Grid

answered on 30 May 2013

3 answers

213 views

MVVM to bind textboxes to a row of data returned from remote datasource

We are retrieving details for the selected row in a grid from a remote data source. The data retrieval works as expected. We have an Observable object from the data returned from this call. We would like this information to be bound to few textboxes and checkboxes on page using the Kendo.Bind() method, but for some reason it does not work. It does work if we bind it to a drop down list but not to a textbox or label for that matter.

I understand we are getting a table from the remote data (in JSON), but what we would like is to bind certain row and column to a textbox.

This is the example of data returned from remote service -
var data = [{ "FundingResourcePolicyDetailId": 1146060, "PatientFundingResourceId": 3594866, "IdNumber": "91234567y1", "IssueDate": "04/30/2012", "StartDate": "04/15/2012", "EndDate": "04/30/2012", "Group": "", "CoPay": 0.0, "Deductible": 0.0, "PercentageCoverage": 0, "Basic": 0, "Preventive": 0, "Major": 0, "IsVerified": false, "IsAssingmentAccepted": true, "CardFirstName": "MICKEY", "CardLastName": "TESTPATIENT", "CardMiddleInitials": "TICKLE PIN" }];

Here is a example of what we are trying to accomplish-

http://jsfiddle.net/qvKRk/402/

Thanks.
Sameer

MVVM

answered on 30 May 2013