Questions on Kendo UI for jQuery Forum

2 answers

353 views

[Solved] 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

359 views

[Solved] 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

754 views

[Solved] 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

342 views

[Solved] 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

105 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

2.0K+ 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

233 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

208 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

2 answers

209 views

Kendo Grid Datasource filter 'OR'

Hi,
how can i create filter on multiple columns with 'OR ' as the logical operator?

assume i have 5 columns (string data type)
i want to create a filter like this
filter=  col1 contains ('test') OR col2 contains ('test') OR col3 contains ('test') OR col4 contains ('test')
OR col5 contains ('test').

thanks,
Arun

Grid

answered on 18 Jun 2014

1 answer

131 views

Destroy is not working in kendo grid, using rails and kendo UI gem

I can not get the destroy event to work in the transporter. I am using the Kendo-UI gem, and have followed the documentation. The read is working fine and all data is getting set to the grid correct. But I can not get destroy to work. I am also unsure as to what the parameterMap is supposed to be doing but that is not getting triggered when the delete button is hit. I have been stuck for quite some time, any pointers would be extremely helpful. Below is a gist to my code, note I have hardcoded the id's into the urls for the time being just trying to get it to work.

Thanks

https://gist.github.com/sdanko11/ae7da21c889f8a4416f3

Grid

answered on 18 Jun 2014