Questions on Kendo UI for jQuery Forum

4 answers

109 views

When using the standard jQuery effects, the animation will not play when the final state of the animation equals the current state. Using kendo.fx or kendoAnimate this does not work.

An example shows much better what I mean:

kendoAnimate: http://jsfiddle.net/RedF/ca8vz/

kendo.fx: http://jsfiddle.net/RedF/CYpht/

Notice that I'm using the animations from within a knockout custom binding, which is a necessary requirement in my project.

The example clearly shows the difference when you press 'Run' in jsfiddle:

In the jQuery slideDown variant the sliding text is invisible until you click the ToggleVisibility button and then changes between visible/invisible when you click the ToggleVisibility button;
In the kendoAnimate variant the sliding text will start visible, slide up and become invisible and then changes between visible/invisible when you click the ToggleVisibility button;
In the kendo.fx variant, well....., there are issues;

Can you please tell me how can I use the kendo effects/animations with proper 'instant' initialisation? I'm sure it can be done in many ways with just CSS transitions etc. etc. but I really want to use only the kendo UI framework as much as possible.

Kind regards,
Fred

General Discussions

answered on 03 Jun 2013

1 answer

120 views

versioning get me mad

See this page:
http://www.kendoui.com/forums/mobile/general-discussions/kendoui-mobile-dropdownlist-in-icenium-mist.aspx

and put on this code last kendo ui version (2013.1.319):

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<title>Kendo UI JsBin</title>
</head>
<body>
<div data-role="view" data-init="initSignOffForm">
<select id="ddlChild">
<option value="1">Veronique</option>
<option value="2">Michelle</option>
<option value="3">Griffin</option>
<option value="4">Boris</option>
</select>
</div>
<script>
function initSignOffForm() {
var body = $(".km-vertical,.km-horizontal");
if (kendo.ui.DropDownList) {
$("#ddlChild").kendoDropDownList({
// The options are needed only for the desktop demo, remove them for mobile.
popup: { appendTo: body },
animation: { open: { effects: body.hasClass("km-android") ? "fadeIn" : body.hasClass("km-ios") ? "slideIn:up" : "slideIn:down" } }
});
}
}

new kendo.mobile.Application();
</script>
</body>
</html>

You can see that does't work because the items of select are too big!
How can it solve??
This just in graphite and in mist beacuse in
http://jsbin.com/aligem/221/edit

It work fine!

General Discussions

answered on 03 Jun 2013

9 answers

827 views

Passing observableArray with obervable objects to Template Example?

Hi,

I need an example of how i might pass an ObservableArray of viewmodels to a template where the template has elements with bound properties.. Is this doable? Do you have to add loop syntax to the template?? Example code please.

Templates

answered on 03 Jun 2013

4 answers

434 views

TabStrip getting dataSource from ajax call

Hi,

I'm trying to do something similar as in the fiddle: http://jsfiddle.net/fPNUN/1/

Except for the data being defined hard coded I am loading a data object via a RESTful webservice call and I am doing all this in an angular directive.

I then try to do something like this:
var promise = helper.fetchData();
promise.then(
function (result) {
var data = result.data;
var tabstrip = element.find(".kendo-tab-strip");

tabstrip.kendoTabStrip({
dataSource: data,
dataTextField: "label",
dataContentUrlField: "partial",
});
}
);

Here is what happens when the page is loaded:
* The tabs are listed with their labels (obviously the json object has been returned)
* No content is displayed (even though I programmatically select the first tab)
* When I click on one of the tabs for the first time (!!!) the following error is logged in the javascript console:
Uncaught TypeError: Cannot call method 'abort' of undefined Array[2] angular.js:6173
Uncaught TypeError: Cannot call method 'abort' of undefined kendo.all.js:26958

What is really weird is that the content is then displayed correctly and when I click on the other tabs subsequently everything works and the error is no longer thrown.

TabStrip

answered on 03 Jun 2013

2 answers

370 views

remote Web API JSON data

Hi guys,

I'm trying to us a simple existing remote Web API with Kendo datasource and can't get it working.
The JSON result is simple as below.
[
{"Id":1,"Name":"Tomato Soup","Category":"Groceries","Price":1.0},
{"Id":2,"Name":"Yo-yo","Category":"Toys","Price":3.75},{"Id":3,"Name":"Hammer","Category":"Hardware","Price":16.99}
]

