Questions on Kendo UI for jQuery Forum

3 answers

678 views

Kendo Grid ClientTemplate calling for a custom helper

I have tried several things with no success. The most I can is the helper to be called BUT instead of the value being passed it passes #: Style # as string instead of its value

without calling the helper i can display all values

My question is: how do I call a helper that has parameters inside a ClientTemplate?

Helper (MyHelpers.cshtml on app_code folder)

@helper ProductDisplay(string Style, string DefaultColor, string Name)
{
<div class="prodName" data-id="@(Style + "-" + DefaultColor)">@Name</div>
string img = "http://url/image/" + Style + DefaultColor + "_1?$ereredq$&bregc=0,0,0,0";
<text><img src="@img" /></text>
}

Grid
============================================
@(Html.Kendo().Grid<TestProject.Models.ProductModel.ProductInformation>()
.Name("webGrid").AutoBind(true).Scrollable(scr=>scr.Height(430))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetProducts", "Home")
)
.ServerOperation(false)
)
.Columns(columns =>
{
columns.Template(@<text></text>).ClientTemplate(@MyHelpers.ProductDetail("#: Style #, #: DefaultColor #, #: Name #").ToHtmlString());
})
.Pageable()
.Scrollable()
)

Grid

answered on 23 Oct 2013

5 answers

206 views

Can you create view models as functions?

I currently use Knockout, but am trying out Kendo to see how the two compare. With Knockout there are a couple of potential view model creation patterns, one is to use a literal:

var viewModel = {
firstname: ko.observable("Bob")
};

ko.applyBindings(viewModel );

and the other is to use a function:

var viewModel = function() {
this.firstname= ko.observable("Bob");
};

My preference has always been to use a function because it essentially gives you a 'factory' allowing you to create multiple instances of the same view model.With KendoUI, all the examples I have seen use a literal syntax:

var viewModel = kendo.observable({
firstname: "Bob"
});

kendo.bind(document.body, viewModel);

My question is, with Kendo is it possible to emulate the Knockout style of view model creation via functions? This would allow me to create multiple instances of the same view model, add 'private' functions, etc ...

MVVM

answered on 23 Oct 2013

3 answers

1.7K+ views

Grouping and Aggregating multiple fields from a JSON datasource within the chart

I've been able to accomplish such grouping in certain charts and not others.
For example, assume that I have a datasource that looks something like this:

var pictures = [

{ type: "JPG", len: 20, wid: 15, appr: 17.5, count: 2 },

{ type: "JPG", len: 22, wid: 17, appr: 12.5, count: 3 },

{ type: "JPG", len: 24, wid: 15, appr: 10.5, count: 1 },

{ type: "JPG", len: 22, wid: 4, appr: 17.5, count: 6 },

{ type: "PNG", len: 20, wid: 15, appr: 17.5, count: 4 },

{ type: "PNG", len: 25, wid: 7, appr: 9.5, count: 4 },

{ type: "PNG", len: 21, wid: 11, appr: 21.5, count: 1 }

];

I want to group by my category which in this case is "type", I want to sum all other fields.

I am able to do this quite simply with column charts, simply by setting:

series: [{aggregate: "sum",categoryField: "type"}]

However, this does not work with bullet or pie charts, so in search
of a more universal method. I "massage" the data first by adding this
at the beginning:

var dataSource = new kendo.data.DataSource({

data: pictures,

group: {

field: "type",

aggregates: [

{ field: "len", aggregate: "sum" },

{ field: "wid", aggregate: "sum" }

]

}

});

dataSource.read();

I don't know why just grouping the datasource isn't enough.. I
have to throw it into arrays and assign each array to a series like so:

var seriesA = [],

seriesB = [],

categories = [],

items = dataSource.view(),

length = items.length,

item;

for (var i = 0; i < length; i++) {

item = items[i];

seriesA.push(item.aggregates.wid.sum);

seriesB.push(item.aggregates.len.sum);

}

This works as long as having only one valueField per series works.
In the case of a bullet chart, or if I want to assign a field to a
plotband to a bar/column chart: it does not.

I believe I must be doing something completely wrong, as converting
my ungrouped JSON object to a grouped kendo datasource should be enough.
Below is my JSFiddle..

http://jsfiddle.net/DxMb8/4/

Any help would be greatly appreciated! thanks!

Charts

answered on 23 Oct 2013

2 answers

96 views

external views loaded from another domain

Hi there,

I am working on a mobile application to be deployed with cordova and am very excited about the Kendo Mobile UI. I have been playing with it for a couple of days and have this burning issue: When I try to load external view from local file on my machine everything runs smoothly but I was thinking of loading URLs remotely from the web site and keep the main kendo UI within the mobile application. So I figured I would just load the appropriate on the local application from the remote domain. But when I try to load a view with the full domain path like that:
<a data-role="button" href="http://www.comain.com/mobile_url.html" style="background-color: green">Go to</a>
The browser freezes and the view is not loaded. Does that mean that I can only include local files? If yes, maybe I can load external content with Ajaxor somethng of the sort? Or maybe there is a better approach I am missing?

And a second question - is there a way to tell kendo if a regular <a href... anchor should point to a view, or to a standard html page?

