Questions on Kendo UI for jQuery Forum

2 answers

143 views

Get Scheduler TimeSlot on kendoDropTarget

Hi i have a grid and i need to plan a scheduler from this.
How can i get the timeslot where i dragged?

var grid = $("#requestGrid").data("kendoGrid");

var scheduler = $("#ganttScheduler").data("kendoScheduler");

var itemUID;

grid.table.kendoDraggable({

cursorOffset: {

top: 5,

left: 5

},

filter: "tbody > tr",

group: "Grid",

hint: function (e) {

itemUID = e.attr(kendo.attr("uid"));

return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html()+ '</tr></tbody></table></div>');

}

});

scheduler.element.kendoDropTarget({

group: "Grid",

drop: function (e) {

alert("Dragged row 'uid': " + itemUID);

//in case you need the model(data item) for this row

var model = grid.dataSource.getByUid(itemUID);

var aa = $(e.toElement).text();

itemUID = null;

}

});

Drag and Drop

answered on 05 Aug 2013

1 answer

204 views

In progress icon

This is probably pretty trival but I haven't found the answer yet. When I set a grid to popup mode is there an easy way to show an in-progress icon? Until the form is submitted?

Grid

answered on 05 Aug 2013

3 answers

238 views

With or without Twitter Bootstrap?

Hi,

I was trying to use kendoUI together twitter bootstrap, but there seems to bee just too many rendering glitches and problems :(.

What do you recommend? should users use it together, and if yes, what pitfalls should they avoid (for me the co-existence looks quite fragile) ?

The main problems seems to arise from the fact that the number of available kendoUI components is quite small compared to e.g. Sencha ExtJS, so Twitter Bootstrap et. co. seems to supply quite allot of this missing stuff, but than it breaks the existing ones :(.

regards.

General Discussions

answered on 05 Aug 2013

1 answer

173 views

Sparkline chart height not getting set and unable to display baseline + notes(icons for line information)

I am facing an issue with sparkline chart's height.
It is not set by height,min-height,line-height.
Also the labels and base axis are also not displayed.

Sparkline

answered on 05 Aug 2013

1 answer

183 views

Changing existing themes.

Hello,

I'm attempting to make a small change to the file: kendo.dataviz.black.min.css

The section changed in kendo.dataviz.black.min.css is the following:
.k-chart .k-mask
{
/*orginal background-color*/
/*background-color: #3d3d3d;*/
background-color: #171717;
filter: alpha(opacity=70);
-moz-opacity: .70;
opacity: .70;
}

The references to the files are the following:
@*Kendo CSS*@
<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2013.2.716/kendo.dataviz.black.min.css")" rel="stylesheet" type="text/css" />

@*Kendo Scripts*@
<script src='@Url.Content("~/Content/js/jquery-1.10.1.min.js")'></script>
<script src="@Url.Content("~/Scripts/kendo/2013.2.716/jquery.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.all.min.js")"></script>
<script src="@Url.Content("~/Scripts/kendo/2013.2.716/kendo.aspnetmvc.min.js")"></script>
<script src="@Url.Content("~/Scripts/typescript/app.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>

The code for my chart is the following:
@(Html.Kendo().Chart()
.Name("chart")
.Title("% Long vs S&P 500")
.Theme("black")
...

The chart renders perfect except it renders with default background color for the black theme #3d3d3d, instead of my altered #171717.

Why isn't this working?

Thank you.

General Discussions

answered on 05 Aug 2013

4 answers

176 views

[Bug Report] 2013.2.716 Editor toolbar layout issue

Hi there,

After upgraded to version 2013.2.716, I found that the layout of editor toolbar is not correct if the editor is hidden when initialization and toolbar needs multiple lines. All icons in toolbar are in one line, exceeds the right boarder of editor. If I click the edit area, all icons are positioned correctly. Here is my test code (also attached):

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Kendo UI Editor Toolbar Issue</title>

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">

<style>

/* uncomment following line for a workaround */

/* .k-editor-toolbar{ white-space: normal;} */

</style>

</head>

<body>

<h1>Kendo UI Editor Toolbar Issue</h1>

<div id="editdiv" style="display: none">

<div>

<textarea id="editor" cols="30" rows="10"

style="width:570px;height:300px"></textarea>

</div>

<button id="show">Show Editor</button>

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.web.min.js"></script>

<script>

$(function(){

$("#editor").kendoEditor({

encoded: true,

tools: [ "bold", "italic", "underline", "strikethrough",

"justifyLeft", "justifyCenter", "justifyRight",

"justifyFull", "insertUnorderedList", "insertOrderedList",

"indent", "fontName", "fontSize", "outdent",

"foreColor", "backColor"]

});

$("#show").on('click', function(){

$("#editdiv").show();

$(this).hide();

})

});

</script>

</body>

</html>

I found a temp work around though, add following line to my own css:
.k-editor-toolbar{ white-space: normal;}

Gong

Editor

answered on 05 Aug 2013

1 answer

74 views

internal build 2013.2.726 problem with jquery selector

Hi, my app was working properly with 2013.1.514 build and jquery 1.9.1that came with the release. after upgrading to internal build 2013.2.726 and the jquery that comes with the release, my app stopped working with weird behavior when trying to select elements with jquery. for example $("#mybutton") would return nothing. nothing else is changed besides the newer version of kendo ui mobile. there is no java script errors in the browser inspector. the element that i want to select is also in the dom as I can find it in the browser inspector as well. any ideas?

cheers

General Discussions

answered on 05 Aug 2013

1 answer

439 views

Link to an external URL with querystring parameters from a MenuItem

I am unable to link to an external URL from the Kendo Menu Item. I want the menu item to link to an external site with some querystring params.

I have tried the menuItem.Url( ) and menuItem.Action(routeValues) to set the external URL i.e https://myOtherSite:99/path/To/Res and routeValue dictionary specifying the key values for the QueryString params, but the menuItem ignores the URL and passes the QueryString params to the current domain's root.

Also I tried setting the .Url("https://myOtherSite:99/path/To/Res?a=1&b=2"). This results in no link on the menu at all.

Is there a way to do this?

Thanks.

PS: My only solution for now is to link the menuItem to a Controller/Action in my application with an extra parameter (the URL) and add the redirect in there. But i want to avoid that.

Menu

answered on 05 Aug 2013

1 answer

107 views

How to implement a single selection for a list view with a check box?

I have the following markup:

<ul id="answers" data-role="listview" data-style="inset" data-template="answer-template" data-bind="source: availableAnswers" data-click="app.views.question.selectAnswer" ></ul>

<script id="answer-template" type="text/x-kendo-template">
<label>
<input type="checkbox" data-bind="checked: isSelected"/>
<span data-bind="text: answerText"></span>
</label>
</script>

The following click handler does work in Chrome Browser, however it does not work on any mobile device:
selectAnswer: function (evt) {
$.each(that.availableAnswers, function (i, it) {
it.isSelected = (it.id === evt.dataItem.id);
});
}

Is there an option on the list view to set it to single selection mode?

Thanks,
Dinhduy

ListView (Mobile)

answered on 05 Aug 2013

1 answer

161 views

Navbar not rendering properly

Hi,

for some reason this navbar is not rendering correctly on the browser :
<header data-role="header">
<div id="navbar-personalize" data-role="navbar" class="my-navbar">
<div data-align="left">
<img src="../../Images/dashboard6.png" alt="Dashboard"/>
</div>

<span data-role="view-title"></span>

<div data-align="right">
<a href="#merchandise-otherorders-view">
<img src="../../Images/whoelse6.png" alt="Who else is going?"/>
</a>
</div>
</div>
</header>

I have it set in the main layout for the application, and sometimes it works, and sometimes it doesn't. If I try and hard reload the page while clearing the cache, it seems to work but it is very random actually.

I'm not sure of what I'm doing wrong, because this used to work perfectly few days ago, after adding a couple more views in my index, it started giving me this issue.

Thanks

NavBar

answered on 05 Aug 2013