Advanced grouping and empty line

[Gonzalo]

Hi!

I'm using a scheduler in cshtml:

@(Html.Kendo().Scheduler<ITSV6.Areas.CoreApp.Models.SchedulerModel>()
            .Name("scheduler")
            .Date(new DateTime(2013, 6, 13))
            .StartTime(new DateTime(2013, 6, 13, 7, 00, 00))
            .MajorTick(60)
            .Views(views =>
            {
                views.TimelineView(timeline => timeline.EventHeight(50));
                views.TimelineWeekView(timeline => timeline.EventHeight(50));
                views.TimelineWorkWeekView(timeline => timeline.EventHeight(50));
                views.TimelineMonthView(timeline =>
                {
                    timeline.StartTime(new DateTime(2013, 6, 13, 00, 00, 00));
                    timeline.EndTime(new DateTime(2013, 6, 13, 00, 00, 00));
                    timeline.MajorTick(1440);
                    timeline.EventHeight(50);
                });
            })
            .Timezone("Etc/UTC")
            .Group(group => group.Resources("SchedulerName", "Employees").Orientation(SchedulerGroupOrientation.Vertical))
            .Resources(resource =>
            {
                resource.Add(m => m.Type)
                    .Title("Type")
                    .Name("Type")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .DataColorField("Color")
                    .BindTo(new[] {
                    new { Text = "Pay Code", Value = 1},
                    new { Text = "Day Off", Value = 2},
                    new { Text = "Shift", Value = 2}
                    });
                resource.Add(m => m.SchedulerName)
                    .Title("Scheduler Group")
                    .Name("SchedulerName")
                    .DataTextField("sg_name")
                    .DataValueField("sg_group")
                    .DataColorField("Color")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("getScheduleGroups", "Scheduler");
                        });
                    });

                resource.Add(m => m.Employees)
                    .Title("Employees")
                    .Name("Employees")
                    .Multiple(true)
                    .DataTextField("FullNM")
                    .DataValueField("emp_id")
                    .DataColorField("Color")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetEmployees", "Scheduler");
                        });
                    });
            })
    .DataSource(d => d
            .Model(m =>
            {
                m.Id(f => f.SchedulerId);
                m.Field(f => f.Title).DefaultValue("No title");
                m.RecurrenceId(f => f.RecurrenceId);
                m.Field(f => f.Title).DefaultValue("No title");
            })
                //.Read("Read", "Scheduler")
                .Create("Create", "Scheduler")
                .Destroy("Destroy", "Scheduler")
                .Update("Update", "Scheduler")
    )

 

The "Employee" and the "RuleName" are associated by a field called "schedulerId".

I need to group "Employees" with a "SchedulerName" only if the Employee is associated to the SchedulerName just like the attached image.

Also, I need to add an empty line as "Empty Template" for add a new "Schedule Rule" like the first line in the attached image.

 

Its posible to do that with the scheduler?

 

Thanks a lot!

Best regards!

[Gonzalo]

Sorry the image wasn't attach.

I'm attaching it now.

Regards.

[Veselin Tsvetanov]

Hello Gonzalo,

I am not sure if I fully understand your requirements. As far as I can see from your implementation, you are grouping the Appointments (Events) by SchedulerName and by Employees resources. However, only some of the Employees are associated with a given SchedulerName. Therefore you would like to display for each Scheduler only those Employees that are available for it. If this is your requirement, I am afraid that the Scheduler does not offer out-of-the-box the possibility to configure that restriction.

Also, I am not quite sure, which is the line, that you need to add to the Scheduler. Generally, you will be able to achieve such customization, by manually adding the required HTML to your Scheduler, by handling the DataBound event.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Gonzalo]

Hi Vaselin,

I tryed to extend the TimeLineMonth view to acomplish my requiriment and I did this:

<script>

    kendo.ui.TimelineMonthView = kendo.ui.TimelineMonthView.extend({

        _createColumnsLayout: function (resources, inner) {
            return customCreateLayoutConfiguration("columns", resources, inner, null);
        },

        _createRowsLayout: function (resources, inner) {
            return customCreateLayoutConfiguration("rows", resources, inner, null);
        },

    });

    function customCreateLayoutConfiguration(name, resources, inner, groupText) {
        var resource = resources[0];
        var resource2 = resources[1];
        if (resource) {
            var configuration = [];

            var data = resource.dataSource.view();
            var data2 = resource2.dataSource.view();

            for (var dataIndex = 0; dataIndex < data.length; dataIndex++) {
                var defaultText = kendo.htmlEncode(kendo.getter(resource.dataTextField)(data[dataIndex]));
                console.log("room: " + defaultText);
                var obj1 = {
                    text: defaultText,
                    className: "k-slot-cell"
                };
                var rows = [];

                for (var dataIndex2 = 0 ; dataIndex2 < data2.length ; dataIndex2++) {
                    var defaultText2 = kendo.htmlEncode(kendo.getter(resource2.dataTextField)(data2[dataIndex2]));
                    console.log("Group: " + defaultText + " Emp: " + defaultText2);
                    var remove = defaultText == "L-S 8:00am-5:00pm" && defaultText2 == "Figueroa Colon, Madeline  ";
                    if (!remove) {
                        var obj2 = {
                            text: defaultText2,
                            className: "k-slot-cell"
                        };

                        /*if (remove) {
                            obj2 = {
                                text: defaultText2,
                                className: "hide"
                            };
                            console.log("invalid employee: " + defaultText2);
                        }*/

                        rows.push(obj2);
                    }

                }
                obj1[name] = rows;
                configuration.push(obj1);
            }
            return configuration;
        }
        return inner;
    }

<script>

 

Basically, I'm not put the "Employee" row on the "Schedule Group" object if it matching the rule on the code.

But the result is not the expected, check attached img.

Is a way to fix this?

Regards and thank you!

Gonzalo.

 

[Veselin Tsvetanov]

Hello Gonzalo,

Creating a Scheduler that renders individual Resources per appointment would involve considerable advanced customization of the widget. Therefore, I need to confirm that explaining how the source code works in the context of this scenario is in the scope of our Professional Services team, so I am not able to comment on that as part of our standard support service.  Let me know if you are interested in cooperating with our colleagues on this task and I will arrange someone to contact you directly.

Regards,
Veselin Tsvetanov
Telerik by Progress