or
01.
<
div
id
=
"home-view"
data-role
=
"view"
data-layout
=
"home-layout"
>
02.
<
div
class
=
"main-header"
>
03.
<
div
class
=
"logo"
><
img
src
=
"assets/img/rgb_medium.png"
></
div
>
04.
</
div
>
05.
06.
<
div
class
=
"top-nav"
>
07.
<
ul
>
08.
<
li
class
=
"active"
><
a
href
=
"#"
>Home</
a
></
li
>
09.
<
li
><
a
href
=
"crm_home.html"
> Mobile CRM</
a
></
li
>
10.
<
li
><
a
href
=
"www.google.com"
> Mobile Service</
a
></
li
>
11.
<
li
><
a
href
=
"bar.html"
> Sync Data</
a
></
li
>
12.
<
li
><
a
href
=
"#clear"
> Clear Data</
a
></
li
>
13.
<
li
><
a
href
=
"#about"
> About</
a
></
li
>
14.
<
div
class
=
"clear"
> <
div
>
15.
</
ul
>
16.
</
div
>
17.
<
div
class
=
"clear"
> <
div
>
18.
</
div
>
01.
<
div
id
=
"bar"
data-role
=
"view"
>
02.
<
p
>I am remote view, my ID is "bar", but my relative path is "bar.html"</
p
>
03.
<
p
>Swipe to reveal the drawer</
p
>
04.
</
div
>
05.
06.
<!-- remote view is listed with its relative path "bar.html", not its ID "bar" -->
07.
<
div
data-role
=
"drawer"
>
08.
<
ul
data-role
=
"listview"
>
09.
<
li
><
a
href
=
"#foo"
>Foo</
a
></
li
>
10.
<
li
><
a
href
=
"#barhtml"
>Bar</
a
></
li
>
11.
</
ul
>
12.
</
div
>
1.
<
div
id
=
"foo"
>
2.
<
a
href
=
"bar.html"
data-role
=
"button"
>Load remote View</
a
>
3.
</
div
>
function paramCustomFunc(options, operation) {
var KendoOptionGrid = FormatGridOptions(options);//format options
var userSettings = null;
if (ArrayFistLoad == null)
ArrayFistLoad = new Array();
if (ArrayFistLoad[ActiveGrid.Name] == null) {//Ensure that it first time that datasource read is called in order to apply the user custom settings
if (PreferenceUser != null) {
var data = PreferenceUser.data.Data[0];//retrieve data preference
for (var i = 0; i <
data.GridSettings.length
; i++) {
if (data.GridSettings[i].Datagrid == ActiveGrid.Name) {//page can contain more than 1 datagrid, so find the good settings related to datagrid
userSettings
=
data
.GridSettings[i];
break;
}
}
}
}
if (userSettings != null) {
if(userSettings.Paging != null){
KendoOptionGrid.Paging.page
=
userSettings
.Paging.page;
KendoOptionGrid.Paging.skip
=
userSettings
.Paging.skip;
KendoOptionGrid.Paging.take
=
userSettings
.Paging.take;
KendoOptionGrid.Paging.pageSize
=
userSettings
.Paging.take;
}
KendoOptionGrid.Grouping
= userSettings.Grouping;
KendoOptionGrid.Filtering = userSettings.Filtering;
KendoOptionGrid.Sorting = userSettings.Sorting;
KendoOptionGrid.Aggregates = userSettings.Aggregates;
}
ArrayFistLoad[ActiveGrid.Name] = 1;
return JSON.stringify({ optionGrid: KendoOptionGrid, operation: operation });
}
<
div
data-role
=
"sparkline"
data-series
=
"[{ 'name': 'Orders', 'type': 'column', 'field': 'Combined.OrderCount' }]"
data-tooltip
=
"{ template: $('#rangeTooltipTemplate').html() }"
data-bind
=
"source: dataSource"
>
</
div
>
@using (Html.BeginScripts("Daily.Range.Order.Count"))
{
<
script
type
=
"text/html"
id
=
"rangeTooltipTemplate"
>
<
div
>#: kendo.toString(dataItem.Date, 'd')# (#: kendo.toString(dataItem.Date, 'ddd') #)</
div
>
<
div
>Count: #: value #</
div
>
</
script
>
}
<
div
data-role
=
"sparkline"
data-theme
=
"bootstrap"
data-series
=
"[{ 'name': 'Out the door', 'type': 'line', 'field': 'Performance.AvgOutTheDoor' }]"
data-tooltip
=
"{ template: $('#PerformanceToolTipOutTheDoor').html() }"
data-bind
=
"source: dataSource, visible: showCharts"
>
</
div
>
@using (Html.BeginScripts("Performance.Range.OutDoorTime", Area.Foot))
{
<
script
id
=
"PerformanceToolTipOutTheDoor"
type
=
"text/template"
>
<
div
>#: kendo.toString(dataItem.Date, 'd')# (#: kendo.toString(dataItem.Date, 'ddd') #)</
div
>
<
div
>Out the door: #: value #</
div
>
</
script
>
}
@(Html.Kendo().Grid<
LFG.Model.Domain.ArticleGroup
>(Model.ArticleGroups)
.Name("groupsGrid")
.Columns(columns =>
{
columns.Bound(o => o.ID);
columns.Bound(o => o.GroupKey);
columns.Bound(o => o.Description);
})
.Pageable()
.Sortable()
.Scrollable()
.Selectable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(LFG.Web.Constants.GridPageSize)
.Events(events => events.Error("grid_error_handler"))
.Model(model =>
{
model.Id(p => p.ID);
})
.ServerOperation(false)
)
.Events(e => e.Change("onRowSelect"))
)
@(Html.Kendo().Grid<
LFG.Model.Domain.Article
>()
.Name("articlesGrid")
.Columns(columns =>
{
columns.Bound(o => o.ID);
columns.Bound(o => o.Description);
columns.Bound(o => o.ProductLine);
columns.Bound(o => o.Age);
columns.Bound(o => o.Approval);
columns.Bound(o => o.Stockpile);
columns.Bound(o => o.Ordered);
columns.Bound(o => o.Certificate);
columns.Bound(o => o.ArtNr);
})
.Pageable()
.Sortable()
.Scrollable()
.Selectable()
.DataSource(dataSource => dataSource
.Server()
.PageSize(LFG.Web.Constants.GridPageSize)
.Model(model =>
{
model.Id(p => p.ID);
})
)
)
function onRowSelect(e) {
var row = this.select();
var id = row[0].childNodes[0].textContent;
console.log("RowSelect - ID: " + id);
var grid = $("#articlesGrid");
if (grid) {
grid.kendoGrid({
dataSource: {
type: "json",
transport: {
read: "/Shared/GetArticlesByGroup?id=" + id
}
}
});
grid.data("kendoGrid").dataSource.read();
}
}