<ul id="navigation_menu" class="navigation_menu"></ul><ul id="footer_menu" class="footer_menu"></ul><!-- TEMPLATES --> <script id="navigation_menu_template" type="text/x-kendo-template"> <li><a href="#=url#" target="#=target#" title="#=title#">#=text#</a></li> </script> <script id="footer_menu_template" type="text/x-kendo-template"> <li><a href="#=url#" target="#=target#" title="#=title#">#=text#</a></li> </script> <!-- INITIALIZE --> <script type="text/javascript"> var navigation_menu = $("#navigation_menu").kendoMenu(); var footer_menu = $("#footer_menu").kendoMenu(); $(document).ready(function () { function menu_initialize() { $("#navigation_menu").html(kendo.render(navigation_menu_template, this.view())); $("#footer_menu").html(kendo.render(footer_menu_template, this.view())); } var navigation_menu_template = kendo.template($("#navigation_menu_template").html()); var footer_menu_template = kendo.template($("#footer_menu_template").html()); var menu_datasource = new kendo.data.DataSource( { transport: { read: "xml/navigation.xml" }, schema: { type: "xml", data: "/navigation/menu/item", model: { fields: { item_id: "item_id/text()", parent_id: "parent_id/text()", text: "text/text()", url: "url/text()", target: "target/text()", title: "title/text()", google_sitemap_priority: "google_sitemap_priority/text()", google_sitemap_frequency: "google_sitemap_frequency/text()", main_inclusion: "main_inclusion/text()", footer_inclusion: "footer_inclusion/text()" } } }, change: menu_initialize }); var navigation_menu_datasource = menu_datasource; var footer_menu_datasource = menu_datasource; navigation_menu_datasource.filter({ field: "main_inclusion", operator: "eq", value: "true" }); footer_menu_datasource.filter({ field: "footer_inclusion", operator: "eq", value: "true" }); navigation_menu_datasource.read(); footer_menu_datasource.read(); }); </script><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