Questions on Kendo UI for jQuery Forum

4 answers

318 views

Removing remove button in filename

Hi Guys,

I would like to remove the remove button in filename in kendo ui upload. Any advise, Thank you

Regards,

Upload

answered on 14 Mar 2013

2 answers

224 views

Changing the Colors with the Kendo UI Theme Builder

I haven't been able to adjust the following rule with the help of the Kendo UI Theme Builder.

.k-state-selected.k-state-focused,

.k-state-selected.k-state-highlight {

background-color: #5f7e00;

border-color: #5f7e00;

}

I did not find a way to change the color with the Theme Builder's user interface. Did I miss the element in the list?

Michael G. Schneider

General Discussions

answered on 14 Mar 2013

0 answers

144 views

$(cell).index() INTERMITTENTLY returns incorrect column index

EDIT: This was happening because the cell sometimes contained a DIV, and the DIV, not the TD, was the event target, which messed up the code that gets the cell-index.

IIt may be my error, or it could be a problem with the grid or jQuery. My code is shown below. I'm clicking on the same column, choosing a different row at random, and every so often, the wrong column-index is returned. I cannot figure out why it works most of the time, but not always. I'm clicking on a column whose index is 7. Sometimes zero is returned.

function addCellClickEventListener() {

var grid = $('#grid').data('kendoGrid');

$(grid.tbody).on('click', "> tr:not(.k-grouping-row, .k-detail-row, .k-group-footer) ", function (e) {

popup(e);

});

}

function popup(e) {

var cell = e.target;

var ix = $(cell).index();

assert((ix != 0), "index must be greater than zero");

}

function assert(val, msg) {

if (!val) {

alert(msg);

return false

}

return true;

}

Window

asked on 13 Mar 2013

5 answers

305 views

How to add custom header with sort graphics?

I'm trying to add a custom header template for the Kendo Grid, but when I do this the sort arrow graphic no longer shows up. I've search for quite a while looking for an example or forum discussion on how to fix this and I haven't found anything.

Can someone please tell me how to do this?

Here is an example of my current column definition:

columns.Bound(p => p.TotalCharges)

.HeaderTemplate(@<text>Total<br />Charges</text>);

Grid

answered on 13 Mar 2013

2 answers

114 views

Grid "pageable", "sortable" and "resizable" properties don't inside a TabStrip

Hi,

I'm creating a dynamic tabstrip that generates a grid with data in each tab depending on the JSON data.
The JSON data return tables with the "TableName" and "TableData". For each table in the JSON data, a new tab is created with a grid that shows the table data.
The problem I have is that the grid properties "pageable", "sortable" and "resizable" don't work, probably I missing something or I'm creating the grid in a wrong way.
I created a jsFiddle example with my code: Dynamic TabStrip with Grids

I hope someone could help me with this problem, thanks!

Dorian

Grid

answered on 13 Mar 2013

1 answer

2 views

Updating editable primary key field in grid

Hello everybody,

I am very new at KendoUI, so please excuse me if me question sounds silly.

I have a KendoUI grid on a page displaying some data. I defined data source with JSON POST methods to my ASP.NET MVC code and am using popup editing mode. I have schema definition in data source that goes something like this:

