Questions on Kendo UI for jQuery Forum

2 answers

113 views

Integrate Kendo UI with asp.net AJAX application

Hello,

We have ASP.NET AJAX Intranet web application running on production. We would like to use Kendo UI for new development. Is it possible to use Kendo UI with existing application? Please let me know if there are any tutorials or links to move forward.

thank you.

General Discussions

answered on 30 Jun 2014

3 answers

534 views

Datepicker issue

Hi, I think I found a small problem with the validator and the date picker and thought I'd give you the heads up.
It seems like when you add a required (although I think any rule would be the same) attribute to a datepicker, the validation message overlaps with the calendar icon of the datepicker.

Cheers,
Andrés

Validation

answered on 30 Jun 2014

1 answer

97 views

datepicker

Hi
Im using your datepicker
But it is American date = mmddyy
I need ddmmyy

General Discussions

answered on 30 Jun 2014

3 answers

223 views

Kendo UI mobile listview add button

I have a listview which shows arrow image on right to show detail.

------------------------------
Item 1 >
------------------------------
Item 2 >
------------------------------

I have defined template to add link as following:
<script id="hierarchicalLevelListViewTemplate" type="text/x-kendo-template">
# if (haschildren) { #
# var ecodedURI = '\\#level-view?levelId=' + levelId + '&id=' + id #
<a href="#:ecodedURI#" data-transition="slide:left">
#: Desc #
</a>
# } else { #
#: Desc #
# } #
</script>

Everything works fine. Now, I want to add a button to the listview as shown below:
------------------------------
Item 1 >
(button)
------------------------------
Item 2
(Button) >
------------------------------

What happens is, after adding button, the right arrow dissappear and both button and text becomes a link(are underlined).

Can you please help me to implement this. Will appreciate if you point me to a working sample.

Thanks!

ListView (Mobile)

answered on 30 Jun 2014

3 answers

648 views

Kendo DataSource, AngularJS - problem with databinding

I want to fill a grid with a complex json returned from a webservice. My json contains two things:

- data: array with the records that will fill the grid
- columns: array with the config(layout) of the grid

I have successfully filled the grid with the "data" by specifying the schema.data.

My problem is with the grid config (layout). I get the columns array on the `requestEnd` event of the datasource and i add it to the `customersSource` (datasource) so i can access it in the gridOptions.

The problem is that even though when i log the `customersSource` object i see that the cols array i added, is there and is filled with the proper data the `$scope.mainGridOptions.columns` isn't set to `customersSource.cols`.

I think that this may have to do with the fact that `customersSource.cols` is set asynchronously but shouldn't angular take care of this with it's databinding?

Also i have read in Data source vs. Angular that i may have to set something as Observable but i am confused of what to do exactly.

How can i fix this?

Here is my code

var customersSource = new kendo.data.DataSource({

transport: {

read: {

url: "http://....",

dataType: "json"

}

},

schema: {

data: "data"

},

requestEnd: function (e) {

this.cols = e.response.columns;

}

});

$scope.mainGridOptions = {

dataSource: customersSource, // OK

columns: customersDataSource.cols, // undefined - uses default

height: 500,

scrollable: true,

selectable: true

};

Here is my JSON

