Questions on Kendo UI for jQuery Forum

2 answers

142 views

Hello Support,

I am currently trying out KendoUI for a project. I am working on the loading the local data into the grid using JSON. The grid is editable grid and user can also add new rows to the grid.

Can you please let me know that how can I get the modified data back from the Grid in JSON format?

Additionally, how do I add boolean/checkbox column in the grid?

Regard,
Maqsood Ahmed.

Grid

answered on 26 Apr 2012

0 answers

112 views

MS Blend for UX design!

If you have the time, I think anyone here who is likes interactive (version script) design of web pages will like this interview with Microsoft PM Kirupa http://blendinsider.com/technical/video-demo-overview-of-the-html-authoring-features-in-blend-2012-04-24/

I am hoping this is going to play well with KendoUI, because he really makes the case why you don't want to use a text style editor for HTML5/CSS3/KendoUI

live interactive design surface with 2-way editing of CSS
tools for styles, coloring, etc.
editing animation states and even interacting IN THE DESIGNER with different control states
excellent support for media queries against platform specific layout etc.

I certainly don't want to be tied to Microsoft platforms but I do think this tool or something like is definitely needed by UX people. It would be nice to swap out the MS-JS stuff and swap in the KendoUI stuff. (or dojo, or whatever).

I am going to try this out and report back on how it works for me (but then I come from the XAML world).

General Discussions

asked on 25 Apr 2012

5 answers

310 views

Grid not getting populated with ASP.Net Web Service JSON result

Dear Community,

For last few hours, I have been trying to populate the grid with remote data coming from a ASP.Net web service. The data returned is in JSON format.

But the problem is that grid is not getting populated with the result. In fact, if I open the fiddler, I don't see any corresponding http request to my web service that will fetch the data.

Here is what I have:

