Questions on Kendo UI for jQuery Forum

1 answer

333 views

[Solved] editor tool bar renders button / icons incorrectly

The kendoEditor does not display its toolbar correctly. Code is as follows in an asp.net mvc context. The editor is displayed in a popup generated by kendoui.

html followed by javascript

<div class="popupContent" >

<div class="k-content" style="margin-left:25px; margin-top:25px">

<textarea id="Editor" rows="10" cols="30" ></textarea>

</div>

script type="text/javascript">

var Editor = $("#Editor").kendoEditor({

tools: [

"bold",

"italic",

"underline",

"strikethrough"

]

}).data("kendoEditor");

$(".k-editor").height("350px");

$(".k-editor").width("900px");

</script>

The visual display is found in the image attachment. the buttons and icons are bunched and overlapping.
Kendo UI Web v2012.2.1029
jQuery v1.7.1
jQuery UI 1.8.11i
ie9
visual studio 2010

using newer jquery did not help.

Editor

answered on 03 Dec 2012

1 answer

104 views

Support for Slice()?

Is there any support for breaking large files into smaller chucks using slice()?

Upload

answered on 03 Dec 2012

1 answer

262 views

Kendo menu redirect url issue

I used html list to create menu and added url to '<a>' tag. issue is when click the menu icon url directory will duplicate. i use this in master page. can i customize this how to remove duplicate.
(eg: Sample/test1.aspx to Sample/Sample/test1.aspx)

Menu

answered on 03 Dec 2012

2 answers

306 views

[Solved] 2012.3.1114 - kendo.mobile.all.min.css - Missing Icons

I'm trying to determine if I'm doing something stupid, but I'm trying out KendoUI Mobile with PhoneGap and I've installed the 2012.3.1114/styles/kendo.mobile.all.min.css stylesheet, but I have no icons. The stylesheet appears to not have any styles for icons.

I looked back at older examples online and found older kendo.mobile.all.min.css stylesheets and it appears there used to be .png and .svg file references for the icons.

Where they removed for a reason? Am I missing something?

General Discussions

answered on 03 Dec 2012

7 answers

106 views

Sublimevide.net player no longer works

After the last update the sublimevideo.net player no longer works inside a div with data-role="view". It used to work with Q2 release.

Here is an example of the problem. http://www.grapto.com/mobile/publication/65/331?auto=false

There is a problem with the Play button. If i start the video using javascript then everything is ok.

General Discussions

answered on 03 Dec 2012

3 answers

309 views

Has anyone been able to center the DIV content within ScrollView?

Hi,

I have a scrollView with HTML DIVs as its contents. I am having difficulty centering the DIV content. It is fine when I am just using plain images, but once I start using DIVs, then everything gets aligned to the left.

Also, I couldn't get each item closer to each other.

Here's how the code looks like. Can somebody help me on this please? Many thanks in advance!


<div id="scrollview-container">
<div data-role="scrollview" id="scrollview" data-page="1">

<div data-role="page">

<div id="YourNickname">
<div class="picture_box">
<img src="images/conversation/yournickname2.png" class="shareble_image" />
<div class="social">
<div class="shareit"><img src="images/conversation/shareIt.png" /></div>
<div class="facebook"><a href="#"><img src="images/conversation/facebook.png" /></a></div>
<div class="tweet"><a href="#"><img src="images/conversation/tweet.png" /></a></div>
<div class="instragram"><a href="#"><img src="images/conversation/instragram.png" /></a></div>
<div class="download"><a href="#"><img src="images/conversation/download.png" /></a></div>
</div>
</div>
</div>
</div><div data-role="page">

<div id="GirlMoment">
<div class="picture_box">
<img src="images/conversation/girl-moment2.png" class="shareble_image" />
<div class="social">
<div class="shareit"><img src="images/conversation/shareIt.png" /></div>
<div class="facebook"><a href="#"><img src="images/conversation/facebook.png" /></a></div>
<div class="tweet"><a href="#"><img src="images/conversation/tweet.png" /></a></div>
<div class="instragram"><a href="#"><img src="images/conversation/instragram.png" /></a></div>
<div class="download"><a href="#"><img src="images/conversation/download.png" /></a></div>
</div>
</div>
</div>
</div>

</div>
</div>


Regards,
Antonio

ScrollView (Mobile)

answered on 03 Dec 2012

2 answers

316 views

[Solved] Treeview Display issues in IE7