model: {

id: "SID",

fields: {

//kuiRecordKey: { type: "number", editable: false, nullable: true },

SID: { type: "number", editable: true, nullable: false },

Name: { validation: { required: true, maxlength: 50 }, type: "string" },

Second: { type: "number", validation: { required: false, min: 0, max: 1 } },

Third: { type: "number", validation: { required: false, min: 0, max: 1 } }

}

As you can see I am making primary key field editable. It does not make sense in all occasions, but in some it is necessary. If I run it like this, I will end up with a popup which will allow me to change the primary key field value and do POST of this changed value.

The real question here is: how do I get to know the ORIGINAL primary key value so I could know which row in database to change? I am trying to construct additional field here that would hold this value in case of an edit (kuiRecordKey - commented in the code above) and POST it so my processing logic would pick it up and use it accordingly.

Grid

answered on 13 Mar 2013

1 answer

82 views

ImageBrowser: IE8 Compatibility.

I'm using an KendoUI Editor 2012.3.1314 with the ImageBrowser in IE8.

For image uploads, I have a service that the IB is pointed to that does the work of getting the body of the POST, persisting it and returning a JSON object that represents the newly uploaded file. (Filename, size)

This works great in IE9+, Chrome. However, in IE8, after the Image POST, IE8 pops a file save dialog -- the contents of which are the JSON object that was returned by the service response.

I've made sure that my request header is application/json and that I don't have a content-disposition of attachment -- again, everything works great under IE9+, Chrome

Trying to track down the issue -- I'm guessing it's something in kendo.upload.js and something with how IE8 handles the IFrame differently.

I know IE8 is probably not on your list of "fun" things to look at, but any input you have would be helpful, thanks.

General Discussions

answered on 13 Mar 2013

3 answers

256 views

How to display a "loading" message on kendo ui mobile page until all resources will be loaded and DeviceReady is fired on PhoneGap

Hello,

I'm Developing PhoneGap app using Kendo mobile, the first page is static,
on that first page there is button "Enter" and the user is redirected to the main page - in this page i'm using kendo mobile ui with one layout and 4 "views" with tabstrip to swap between the views.

The problem is that the page layout shown as html without the kendo style until the full page is loaded.
since this is PhoneGap App I put

window.kendoMobileApplication = new kendo.mobile.Application(document.body);

in the onDeviceReady{ ... } so the user now see the html rendering without the kendo mobile style , please see the image attached page_loading.jpg

when page is loaded then it displayed correctly -attached image page_completed.jpg

What is the best way to solve this?
do I need to add div to my page with "loading message..." and to use css style to hide (display:none) the layout and the views
and when the onDeviceReady event is fired I hide the "loading div" and show the kendo ui layout, like this:

window.kendoMobileApplication = new kendo.mobile.Application(document.body);

divLoading.hide();

displayKendoUiLayout();

here is the full source code on this page:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta name="format-detection" content="telephone=no" />

<meta name="viewport" content=

"user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"

/>

<link rel="stylesheet" type="text/css" href="styles/kendo.mobile.all.min.css" />

<title>Kendo Main Page</title>

</head>

<body>

<div data-role="view" id="tabstrip-profile" data-title="Profile" data-layout="mobile-tabstrip">

<ul data-role="listview" data-style="inset" data-type="group">

<li>Profile

<ul>

<li>

<h2>Carine <span>Callahan</span></h2>

<img src="img/ottawa.jpg" /></li>

<li>Weekly average sales <span class="sales-up">$ 8,250</span></li>

<li>Monthly average sales <span class="sales-up">$ 32,000</span></li>

<li>

<a href="#" onclick="redirectTOLocalPage('spec.html');">

Show Spec!

</a>

<br />

<a href="#" data-role="button" onclick="redirectTOLocalPage('index.html');">

Go To Home !!!

</a>

</li>

</ul>

</li>

<li>Languages

<ul>

<li>English <span class="value">Native</span></li>

<li>Hungarian <span class="value">Advanced</span></li>

<li>French <span class="value">Advanced</span></li>

<li>Chinese <span class="value">Beginner</span></li>

</ul>

</li>

<li>Sales commodity

<ul>

<li>Beverages</li>

<li>Condiments</li>

<li>Confections</li>

<li>Diary Products</li>

<li>Grains/Cereals</li>

<li>Meat/Poultry</li>

<li>Produce</li>

<li>Seafood</li>

</ul>

</li>

<li>PC Skills

<ul>

<li>MS Word</li>

<li>MS Excel</li>

<li>MS Outlook</li>

<li>MS PowerPoint</li>

<li>MS Project</li>

<li>Windows (XP, Vista)</li>

<li>Internet</li>

<li>SAP - Sales and Marketing Module</li>

<li>MS Visual Studio</li>

<li>Adobe Acrobat</li>

<li>CorelDraw</li>

</ul>

</li>

</ul>

</div>

<div data-role="view" id="tabstrip-sales" data-title="Sales History" data-layout="mobile-tabstrip">

<ul data-role="listview" data-style="inset" data-type="group">

<li>Sales 2011

<ul>

<li>January <span class="sales-up">↑ $ 35,000</span></li>

<li>February <span class="sales-down">↓ $ 25,000</span></li>

<li>March <span class="sales-down">↓ $ 23,000</span></li>

<li>April <span class="sales-up">↑ $ 30,000</span></li>

<li>May <span class="sales-up">↑ $ 31,000</span></li>

<li>June <span class="sales-down">↓ $ 29,000</span></li>

<li>July <span class="sales-up">↑ $ 35,000</span></li>

<li>August <span class="sales-up">↑ $ 37,000</span></li>

<li>September <span class="sales-hold">→ $ 37,000</span></li>

<li>October <span class="sales-hold">→ $ 37,000</span></li>

<li>November <span class="sales-up">↑ $ 38,000</span></li>

<li>December <span class="sales-up">↑ $ 40,000</span></li>

</ul>

</li>

</ul>

</div>

<div data-role="view" id="tabstrip-rating" data-title="Rating" data-layout="mobile-tabstrip">

<ul data-role="listview" data-style="inset" data-type="group">

<li>Sales Representatives

<ul>

<li data-icon="toprated">1. Andrew Fuller</li>

<li data-icon="toprated">2. Janet Leverling</li>

<li data-icon="toprated" style="background-color: #3589e7; color: #fff;">3. Carine Callahan</li>

<li data-icon="toprated">4. Margaret Johnson</li>

<li data-icon="toprated">5. Steve Collins</li>

<li data-icon="toprated">6. Maria Steward</li>

</ul>

</li>

</ul>

</div>

<div data-role="view" id="tabstrip-settings" data-title="Settings" data-layout="mobile-tabstrip">

<ul data-role="listview" data-style="inset" data-type="group">

<li>Carine Callahan

<ul>

<li>Notify when online

<input type="checkbox" data-role="switch" checked></li>

<li>Administrator

<input type="checkbox" data-role="switch"></li>

<li>Access to stats

<input type="checkbox" data-role="switch" checked></li>

</ul>

</li>

</ul>

</div>

<div data-role="layout" data-id="mobile-tabstrip">

<header data-role="header">

<div data-role="navbar">

<a class="nav-button" data-align="left" data-role="backbutton">Back</a>

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

<a data-align="right" data-role="button" class="nav-button" href="index.html">Index</a>

</div>

</header>

<p>TabStrip</p>

<div data-role="footer">

<div data-role="tabstrip">

<a href="#tabstrip-profile" data-icon="contacts">Profile

</a><a href="#tabstrip-sales" data-icon="history">Sales

</a><a href="#tabstrip-rating" data-icon="favorites">Rating

</a><a href="#tabstrip-settings" data-icon="settings">Settings</a>

</div>

<style scoped>

#tabstrip-profile h2 {

display: inline-block;

font-size: 1.1em;

margin: 1.5em 0 0 1em;

}