$(document).ready(function () {

$("#grid").kendoGrid({

dataSource: {

type: "json",

transport: {

read: "http://localhost/WebServices/MyWebService.asmx/GetBBGToADVTransactionsData",

contentType: "application/json; charset=utf-8",

type: "POST"

}

},

pageSize: 10,

serverPaging: true,

serverFiltering: true,

serverSorting: true

});

I in fact, tried fetching data in a variable as well, but even that is not working.

var dataSource = new kendo.data.DataSource({

transport: {

read: {

// the remote service url

url: "http://localhost/WebServices/MyWebService.asmx/GetBBGToADVTransactionsData",

contentType: "application/json; charset=utf-8",

type: "POST",

dataType: "json

}

});

Can you please help me, what I'm doing wrong here?

Cheers,
Shiva

Grid

answered on 25 Apr 2012

0 answers

223 views

Unable to serialize an Observable?

Hello All,
I'm trying to post some simple form data to the server by serializing my model data using JQuerys .param method. When I call .param using the modal data from a my viewModel (kendo.observable), an error is thrown from the kendo library indicating "this.shouldSerialize is not a function". After investigating a little further, I seems that the "this" reference is not pointing to the correct context (window instead of the viewModal). I put together a simplified JSFiddle to demonstrate the problem. Is this a bug with Kendo? Does the observable object provide a way to "serialize" itself? Thanks in advance for any feedback.

Sean

General Discussions

asked on 25 Apr 2012

0 answers

144 views

grid with button

hello.
I have a problem with the buttons that I have for a grid with a radio button.
when selecting out of the box or button to select radiotbutton clears the entire contents of the cell.
any help is appreciated!
Greetings!

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

<div id="organizer">

<ul id="panelbar">

<li class="k-state-active">

<span class="k-link k-state-selected">producto 1</span>

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

<div id="rowSelection" style="width:620px; height:300px"></div>

<script>

$(document).ready(function() {

$("#rowSelection").kendoGrid({

dataSource: {

data: FuncionDellenado(),

},

selectable: "multiple",

pageable: true,

scrollable: true,

navigatable: true,

columns: [

{ field: "FirstName", title: "productos", format: "{0:c}", type:"String",editable: false, width: "150px" },

{ field: "City", title: "cantidad", editable:true, type:"Number", validation: { min: 1, required: true },width: "80px" },

{field: "BirthDate", title: "fecha de Entrega",type:"String",editable:true,width:"100px"},

{ field: "Favoritos", template: "#= kendo.toString(\'<label \class=\"label_radio\"for=\"radio-01\">\<input name=\"sample-radio\" id=\"radio-01\" value=\"1\" type=\"radio\"/>\.\</label>\')##= kendo.toString(\'<label \class=\"label_radio\" for=\"radio-01\">\<input name=\"sample-radio\" id=\"radio-01\" value=\"1\" type=\"radio\" />\.\ </label>\') ##= kendo.toString(\'<label \class=\"label_radio\" for=\"radio-01\">\<input name=\"sample-radio\" id=\"radio-01\" value=\"1\" type=\"radio\" />\.\ </label>\') ##= kendo.toString(\'<label \class=\"label_radio\" for=\"radio-01\">\<input name=\"sample-radio\" id=\"radio-01\" value=\"1\" type=\"radio\" />\.\ </label>\') ##= kendo.toString(\'<label \class=\"label_radio\" for=\"radio-01\">\<input name=\"sample-radio\" id=\"radio-01\" value=\"1\" type=\"radio\" />\.\ </label>\') #", title: "Favoritos", width: "80px" },

{ field: "añadir", template: "#= kendo.toString(\'<input type=IMAGE SRC=\"add.gif\"\id=\"añadir\" value=\"CODE\" />\') #", title: "añadir", width: "210px" }

],

editable: true

});

$('#añadir').click(function () {

var sourcegrid = $('#rowSelection').data('kendoGrid'); //SOURCE GRID

var destinationgrid = $('#Selection').data('kendoGrid'); // DESTINATION GRID

sourcegrid.select().each(function () {

var dataItem = sourcegrid.dataItem($(this));

var column = dataItem.FirstName; // whatever the name of the unique id for your data source

destinationgrid.dataSource.add(dataItem); // DESTINATION DATASOURCE

});

destinationgrid.refresh(); // MUST REFRESH THE DESTINATION GRID

});

</script>

Grid

asked on 25 Apr 2012

0 answers

165 views

DropdownList with checkboxes

I'd like to know if there is an example of dropdownlist with checkboxes.
I think I could use a template to display checkboxes on each list item, but then how could I retrieve the checked items ?

DropDownList

asked on 25 Apr 2012

2 answers

401 views

DataSource: data: ObservableArray([])

Previously I had been configuring my DataSource with an ObservableArray initialized with an empty array, like:

dsData = new kendo.data.ObservableArray([]);
ds = new kendo.data.DataSource({

data: dsData
});

With the newest nightly builds, this results in a "ghost" item in the DataSource with all undefined values.

Just passing the DataSource an empty array fixes the problem but is what I was doing wrong and is it effectively the same as what I'm now doing?

Data Source

answered on 25 Apr 2012

7 answers

781 views

Grid scroll height bug?

If I set scrollable and set the height, it puts the height on the "k-grid k-widget" element, but then the SAME value on the "k-grid-content" child item.

So shouldn't ...k-grid be the height, but the k-grid-content be (k-grid - k-grid-header)?

Grid

answered on 25 Apr 2012

8 answers

272 views

container for images

I am trying to create a sample that will look like the instagram and I can do this statically as follows:

<div data-title="images" data-role="view" id="index" data-url="/" data-layout="default" data-model="ImageViewModel" data-init="initImageView">

<div id="container">

<img src="http://pierre.chachatelier.fr/programmation/images/mozodojo-mosaic-image.jpg" />

</div>

</div

>



now this produces the look that I want (see attached file) with each image side by side and N fit on a row according to the width of container. of course this is more than crude as I am not using the VM but cannot see how to use one of your containers that allow using data-binding and MVVM. All the List want to put each image on its own line. This is pretty easy in Sencha Touch as they have dataview container which u seem to be missing.



Thanks

General Discussions

answered on 25 Apr 2012

3 answers

161 views

Batch Edit Grouped Data

Hi there,

It looks like I can't setup batch editing with a Grid/DataSource with grouped data. When it calls Grid._modelForContainer(container) which calls DataSource.getByUid(id) it does not return any values even though the uid is valid. It looks to me like getByUid does not handle grouped/nested data. When I step into the loop in the code below the data object has 2 items at the top level which are groups and then each of those has an array of items which are the data items inside that group.

getByUid: function(id) {

var idx, length, data = this._data;

for (idx = 0, length = data.length; idx < length; idx++) {

if (data[idx].uid == id) {

return data[idx];

}

Is there something I should be doing differently on the grid/datasource setup to make this work as I expected it to?

Thanks!
Matt

Grid