Questions on Kendo UI for jQuery Forum

8 answers

1.7K+ views

Hi All,

I have a local datasource bound to an array of objects. This array looks something like (peopleData is a global object in this example):

peopleData = [

{ Id: "jaaron", FirstName: "John", LastName: "Aaron", Age: 46 },

{ Id: "agent2", FirstName: "Jayne", LastName: "Smith", Age: 13 }];

I am able to create a datasource using this local array with the following code (peopleDS is a global object in this example):

peopleDS = new kendo.data.DataSource({

data: peopleData,

change: function (e) {

console.log(this.data().length + ' records');

}

});

Now, I want to edit one of elements of the array. My current approach is to just iterate over the array and change the element I am looking for, like this:

for (var i = 0; i < peopleData.length; i++) {

if (peopleData[i].Id === "jaaron") {

peopleData[i].Age = 55;

break;

}

peopleDS.read(peopleData);

My question is - is there a more efficient way to do this? This array may grow to 1000 elements, which change frequently and I would rather not iterate over the entire array each time I need to change an element (although I realize it may be my only option).

On a side note:
The optimal solution, for me, would be to somehow bind an associative array to the datasource (although since it isn't really an array, I imagine isn't possible). For instance, I would like to be able to display the FirstName, LastName, and Age of the following object using a KendoUI datasource:

peopleData = {};

peopleData["jaaron"] = { FirstName: "John", LastName: "Aaron", Age: 46 };

peopleData["agent2"] = { FirstName: "Jayne", LastName: "Smith", Age: 13 };

As always, thanks in advance for any help!

Data Source

answered on 29 Nov 2013

2 answers

533 views

Editable color input field on grid

Hi all!

As you can see in the code below, i have a grid with editable cells. At the column named "szin" i tired to implement a kendo colorpicker and it works just fine.
My problem is, that the colors are only displayed when you try to edit one of the cell. Can i make it permanently displayed somehow? I dont care if the bg-color of the cell change or the dropdown box visible all the time or with any other methods.

Here's my code:

<!DOCTYPE html>

<html>

<head>

<link href="../styles/kendo.metro.min.css" rel="stylesheet">

<link href="../styles/kendo.common.min.css" rel="stylesheet">

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

<script src="../js/kendo.all.min.js"></script>

</head>

<body>

<div id="grid" style="width:1024px; height:400px; margin-left:auto; margin-right:auto;"></div>

<script>

$(document).ready(function() {

$("#grid").kendoGrid({

dataSource: {

transport: {

read: "load.php",

update: {

url: "load.php",

type: "POST"

}/*,

destroy: {

url: "load.php",

type: "DELETE"

}*/

},

error: function(e) {

alert(e.responseText);

}

},

columns: [ { field: "termekid", width:"70px" },

/*

...

*/

{ field: "szin", width:"74px",

editor: szinColorPickerEditor

}

/*

...

*/

],

sortable: true,

editable: true,

navigatable: true,

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

pageable: {

previousNext: true,

numeric: true,

buttonCount: 5,

input: false,

pageSizes: [0, 10, 20, 50, 100],

refresh: true,

info: true

}

});

function szinColorPickerEditor(container, options) {

$("<input type='color' data-bind='value:" + options.field + "' />")

.appendTo(container)

.kendoColorPicker({

buttons: true

});

}

});

</script>

</body>

</html>

Grid

answered on 29 Nov 2013

2 answers

283 views

Retrieving the original object from "observable" wrapper

Considering the following data object:

var obj = {
person: {
name: "Holmes"
address: {
apt: 221B,
street: "Baker",
city: "London"
}
}
}

And the viewModel built from the above object to be used in a MVVM presentation:
var viewModel = kendo.observable(obj);
kendo.bind(..., viewModel)

After the changes have been done to the viewModel by UI,
I would like to extract the original object as a whole (rather then field by field)
with the changes incorporated in it.

The extracted object would be then sent to another part of the application for processing
and is expected to have no additional events/functions/types built into it.
In other words, I would like to detach the "observable" from the object.

How can I do that?
Thanks,
Andrew

MVVM

answered on 29 Nov 2013

1 answer

89 views

Kendo UI and partial views

What i am trying to do is use partial views with kanedo ui. I want to have my views in one folder and load them according to navigation. Is there a simple way to do this? I tried accomblishing this by using angularjs but it didn't work very well.

General Discussions

answered on 29 Nov 2013

3 answers

141 views

Resize api and vertical resizing

Does the resize api also make it possible to apply vertical resizing ?
I'm trying to apply this on a grid contained in a splitter pane, but end up with the grid height being more the the pane height.
It would be nice if kendo widgets like the grid, listbox, scheduler, charts would be able stretch vertically to their parent container without having to change css classes and doing calculations yourself.

At the moment to my experience it's not that easy to create a SPA business application which would always be filling the entire viewport.

General Discussions

answered on 29 Nov 2013

1 answer

127 views

Documentation / How to

Is there any detailed documentation on how to use the Kendo Map. I am looking for Information such as what map tile sources are available, are there any features like Telerik Silverlight Map DynamicLayer/VirtualLayer. We have a web application that we converted to Kendo UI and the only component that is still not converted is the Silverlight Map page.

Map

answered on 29 Nov 2013

6 answers

135 views

demos.kendoui.com - build 2013.2.918 environment issue

The online demos from demos.kendoui.com was not working in any of the browsers in my machine.

But ironically, demo source which was downloaded from website is working as intended in all browsers.

Troubleshooting this, I attempted to clear cache and all cookies from my browsers which didn't help any. Even I've uninstalled all browsers and re-installed all again to see the same result.

Eventually, seems like release of 2013 Q3 has brought me relief here as demos.kendoui.com started functioning all fine as expected.

I can see that current online demo site is using references from http://cdn.kendostatic.com/2013.3.1119/* which might have resolved the problem.

To simulate the same issue, I've created a fiddle and the link is below and find attachment of an image screenshot which shows error in browser console 'Uncaught SyntaxError: Unexpected end of input '.

Fiddle: http://jsfiddle.net/balamurugavel/ZYbnh/

Note: Browsers which I've used are IE10, IE9, IE8, IE7, Chrome 31, Firefox 25, Opear 18, Safari 5.1.7.

Any helpful comments would do for me. Thanks in advance.

General Discussions

answered on 29 Nov 2013

1 answer

257 views

How to restrict keyboard navigation in Kendo Window

Can anyone tell me a cleaner way of restricting keyboard navigation in kendo Window?

I want to stop kendo Window draggable property using keyboard navigation.

Window

answered on 29 Nov 2013

1 answer

76 views

Client Side Pagining

Hi,
we have face some issue regarding pagination in kendo grid
we gave client side paging,in that we go to second page we get all records of page 3 as well.

Ex.We have 12 records and we set PageSize 5
PageNo 1. display 5 records ( 1 to 5)(which is correct)
PageNo 2. display 7 records (6 to 12) (Which is incorrect,it should be display 6 to 10)
PageNo 3. display 2 records (11 to 12)(which is correct)

Thanks in advance

Grid

answered on 29 Nov 2013

1 answer

226 views

MVVM calculated field not updated when dependant field changed

Hi there,

I am at the moment implementing a dirty check using kendo MVVM calculated field, here is the code snippet

function viewModelSource(data) {
    if (this instanceof viewModelSource) {
        this.Title = data.title;

        // dirty flag
        this.IsDirty = false;
        this.resetDirty = function () {
            this.set("IsDirty", false);
        }
        this.CheckDirty = function () {

            this.get("Title");
            this.set("IsDirty", true);
        }
    }
}

var viewModel = kendo.observable(new viewModelSource(data));
kendo.bind($container, viewModel);

<div>
<input type="text" data-bind="value: Title" />
</div>

The problem is when the input value changes, I expect the dirty flag to be set to true, but it never was.

any help would be appreciated.

Thanks
James

MVVM

answered on 29 Nov 2013