Questions on Kendo UI for jQuery Forum

2 answers

225 views

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

151 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

564 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

437 views

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

93 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

166 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

1 answer

135 views

Kendo grid header disappears

I created a form in MVC 4 and placed a button and a kendo grid. On clicking the button, a kendo window opens up. But the impact of this window is that the header of the grid disappears. Please suggest a solution.

Grid

answered on 24 Mar 2014

2 answers

154 views

Refresh databound select

I have the following view with a select object:

<div data-role="view" id="add-bet" data-layout="default" data-transition="overlay:down" class="add-bet-view" data-show="app.AddBet.show" data-model="app.AddBet">
<select id="addBetUsers" data-role="selectlist" data-text-field="username" data-value-field="member_id" data-bind="source: users" data-source="app.AddBet.users"></select>
</div>

The method app.AddBet.users is local to this view's model, but makes a call to another data model and retrieves and array of users which works perfectly on initial load. If I then update that users datasource 'App.Users' in another view of the app, I need to be able to refresh the select statement above. I know I can fire actions from the users model using 'change()' but I cannot force the view above or the select object to refresh their data. I have dug through every method in the Kendo UI docs, but can't seem to find anything. What I'm really looking for is the equivalent of this for a select object:

$("#addBetUsers").data("kendoMobileListView").dataSource.read(); -> except I can't find anyway to call the dataSource and read it for either 'kendoMobileView' or 'kendoSelectList'

General Discussions

answered on 24 Mar 2014

1 answer

136 views

Mousedown event fired twice

I'm experiencing an issue where clicking on a Kendo chart will trigger a mousedown event twice.

I've created a JSFiddle that duplicates the issue which is linked in my StackOverflow question on this subject (http://stackoverflow.com/questions/22545250/kendo-chart-causes-mousedown-event-to-be-triggered-twice), and I've not been able to determine why this is happening or how to prevent it.

By my own admission, I am a relative Javascript newbie so I may be missing something obvious. Any ideas?

Charts

answered on 24 Mar 2014

1 answer

75 views

Problem of customize navigation with Grid

Hi ,

I have the similar issue with the post http://www.telerik.com/forums/problem-with-using-celledit-on-next-cell here.
But I need to customize the navigation, not just pressing "tab" but also "enter" to navigate through the grid.

I followed the last post
$('#grid div table tr td input').live('keydown', function(event) {
if (event.which == 9 || event.which == 13) {
var grid = $("#grid").data("kendoGrid");
var $td = $(this).parent();
grid.closeCell();
grid.editCell($td.next());
}
});

But entered value doesn't saved in a cell.
How can I edit next cell with correct close previous input?

Grid

answered on 24 Mar 2014