I can read and show the Products result with jQuery (see <div class="table-wrapper"> in the code below), but it won't get displayed in the defined grid (see <div class="grid-wrapper">).
This drives me crazy.
Tried to use jQuery -Version 1.9.1 but it doesn't work either.

Can anybody please tell me what do I miss ?

Many thanks for your support,
Matthias

<!DOCTYPE html>
<html>
<head>
    
    <link href="styles/kendo/kendo.common.min.css" rel="stylesheet" type="text/css" />
    
    <link href="styles/kendo/kendo.default.min.css" rel="stylesheet" type="text/css" />

    
    <script src="scripts/jquery-2.0.1.min.js"></script>
    
    <script src="scripts/kendo/kendo.all.min.js"></script>

    <title>Dashboard</title>
</head>
<body>

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

        <div class="grid-wrapper">

            <div id="grid"></div>

            <script>
                var remoteDataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "http://localhost:8945/api/Products",
                            dataType: "json"
                        }
                    },
                    schema: {
                        model: {
                            id: "Id",
                            fields: {
                                Id: { type: "number" },
                                Name: { type: "string" },
                                Category: { type: "string" },
                                Price: { type: "number" }
                            }
                        }
                    }

                });


                $("#grid").kendoGrid({
                    dataSource: remoteDataSource,
                    height: 200
                });

            </script>
        </div>

        <div class="table-wrapper">
            <div id="divResult">

                <script>
                    function GetAllProducts() {
                        jQuery.support.cors = true;
                        $.ajax({
                            url: 'http://localhost:8945/api/Products',
                            dataType: 'json',
                            success: function (data) {
                                WriteResponse(data);
                            },
                        });
                    }
                    function WriteResponse(products) {
                        var strResult = "<table><th>ID</th><th>Name</th><th>Category</th><th>Price</th>";
                        $.each(products, function (index, product) {
                            strResult += "<tr><td>" + product.Id + "</td><td> " + product.Name + "</td><td>" + product.Category + "</td><td>" + product.Price + "</td></tr>";
                        });
                        strResult += "</table>";
                        $("#divResult").html(strResult);
                    }

                    $(document).ready(function () {
                        GetAllProducts();
                    });
                </script>
            </div>
        </div>
    </div>

</body>
</html>

Data Source

answered on 03 Jun 2013

1 answer

337 views

How to bind the transport calls with the html buttons?

Hi,
I have recently started to use Kendo UI technology and currently i am trying to create a grid using the Kendo Grid. For binding the data to the grid, i found two ways:
1. Transport
2. $.ajax( { } );

My requirement is to have a grid that will display the data and that can be auto-refreshed every time i change, create or delete the data in the grid. For this, i have tried the $.ajax( { } ) call as below:

var myDataSource = null;

function loadGrid() {

$("#body").empty();

$.ajax({

autoSync: true,

url: "api/musicController/?Id=3",

type: 'GET',

dataType: 'json',

success: function (data) {

displayDataInGrid(data);

},

error: function (e) {

alert(e.responseText);

}

});

}