{

"data": [

{

"id": 0,

"firstname": "Dalton",

"lastname": "Holden",

"gender": "male",

"email": "daltonholden@tellifly.com",

"phone": "871-407-2973",

"address": "22 National Drive, Brenton, Louisiana",

"birthday": "21/04/1965",

"currency": "GBP"

},

{

"id": 1,

"firstname": "Allyson",

"lastname": "Odom",

"gender": "female",

"email": "allysonodom@tellifly.com",

"phone": "922-548-2725",

"address": "44 Quincy Street, Thynedale, Georgia",

"birthday": "28/08/1961",

"currency": "CHF"

},

{

"id": 2,

"firstname": "Sweet",

"lastname": "Branch",

"gender": "male",

"email": "sweetbranch@tellifly.com",

"phone": "880-593-2244",

"address": "81 Fenimore Street, Veguita, Missouri",

"birthday": "08/08/1953",

"currency": "AUD"

}

],

"columns": [

{

"field": "firstname",

"title": "Frist Name",

"width": 200,

"attributes": {

"class": "",

"style": "text-align: left;"

},

"headerAttributes": {

"class": "table-header-cell",

"style": "text-align: left;"

}

},

{

"field": "lastname",

"title": "Last Name",

"attributes": {

"class": "",

"style": "text-align: left;"

},

"headerAttributes": {

"class": "table-header-cell",

"style": "text-align: left;"

}

},

{

"field": "gender",

"title": "Gender",

"attributes": {

"class": "",

"style": "text-align: left;"

},

"headerAttributes": {

"class": "table-header-cell",

"style": "text-align: left;"

}

},

{

"field": "email",

"title": "e-mail",

"attributes": {

"class": "",

"style": "text-align: left;"

},

"headerAttributes": {

"class": "table-header-cell",

"style": "text-align: left;"

}

},

{

"field": "phone",

"title": "Phone Number",

"attributes": {

"class": "",

"style": "text-align: right;"

},

"headerAttributes": {

"class": "table-header-cell",

"style": "text-align: right;"

}

},

{

"field": "address",

"title": "Address",

"attributes": {

"class": "",

"style": "text-align: left;"

},

"headerAttributes": {

"class": "table-header-cell",

"style": "text-align: left;"

}

},

{

"field": "birthday",

"title": "Birthday",

"attributes": {

"class": "",

"style": "text-align: center;"

},

"headerAttributes": {

"class": "table-header-cell",

"style": "text-align: center;"

}

},

{

"field": "currency",

"title": "Currency",

"attributes": {

"class": "",

"style": "text-align: center;"

},

"headerAttributes": {

"class": "table-header-cell",

"style": "text-align: center;"

}

]

}

I created a plunker of my testing project. As you can see i can fill the grid but i have a problem with the mainGridOptions.columns. Any help will be much appreciated!
http://plnkr.co/edit/5pjFQGkgTivqVkxsFBse

Data Source

answered on 30 Jun 2014

3 answers

466 views

Achieving ADA compliant kendo grid

Hello,

We’re using the Kendo Grid and eed to make this as ADA compliant as possible.
We're using a tool called JAWS for verifying the ADA compliance.
Need to achieve the following in Kendo Grid:

1. When the grid is in focus should read out the headers to me. I think the entire header row should be in focus for this. If I press tab again it should take me to the next control on the page.

2. When the grid is in focus (when I tab onto the grid) I need to be able to navigate through each record in the grid using keyboard up down arrow keys.

3. As a continuation to #2, when navigate through each record using up-down arrows, I need the entire row to be selected instead of a single cell. This would make sure JAWS reads the entire row's content instead of the single cell content.

We have used around 120+ grids in our application.
Kindly let us know
- how to achieve the above using minimum code changes and
- if we can apply the changes in a common place.

Thanks.

Grid

answered on 30 Jun 2014

1 answer

187 views

Production Environment

We have a SPA application with Kendo and Angularjs, pure javascript frontend. When launched by localhost ip everthing works, calling it by public address it seems Angular doesn't work right. We test a simple application with angular (just the classic Hello words with ng-model) and it works. Every js library is download from the site (no cdn call). We have no errors at all but simply angularjs is in someway blocked. We look for some specifications in kendo documents (any licenze file to put together) but we didn't find anything or maybe we miss the rights pages. We deploy on a iss server and if we use the direct link to open the site it is all right. We have to say that the site is build as http and in public url we pass through a reverse proxy and become https, but as i said a simple angularjs test works right with public address. Any idea?

General Discussions

answered on 30 Jun 2014

1 answer

243 views

Get class name

How can I get class name inside class function?

var Animal = kendo.Class.extend(

{

getClassName: function()

{

console.log(???); //to get Animal

}

});

var Bird = Animal.extend(

{

getClassName: function()

{

console.log(???); //to get Bird

}

});

I already try with this.constructor.name, but it is an empty string.

General Discussions

answered on 30 Jun 2014

1 answer

132 views

Back button covered by status bar after keyboard disappears.

The problem I am having on iOS is that once I dismiss the keyboard by clicking "Done" the view does not pull back down to show the top drawer header. I have attached 3 screenshots.
1. (0390) The view before the text input is selected.
2. (0392) The view once the keyboard shows up.
3. (0393) The view after dismissing the keyboard. Notice the top header is still partially hidden under the status bar. Actually tapping back pulls it down to normal position but then I have to tap it again to actually go back.

Ideally it should go back to screenshot #1 after dismissing the keyboard.

Is there a fix for this?

General Discussions

answered on 30 Jun 2014

15 answers

1.0K+ views

Foreign Key option doesn't work

Hi guys!
I have a new problem with the foreign key option, I followed the steps of this page and even so doesn't work and i don't understand what is the problem.
The code:
prueba_grid.php

<! DOCTYPE html>

<html>

<head>

<title>Pagina de prueba</title>

<link rel="stylesheet" type="text/css" href="styles/kendo.blueopal.min.css">

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

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/kendo.web.min.js"></script>

<script type="text/javascript" src="js/cultures/kendo.culture.es-ES.min.js"></script>

<script type="text/javascript">

$(function() {

kendo.culture("es-ES");

var categorias = new kendo.data.DataSource({

transport:

{read:"categorias_usuarios.php"}

});

var datos= new kendo.data.DataSource(

{transport: {read: "datos_grid.php",create: {url: "create_data.php",type: "POST"},update:{ url: "update_data.php", type:"POST"}, destroy:{ url: "delete_data.php", type:"POST"}},error: function(e) {

alert(e.responseText);

},schema: {data: "data",total: function(result) {

var data = this.data(result);

return data ? data.length : 0

},model: {id: "cod_maestros"

,fields: {id: {nullable:true,editable:false},nombres_usuarios: {validation: {required: true}},apellidos_usuarios: {validation: {required: true}},cod_nivel_usuario:{field:

"cod_nivel_usuario"}}},pageSize: 5,batch: true}}

);

var grid = $("#grid").kendoGrid({dataSource:datos ,columns: [{title: "Nombres del Usuario",field: "nombres_usuarios",type: "text"}, {title: "Apellidos del Usuario",field: "apellidos_usuarios",type: "text"}, {title: "Nivel", field: "cod_nivel_usuario",values:categorias}, {command: ["edit", "destroy"],title: " ",width: "210px"}],pageable: {refresh: true,pageSizes: 5},toolbar:[{name:"create",text:"Agregar nuevo registro"}, {template: kendo.template($("#template").html())}],editable: "inline"});

$("#category").keyup(function() {

var value = $(this).val();

if (value) {

grid.data("kendoGrid").dataSource.filter({logic: "or",filters: [{field: "nombres_usuarios",operator: "contains",value: value}, {field: "apellidos_usuarios",operator: "contains",value: value}]})

} else {

grid.data("kendoGrid").dataSource.filter({})

}

});

</script>

</head>

<body>

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

<script type="text/x-kendo-template" id="template">

<div class="toolbar" style="display:inline-block">

<label class="category-label" for="category">Buscar:</label>

<input type="text" id="category" style="width: 230px">