Kendo Schedular Template with Check Box

[Robert]

I have a Kendo scheduler template and on the template I want to give the user a multiple check box selection of work group data to choose from. I want to be able to bind the choices of work group data from a property on my model (ScheduleDataSource) which is the following: List<string> AllWorkgroups {get; set;}I then want the choice from the user to be saved in List<String> UserWorkgroups {get; set;} on the same model.Can someone please help with how to do this. Please note I am doing this in MVC ASPX. My current code is below:

<%=Html.Kendo().Scheduler<ASML_Scheduler.Models.ScheduleDataSource>()
.Name("scheduler")
.Date(DateTime.Now)
.StartTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 7, 00, 00))
.Height(400)
.Editable(editable=>editable.TemplateId("editor"))

.DateHeaderTemplate("<p class='HeaderTemplate'>#=kendo.toString(date, 'ddd dd MMM')#</p>")
.MajorTimeHeaderTemplate("<p class='HeaderTemplate'>#=kendo.toString(date, 'H:mm' )#</p>")
.EventTemplateId("event-template")
.Views(views =>
{
views.DayView();
views.WeekView(weekView =>
{
weekView.Selected(true);
weekView.WorkDayCommand(false);
weekView.AllDaySlot(false);
});

views.MonthView();
})

.CurrentTimeMarker(true)
.Timezone("Etc/UTC")
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.ScheduleId);
m.Field(f => f.Description).DefaultValue("No title");
m.Field(f => f.UserId).DefaultValue(1);
m.Field(f => f.End).DefaultValue(DateTime.Now);
m.Field(f => f.Workgroups);
})

.Read("Read", "Schedule")
.Create("Create", "Schedule")
.Destroy("Destroy", "Schedule")
.Update("Update", "Schedule")
.PageSize(600)

)
.GroupHeaderTemplate("<div style='color:blue'>" +
"</div>")
.Events(events =>
{
events.Edit("scheduler_edit");
})

%>

<script id="editor" type="text/x-kendo-template">

<input name="start" type="text" required data-type="date" data-role="datetimepicker" data-bind="value: start" />
<br />
<input name="end" type="text" id="datetimepickers" required data-type="date" data-role="datetimepicker" data-bind="value: end" />

</script>

0down votefavorite

I have a Kendo scheduler template and on the template I want to give the user a multiple check box selection of work group data to choose from. I want to be able to bind the choices of work group data from a property on my model (ScheduleDataSource) which is the following: List AllWorkgroups {get; set;} I then want the choice from the user to be saved in List UserWorkgroups {get; set;} on the same model. Can someone please help with how to do this. Please note I am doing this in MVC ASPX. My current code is below:

[Vladimir Iliev]

Hi Robert,

The desired behavior can be easily achieved using the upcoming 2015 Q1 release "strongly typed MVVM binding". For convenience I created small example which you can use as baseline to create the required editor template (notice the checkboxes at the end of the editor template):

• Scheduler: Checkbox editing of multiple resource using MVVM strongly type binding

Also I'm not sure that I understand correctly where is the data for the resource that you need to be edited with checkboxes - could you please clarify?

Regards,
Vladimir Iliev
Telerik

 

 

[Robert]

Hi The data is on the model being used for the scheduler. So within ScheduleDataSource Class i have the following:

List<string> AllWorkgroups {get;set;}
List<string> UserWorkgroups {get;set;}

Another thing if possible is for users to select a skill and put an entry to it. So I have a class:
class Skills
{
public string SkillName {get; set;}
pubic string SkillLevel {get; set;}
}


I would like to be able to have the following:
List<skill> AvailableSkills {get; set;}
List<skill> UserSkills {get;set;}


I would expect on the schedule for to have a list of all skills with a checkbox and next to each skill name a text input. 

[Robert]

Just to re-interate on the second part of the above I could do with something like this in my template where the rows are bound to an object on the Scheduler Model. 


 <Table>
        <tr Height="50px">
        <td width="50px"> Selected</td>
        <td width="200px"> SKILL NAME</td>
        <td width="200px"> PROFICIENCY LEVEL</td>
        </tr>
        <tr>
        <td><input type="Checkbox" name="FirstName"/></td>
        <td>Skill 1</td>
        <td><input type="text"></td> 
        </tr>
        <tr>
        <td><input type="Checkbox"/></td>
        <td>Skill 2</td>
        <td><input type="text"></td> 
        </tr>
        <tr>
        <td><input type="Checkbox"/></td>
        <td>Skill 3</td>
        <td><input type="text"/></td> 
        </tr>
</table>

[Vladimir Iliev]

Hi Robert,

I'm still not sure that I understand the exact scenario that you have, however if the "AllWorkgroups" and "AvailableSkills" fields are resources (more information about resources can be found here) then you should move them out of the model. Then you can collect all available skills and workgroups and bind them to the corresponding Scheduler resource. Finally if you need to filter the skills and workgroups based on the currently edited event - you can achieve this for example using the "Edit" event to find the target editor and filter it.

Regards,
Vladimir Iliev
Telerik

 

 

[Robert]

I have managed to resolve the workgroup data using a multiselect drop down: 
 var dataSource = new kendo.data.DataSource({ transport: { read: { url: "/Schedule/GetWorkgroups", dataType: "json" } } });
     
   <select id="listView" multiple="multiple" data-role="multiselect" data-text-field="Text"  data-value-field="Value" data-bind="source: dataSource, value: UserWorkgroups"></select>
   
 jQuery("\\#listView").kendoMultiSelect(
          {
              dataSource: dataSource,       
              template: "<div style='padding: 10px; border: 1px solid red;'>\\#:Text\\# </div>",
              selectable: "single",
          });


Ok so I just need the skills to work now. When my users make an appointment they need to choose which skills (out of a large list) it applies to and assign a level next to each still.

The data is in format:

 public List<KeyValuePair<string, int>> UserSkills {get; set;}  

So the list will be a list of skill names and the level (int) which can be set from 0  - 100.

How would I add this in an event template so when the users make an appointment they can see a list of all available skill and be able to choose which one they need for this appointment and set the level. 

[Vladimir Iliev]

Hi Robert,

I'm not sure that I understand correctly what exactly you are trying to achieve, however if you need to edit the resource field nested objects than you should use more complex widget than the multiSelect (for example the grid widget). Currently however we have no such example which we can provide other than the one available for the Grid:

• Grid Popup Editing Navigation Property Collection with nested Grid

Regards,
Vladimir Iliev
Telerik