Questions on Kendo UI for jQuery Forum

1 answer

108 views

Grid / Hierarchy Or Detail template grid grouping does not work for child grid

Hi Guys,

I have a Grid with a detail template that contains a child grid; groupable is set to true for both girds.

When I try grouping a column in the child grid, it will only allow me to drag it to the parent gird grouping area.

Is this a know issue? I have attached a screen shot to show you what is happening.

Grid

answered on 26 Apr 2012

2 answers

240 views

Constrain dragging to the x or y axis

Hi all

Is it possible to constrain dragging to a particular x or y axis? Or, failing that, constrain it to a particular region? From the demo I can see that the drop area can be constrained, but it's the actual dragging (or its visualization) that I want to limit to a particular axis...

Thanks
G

Drag and Drop

answered on 26 Apr 2012

0 answers

160 views

DatePicker validates differently w/o value

I have the following code in my page:

<div id="myform">

<input type="date" id="myDate" name="myDate" data-date-msg="Invalid date" data-bind="value: myField" />

<br />

<button id="show" type="button">Show selected</button>

<button id="clear" type="button">Clear</button>

</div>

<script>

$(document).ready(function ()

{

var model = kendo.observable({ myField: new Date() });

$("#myDate").kendoDatePicker();

kendo.bind($("#myDate"), model);

var validatable = $("#myform").kendoValidator().data("kendoValidator");

$("#show").click(function ()

{

if (validatable.validate())

{

alert('Selected: ' + model.get("myField"));

}

});

$("#clear").click(function ()

{

model.set('myField', null);

});

</script>

Test cases:
1. Reload page, click "Clear", enter "abc" and click "Show selected" - it correctly displays the "Invalid date" and no alert is fired.
2. Reload page, enter "abc" in the DatePicker and click "Show selected" - it validates as true and shows an alert dialog.

Is there a way to make case 2 work the same as 1?

Validation

asked on 26 Apr 2012

1 answer

97 views

How to use KendoUI 'Grid DataTable' for mobile ?

hi,

Iam trying to use Grid DataTable on mobile app.But iam not able to display the table on my page.

Can u say any way to do this with example please...

Thanks,
Nandeeswar

Grid

answered on 26 Apr 2012

2 answers

171 views

Get Data in JSON Format

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

139 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

387 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

280 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

173 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

190 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