Questions on Kendo UI for jQuery Forum

9 answers

847 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

440 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

373 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

342 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

270 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.9K+ 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

124 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

107 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

4 answers

342 views

Navigate to a New page and back

This is my scenario.

I have two pages:
1) Index.html
2) Update.aspx

I have an app (index.html) that will collect information from the user and store it in LocalStorage.
When the User Click on a button "Update", I want to be able to go to Update.aspx page and consume the data in the Local storage. I want to return to the index.html#Success tab.

I am not able to find example of how to go to the Update.aspx page from the index.html page. Any help would be great.

Thanks,
C

Application

answered on 01 Jun 2013

2 answers

216 views

Why is the combobox spinning forever?

I am sure I am making some trivial error, but I can't figure it out.

I have a kendoComboBox that I have a placeholder for as follows:

<input id="ComboBox1" />

And my $(document).ready function contains:

      SpaceDataSource = new kendo.data.DataSource(
        {
          transport: {
            read: {
              url: "LoadSpacesJson.aspx",
              dataType: "json"
            }
          }
        }
      );
      $("#ComboBox1").kendoComboBox(
        {
          dataTextField: "Name",
          dataValueField: "Value",
          dataSource: SpaceDataSource
        }
      );

where SpaceDataSource is a global variable.

My datasource gets called correctly and returns the following as document type application/json:

[{Value:29,Name:"Alex Stankovic 135A"},{Value:18,Name:"Blake lab 122"},{Value:25,Name:"Class room 106"},{Value:19,Name:"Class room 108"},{Value:22,Name:"Class room 111A"},{Value:12,Name:"Class room 111B"},{Value:7,Name:"Computer lab 116"},{Value:13,Name:"Computer lab 118"},{Value:30,Name:"Conference room 127"},{Value:14,Name:"CS office 102"},{Value:26,Name:"Double lab 120"},{Value:8,Name:"EE office 101"},{Value:21,Name:"George Preble 133"},{Value:6,Name:"Gomez lab 103"},{Value:24,Name:"Graduate offices 107"},{Value:20,Name:"Graduate offices 137"},{Value:9,Name:"Prof. Hopwood 101A"},{Value:10,Name:"Ron Lasser 125"},{Value:27,Name:"Shuchin Aeron 242"},{Value:16,Name:"Student lounge 123"},{Value:17,Name:"TA offices/Meeting room 121"},{Value:28,Name:"Usman Khan 135"}]

My problem is that the kendoComboBox appears, but there's a spinner on it that just keeps spinning indefinitely and it never creates the proper dropdown list.

Any help will be appreciated.

Thanks/Anker

Data Source

answered on 31 May 2013