I have an application based around a Kendo treeview, which displays fairly complex hierarchical data (with html passed via a kendo datasource).

This works fine in IE 8,9 and 10, and also Chrome. However, when using IE7 (or IE8 in compatibility mode), there are two issues:-

If the number of parent items exceeds the div height, the treeview isn't clipped (although the div scrollbar is shown), resulting in the treeview overwriting other interface elements.
Initially the expand arrows are shown, but all except the top level arrows have a tendency to disappear when hovered over.

The treeview is defined as a div:-

<div id="AjaxTreeView" style="height:600px; width:490px;" ></div>

</div>

And then initialised on the page load:-

var treeSource = new kendo.data.HierarchicalDataSource({

schema:{

model:{

hasChildren: "HasChildren",

children: "Items",

id:"Id"

}

});

$('#AjaxTreeView').kendoTreeView({

dataSource: treeSource,

template: "#= item.Text # ",

loadOnDemand: false,

dragAndDrop: @ViewBag.DragDrop,

select: onSelect,

dragstart: onNodeDragStart,

drag: onNodeDragging,

drop : onNodeDrop

});

The drag/drop option is set via the .NET MVC view bag, based upon a users permissions.

Unfortunately, IE7 is still the default browser for most of the users who will use this application, and it would be nice to enable the application to work with it, rather than have to get them all to upgrade.

Thanks

TreeView

answered on 03 Dec 2012

1 answer

131 views

[Solved] Themebuider CSS output is not reflecting on the page

Hi,

I have used the ThemeBuilder on my page where I have widgets like Rich Text area, Grids, Slider etc.
Edited and made some changes in appearance and copied and saved the output as a CSS file.
Included it on the page, but the page still takes the old style. Changes in the new stylesheet made with the Themebuilder are not reflecting.

Below are my stylesheets on the page and the last one is the output CSS file of the ThemeBuilder.

<apex:stylesheet value="{!URLFOR($Resource.kendoMetro, '/kendoNew/styles/examples-offline.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.kendoMetro, '/kendoNew/styles/kendo.common.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.kendoMetro, '/kendoNew/styles/kendo.metro.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.kendoMetro, '/kendoNew/styles/kendo.dataviz.metro.min.css')}"/>
<apex:stylesheet value="{!URLFOR($Resource.kendoMetro, '/kendoNew/styles/kendo-theme.css')}"/>

Thanks,
Vishnu

General Discussions

answered on 03 Dec 2012

1 answer

242 views

Issues in using popup from external css

Hi,

I am new to this kendo ui. so i am facing some issues in this. Any sort of suggestion would help me to complete this part. I am having two questions in below code

I am having a popup class outside of kendo ui(social networking login popup) which is working fine in all parts of the page.But if i keep that class inside kendo ui, popup is not working. I want to know if kendo ui does not allow out side class to use inside it.

Other one is in the below code near user_id field can how can i use iframe in popup style to call links from different websites

<script>
$(function() {
   $("#grid").kendoGrid({
dataSource: {
transport: {
read: "data/jobs.php"
},


sort: { field: "date_created", dir: "desc" },
schema: {
data: "data",
total: function(response) {
return $(response.data).length;

}
},
pageSize: 15

},
filterable: true,
groupable: true,
sortable: true,
pageable: true,
height: "525px",
width: "100px",
columns: [{ field: "title",title: "Title", template: "<a id='title' href='showbill.php?id=#=data.billorder_id#'>#=title#</a>" },
{ field: "city",title: "Location"},
{ field: "date_created", title: "bill Posted" },

{ field: "user_id",filterable: false,title: "Status", template: '#=Getvalue(user_id,billorder_id,bill_applied)#' }
// i want to know how can i use iframe to load outside link in a popup style. ]
});
});

function Getvalue(value,id,bill) {

var mid = id;
   if (value > '0')
   {
var value = "Applied";
return "<b>"+ value + " ON "+ bill + " </b>";

}
else {
   var value = "Apply";

// this class is not calling any popup.
  return "<a href="#" class="outsideclass">"+ value + " ON "+ bill + " </a>";

}
}

</script>

Grid

answered on 03 Dec 2012

1 answer

70 views

Removing most of the chrome around the grid

Is there a way to remove most of the surrounding chrome around the grid. I need a plain grid with a simple bar for the title and results.

Think: Simple banking report

Grid

answered on 03 Dec 2012