Questions on Kendo UI for jQuery Forum

5 answers

96 views

[Solved] iPhone native App ignoring initialLoad

We have setup our application to be able to use the add home screen option in the iPhone. Once we do that the app stops behaving normally. We tried setting the initialload option when the framework is loaded, but it is completely ignored. We ended up having to do a window.location.replace to the screen we wanted. What is causing the iPhone to act differently between Safari and running it as a fake native app?

General Discussions

answered on 05 May 2012

0 answers

116 views

using template variable for generating id

Hi ,

I have a function to call in a listView which is generated using a template. The function takes id of the div and does something to it. The cannot be same of all div(s) generated in the listView or else the function logic will for a toss. I tried generating the id of div like this :

<div id="menuitemtarget#= eventId #" .....
But to my dismay, the id does not take in menuitemtarget101 (if eventId is 101) it takes it as id="menuitemtarget#= eventId #" as it is.

My Code is somewhat like this :

<div id="menuitemtarget" class="searchcell"

onclick="# tntToggleMenu("#menuitemtarget", "#menuActions") #>

<span>Actions</span> <span class="iconaero">

</span>

<ul class="actionsMenu displayNone" style="margin: 0;"

id="menuActions">

<li class="actionMenuItem"><a href="">Option 1</a> </li>

<li class="actionMenuItem"><a href="">Option 2</a> </li>

</ul>

</div>

Please help

Templates

asked on 05 May 2012

4 answers

351 views

Format output?

Hello,

I have some values being returned from a remote data source and would like them to be formatted as currency. So currently I have something like:

<span data-bind="value: amount"></span>

And it's outputting something like 59.9 and I would like it to output $59.90.

Is there a recommended way to accomplish this without hard-coding the $ and changing the data type to a string?

Nick

MVVM

answered on 05 May 2012

1 answer

198 views

Do not create <div class="km-scroll-container">

I need to put a div in the center of view, but the div (km-scroll-container) does not allow for not having the height: 100%
How do Kendo UI does not create this div?

General Discussions

answered on 04 May 2012

0 answers

139 views

Stop reload after execute javascript function with form

Every time I execute a javascript function like clean form or ajax post, browser automatically reload page. I test to use alert function with return false, it's worked but with form don't.

I discovered what happened, I error in javascript makes page reload!

Window

asked on 04 May 2012

0 answers

114 views

Cancel selection

Is there a way to cancel the selection of a row?
I have an editor that shows the details of the selected row. I want to be able to prevent the user from changing the selection if the editor has unsaved changes.
Is there a way of preventing this?

Cheers,
Andrés

Grid

asked on 04 May 2012

2 answers

149 views

[Solved] Simple question about datasource validation field names

Apologies if this has been answered elsewhere... I couldn't find it.

When configuring the validation settings in a datasouce model, is there a way to specify a different label for the field name that is displayed in the validation message.

I don't really want custom validation messages, just something like: Reference is a required field, rather than ref_number is a required field

Thanks

Data Source

answered on 04 May 2012

1 answer

442 views

Cloning DataSource for multiple reads

I have a clone function (shown below) for deep copying of objects. How could I clone a datasource object (like the one below) and then change the url and then re-use it for multiple Grids?

dataSource = new kendo.data.DataSource({

type:"json",

transport:{

read:{

url:"http://ysg4206/CatalogService/CatalogService.svc/Mtypes",

dataType:"json"

}

},

schema:{

data:"results",

total:"count"

},

error:function (e) {

alert("fetch types error happened: " + e);

}

});

datasource2 = clone(datasource);
datasource2.transport.read.url = "http://anotherSite"; // will not work, but this is the idea

here is my clone function:

function clone(obj) {

var copy;

// Handle the 3 simple types, and null or undefined

if (null == obj || "object" != typeof obj) {

return obj;

}

// Handle Date

if (obj instanceof Date) {

copy = new Date();

copy.setTime(obj.getTime());

return copy;

}

// Handle Array

if (obj instanceof Array) {

copy = [];

var i;

var len = obj.length;

for (i = 0; i < len; ++i) {

copy[i] = clone(obj[i]);

}

return copy;

}

// Handle Object

if (obj instanceof Object) {

copy = {};

for (var attr in obj) {

if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);

}

return copy;

}

throw new Error("Unable to copy obj! Its type isn't supported.");

}

Data Source

answered on 04 May 2012

1 answer

173 views

List Templates in external files

I created a List that is populated from an external JSON file.

But I don't like cluttering my HTML with Javascript snippets, So I thought I could just reference an external file. But that is not working:

Original: (which works)

<div id="listView">

<script src="Templates/TypeEntryTemplate.tmpl" type="text/x-kendo-tmpl" id="template" >

<div class="typeEntry">

<input id="typeCheck-${idx}" value="type-${type}" type="checkbox" checked="checked"/>

<label for="typeCheck-${idx}">${type}</label>

</div>

</script>

</div>

Moving the script to an external file:

<div id="listView">

<script src="Templates/TypeEntryTemplate.tmpl" type="text/x-kendo-tmpl" id="template" />

</div>

External File (Templates/TypeEntryTemplate.tmpl :

<div class="typeEntry">

<input id="typeCheck-${idx}" value="type-${type}" type="checkbox" checked="checked"/>

<label for="typeCheck-${idx}">${type}</label>

</div>

FYI: here is the code that creates the ListView:

$("#listView").kendoListView({

dataSource:dataSource,

pageable:false,

template:kendo.template($("#template").html())

});

ListView

answered on 04 May 2012

4 answers

673 views

Regarding Multiselect combobox

Hi,
    I made Multi select dropdown with check box using custom template. Following is the code for the same. Issue with this is that it allows multiple selection but displays only the last selected value.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default4.aspx.vb" Inherits="Default4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style >
                #titles-list .k-item {
                    overflow: hidden; /* clear floated images */
                }

                #titles-list img {
                    box-shadow: 0 0 4px rgba(255,255,255,.7);
                    float: left;
                    margin: 5px;
                }

                #titles-list dl {
                    margin-left: 85px;
                }

                #titles-list dt,
                #titles-list dd {
                    margin: 0;
                    padding: 0;
                }

                #titles-list dt {
                    font-weight: bold;
                    padding-top: .5em;
                }

                #titles-list dd {
                    padding-bottom: .3em;
                }
            </style>
<link href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript" ></script>
    <script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js" type="text/javascript" ></script>

<script id="scriptTemplate" type="text/x-kendo-template">
   <input type="checkbox" name="${ data.Name }" value="${ data.Name }" ${ data.IsSelected ?"checked" : "" } />
    <span>${ data.Name }</span>
</script>

<script>
    $(document).ready(function () {
        $("#comboBox").kendoComboBox({
            autoBind: false,
            dataTextField: "Name",
            dataValueField: "Id",
            template: $("#scriptTemplate").html(),
            dataSource: {
                type: "odata",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 20,
                transport: {
                    read: "http://odata.netflix.com/Catalog/Titles"
                }
            }
        });
        var dropdownlist = $("#comboBox").data("kendoDropDownList");


    });

</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <input id="comboBox" />
    </div>
    </form>
</body>
</html>

ComboBox

answered on 04 May 2012