Questions on Kendo UI for jQuery Forum

1 answer

137 views

[Solved] onblur for keyboard user (a11y)

We have a dropdownlist control which is a Language/Locale selector. When the user changes their language selection, we make an AJAX call to change the user's current language on the server and then the client will refresh the page on AJAX success (this is the changeLanguage js function).

Because of WCAG 2 AA testing, we need to allow keyboard navigation. There are 2 ways I see the keyboard user can navigate the dropdown list.
1 - tab onto the control, click Alt-Down Arrow, use the up/down arrow keys to choose the option you want, tab out of the control
2 - tab onto the control, use the up/down arrow keys choose the option you want, tab out of the control

Scenario 1: Tabbing out of the control should fire the change event and the close event. If we associate changeLanguage function with either of these, we're looking good.
Scenario 2: We don't want to use the change event since the user may want to arrow up/down through several options before tabbing off the control, and that tabbing off the control should make their selection and fire the event. The close event doesn't fire since we never opened the dropdown. What makes sense would be to have an onblur event, but that event is not available via Kendo (AFAIK)

For both Scenario 1 & 2, the onblur event should work - or we can attach the changeLanguage function both both close and onblur, which should cover both scenarios.

So, for the onblur event, do I need to go outside the kendo events and use jQuery? If I need to use jQuery onblur, on which element of the dropdownlist should I attach the event handler to?

Thanks,
--Ed

DropDownList

answered on 11 Sep 2014

2 answers

212 views

Mobile DropDownList - Pop Up for Scrolling Items

Is there a way to make the Kendo DropDownLists behave the way normal <select> works on the iPhone or an Android device when viewing a web page? For example, if you select a dropdownlist, instead of the list opening, an overlay is put on top of the browser screen that lets you scroll through the list.

DropDownList

answered on 11 Sep 2014

2 answers

365 views

Scheduler doesn't display current date in k-nav-current

Hi,

I'm using a Scheduler defined like this:

$("#scheduler").kendoScheduler({

date: new Date(),

startTime: new Date("2013/11/27 07:00 AM"),

endTime: new Date("2013/11/27 06:00 PM"),

workDayStart: new Date("2013/1/1 08:00 AM"),

workDayEnd: new Date("2013/1/1 6:00 PM"),

selectable: true,

views: [

{ type: "day", allDaySlot: false },

{ type: "week", selected: true, allDaySlot: false },

"month",

"agenda"

],

editable: {

template: kendo.template($("#schedulerTemplate").html())

},

dataSource: _dataSourceDetailedAppointmentScheduler,

edit: _api.onEditScheduler,

cancel: _api.onCancelScheduler,

save: _api.onSaveScheduler,

navigate: _api.onNavigate,

moveStart: _api.onMoveStart,

mobile: true,

messages: {

cancel: "Cancelar",

date: "Fecha",

deleteWindowTitle: "Borrar visita",

event: "Visita",

save: "Guardar",

showFullDay: "Mostrar las 24 Horas",

showWorkDay: "Mostrar horas laborales",

time: "Hora del día",

today: "Hoy",

editor: {

editorTitle: "Crear/Editar Visita"

},

views: {

day: "Día",

week: "Semana",

month: "Mes",

workWeek: "Semana laboral"

}

},

resources: [

{

field: "CommertialRepresentativeId", // The field of the scheduler event which contains the resource identifier

title: "Representante Comercial", // The label displayed in the scheduler edit form for this resource

dataSource: [

{

text: "Representante 1", // Text of the resource instance

value: 1, // Identifier of the resource instance, use that value to assign an event to this instance.

color: "#ff0000" // Used as the background of events assigned to this resource.

},

],

multiple: false // Indicate the this is a multiple instance resource

}

]

});

But the k-current-nav styled anchor element:

<li class="k-state-default k-nav-current"><a role="button" href="#" class="k-link"><span class="k-icon k-i-calendar"></span><span data-bind="text: formattedDate"></span></a></li>

Does not display a formattedDate as it should. I went through the API but there seems to be no way to override this "formattedDate" property.

Could you please point me in the right direction?

Regards.

PS: I've attached an image file that shows an icon without any text where the formattedDate range should appear.

Scheduler

answered on 11 Sep 2014

1 answer

654 views

server side validation example

I'm trying to find an example of using server-side validation with scheduler.

