Questions on Kendo UI for jQuery Forum

1 answer

57 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

96 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

92 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

84 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

89 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

518 views

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

172 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

0 answers

105 views

HELP CRUD KENDO ASP MVC 3

I need an example grid using crud kendo.
How do I send the instance of the object to the controller using json?

Grid

asked on 12 Dec 2011

1 answer

113 views

Select Event Data Chrome Bug

I have the upload widget setup in async mode and have specified a Select event function for validation of the selected file type.
Everything works in FF and IE, but in chrome v15.0.874.121 the event data object passed into the select event method is different from the documentation when a file is dragged and dropped.

Here is the object that is passes when the Select button is clicked and a file is selected in chrome, FF, and IE or drag and dropped in FF.
e.files
[
Object
extension: ".gif"
name: "DiscMen.gif"
rawFile: File
size: 18578
__proto__: Object

Here is the object that is passed when a file is dragged and dropped on the drop zone in Chrome.
e.files
FileList
0: File
fileName: "DiscMen.gif"
fileSize: 18578
lastModifiedDate: Date
name: "DiscMen.gif"
size: 18578
type: "image/gif"
webkitRelativePath: ""
__proto__: File
length: 1
__proto__: FileList

my html:
<input name="files" id="files" type="file" />
my Script:
$("#files").kendoUpload({
                        showFileList: false,
                        multiple: false,
                        select: onFileSelected,
                        async: {
                            saveUrl: Site.RootUrl + "Account/UploadAvatar",
                            saveField: "avatarFile",
                            autoUpload: true
                        },
                        localization: {
                            "select": Site.GlobalResources.Account_Settings_Upload_Avatar_Select_Button,
                            "dropFilesHere": Site.GlobalResources.Account_Settings_Upload_Avatar_Drop_Zone_Message
                        }
                    });
function onFileSelected(e) {
    if (e.files[0].extension != '.jpg') {
        e.preventDefault();
    }
}

Upload

answered on 12 Dec 2011

1 answer

135 views

Targeting Two Different Templates?

How do I target two different templates on a page?

In the following code, you will see I have one datasource that has the main data set. I then filter that data differently, to display some parts in the site's header menu and other parts in the footer menu.

However, the content for the footer menu is being loaded into both templates?

ul id="navigation_menu" class="navigation_menu"></ul>

<ul id="footer_menu" class="footer_menu"></ul>

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