<
script
>
var dateRegExp = /^\/Date\((.*?)\)\/$/;
function toDate(value) {
var date = dateRegExp.exec(value);
return new Date(parseInt(date[1]));
}
var esData = new kendo.data.DataSource({
transport: {
read: { url: "http://localhost/esplanning/esweb.asmx/EmployeeList", type: "xml" }
}
});
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: esData,
schema: {
type: "xml",
data: "/EmployeeListResponse/Results/RowSet/Rows"
},
height: 250,
filterable: true,
sortable: true,
pageable: true });
});
</
script
>
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
<
soap:Envelope
xmlns:xsi
=
"http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd
=
"http://www.w3.org/2001/XMLSchema"
xmlns:soap
=
"http://schemas.xmlsoap.org/soap/envelope/"
soap:encodingStyle
=
"http://www.w3.org/2001/12/soap-encoding"
>
<
soap:Body
>
<
EmployeeListResponse
xmlns
=
"http://tempuri.org/"
>
<
Results
xmlns
=
""
CubeName
=
"Employee"
ViewName
=
"EmployeeList"
>
<
Scenario
DimName
=
"Scenario"
ID
=
"Working Budget"
Name
=
"Working Budget"
/>
<
EntityDept
DimName
=
"Entity-Dept"
ID
=
"1110-3030"
Name
=
"1110-3030"
/>
<
ProductLine_s
DimName
=
"Product Line_s"
ID
=
"1020"
Name
=
"Aviation Electronic Solutions"
/>
<
RowSet
ColDims
=
"Employee_m"
>
<
Rows
IsUpdated
=
"false"
>
<
Employee
Name
=
"All Employees - All Employees"
DimName
=
"Employee"
ID
=
"All Employees"
IsUpdated
=
"false"
EmployeeName
=
"All Employees"
>All Employees - All Employees</
Employee
>
<
Position
Name
=
"Current"
DimName
=
"Position"
ID
=
"1"
IsUpdated
=
"false"
>Current</
Position
>
</
Rows
>
<
Rows
IsUpdated
=
"false"
>
<
Employee
Name
=
"Rai, Colleen - 0000000702"
DimName
=
"Employee"
ID
=
"0000000702"
IsUpdated
=
"false"
EmployeeName
=
"Rai, Colleen"
>Rai, Colleen - 0000000702</
Employee
>
<
Position
Name
=
"Current"
DimName
=
"Position"
ID
=
"1"
IsUpdated
=
"false"
>Current</
Position
>
</
Rows
>
<
Rows
IsUpdated
=
"false"
>
<
Employee
Name
=
"Romero, Walter - 0000000806"
DimName
=
"Employee"
ID
=
"0000000806"
IsUpdated
=
"false"
EmployeeName
=
"Romero, Walter"
>Romero, Walter - 0000000806</
Employee
>
<
Position
Name
=
"Current"
DimName
=
"Position"
ID
=
"1"
IsUpdated
=
"false"
>Current</
Position
>
</
Rows
>
</
RowSet
>
</
Results
>
</
EmployeeListResponse
>
</
soap:Body
>
</
soap:Envelope
>
<!-- HTML -->
<
select
id
=
"combobox"
>
<
option
>Item 1</
option
>
<
option
>Item 2</
option
>
<
option
>Item 3</
option
>
</
select
>
So, if I have a ASP.NET DropDowList:
<
asp:DropDownList
ID
=
"DropDownList2"
class
=
"combobox-kendo"
runat
=
"server"
>
<
asp:ListItem
>A</
asp:ListItem
>
<
asp:ListItem
>B</
asp:ListItem
>
<
asp:ListItem
>C</
asp:ListItem
>
</
asp:DropDownList
>
and if in a browser is converted to:
<
select
name
=
"DropDownList2"
id
=
"DropDownList2"
class
=
"combobox-kendo"
>
<
option
value
=
"A"
>A</
option
>
<
option
value
=
"B"
>B</
option
>
<
option
value
=
"C"
>C</
option
>
</
select
>
and, according to the KendoUI documentation, I should add:
$(document).ready(function(){
$("#combobox").kendoComboBox();
});
Then..
<script type=
"text/javascript"
>
$(document).ready(
function
() {
$(
".combobox-kendo"
).kendoComboBox();
});
</script>
it should work, right?
In VST2010 when I debug the ASP.NET page, IE9 show me the next error:
Error: 'jQuery' is undefined in the kendo.all.min.js file...
Any idea what could be the problem?
function
parseDateTime(epoch){
var
date =
new
Date(epoch);
return
date.getHours() +
':'
+ date.getMinutes();
}
//...
tooltip: {
visible:
true
,
format:
"{1:N2} m3 @ "
+ parseDateTime(xValue),
}
//...
// change from:
mainTabs.select(
'#'
+ mainTabActive);
themeTabs.select(
'#'
+ themeTabActive );
mainTabs.reload(
'#'
+ mainTabActive );
// to this:
mainTabs.select(mainTabs.tabGroup.children(
'#'
+ mainTabActive));
themeTabs.select(themeTabs.tabGroup.children(
'#'
+ themeTabActive ));
$jQ = jQuery.noConflict();
$jQ(document).ready(
function
($) {
/* TABS SECTION */
var
mainTabs =$(
'#tabs'
).kendoTabStrip().data(
"kendoTabStrip"
);
var
themeTabs = $(
'#theme-tabs'
).kendoTabStrip().data(
"kendoTabStrip"
);
var
mainTabActive = $.jStorage.get(
"mainTab"
);
var
themeTabActive = $.jStorage.get(
"themeTab"
);
mainTabs.select(
'#'
+ mainTabActive);
themeTabs.select(
'#'
+ themeTabActive );
mainTabs.reload(
'#'
+ mainTabActive );
//MainTab
$(
'#tabs'
).click(
function
(e) {
var
selectedTab = e.currentTarget.id;
$.jStorage.set(
"mainTab"
, selectedTab);
});
//theme tabs
$(
'#theme-tabs'
).click(
function
(e) {
var
selectedTab = e.currentTarget.id;
$.jStorage.set(
"themeTab"
, selectedTab);
});
});
So I made a page from the Splitter demo -- With the intention to put a Menu or Treeview in the left-hand panel. I was looking to assemble a page from different panels with a different widget in each. When I load that simple idea as page the menu or treeview (doesn't matter) only shows as a HTML mark-up and not showing as a Kendo widget.
I'd like it if someone or me finds out how to to something simple like that -- Combining Kendo widgets? My second curiosity, is to figure out how to load that left-hand splitter with a menu or treeview thing via ajax.
Really; I wanted to put three or four of these coool loooooking wiiiiidegets on-screen ensemble. It doesn't seem to be so sweet to effect that. I worked that I need to get an element loaded before asking a jQuery or Kendo element to work with it.
I'm interested as a beginner -- What are the effective and simple ways to assemble a page-layout using widgets, static content, and/or ajax loads?
That's my beginner question ...
ADD your question ... !
Many thanks ... Will
var localDataSource = new kendo.data.DataSource({
data: skills,
schema: {
model: {
fields: {
CatId: { type: "number" },
SkillCat: { type: "string" },
Skill: { type: "string" },
IsCorrect: { type: "string" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: localDataSource,
columns: [
{ field: "Skill" },
{ field: "IsCorrect" }
],
height: 470,
pageable: true,
scrollable: true,
dataBound: function () {
localDataSource.group({ field: "CatId" });
grid.collapseGroup(grid.tbody.find(">tr.k-grouping-row:first"));
for (i = 1; i <= 6; i++) {
grid.collapseGroup(grid.tbody.find(">tr.k-grouping-row").eq(i));
};
}
});