Questions on Kendo UI for jQuery Forum

3 answers

163 views

Hi
After testing my umbraco site on IE8, I found the my kendoMenu do not style correctly and the hover do not open the submenu.

my head:

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

<script src="~/scripts/kendo.web.min.js"></script>

<script src="~/scripts/modernizr.custom.76706.js"></script>

<script src="~/scripts/Base.js"></script>

<link rel="shortcut icon" href="~/css/imgs/Altex-favicon.ico" >

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

<link href="~/css/Themes/kendo.silver.min.css" rel="stylesheet" />

<link href="~/css/Main.css" rel="stylesheet" />

my HTML:

<table class="TableMenu">

<tr>

<td rowspan="2" class="TdLogo"><a href="/"><img alt="Altex" width="200" src="/css/imgs/Logo_Altex.jpg" /></a></td>

<td class="NavG"><ul id="NavG" class="menu">

<li>

<a class="MenuSelected" href="/home.aspx">Home</a>

</li>

<li>

<a class="" href="/about-altex.aspx">About Us</a>

<ul>

<li>

<a href="/about-altex.aspx">About Altex</a>

</li>

<li>

<a href="/about-altex/why-us.aspx">Why Us</a>

</li>

<li>

<a href="/about-altex/child-safety.aspx">Child Safety</a>

</li>

<li>

<a href="/about-altex/environmental-responsibility.aspx">Environmental Responsibility</a>

</li>

</ul>

</li>

<li>

<a class="" href="/your-needs.aspx">Our Fabrics</a>

<ul>

<li>

<a href="/your-needs.aspx">Your Needs</a>

</li>

<li>

<a href="/your-needs/ambio®.aspx">Ambio®</a>

</li>

<li>

<a href="/your-needs/transparent.aspx">Transparent</a>

</li>

<li>

<a href="/your-needs/translucent.aspx">Translucent</a>

</li>

<li>

<a href="/your-needs/opaque.aspx">Opaque</a>

</li>

</ul>

</li>

<li>

<a class="" href="/our-products.aspx">Our Products</a>

<ul>

<li>

<a href="/our-products.aspx">Our Products</a>

</li>

<li>

<a href="/our-products/roller-shade.aspx">Roller Shade</a>

</li>

<li>

<a href="/our-products/aleo™.aspx">Aleo™</a>

</li>

<li>

<a href="/our-products/panel-track.aspx">Panel Track</a>

</li>

<li>

<a href="/our-products/roman-shade.aspx">Roman Shade</a>

</li>

<li>

<a href="/our-products/inclinable-roman-shade.aspx">Inclinable Roman Shade</a>

</li>

<li>

<a href="/our-products/ready-to-install-shade.aspx">Ready-to-install Shade</a>

</li>

<li>

<a href="/our-products/fixed-multiform-shade.aspx">Fixed Multiform Shade</a>

</li>

</ul>

</li>

<li>

<a class="" href="/warranty.aspx">Support</a>

<ul>

<li>

<a href="/warranty.aspx">Warranty</a>

</li>

<li>

<a href="/warranty/faq.aspx">FAQ</a>

</li>

<li>

<a href="/warranty/security.aspx">Security</a>

</li>

</ul>

</li>

<li>

<a class="" href="/contact-us.aspx">Contact Us</a>

</li>

</ul>

</td>

</tr>

<tr>

<td><ul class="NavC-Hidden">

</ul></td>

</tr>

</table>

My JS

$('#NavG').kendoMenu();

Any suggestion?
Note: I try the kendo menu demo on the old IE8 station, and all is working. The same site in IE11 work like a charm. What I missed out?!
Thanks
See pic1 for IE11 demo
See pic2 for IE8 demo

Menu

answered on 25 Mar 2014

1 answer

2.1K+ views

Grid with treeview

Hello,
I would like to create a grid with treeview as a first column. Similiar to this: image
Is it possible? How could I achieve this scenario? Grid should be filterable, scallable, scrollable and pageable.

Grid

answered on 25 Mar 2014

8 answers

3.8K+ views

[Solved] Custom Footer Template for Grid

Hello,

is there a possibility to create a custom footer template for the grid? I haven't found anything in the examples.

I want to implement paging with "first", "last", "previous" and "next" buttons and a textbox where a page number can be entered.

Grid

answered on 25 Mar 2014

3 answers

1.1K+ views

Number formats

Hi,

I need help on number formats in e.g. Kendo grid.
My number is 123456,78 and I need a format like 123.456,780.
In different threads I read formats like "{0:c}", "{0:0.000}", etc..
But I don't understand the formatting.
What means the 0 before the colon, and what possibilities I have to format the numbers?

Thanks for any help!

Globalization

answered on 24 Mar 2014

2 answers

255 views

Kendo.MVC.SiteMapManager and MVC Areas

If I am using a standard asp.net sitemap and registering it using SiteMapManager.SiteMaps.Register, is there any way to specify areas in the site map? I've tried using area="areaname" and that doesn't seem to be working.

Thanks!

General Discussions

answered on 24 Mar 2014

1 answer

170 views

DropDowns issue on firefox in latest Kendo 2014.1.318

I have firefox 28.0 and windows 8.1 and Kendo 2014.1.318

Only on firefox I have following problem, that is also appearing on Kendo Demo site.

All controls with dropdowns are affected. (combo, date, etc.)