All I can find is examples on using it with the grid, but the set up is very different so it's unclear how to adapt it.

In particular, the validation on grid examples I've found all do things like this:

function showMessage(container, name, errors) {

//add the validation message to the form

container.find("[data-valmsg-for=" + name + "],[data-val-msg-for=" + name + "]")

.replaceWith(validationMessageTmpl({ field: name, message: errors[0] }))

}

Yet there is no field with attribute 'data-valmsg-for' by default, so this will not work unless I manually insert one, yet there is no example of how this should be laid out.

When using client side validation, an error field is automatically added which looks like this:

<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" style="margin: 0.5em; display: block;" data-for="last_name" role="alert"><span class="k-icon k-warning"> </span>last_name is required<div class="k-callout k-callout-n"></div>

But again this doesn't exist pre-error.

How can I hook these two things together?

Cheers, Paul.

Scheduler

answered on 11 Sep 2014

2 answers

198 views

Map not centering

Hey! I think there's a bug in the .center() method on map. Check it out:

http://dojo.telerik.com/azAsA

It tries to recenter on the same lat/lng after 5 seconds, but goes to Algeria haha

Map

answered on 11 Sep 2014

1 answer

309 views

How to do server side paging from a DataTable?

Hi,

Our data access layer returns a DataTable generated by a stored procedure using ADO .Net.
I've seen and tried your Kendo.DynamicLinq NuGet package. It works well with "normal" IQueryable objects, but I have the following issues:

Dynamic Linq queries don't work with Linq to DataSets
Converting the DataRows into DynamicObjects doesn't work with Dynamic Linq

Is there an example available to achieve what I want? (Namely server side paging, sorting & filtering)

Thank you.

Grid

answered on 11 Sep 2014

1 answer

124 views

clearing editor fields with jQuery doesn't sync with kendo

In my custom editor template, the values of the html input fields only get serialised correctly if I manually enter them. If I use jquery to clear an element, it does not get synced with kendo, and the original values get serialised instead.

How can I get kendo to sync? Is there a way to set a field through kendo instead?

Cheers, Paul.

Scheduler

answered on 11 Sep 2014

2 answers

291 views

Tooltip on HTML checkbox is blocking

Hi,

using a Kendo UI ToolTip on a checkbox doesn't seem to work quite well. The ToolTip arrow is blocking the checkbox:

<script type="text/javascript" language="javascript">

$(document).ready(function () {

$('.toolTipFastTop').each(function () {

$(this).kendoTooltip({

autoHide: false,

position: 'top'

});

</script>

<input style="margin:40px" class="toolTipFastTop" title="BlablaTest" type="checkbox" />

I also tried it with editing on of your online examples, same result.
Kendo UI version: 2014.2.903

Regards,
Marcel

ToolTip

answered on 11 Sep 2014

4 answers

455 views

Grid render/re-render ng-if (angular)

So I have a grid I need to render, and this rendering is dependent on data being loaded. Using a Restangular service to find the data, and on the success .then(), the grid is rendered with data. Normally in angular, this would be handled by an ng-repeat. I don't know how this is handled in the kendo grid angular implementation.

At any rate, in the template, the grid is surrounded by a tag with an ng-if="dataSourceExists". I can render a regular table using ng-repeat, but when I try to do this with the kendo grid I get this:

"TypeError: Cannot read property 'replace' of undefined"

Since the documentation surrounding your implementation of angular and how data gets bound is sparse, I am having difficulty solving this problem. Any help would be appreciated.

Grid

answered on 11 Sep 2014

3 answers

608 views

[Solved] Using ServerPaging with custom server datasource parameters

Hi Support team,

I encounter this issue while integrating Grid into my application. Our clients provide us a fix Data API like below:

http://11.11.11.11/accountservice.aspx?PageSize=100 get the page which currentpage = 0 ( seqNo: 1~100)
http://11.11.11.11/accountservice.aspx?PageSize=100&CurrentPage=2 get third page (seqNo: 201~300)
http://11.11.11.11/accountservice.aspx?PageSize=100&GetTotal=true get the total count number

The datasource is in JSON format:
[ { UEN:"ST12345",CustName:"AA",Email:"" }, ... ] more than 10K records like this on the server.

Could you please help me with below grid features:
- ServerPaging
- AutoBinding
- Server Sorting

Thanks & Regards,
Bach

Grid

answered on 11 Sep 2014