Questions on Kendo UI for jQuery Forum

3 answers

755 views

In this post from Jan 2013, staff said Kendo wasn't handling field names with a dot or a space because it would involve "extra overhead which is not needed in most cases".

This is kind of weird as many SQL statements has to return field with dots.

Two months later, Kendo staff posted a workaround available in Kendo Q1 2013.

I just tried the work around on a grid connected on a remote OData service and I think there's a problem with the getters generated for properties with dots. Indeed, when I receive data for the grid for a field named 'MyTable.MyField', the following error is raised: "TypeError: Cannot read property 'MyField' of undefined".

As explained in the solution poster in march 2013, I did set the column field name to "[\"MyTable.MyFieldName\"]". I was expecting a getter like this one:

return d["MyTable.MyField"];

but after a little investigation, I found that the exception was raised because the getter wasn't generated correctly:

return d.MyTable.MyField;

I've been able to confirm the issue by changing the getter function from

getter: function(expression, safe) {

return getterCache[expression] = getterCache[expression] || new Function("d", "return " + kendo.expr(expression, safe));

},

to this one (not perfect.... this was to confirm if I was right about the bug)

getter: function(expression, safe) {

return getterCache[expression] = getterCache[expression] || new Function("d", "return d[\"" + expression + "\"]");

},

Can you please confirm if I'm right about the bug (and if it will be fixed)?

Best regards,

Simon

Grid

answered on 19 Jun 2014

1 answer

66 views

One column showing "2001-01-01" as value?

We are having an issue where very select users are seeing "2001-01-01" appear in the kendoUI grid where blank values should be instead. This is using IE10. Is there any sort of known issue regarding this?

Grid

answered on 19 Jun 2014

2 answers

312 views

Centred notifications are hidden by Kendo Windows

If you have a Kendo Window open when a notification is displayed, the notification is hidden behind the window until the window is closed. See this JSBin example: http://jsbin.com/mukojagu/1/edit.

I've tried playing with z-index, but it makes no difference. Does anybody know of a way around this?

Notification

answered on 19 Jun 2014

4 answers

303 views

ListView : select does not fire change event

Hi:

I am not able to get the change event to get triggered. I inspect the elements and the element does not appear to have been selected:

<select id="listView3" size="10" style="width: 150px;" class="k-list-container "></select>

<script>

$("#listView3").kendoListView({

dataSource: [

{ id: 1, name: "Apples" },

{ id: 2, name: "Oranges" },

{ id: 3, name: "Grapes" },

{ id: 4, name: "Bananas" }

],

template: '<option value="#: id #" class="k-item">#: name # (#: id #)</option>',

dataTextField: "name",

dataValueField: "id",

selectable: "single",

change: function (e) {

// handle selected event

alert(this.select().val());

}

});

</script>

Using a <div> tag version of ListView, the event works as expected and when I inspect the element it indicates that it is selected.

Phil

ListView

answered on 19 Jun 2014

4 answers

711 views

Model binding with custom editor template

I am having troubles binding my object that is sent back to the controller, here is the Model class i am binding to:

public class ScheduleAppoinment : ISchedulerEvent

{

public int Id { get; set; }

public string Description { get; set; }

public DateTime End { get; set; }

public string EndTimezone { get; set; }

public bool IsAllDay { get; set; }

public string RecurrenceException { get; set; }

public string RecurrenceRule { get; set; }

public DateTime Start { get; set; }

public string StartTimezone { get; set; }

public string Title { get; set; }

public string PatientName { get; set; }

public int ResourceID { get; set; }

public int ResourceCategoryID { get; set; }

public int AppointmentType { get; set; }

public string AppointmentName { get; set; }

public int LocationID { get; set; }

public int AppointmentCategoryID { get; set; }

public int Duration { get; set; }

public int PatientID { get; set; }

public int AppointmentID { get; set; }

}

Here is my custom editor template(All the kendo "For" controls bind to the model but the regular helpers (i.e (Html.TextBoxFor(model => model.PatientName))) do not bind to the model):

/*used to populate the patient name and ID*/

<

div class="col-md-8">

<button id="patientToggleBtn" type="button" onclick="togglePatientSearch()" class="k-button">Toggle Search</button>

</div>

<div id="patientSearch">

<div class="col-md-4 editLabel">

@Html.Label("First Name")

</div>

<div class="col-md-4 editContent">

@Html.TextBox("firstName", 0, new { @class = "k-textbox" })

</div>

<div class="col-md-4 editLabel">

@Html.Label("Last Name")

</div>

<div class="col-md-4 editContent">

@Html.TextBox("lastName", 0, new { @class = "k-textbox" })

</div>

<div class="col-md-8">

<button id="patientSearchBtn" type="button" onclick="getPatients()" class="k-button">Get Patients</button>

</div>

<div class="col-md-4 editLabel">

@(Html.Label("Select Patient"))

</div>

<div class="col-md-4 editContent">

@(Html.Kendo().DropDownList()

.Name("PatientList")

.DataTextField("FirstName")

.DataValueField("PatientID")

.AutoBind(false)

.Events(e => e.Change("patientSelected"))

)

</div>

/*end Patient get start of model binding*/

<div class="col-md-4 editLabel">

@(Html.LabelFor(model => model.PatientName))

</div>

<div data-container-for="PatientName" class="col-md-4 editContent">

@(Html.TextBoxFor(model => model.PatientName, new { @class = "k-invalid k-textbox", data_bind= "value:PatientName" }))/*won't bind to model */

@

/* @Html.TextBox("PatientName", null, new Dictionary<string, Object> { { "data-bind","value:PatientName"} }) tried this 2*/

</div>

<div data-container-for="PatientID" >

@(Html.HiddenFor(model => model.PatientID, new { data_bind = "value:PatientID" }))/*won't bind to model*/

</div>

/*from here down bind to the model*/

<div class="col-md-4 editLabel">

@(Html.LabelFor(model => model.Duration))

</div>

<div data-container-for="Duration" class="col-md-4 editContent">

@(Html.Kendo().NumericTextBoxFor(model => model.Duration)

.Name("Duration")

.HtmlAttributes(new { data_bind = "value:Duration" })

.Format("\\#")

.Min(10)

.Max(30)

.Value(10)

.Step(10)

)

</div>

<div class="col-md-4 editLabel">

@(Html.LabelFor(model => model.Start))

</div>

<div data-container-for="start" class="col-md-4 editContent">

@(Html.Kendo().DateTimePickerFor(model => model.Start)

.Interval(10)

.HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay")))

@*@(Html.Kendo().DatePickerFor(model => model.Start)

.HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay")))*@

<span data-bind="text: startTimezone"></span>

<span data-for="start" class="k-invalid-msg"></span>

</div>

<div class="col-md-4 editLabel">

@(Html.LabelFor(model => model.AppointmentCategoryID))

</div>

<div data-container-for="AppointmentCategoryID" class="col-md-4 editContent">

@(Html.Kendo().DropDownListFor(model => model.AppointmentCategoryID)

.Name("AppointmentCategoryID")

.HtmlAttributes(new { data_bind = "value:AppointmentCategoryID", style = "width: 200px" })

.OptionLabel("Select Appt Category")

.Events(e => e.Change("apptCategoryChange"))

.DataTextField("Text")

.DataValueField("Value")

.ValuePrimitive(true)

.BindTo((IEnumerable<SelectListItem>)ViewBag.apptCats)

.ToClientTemplate()

)

</div>

<div class="col-md-4 editLabel">

@(Html.LabelFor(model => model.AppointmentType))

</div>

<div data-container-for="AppointmentType" class="col-md-4 editContent">

@(Html.Kendo().DropDownListFor(model => model.AppointmentType)

.Name("AppointmentType")

.HtmlAttributes(new { data_bind = "value:AppointmentType", style = "width: 200px" })

.DataTextField("Text")

.DataValueField("Value")

.OptionLabel("Select Appt Type")

.BindTo((IEnumerable<ApptType>)ViewBag.apptTypes)

.ToClientTemplate()

)

</div>

<div class=" col-md-4 editLabel">

@(Html.LabelFor(model => model.ResourceCategoryID))

</div>

<div data-container-for="ResourceCategoryID" class="col-md-4 editContent">

@(Html.Kendo().DropDownListFor(model => model.ResourceCategoryID)

.Name("ResourceCategoryID")

.HtmlAttributes(new { data_bind = "value:ResourceCategoryID", style = "width: 200px" })

.Events(e => e.Change("resCategoryChange"))

.OptionLabel("Select Resource")

.DataTextField("Text")

.DataValueField("Value")

.ValuePrimitive(true)

.BindTo((IEnumerable<SelectListItem>)ViewBag.resCats)

.ToClientTemplate()

)

</div>

<div class="col-md-4 editLabel">

@(Html.LabelFor(model => model.ResourceID))

</div>

<div data-container-for="ResourceID" class="col-md-4 editContent">

@(Html.Kendo().DropDownListFor(model => model.ResourceID)

.Name("ResourceID")

.HtmlAttributes(new { data_bind = "value:ResourceID", style = "width: 200px" })

.DataTextField("Text")

.DataValueField("Value")

.OptionLabel("Select Appt Resource")

.BindTo((IEnumerable<ApptType>)ViewBag.resTypes)

.ToClientTemplate()

)

</div>

here is my scheduler initialization:

@(Html.Kendo().Scheduler<Scheduler.Models.ScheduleAppoinment>()

.Name("scheduler")

.Date(DateTime.Today)

.StartTime(new DateTime(2013, 6, 13, 00, 00, 00))

.EndTime(new DateTime(2013, 6, 13, 23, 00, 00))

.AllDaySlot(false)

.Events(e => e.Save("editSave"))

.Editable(editable =>

{

editable.TemplateName("CustomEditorTemplate");

})

.Height(600)

.Views(views =>

{

views.DayView();

views.WeekView(week => week.Selected(false));

views.MonthView();

views.AgendaView(agenda => agenda.Selected(true).EventTemplateId("customAgendaTemplate"));

})

.Resources(resource =>

{

resource.Add(m => m.ResourceID)

.Title("Doctors")

.DataTextField("Text")

.DataValueField("Value")

.DataColorField("Color")

.DataSource(d => d.Read("GetResourceDoctors", "Home"));

})

.DataSource(d => d

.Model(m =>

{

m.Id(f => f.Id);

m.Field(f => f.Start);

m.Field(f => f.End);

m.Field(f => f.Title);

m.Field(f => f.AppointmentType);

m.Field(f => f.AppointmentName);

m.Field(f => f.PatientName);

m.Field(f => f.ResourceID);

m.Field(f => f.ResourceCategoryID);

m.Field(f => f.Duration).DefaultValue(10);

m.Field(f => f.AppointmentID);

m.Field(f => f.AppointmentCategoryID);

m.Field(f => f.PatientName);

m.Field(f => f.LocationID);

})

.Read("GetAllAppointments", "Home")

.Update("RescheduleAppointment", "Home")

.Destroy("CancelAppointment","Home")

.Create("ScheduleAppointment", "Home")

.Events(e =>

{

e.Error("error");

})

)

The main thing I need to know is how do I get TextBoxFor and HiddenFor Helpers to bind to the Model like Kendos Helpers.

Thanks in advance,

Mike

Scheduler

answered on 19 Jun 2014

1 answer

294 views

Resize the filter Grid

Hi .

I have two grids to handle on the Popup Edit.

Can we re-size the auto filters on Columns of Grids .

Like by re-sizing the font of class (form - k-filter-menu k-popup k-group k-reset k-state-border-up) or container size.

Please let me know how this style class will be look like for a specific Grid whose ID is (Grid1).

Thanks
Chatrapathi Chennam

Grid

answered on 19 Jun 2014

1 answer

92 views

Pop up Resource OptionLabel

Hi there,

I have a scheduler that loads resource entries from a database. When creating an appointment, these resources appears as a dropdownlist in the standard pop up screen. However, the first entry in the dropdownlist is "None". Is there a way to replace this with your own text eg "-- Select--" as I am not aware of any means to replace this optionlabel since resources are loaded from the database.

Any help will be very much appreciated.

Thanks,

Li Yeo

Scheduler

answered on 19 Jun 2014

5 answers

1.9K+ views

How to disable "select a file" button in Kendo Upload

Hi to all,

Great day.

Just would like to ask on how could I disable the "select a file" button in Kendo Upload?
During the process of my uploading, the user can still click the select a file even still in process.

I hope someone could help me on this.

Highest gratitude in advance.

Upload

answered on 19 Jun 2014

2 answers

209 views

Stock chart - change categoryaxis labels while using navigator

Hi,

How can I change the labels on category axis while moving stock chart navigator without refresh/redrawing the chart please?

When the user narrows the date range selection to 1 day, I want to display the times on category axis, else display days.

I'm not able to achieve this without refreshing the chart. Refreshing the chart is a performance barrier.

function onSelectEnd(e) {
var categoryAxis = this.options.categoryAxis[0];
categoryAxis.labels.step = 4;
categoryAxis.majorGridLines.step = 2;
categoryAxis.minorGridLines.step = 2;
categoryAxis.majorTicks.step = 2;

//make this effective on chart right away

}
If I don't refresh the chart, above the changes to categoryaxis are not getting applied right away, rather are getting applied when I use the navigator next time.

Please help. Thanks!

Charts

answered on 18 Jun 2014

1 answer

170 views

Append dates to a Sparkline Tooltip Values

Hello, I use sparklines in the majority of the applications I help support. I'm currently working on a project where I need to append a date to the existing sparkline data point tooltip. I would like to avoid having to change the data source to include the dates unless that is the only way to make it work.

The series that the sparkline uses looks like this: ["12345, 12345, 12345, 12345, 12345, 12345"]. What I'm trying to do is actually append a date to each of the six values in the current array. The goal is to have the tooltip that has a date above the data for each data point.

Is this possible to do with Sparklines?

Thanks!

Sparkline

answered on 18 Jun 2014