Questions on Kendo UI for jQuery Forum

4 answers

335 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

165 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

121 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

93 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

108 views

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

427 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

149 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

648 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

1 answer

96 views

Javascript Error with Simple Grid

I can seem to get a simple grid to display. I am using the trial version which I downloaded yesterday. in my page I have:

$("#grid").kendoGrid({
                        columns: [{ title: "HardwareId", field: "HardwareId" },
                                  { title: "Name", field: "Name" }],
                        height: 400
                    });

but I get a javascript error b.delegate.table is not a function in kendo.web.min.js

Any ideas why?

Grid