Questions on Kendo UI for jQuery Forum

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

75 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

242 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

818 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

78 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

95 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

108 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

1 answer

166 views

Grid with template not sorting correctly

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

1 answer

258 views

Parent data text field not recognized in Kendo TreeView when using data attribute initialization

I'm trying to using Kendo TreeView with attribute data initialization, following the official documentation.
As far as I understand, the next two portions of code should be equivalents:

1.- data attribute initialization style:

<div id="treeview-right"
           data-role="treeview"
           data-source="inline"
           data-text-field="['categoryName', 'subCategoryName']">
</div>
2.- JQuery style:

<script>
            $("#treeview-right").kendoTreeView({
            dataSource: inline,
            dataTextField: ["categoryName", "subCategoryName"]
            });
</script>The way number 2 works as expected, but the number 1 renders the tree 
but without the parent node's text(showing 'undefined' text, like it 
doesn't recognize the 'categoryName' parameter from data-text-field 
value. By the way , when I set data-text-field to data-text-field="['categoryName']
 it shows the parent node text, but not the child node's text, as expected. 
I'm using the examplefrom the official tutorial (JQuery style initialization),
 if someone wants to see the whole code. Is it correct my supposition?,
 Why  with attribute data initialization doesn't work? .

TreeView

answered on 13 Mar 2013

3 answers

126 views

ListView Style in IE8

In IE8, the nice shaded box that surrounds the individual items in the ListView is not there, which I assume is a CSS issue with IE8. This happens on the Kendo Web ListView Editing example, which is what I've used as a model:
http://demos.kendoui.com/web/listview/editing.html

I've attached images of what it looks like in IE8 and IE9 browser mode. Unfortunately, our browser standard right now is IE8 and I'd really like to have the nicer formatting. Is there a way to get IE8 to display the same way as IE9?

Thanks!

ListView

answered on 13 Mar 2013