When there is no scroll on screen or scroll is top most (0), everything is working correctly,
however when I scroll down a bit, none of dropdown will be shown. It is just blinking. Showing and immediately hiding.

I've checked all controls on demo screen with dropdown and they act the same.

I was thinking it can be related to my computer, but I opened my other website with Kendo version 2013.3.1324. And all drop downs are working without this issue.
I also noticed that drop down animation is not so smooth in recent version on firefox.

Kind Regards
Marcin

General Discussions

answered on 24 Mar 2014

1 answer

601 views

Full Screen splitter window

I'm trying to get a window that contains a (fixed size) top and bottom bar, and the central portion sizable with a splitter; with the whole thing scaled to fill the entire browse window.

I'm using the below, which was based on reading of this: http://jsfiddle.net/j5edh/

The resizing doesn't seem to work at all; the bottom bar disappears. I've tried may different variants and I don't seem to be getting anywhere fast. The bottom DIV seems to get resized to a height of 0px, as if it's trying to constrain the whole view to a fixed height.

What am I doing wrong?

--
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>

<div id="example" class="k-content">
<div id="vertical">
   <div id="title-pane">
<div class="pane-content">
<h3>Outer splitter / bottom pane</h3>
<p>Non-resizable and non-collapsible.</p>
</div>
</div>
<div id="middlePane">
<div id="horizontal" style="height: 100%; width: 100%;" >
<div id="left-pane">
<div class="pane-content">
<h3>Inner splitter / left pane</h3>
<p>Resizable and collapsible.</p>
</div>
</div>

<div id="right-pane">
<div class="pane-content">
<h3>Inner splitter / right pane</h3>
<p>Resizable and collapsible.</p>
</div>
</div>
</div>
</div>

<div id="bottom-pane">
<div class="pane-content">
<h3>Outer splitter / bottom pane</h3>
<p>Non-resizable and non-collapsible.</p>
</div>
</div>
</div>

<script>
$(document).ready(function() {
$("#vertical").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: false, resizable: false, size: "100px" },
{ collapsible: false, resizable: true },
{ collapsible: false, resizable: false, size: "100px" }
]
});

$("#horizontal").kendoSplitter({
panes: [
{ collapsible: true, resizable:true, size: "220px" },

{ collapsible: true, resizable:true, size: "220px" }
]
});


$(window).resize(function() {
   resizeSplitter()
   });

   resizeSplitter = function() {
   splitter = $("#vertical")
   .data("kendoSplitter")
   .size("#middlePane", $(window).height() - 200 + "px");

   kendo.resize($("#middlePane"));

   };


});
</script>

<style scoped>


#middle-pane { background-color: rgba(60, 70, 80, 0.10); }
#bottom-pane { background-color: rgba(60, 70, 80, 0.15); }
#left-pane, #center-pane, #right-pane { background-color: rgba(60, 70, 80, 0.05); }

.pane-content {
padding: 0 10px;
}
</style>
</div>

</body>
</html>

Splitter

answered on 24 Mar 2014

9 answers

487 views

[Solved] Loading / Progress control?

Hi,

I'm sure I am just missing something but how would I implement a simple loading animation on demand? I can see that it is included in the controls, for example the Grid control uses one when binding to data. But I would like to add them to my own script when performing AJAX calls etc. In a similar way to the ASP.NET Ajax library RadAjaxLoadingPanel

Could someone please show me an example?

Many thanks.

Luke

General Discussions

answered on 24 Mar 2014

3 answers

131 views

SPA's (Mobile Application), Google, and SEO

I recently found that Google has been indexing our KendoUI Mobile application website (using remote views) strangely. They somehow got a hold of our mobile URL's and are indexing them without the hashbang, and therefore the links don't work (they only return the HTML of the Partial View). So instead of Google indexing http://ourdomain.com/Mobile#/Mobile/Home/Home , they actually display http://ourdomain.com/Mobile/Home/Home , which obviously doesn't work.

I did a ton of searching, and I found what I thought would be the holy grail: https://developers.google.com/webmasters/ajax-crawling/?hl=nl-NL . These are Google's recommendations for AJAX applications. As I began to read, I quickly realized that KendoUI Mobile applications cannot abide by Google's recommendations. Google requests that all your mobile URL's use #! instead of just a hashbang. But there is no way to do this with a KendoUI Mobile Application, from what I can tell.

Do KendoUI Mobile Applications simply not allow for any kind of real SEO or proper indexing for the search engines?

General Discussions

answered on 24 Mar 2014

2 answers

187 views

Kendo Drag Drop issues for child grids

What i am trying to do is : I am having two having two grid. Upper grid and lower grid.(Both can have child grid when clicked on > button to expand the grid) Upper one from which i want to drag row to lower one. It is working fine for unexpanded rows. However, i am not able to drag and drop rows from child grid of uppar grid into child grid of lower grid. Please check below link for live problem.
http://jsfiddle.net/CpqpH/

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/x-kendo-template" id="mydetailstemplate">
<div class="mydetailpane" ></div>
</script>
<script type="text/x-kendo-template" id="mydetailstemplate2">
<div class="mydetailpane2" ></div>
</script>
<div id="SourceGrid"></div>
<div id="DestinationGrid"></div>
<script>
//Check jsfiddle link for more details
</script>
</form>

Drag and Drop

answered on 24 Mar 2014