Thanks!

General Discussions

answered on 22 Oct 2013

2 answers

377 views

Programmatically Show Column & Group by another Column

I would like to create a button that when clicked, programmatically shows a column that is previously hidden, and then groups by a specific column... Psudo code might be...

1.) Button Click
2.) Show Column called "City"
3.) Group by "State".

Any pointers on how to do this?

Jason

Grid

answered on 22 Oct 2013

1 answer

2.0K+ views

Reset Grid to default when page loaded (sorting, filtering, paging, grouping etc...)

I would like to create a button that woudl allow the user to reset this grid. Meaning that after they apply some sorting, grouping, paging etc... they can click on this button and it would return the grid to the state it was at when the page loaded... Similar to reloading the entire page, but just reloading the grid.

Thanks,
Jason

Grid

answered on 22 Oct 2013

2 answers

145 views

page (before) show events are only triggered once

Hi there,

I'm using Kendo UI Mobile for a mobile application for a client, but am struggling with the events. I have found that the page-show and before-show events are only called the first time a page is loaded. If I navigate to the same page once more these events aren't triggered a second time.

My html:

1.<div id="page_test" data-role="view" data-title="Test" data-before-show="beforeshow()" data-show="show()">

2. <div class="view-content">

3. Test!

4. </div>

5.</div>

The javascript:

1.function beforeshow() {

2. alert('beforeshow');

3.}

4.

5.function show() {

6. alert('show');

7.}

If this is the correct way the events should work, could someone offer any other ideas on events that trigger at for each page view?

Aidan Langelaan

General Discussions

answered on 22 Oct 2013

1 answer

139 views

How to download Kendo UI Mobile - current Icenium version

How do I download the current version of Kendo UI Mobile for Icenium (v2013.2.729 I believe).
I'm after the full package as I only wish to include the kendo.mobile.flat.min.css file (not the all.min.css one) in my project.

I can download the latest v2013.2.918 via the trial download but I don't think Icenium supports it yet.

Thanks
Darren

General Discussions

answered on 22 Oct 2013

1 answer

113 views

DropDownList in List View

Hello! I have a question......

It´s Url explains how can i change appearence for elements in a form....
http://demos.kendoui.com/mobile/forms/appearance.html#/

but wich is the style for display dropdownlist in all space of the list view like a input or label?

for label:

.km-root .appearance .km-listview label
{
width: 100%;
}

for input:

.km-root .km-pane .km-view.appearance .km-listview input
{
position: relative;
width: 100%;
right: 0;
margin-top: 0;
top: 0;
}

for dropdownlist??????????????

thank you very much

i hope your answer

ListView (Mobile)

answered on 22 Oct 2013

1 answer

135 views

How to replace a header by another one

Hi guys,

i'm doing some tests, to do that i took a template on the kendo ui' page.
i clean it a bit to get what i want and right now, i have two div header in my html page.
i remove one at the load of the page and when i click on a button, i just want to remove the current header et set another one instead.
i've tried plenty of things but nothing seems to work correctly using jquery

here is my code:

<!DOCTYPE html>

<html>

<head>

<title>Demo</title>

<link href="styles/kendo.common.min.css" rel="stylesheet" />

<link href="styles/kendo.default.min.css" rel="stylesheet" />

<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />

<link href="styles/index.css" rel="stylesheet" />

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.min.js"></script>

</head>

<!--

Contenu des pages chargées par le paneau left

-->

<body>

<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox">

</div>

<div data-role="view" id="drawer-starred" data-layout="drawer-layout" data-title="Starred Items">

</div>

<div data-role="view" id="drawer-drafts" data-layout="drawer-layout" data-title="Drafts">

</div>

<!--

// Paneau Left

-->

<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home', 'drawer-starred', 'drawer-drafts']">

<ul data-role="listview" data-type="group">

<li>Menu

<ul>

<li><a href="#drawer-home" data-transition="none">m1</a></li>

<li><a href="#drawer-starred" data-transition="none">m2</a></li>

<li><a href="#drawer-drafts" data-transition="none">m3</a></li>

</ul>

</li>

</ul>

</div>

<!--

Headers

-->

<div class="Head" data-role="layout" data-id="drawer-layout">

<header data-role="header">

<div class="" data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>

<span id="compagnyName">Demo</span>

<a data-role="button" onClick="changeHead()" data-icon="drawer-button" data-align="right"></a>

</div>

</header>

</div>

<div class="HeadSearching" data-role="layout" data-id="drawer-layout">

<header data-role="header">

<div data-role="navbar">

<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>

<input type="text" id="city" name="city" class="k-textbox" placeholder="Ville" data-align="center" />

<select name="country" id="country" data-align="right">

<option>France</option>

<option>Angleterre</option>

<option>Luxembourg</option>

<option>Espagne</option>

</select>

</div>

</header>

</div>

<script>

var app = new kendo.mobile.Application(document.body);

$('.HeadSearching').remove();

</script>

<script>

function changeHead()

{

alert('header replace');

$('.head').replaceWith('.HeadSearching');

}

</script>

</body>

</html>

if someone could help me doing this correctly ..
thanks by advance ;)

NavBar

answered on 22 Oct 2013