Questions on Kendo UI for jQuery Forum

1 answer

108 views

Sample code isn't supported by browsers.

Are there examples that are incremental in complexity or only require minimal CSS to work?

Thanks,

Brian

The Basic Usage example for autocomplete has attributes that are not supported by any of the standard browsers.
( http://www.w3schools.com/html5/att_style_scoped.asp )

        <style scoped="scoped">
                .info {
                    display: block;
                    line-height: 22px;
                    padding: 0 5px 5px 0;
					color: #36558e;
                }
				
				#shipping {
					width: 482px;
					height: 152px;
					padding: 110px 0 0 30px;
					background: url('../content/autocomplete/shipping.png') transparent no-repeat 0 0;
					margin: 30px auto;
 				}

                .k-autocomplete
                {
                    width: 250px;
					vertical-align: middle;
                }

                .hint {
                    line-height: 22px;
                    color: #aaa;
                    font-style: italic;
					font-size: .9em;
					color: #7496d4;
                }
            </style>

AutoComplete

answered on 13 Dec 2011

3 answers

166 views

XML on datasource not working...

Here is my test HTML page (only relevant to the problem):

<ul id="books"></ul>

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

<li class="book">

<h3>#= title #</h3>

by #= author #

</li>

</script>

<script>

$(document).ready(function() {

function onChage() {

$("#books").html(kendo.render(template, this.view()));

}

// create a template using the above definition

var template = kendo.template($("#template").html());

var dataSource = new kendo.data.DataSource({

transport: {

read: "filters.xml"

},

schema: {

// specify the the schema is XML

type: "xml",

data: "/Filters/Filter",

model: {

fields: {

title: "title/text()",

author: "@Id",

url: "info/text()"

}

},

change: onChage

});

dataSource.read();

});

</script>

and here is my XML file:

<?xml version="1.0"?>

-<Filters> -<Filter Id="drwho"> <Collection>drwho</Collection> <Title>Favourite Doctor</Title> <Info>link_to_popup_info.html</Info> <Image>drwho.png</Image> </Filter> -<Filter Id="poo"> <Collection>poop</Collection> <Title>smell that?</Title> <Info>link_to_popup_info.html</Info> <Image>poop.png</Image> </Filter> </Filters>

It doesn't work. I've also noticed if I overwrite the books.xml file in the sample line by line it will work. Other than that (which is stupid) I have no idea why the code refuses to run. The code is from the xml-data.html file.

Any ideas?

Data Source

answered on 13 Dec 2011

1 answer

324 views

Documentation update/request

Can we get a list of all the field types available in schema definitions of models?

Data Source

answered on 13 Dec 2011

1 answer

86 views

Why the mobile demo is completely blocked in WP7?

I tried to see the demo on a WP7 phone and it said to use a Webkit browser. This is disappointing. Why? Is every user action gesture based only? The controls must support regular non gesture user input. WP7.5 uses IE9 which supports HTML5 and a lot of the CSS3 stuff. So what's the issue?

General Discussions

answered on 13 Dec 2011

2 answers

137 views

Problem with Validator

Since there is no dedicated forum to the Validator, I'll post it here.

I have a form with a Validator applied to a text input. Works well except for submitting the form. According to the docos "Note that if a HTML form element is set as validation container, the form submits will be automatically prevented if validation fails."

This is not the case as my form submits anyway. I'm checking for false on the button click at the moment, but it doesn't work for anything. I would like submisson of forms to be disabled as per the documentation.

Any ideas?

@<div id="searchform">

<form method="get" action="@Href("~/Collection/Search")" class="search">

<ul>

<li>

<input type="text" name="q" value="@q" class="k-textbox" required />

</li>

<li>

<button class="k-button" id="search">Search</button>

</li>

</ul>

</form>

<div class="status">

</div>

<script type="text/javascript">

$(document).ready(function () {

var validator = $("#searchform").kendoValidator({

rules: {

custom: function (input) {

return input.val().length > 3;

}

},

messages: {

custom: "You need 3 or more characters",

required: "Oops, you forgot me!",

email: function (input) {

return getMessage(input);

}

}).data("kendoValidator");

$("#search").click(function () {

if (validator.validate() == false) {

}

});

</script>

</div>

General Discussions

answered on 13 Dec 2011

0 answers

117 views

Sample api.html improved with less confusing field ID's

The api.html sample code was confusing because ID's of the fields were named generically ("set", "get", etc.).

Sample code, imo should have clearly named variables and components.
Developers should be able to copy the sample and just rename the components to fit their own application.
If a field is named "value" it slows reuse because the developer has to think about all the other instances of "value" in the HTML/Javascript.

Here's my refined version of api.html. It can use further refinements but it demonstrates the principle of appropriate object name scoping.

<!doctype html>
<html>
    <head>
        <title>API</title>
        <link href="../../shared/styles/examples.css" rel="stylesheet"/>
        <link href="../../shared/styles/examples-offline.css" rel="stylesheet"/>
        <link href="../../../styles/kendo.common.min.css" rel="stylesheet"/>
        <link href="../../../styles/kendo.default.min.css" rel="stylesheet"/>
        <script src="../../../js/jquery.min.js"></script>
        <script src="../../../js/kendo.core.min.js"></script>
        <script src="../../../js/kendo.popup.min.js"></script>
        <script src="../../../js/kendo.data.min.js"></script>
        <script src="../../../js/kendo.list.min.js"></script>
        <script src="../../../js/kendo.autocomplete.min.js"></script>

            <style >
                #movieSelectionFieldId {
                    margin-right: 50px;
                }

                #example .code-sample {
                    margin-top: 0;
                    width: 300px;
                }
            </style>

    </head>
    <body>
        <a href="../index.html">Back</a>
        <div class="description">API</div>
        <div id="example" class="k-content">

            <div class="code-sample output">
                <h4 class="code-title">Begin entering name of a movie title:</h4>
                <div class="prettyprint">
                    <input id="movieSelectionFieldId" />
                </div>
            </div>

            <script>
                $(document).ready(function() {
                    var moviesAvailableArray = [
                        "12 Angry Men",
                        "Il buono, il brutto, il cattivo.",
                        "Inception",
                        "One Flew Over the Cuckoo's Nest",
                        "Pulp Fiction",
                        "Schindler's List",
                        "The Dark Knight",
                        "The Godfather",
                        "The Godfather: Part II",
                        "The Shawshank Redemption"
                    ];

                    $("#movieSelectionFieldId").kendoAutoComplete(moviesAvailableArray);

                    var moviePickedValueAutoComp = $("#movieSelectionFieldId").data("kendoAutoComplete"),
                        setValue = function(e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                                moviePickedValueAutoComp.value($("#setMovieFieldValueInputId").val());
                        },
                        setSearch = function(e) {
                            if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
                                moviePickedValueAutoComp.search($("#searchHelperFieldId").val());
                        };

                    $("#setMovieFieldButtonId").click(setValue);
                    $("#setMovieFieldValueInputId").keypress(setValue);
                    $("#searchHelperButtonId").click(setSearch);
                    $("#searchHelperFieldId").keypress(setSearch);

                    $("#getMovieFieldValueButtonId").click(function() {
                        alert(moviePickedValueAutoComp.value());
                    });
                });
           </script>

           <div class="configuration">
                <span class="configHead">Configuration</span>
                <span class="configTitle">API Functions</span>
                <ul class="options">
                    <li>
                        <input id="setMovieFieldValueInputId" type="text" />
                        <button id="setMovieFieldButtonId" class="k-button">Set value</button>
                    </li>
                    <li>
                        <button id="getMovieFieldValueButtonId" class="k-button">Get value</button>
                    </li>
                    <li>
                        <input id="searchHelperFieldId" value="The" />
                        <button id="searchHelperButtonId" class="k-button">Find starting with</button>
                    </li>
                </ul>
           </div>

            <div class="code-sample">
                <h4 class="code-title">Initialization Data</h4>
                <pre class="prettyprint lang-js">
var moviesAvailableArray = [
    "12 Angry Men",
    "Il buono, il brutto, il cattivo.",
    "Inception",
    "One Flew Over the Cuckoo's Nest",
    "Pulp Fiction",
    "Schindler's List",
    "The Dark Knight",
    "The Godfather",
    "The Godfather: Part II",
    "The Shawshank Redemption"
];</pre>
            </div>

        </div>
    </body>
</html>

AutoComplete

asked on 12 Dec 2011

1 answer

106 views

piechart - binding from request vs file

I have created a simple test from your examples

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<link href="../Styles/kendo.common.css" rel="Stylesheet" />

<link href="../Styles/kendo.default.css" rel="Stylesheet" />

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

<script src="../Scripts/kendo/kendo.core.js"></script>

<script src="../Scripts/kendo/kendo.data.js"></script>

<script src="../Scripts/kendo/kendo.chart.js"></script>

</head>

<body>

<div id="example" class="k-content">

<div>

<div id="chart"></div>

</div>

<script type="text/javascript">

function createChart() {

$("#chart").kendoChart({

theme: $(document).data("kendoSkin") || "default",

dataSource: {

transport: {

read: {

url: "test.json",

dataType: "json"

}

},

sort: {

field: "Program",

dir: "asc"

}

},

title: {

text: "Signup Count"

},

legend: {

position: "bottom"

},

seriesDefaults: {

type: "pie",

labels: {

template: "${ value } - ${ category }",

visible: true

}

},

series: [{

field: "SignupCount",

categoryField: "Program"

}],

tooltip: {

visible: false

}

});

}

$(document).ready(function () {

setTimeout(function () {

createChart();

// Initialize the chart with a delay to make sure

// the initial animation is visible

}, 400);

$(document).bind("kendo:skinChange", function (e) {

createChart();

});

</script>

</div>

</body>

</html>

test.json is a file that contains

[{"AgentsNames":["person 1"],"Program":"GOLD","SignupCount":1},{"AgentsNames":["person 2","person 3"],"Program":"No Program","SignupCount":2}]

that works perfectly

but when I change the url to "datastream.aspx?r=SIGNUPCOUNT" it doesnt work. This page responds with that JSON string

MemoryStream stream = GPCO.JSON.Serialize(stats.Programs);

string response = GPCO.Convert.BytesToUTF8(stream.GetBuffer());

Response.Clear();

Response.ContentType = "application/json";

Response.Write(response);

I've confirmed that it writes

[{"AgentsNames":["person 1"],"Program":"GOLD","SignupCount":1},{"AgentsNames":["person 2","person 3"],"Program":"No Program","SignupCount":2}]

that is also the source in the browser when I call the page directly. I've tried various parameters in the transport type: "GET" but nothing seems to work.

Data Source

answered on 12 Dec 2011

0 answers

120 views

inheritance/ override in kendo ui question

I would like to know is it possible to override methods on a class.

I'm thinking of creating a form container class (eg MyForm.js) with some helper methods.

Then I want to create another container (eg MyBigForm.js) which inherits MyForm and override the helper methods. Is that possible?

General Discussions

asked on 12 Dec 2011

1 answer

535 views

[Solved] Inactive tab CSS

Hi,

how can I change CSS of inactive tabs? I would like to set different background color for inactive tabs and leave white background only for currently acitve tab. I can't figure out how to do that.

I would appreciate if someone could help me. Thanks,

Igor

TabStrip

answered on 12 Dec 2011

1 answer

203 views

Complex Columns

Does the KendoUI Grid support complex column headers, ie. multiple rows in the column header so I can group columns together? We're currently using datatables which offers this functionality, but we'd like to switch to the KendoUI grid (plus, datatables doesn't let us build the columns dynamically, which we need to do). We will be creating the grid from a div, not from an existing html table.
See also: http://datatables.net/release-datatables/examples/basic_init/complex_header.html
Thanks.

Grid

answered on 12 Dec 2011