Questions on Kendo UI for jQuery Forum

3 answers

481 views

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

191 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

249 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

140 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.1K+ 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

94 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

131 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

381 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

1 answer

305 views

Recreate Calendar with Navigate event.

Dear Expert,

i was trying to populate dates from my server into Kendo UI Calendar. when i navigate to previous year, i would like to recreate\rebind the calendar with new dates.
I having issue where when i tried to rebind my calendar, it will hang.
Below are my code:

//on PageLoad,

01.$.ajax({

02. url: "/test/GetTimelogJson",

03. dataType: "json",

04. type: 'GET'

05. })

06. .fail(function () {

07. alert("fail");

08. })

09. .success(function (data) {

10. $.map(data, function (value, key) {

11. var d = +new Date(key);

12. timelogDay[d] = value;

13. });

14. $("#calTimelog").kendoCalendar({

15. value: Date.Today,

16. dates: timelogDay,

17. navigate: onNavigate,

18. month: {

19. content: '# if (typeof data.dates[+data.date] === "string") { #' +

20. '<div class="#= data.dates[+data.date] #">' +

21. '#= data.value #' +

22. '</div>' +

23. '# } else { #' +

24. '#= data.value #' +

25. '# } #'

26. },

27. });

28. });

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
When user click on navigate, i will call the onNavigate function:

01.function onNavigate() {

02. try

03. {

04. var todayDate = new Date();

05. //Compare date if it not equal to 2014,

06. if (this.current().getFullYear() != todayDate.getFullYear())

07. {

08. todayDate = this.current(); //set the todayDate to selected View

09. reCreateCalendar(this.current());

10. }

11. }

12. catch (err) {