#tabstrip-profile h2 span {

display: block;

clear: both;

font-size: 2em;

margin: .2em 0 0 0;

}

#tabstrip-profile img {

width: 5em;

height: 5em;

float: left;

margin: 1em;

-webkit-box-shadow: 0 1px 3px #333;

box-shadow: 0 1px 3px #333;

-webkit-border-radius: 8px;

border-radius: 8px;

}

.sales-down,

.sales-hold,

.sales-up,

.value {

float: right;

}

.sales-up {

color: green;

}

.sales-down {

color: red;

}

.sales-hold {

color: blue;

}

.value {

color: #bbb;

}

</style>

<script type="text/javascript" src="cordova-2.5.0.js"></script>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/kendo.mobile.min.js"></script>

<script type="text/javascript" src="js/kendoindex.js"></script>

<script>

app.initialize();

</script>

</body>

</html>

kendoindex.js file:

var app = {

// Application Constructor

initialize: function() {

this.bindEvents();

},

// Bind Event Listeners

//

// Bind any events that are required on startup. Common events are:

// 'load', 'deviceready', 'offline', and 'online'.

bindEvents: function() {

document.addEventListener('deviceready', this.onDeviceReady, false);

},

// deviceready Event Handler

//

// The scope of 'this' is the event. In order to call the 'receivedEvent'

// function, we must explicity call 'app.receivedEvent(...);'

onDeviceReady: function() {

app.receivedEvent('deviceready');

},

// Update DOM on a Received Event

receivedEvent: function(id) {

window.kendoMobileApplication = new kendo.mobile.Application(document.body);

}

};

function redirectTOLocalPage(p){

window.location.href = p;

}

Any "best practice" in this issue will be much appreciated
Thanks !

Moti

General Discussions

answered on 13 Mar 2013

5 answers

850 views

How to cancel a remove event on a listview

I have created a listview bound to a remote datasource. I have added a delete button using the k-delete-button class, and clicking on the button does remove the item from the listview. My question is can I optionally cancel the remove event? My first assumption was that I would implement the remove event on the listView, could implement any needed business logic, and optionally cancel the remove operation. I was able to catch the event and the model was passed with the record that was removed, but I can't seem to find any way to cancel the operation. No matter what I do, the listview item that was removed does not return to the screen.

ListView

answered on 13 Mar 2013

4 answers

86 views

Validation on IE10

Hey,
i am building an site on MVC 4.0 which use Kendo Library. My form also use Kendo validation. I am using data annotations for fields validation. And everything is perfect except that when i am running site on IE10 all fields from form are marked as reqiured. On other browsers everything is ok. Is this some kind of bug or there are no support for IE10 browser?

Validation

answered on 13 Mar 2013