Questions on Kendo UI for jQuery Forum

3 answers

206 views

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

632 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

392 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

170 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

208 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

113 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">

</div>

</script>

</body>

</html

Grid

answered on 30 Jun 2014

1 answer

72 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. The view before the text input is selected.
2. The view once the keyboard shows up.
3. 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?

Drawer (Mobile)

answered on 30 Jun 2014

1 answer

91 views

kendo ui code is Not working fine in java script function why?

Hi

I have make a js function which is call on button click

in which there is 59 differnt values are assign to diffenrt Html element by java script.

Now i found all Values are assign properly

but there are 2 kendo ui drop down also on page, not dropdown is
cascading so frist i assign value of 1st dropdown and accoding that
dropdown 2nd dropdown refereshed and then i had to assign values but
that 2nd drop down don't accept value.

why?

i had to put a alert in that function if i put alert then it's disply why?

code:--

if (c != null)

{

var Country = $("#CountryForPricing").data("kendoDropDownList");

alert(c);

Country.select(function (dataItem)

{

return dataItem.Value == c;

} );

CatalogPricingSetProgramExRate(c);

}

execution pointer is execute this function line by line this is prove
by this alert function and " CatalogPricingSetProgramExRate(c) " is
also called but dropdown don't get value.

if alert is removed then it's not work and if i put alert then it's work why?
is there any timing issue?

can any one guide me..?

Regards,
vinit

General Discussions

answered on 30 Jun 2014

1 answer

348 views

Detail Grid with ForeignKey EditorTemplate

Hi!

I'm having a master grid which has a detail grid. In both grids I use an EditorTemplate on a ForeignKeyColumn.
The DropDown is correctly shown on the first grid, but not on the detail grid.
When I debug I can see that the template code is only called for the master grid.
I do not get any errors in console.

In the screenshot attached you can see the dropdown correctly appearing in the master grid but not in the detail grid.

Master Grid (Line 28-30):

01.@(Html.Kendo().Grid<LFG.Model.Domain.Appointment>(Model)

02. .Name("AppointmentGrid")

03. .Columns(columns =>

04. {

05. columns.Command(p =>

06. {

07. p.Custom(LFG.Web.Constants.BtnDetail).Click("onEdit").Text(LFG.Web.Constants.BtnDetailDisplayText);

08. p.Edit().Text(LFG.Web.Constants.BtnEditDisplayText)

09. .CancelText(LFG.Web.Constants.BtnCancelDisplayText)

10. .UpdateText(LFG.Web.Constants.BtnUpdateDisplayText);

11. }).Width(LFG.Web.Constants.GridColumnWidthSmall);

12. columns.Command(p =>

13. {

14. p.Custom(LFG.Web.Constants.BtnPrintInformation).Click("onPrint_info").Text(LFG.Web.Constants.BtnPrintInformationDisplayText);

15. p.Custom(LFG.Web.Constants.BtnPrintGardenInformation).Click("onPrint_ginfo").Text(LFG.Web.Constants.BtnPrintGardenInformationDisplayText);

16. }).Title("Verständigung").Width(LFG.Web.Constants.GridColumnWidthSmall);

17. columns.Command(p =>

18. {

19. p.Custom(LFG.Web.Constants.BtnPrintDeliveryNote).Click("onPrint_deliverynotes").Text(LFG.Web.Constants.BtnPrintDeliveryNoteDisplayText);

20. p.Custom(LFG.Web.Constants.BtnPrintInvoice).Click("onPrint_invoice").Text(LFG.Web.Constants.BtnPrintInvoiceDisplayText);

21. }).Title("Stappel").Width(LFG.Web.Constants.GridColumnWidthSmall);

22. columns.Command(p =>

23. {

24. p.Custom(LFG.Web.Constants.BtnPrintPackingList).Click("onPrint_packinglist").Text(LFG.Web.Constants.BtnPrintPackingListDisplayText);

25. }).Title("Ausdrucke").Width(LFG.Web.Constants.GridColumnWidthSmall);

26. columns.Bound(p => p.ID).Hidden();

27. columns.Bound(p => p.Date).Width(LFG.Web.Constants.GridColumnWidthSmall);

28. columns.ForeignKey(o => o.RouteID, new SelectList(ViewBag.Routes, "ID", "Text"))

29. .Width(LFG.Web.Constants.GridColumnWidthLarge)

30. .EditorTemplateName("ForeignKeyDropDown");

31. columns.Bound(p => p.Description).Width(LFG.Web.Constants.GridColumnWidthNormal);

32. columns.Bound(p => p.TotalUnits).Width(LFG.Web.Constants.GridColumnWidthSmall);

33. if (User.IsInRole(LFG.Web.Filters.LFGRoles.ADM) ||

34. User.IsInRole(LFG.Web.Filters.LFGRoles.SADM))

35. {

36. columns.Command(command =>

37. {

38. command.Destroy().Text(LFG.Web.Constants.BtnDeleteDisplayText);

39. }).Width(LFG.Web.Constants.GridColumnWidthSmall);

40. }

41. })

42. .ToolBar(toolbar => toolbar.Create().Text(LFG.Web.Constants.BtnCreate))

43. .Editable(editable => editable.Mode(GridEditMode.InLine)

44. .DisplayDeleteConfirmation(LFG.Web.Constants.ConfirmDelete))

45. .Pageable(p => p.Enabled(Model.Count() > LFG.Web.Constants.GridPageSize))

46. .Sortable()

47. .Selectable()

48. .Scrollable(s => s.Height(LFG.Web.Constants.GridPageSize * LFG.Web.Constants.GridLineHeight))

49. .DataSource(dataSource => dataSource

50. .Ajax()

51. .PageSize(LFG.Web.Constants.GridPageSize)

52. .Events(events => events.Error("grid_error_handler"))

53. .ServerOperation(false)

54. .Model(model =>

55. {

56. model.Id(p => p.ID);

57. })

58. .Create(update => update.Action("_Update", "Appointment"))

59. .Update(update => update.Action("_Update", "Appointment"))

60. .Destroy(update => update.Action("_Destroy", "Appointment")))

61. .Events(e => e.DataBound("onRowBound"))

62. .ClientDetailTemplateId("detailsTemplate")

63. )

Detail Grid (Line14-16):

01.<script id="detailsTemplate" type="text/kendo-tmpl">

02. @(Html.Kendo().Grid<LFG.Model.Domain.AppointmentDetail>()

03. .Name("detailsGrid_#=ID#")

04. .Columns(columns =>

05. {

06. columns.Command(command =>

07. {

08. command.Edit().Text(LFG.Web.Constants.BtnEditDisplayText)

09. .UpdateText(LFG.Web.Constants.BtnCancelDisplayText)

10. .CancelText(LFG.Web.Constants.BtnCancelDisplayText);

11. }).Width(LFG.Web.Constants.GridColumnWidthSmall);

12. columns.Bound(o => o.ID).Hidden();

13. columns.Bound(o => o.AppointmentID).Hidden();

14. columns.ForeignKey(o => o.RouteDetailID, new SelectList(ViewBag.RouteDetails, "ID", "Text"))

15. .Width(LFG.Web.Constants.GridColumnWidthNormal)

16. .EditorTemplateName("ForeignKeyDropDown");

17. columns.Bound(o => o.Start).Width(LFG.Web.Constants.GridColumnWidthNormal);

18. columns.Bound(o => o.End).Width(LFG.Web.Constants.GridColumnWidthNormal);

19. columns.Bound(o => o.TotalUnits).Width(LFG.Web.Constants.GridColumnWidthNormal);

20. if (User.IsInRole(LFG.Web.Filters.LFGRoles.ADM) ||

21. User.IsInRole(LFG.Web.Filters.LFGRoles.SADM))

22. {

23. columns.Command(commands =>

24. {

25. commands.Destroy().Text(LFG.Web.Constants.BtnDeleteDisplayText);

26. }).Width(LFG.Web.Constants.GridColumnWidthSmall);

27. }

28. })

29. .ToolBar(toolbar => toolbar.Create().Text(LFG.Web.Constants.BtnCreate))

30. .Scrollable(c => c.Height(250))

31. .Pageable()

32. .Selectable()

33. .Sortable()

34. .Editable(e => e.Mode(GridEditMode.InLine))

35. .DataSource(source => source

36. .Ajax()

37. .Read("_ReadDetail", "Appointment", new { parentID = "#=ID#" })

38. .Create("_UpdateDetail", "Appointment", new { parentID = "#=ID#" })

39. .Update("_UpdateDetail", "Appointment", new { parentID = "#=ID#" })

40. .Destroy("_DestroyDetail", "Appointment")

41. .Model(model =>

42. {

43. model.Id(id => id.ID);

44. model.Field(f => f.RouteDetailID).Editable(false);

45. model.Field(f => f.TotalUnits).Editable(false);

46. })

47. .ServerOperation(false))

48. .ToClientTemplate()

49. )

50.</script>

ForeignKeyDorpDown.cshtml (located in Shared folder)

@if (ViewData["SelectIndex"] != null && ViewData["SelectIndex"] is int)

{

int i = ((int)ViewData["SelectIndex"]) >= 0 ? ((int)ViewData["SelectIndex"]) : 0;

var list = (SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"];

@(Html.Kendo().DropDownListFor(x => x)

.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))

.AutoBind(true)

.DataValueField("Value")

.DataTextField("Text")

.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])

.SelectedIndex(i)

)

}

else

{

@(Html.Kendo().DropDownListFor(x => x)

.Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))

.AutoBind(true)

.OptionLabel(LFG.Web.Constants.PleaseSelect)

.DataValueField("Value")

.DataTextField("Text")

.BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])

)

}

@Html.ValidationMessageFor(x => x)

Grid

answered on 30 Jun 2014