Kendo Schedular Template with Check Box

7 posts, 0 answers
  1. Robert
    Robert avatar
    5 posts
    Member since:
    Dec 2014

    Posted 05 Mar 2015 Link to this post

    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>

    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:

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 09 Mar 2015 Link to this post

    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):

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Robert
    Robert avatar
    5 posts
    Member since:
    Dec 2014

    Posted 09 Mar 2015 in reply to Vladimir Iliev Link to this post

    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. 



  5. Robert
    Robert avatar
    5 posts
    Member since:
    Dec 2014

    Posted 09 Mar 2015 in reply to Robert Link to this post

    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>
  6. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 10 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. Robert
    Robert avatar
    5 posts
    Member since:
    Dec 2014

    Posted 10 Mar 2015 in reply to Vladimir Iliev Link to this post

    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. 

  8. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 12 Mar 2015 Link to this post

    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:

    Regards,
    Vladimir Iliev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready