or
3 answers
225 views
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.
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.
Sebastian
Telerik team
answered
on
05 Aug 2013
1 answer
163 views
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.
It is not set by height,min-height,line-height.
Also the labels and base axis are also not displayed.
Iliana Dyankova
Telerik team
answered
on
05 Aug 2013
1 answer
163 views
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.
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.
Iliana Dyankova
Telerik team
answered
on
05 Aug 2013
4 answers
162 views
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):
I found a temp work around though, add following line to my own css:
.k-editor-toolbar{ white-space: normal;}
Gong
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> </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
Sebastian
Telerik team
answered
on
05 Aug 2013
1 answer
55 views
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
cheers
Petyo
Telerik team
answered
on
05 Aug 2013
1 answer
417 views
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.
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.
Dimiter Madjarov
Telerik team
answered
on
05 Aug 2013
1 answer
95 views
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
<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
Petyo
Telerik team
answered
on
05 Aug 2013
1 answer
136 views
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
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
Kiril Nikolov
Telerik team
answered
on
05 Aug 2013
1 answer
150 views
Hi,
I am in the prelim stages of testing both the HTML / ASP.NET MVC version of Kendo UI Controls.
The following HTML version of the code "http://demos.kendoui.com/web/combobox/serverfiltering.html" doesnt work on IE 10 but works on Google Chrome.
It throws an error "SCRIPT1028: Expected identifier, string or number" in IE.
Are there any compatibility issues or different code paths across different browsers.
Regards
Rajaraman.S
I am in the prelim stages of testing both the HTML / ASP.NET MVC version of Kendo UI Controls.
The following HTML version of the code "http://demos.kendoui.com/web/combobox/serverfiltering.html" doesnt work on IE 10 but works on Google Chrome.
It throws an error "SCRIPT1028: Expected identifier, string or number" in IE.
Are there any compatibility issues or different code paths across different browsers.
Regards
Rajaraman.S
Dimiter Madjarov
Telerik team
answered
on
05 Aug 2013
2 answers
97 views
Hi,
I would like to have the kendo window "belong" to a specified tab. By that I mean that the window should hide together with the tab it belongs to and that this hierarchy is reflected in the DOM (tab div is ancestor of window div).
I used the window's "appendTo" configuration option to achieve this. The only problem is, that now the window content div matches the ".k-tabstrip .k-content" kendo CSS selector which applies wrong styling.
I can prevent this by removing the "k-content" class from the window content div. My question is if I'm breaking styling this way and if there is a more appropriate approach to this problem?
Here is a demo: http://jsfiddle.net/N54dE/3/
I would like to have the kendo window "belong" to a specified tab. By that I mean that the window should hide together with the tab it belongs to and that this hierarchy is reflected in the DOM (tab div is ancestor of window div).
I used the window's "appendTo" configuration option to achieve this. The only problem is, that now the window content div matches the ".k-tabstrip .k-content" kendo CSS selector which applies wrong styling.
I can prevent this by removing the "k-content" class from the window content div. My question is if I'm breaking styling this way and if there is a more appropriate approach to this problem?
Here is a demo: http://jsfiddle.net/N54dE/3/
