Questions on Kendo UI for jQuery Forum

2 answers

274 views

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

85 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

259 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

266 views

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

105 views

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

219 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

55 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

0 answers

123 views

Get Tab when created dynamically

UPDATE: Much easier using JQuery

var tabQuery = $('#workTabs .k-tabstrip-items .k-item .k-link').filter(function () {

return $(this).text() == tabName;

});

I am creating Tabs dynamically and need to access the tab later to test if it already exists and add/change content.

I have a function to do this but it only works in IE and not firefox. There must be a better more JQuery way of doing it.
I have tried adding an ID field to the Tab when I create them and then using a selector but this dd not work. Any suggestions?

function findTab(tabs, tabName) {

var i = 0;

var foundTab;

while (true) {

var next = tabs.tabGroup.children("li").eq(i);

if (next && next.length > 0) {

var tabText = next[0].innerText;

if (tabText == tabName) {

// found

foundTab = next;

break;

}

if (!next || (next.length == 0)) {

break;

}

i++;

}

return foundTab;

}

TabStrip

asked on 02 Dec 2012

2 answers

3.3K+ views

Kendo Grid single row refresh

Hello,

I have a Kendo grid with popup row editing. Each row is updated via an ajax call which takes 3-5 seconds to come back from the server. The problem I'm having is this
* User clicks on Edit for a row, edits fields in popup, hits Update, AJAX call fires and popup closes.
* User clicks edit on another item and is editing fields. At this time the previous AJAX calls success handler fires and does a datasource.read() to refresh the grid. This closes the open popup editor for the item.

So my questions are:

1. Is it possible to set configuration to refresh only a single row on the grid?
2. If not, is there a workaround?

Thanks.

Grid

answered on 30 Nov 2012

1 answer

200 views

Autocomplete w/RemoteData and Knockout all inside a Template?

We're trying to get the following scenario to work with no luck - can anyone shed light on this?

We have a jQuery template with a Kendo Autocomplete control inside (an input). The input must be bound to a remote datasource to allow filtering the results on the server. The input is used to pick a code from a set of 20,000+ codes, and the user can select more than one code, thus the input is templated - make sense? The user picks a code, then if another is desired they hit the "another code" button and the template fires off and a new Autocomplete control is born and so on.

We've spent days trying to get this to work but the combination of the Kendo autocomplete inside the jQuery template, plus the remote data source (which never works), plus ultimately binding the selected code to a model via Knockout, all that together paints a very complex picture.

Here are some scenarios we did get working but none suffice for our project:

- use local data instead of a delegate to remote data. This is not good because it requires us to pull back 20,000+ possible codes onto the client

- binding the selected code to a model via Knockout - this actually works fine

Can anyone shed light? Thanks in advance!

AutoComplete

answered on 30 Nov 2012