Questions on Kendo UI for jQuery Forum

0 answers

142 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

302 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

112 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

77 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

246 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

841 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

84 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

1 answer

97 views

Kendo.Web Grid Popup Create with ComboBox

I am using the Kendo web controls. I have used the grid view in several places before and decided to use the popup style editing for my current project.

I have most of it working. I have three combo boxes for category, bank account and payee and when I edit an existing item, the model object passed back to my MVC action has the correct values in it. However, when I click on the create button, the three combo box values are returned as null to the controller.

Here is the CSHTML code for this view:

@using System

@using System.Linq

@{

ViewBag.Title = "Transactions";

}

@section Head

{

<link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />

<link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" />

<script src="~/Scripts/kendo/kendo.web.min.js"> </script>

}

@section featured

{

<section class="featured">

<div class="content-wrapper">

<hgroup class="title">

<h1>@ViewBag.Title</h1>

</hgroup>

</div>

</section>

}

<div id="grid"></div>

<script>

$(function() {

$("#grid").kendoGrid({

height: 350,

toolbar: [{ name: "create", text: "Create New Transaction" }],

columns:

[

{ field: "Date", width: "100px", template: '#= kendo.toString(Date,"MM/dd/yyyy") #' },

{ field: "Amount", format: "{0:c}", width: "100px" },

{ field: "Category", width: "80px", editor: categoryDropDownEditor, template: "#=Category.Name#" },

{ field: "BankAccount", title: "Account", width: "80px", editor: bankAccountDropDownEditor, template: "#=BankAccount.Name#" },

{ field: "Payee", width: "80px", editor: payeeDropDownEditor, template: "#=Payee.Name#" },

{ command: ["edit", "destroy"], title: " ", width: "160px" }

],

editable: { mode: "popup", confirmation: "Are you sure you want to delete this transaction?" },

pageable:

{

refresh: true,

pageSizes: true

},

sortable: true,

filterable: false,

dataSource:

{

serverPaging: true,

serverFiltering: true,

serverSorting: true,

pageSize: 7,

schema:

{

data: "Data",

total: "Total",

model:

{

id: "Id",

fields:

{

Id: { editable: false, nullable: true },

Date: { type: "Date" },

Amount: { type: "number", validation: { required: true, min: 0 } },

Category: { validation: { required: true } },

BankAccount: { validation: { required: true } },

Payee: { validation: { required: true } },

Note: { validation: { required: false } }

}

},

batch: false,

transport:

{

create:

{

url: "@Url.Action("Create", "Transaction")",

contentType: "application/json",

type: "POST"

},

read:

{

url: "@Url.Action("Read", "Transaction")",

contentType: "application/json",

type: "POST"

},

update:

{

url: "@Url.Action("Update", "Transaction")",

contentType: "application/json",

type: "POST"

},

destroy:

{

url: "@Url.Action("Delete", "Transaction")",

contentType: "application/json",

type: "POST"

},

parameterMap: function(data)

{

return JSON.stringify(data);

}

});

function categoryDropDownEditor(container, options)

{

$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList(

{

autoBind: true,

dataValueFileld: "Id",

dataTextField: "Name",

dataSource:

{

type: "json",

transport: { read: "@Url.Action("GetCategories", "Transaction")" }

}

});

}

function bankAccountDropDownEditor(container, options)

{

$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList(

{

autoBind: true,

dataValueFileld: "Id",

dataTextField: "Name",

dataSource:

{

type: "json",

transport: { read: "@Url.Action("GetBankAccounts", "Transaction")" }

}

});

}

function payeeDropDownEditor(container, options)

{

$('<input required data-text-field="Name" data-value-field="Id" data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoDropDownList(

{

autoBind: true,

dataValueFileld: "Id",

dataTextField: "Name",

dataSource:

{

type: "json",

transport: { read: "@Url.Action("GetPayees", "Transaction")" }

}

});

}

});

</script>

The binding to the kendo combo box must be working, otherwise the edit would fail as well. All I can think is that the object is not created correctly. Also, it selects the first item in the combo box by default, but even so, does not bind the value.

Following is the code for my create and update actions:

[HttpPost]

public ActionResult Create(TransactionModel transactionModel)

{

var transaction = _moneyBO.CreateTransaction();

Mapper.Map(transactionModel, transaction);

_moneyBO.UpdateTransaction(transaction);

return Json(Mapper.Map<TransactionModel>(transaction));

}

public ActionResult Update(TransactionModel transactionModel)

{

var transaction = _moneyBO.Transactions.SingleOrDefault(x => x.Id == transactionModel.Id);

if (transaction == null)

return View("NotFound");

Mapper.Map(transactionModel, transaction);

_moneyBO.UpdateTransaction(transaction);

return Json(Mapper.Map<TransactionModel>(transaction));

}

I have not found a good example using the popup custom edit. The example on the Kendo site works inline, but if you change the example to popup it does not work.

Any ideas?

Thanks.

Grid

answered on 13 Mar 2013

1 answer

111 views

Grid with kendo template columns not sorting properly

Hi, i have a grid which is not sorting correctly. I am using a template to define columns. I think the issue is that the column sort value/field for the individual columns is not explicitly defined so i don't see how the grid would know what to sort on. How can i define which field each column in my template should sort on?

$("#listGrid").kendoGrid({
            rowTemplate: kendo.template($("#detailsTemplate").html().replace('k-alt', '')),
            altRowTemplate: kendo.template($("#detailsTemplate").html()),
            scrollable: false,
            dataSource: {
                transport: {
                    read: url
                },
                schema: {
                    model: {
                        fields: {
                            ItemId: { type: "number", sortable: true },
                            ItemName: { type: "string", sortable: true },
                            Created: { type: "date", sortable: true },
                            Modified: { type: "date", sortable: true },
                            OwnerName: { type: "string", sortable: true },
                            OwnerId: { type: "number", sortable: true }
                        }
                    }
                }
            },
            sortable:true
        });

<script id="detailsTemplate" type="text/x-kendo-template">

    <tr class="row k-alt">
        <td>
             <a href="/Members/Chart.aspx?costDriverId=#=ItemId#">#= ItemName#</a>
        </td>
        <td>
             #= kendo.toString(Created, "dd/MM/yyyy") #
        </td>
        <td>
              #= kendo.toString(Modified, "dd/MM/yyyy") #
        </td>
        <td>
        #if(OwnerId.toString() == userInfo.UserId){#
            Me
        #}else{#
            #:OwnerName#
        #}#
        </td>
        <td>
          <a class="copyLink" onclick="copyCustomData(#=ItemId#, this) href="\#">Copy</a>
        </td>
        <td>
             #if((OwnerId.toString() == userInfo.UserId) || (userInfo.IsGAM == true)){#
                <a class="editLink" href="/CustomData/?id=#=ItemId#">Edit</a>
            #}#
        </td>
        <td>
            #if((OwnerId.toString() == userInfo.UserId) || (userInfo.IsGAM == true)){#
                <a href="\#" onclick="deletePricingModel(#=ItemId#, this);return false;"><img src="/Content/images/member/delete_icon.gif" alt="Delete" /></a>
            #}#
        </td>
        <td>
            #if((OwnerId.toString() == userInfo.UserId) || (userInfo.IsGAM == true)){#
                <a href="\#" onclick="sharePricingModel(#=ItemId#);return false;"><img src="/Content/images/member/iconShare.gif" alt="Manage Sharing" /></a>
            #}#
        </td>
    </tr>


    </script>

Grid

answered on 13 Mar 2013