function displayDataInGrid(musicData) {

myDataSource = new kendo.data.DataSource({

data: musicData,

pageSize: 5,

sort: { field: "Id", dir: "desc" },

width: "50",

schema: {

model: {

id: "MusicId",

fields: {

Id: { validation: { required: false }, editable: false },

Title: { validation: { required: false } },

Description: { validation: { required: false } },

MusicType: { defaultValue: { Id: 1, Value: 1 } }

}

});

myDataSource.read();

$("#body").kendoGrid({

dataSource: myDataSource,

toolbar: [

{ text: "Add Music", className: "clsAddMusic" },

{ text: "Save Changes", className: "clsSaveChanges" },

{ text: "Remove Music", className: "clsRemoveMusic" }

],

columns: [

{ field: "Id", title: "Music Id" },

{ field: "Title", title: "Title" },

{ field: "Description", title: "Description" },

{ field: "MusicType", title: "Music Type" }

],

scrollable: true,

navigatable: true,

pageable: true,

groupable: true,

filterable: true,

sortable: true,

selectable: "multiple",

editable: true

});

// Bind function to click event of "Add Music" button.

$(".clsAddMusic").click(function () {

addMusic();

});

// Bind function to click event of "Save Changes" button.

$(".clsSaveChanges").click(function () {

saveMusic();

});

// Bind function to click event of "Remove Music" button.

$(".clsRemove Music").click(function () {

remove Music();

});

}

Using the above functions, i am able to create, delete and change the data that gets displayed in the grid immediately as autoSync is set to true.

Now the transport feature:

$.support.cors = true;

var i = 1;

$(document).ready(function () {

var myDataSource = new kendo.data.DataSource({

autoSync: true,

pageSize: 5,

batch: false,

transport: {

read: {

url: "api/music", // GetAllMusic

contentType: "application/json",

type: "GET"

},

create: {

url: "api/music", // AddMusic

contentType: "application/json",

type: "POST",

},

update: {

url: "/api/music/3", // UpdateMusic

contentType: "application/json",

type: "PUT"

},

destroy: {

url: "/api/music/3", // DeleteMusic

contentType: "application/json",

type: "DELETE"

}

},

schema: {

model: {

id: "MusicId",

fields: {

Id: { editable: false, type: "number" },

Title: { validation: { required: true }, type: "string" },

Description: { validation: { required: true }, type: "string" },

MusicType: { validation: { required: true }, type: "string" }

}

},

});

$("#grid").kendoGrid({

height: 300,

toolbar: [ "create", "save", "cancel" ],

columns: [

{ field: "Id", title: "Music Id" },

{ field: "Name", title: "Music Name" },

{ field: "Description", title: "Description" },

{ field: "ParameterType", title: "Music Type" },

{ command: "destroy" }

],

pageable: true,

sortable: true,

filterable: true,

editable: true,

dataSource: dataSource

});

// I want to bind the below function to my html button's click event.

function addMusic() {

// How and what to add here?

}

// I want to bind the below function to my html button's click event.

function removeMusic() {

// How and what to add here?

}

// I want to bind the below function to my html button's click event.

function editRow() {

// How and what to add here?

}

I am unable to proceed further because i have no idea how to bind only
transport: { create: { } }
to the "Add Music" button and similary for update and destroy.

Also, i would like to know what are the differences between transport and $.ajax({}), what are the pros and cons of each and when to use transport and $.ajax({}).

Thanks in advance,
Pratap

Grid

answered on 03 Jun 2013

1 answer

260 views

Grid with Create but without Update

We have a grid which needs create functionality, but update functionality does not make sense here (it is a many to many relation, so we only need to create/destroy a link, there is no update).

We can give this grid the create command, and specify the create operation, but now there is no "Save" button, as this is usually done by the "Update" button, which in case doesn't exist.

Is there a way to create a "Save" button, that only shows for newly added rows?

Grid

answered on 03 Jun 2013

1 answer

1.8K+ views

Concat String in Template

Hi There

Im using a Kendo Grid and want to show a joined array of strings.

# (ArrayOfStringsObject =! null) ? ArrayOfStringsObject.join() : SHOW "none" # <-- How can i show simple text in a template?

Thanks

Grid

answered on 03 Jun 2013

3 answers

115 views

KendoUi Mobile and Dataviz Styling

Hi,
Sorry if this is a duplicate question (I did have a search and could not find it).

I have got a KendoUI Mobile app and I am incorporating some dataviz elements (Radial Gauge for example).

It all integrates fine, however this is my question:

- Should the KendoUI Mobile be applying some styling to the dataviz elements? At the moment no styling is being applied meaning that on certain mobile OS's the dataviz objects become unreadable (due to background colors, labels etc).

I was rather hoping that the KendoUI mobile would apply the styling to these elements for me.

Can you advise?

Thanks
Martin

General Discussions

answered on 03 Jun 2013

3 answers

88 views

Few queries on Web Data grid

Hello Team,
I am evaluating the web data grid and the features it provides. I have few queries

Check box is not getting rendered as part of the row, Is there any way, I can achieve this scenario for both single grid as well as hierarchical grid.
In one of the live demo(Popup), ASP.NET web API has been used for CRUD operation, Can you guys please provide the server side code/ or working solution, because we want to know how the filter/sorting parameters and newly added rows data is being passed.
With hierarchical grid, if I select one of the child row, how can I select the parent row and vice verse.

Regards,
Rakesh

Grid

answered on 03 Jun 2013