I am able to load events and they are properly populated on custom edit template. However, both create and update hold empty model objects. Here is code

<h2>CalendarByLab</h2>
<label id="currentRoom">@ViewBag.CurrentRoomIdAsString</label>

<div class="k-widget k-scheduler" id="scheduler"></div>
<script id="customEditorTemplate" type="text/x-kendo-template">

    <div class="k-edit-label"><label for="userId">User Id</label></div>
    <div data-container-for="userId" class="k-edit-field">
        <input type="text" class="k-input k-textbox" readonly name="userId" required="required" />
    </div>
    <div class="k-edit-label">
        <label for="start">Start Date</label>
    </div>
    <div data-container-for="start" class="k-edit-field">
        <input type="text"
               data-role="datetimepicker"
               data-interval="30"
               data-type="date"
               data-bind="value:start"
               name="start" />

        <span data-bind="text: startTimezone"></span>
        <span data-for="start" class="k-invalid-msg" style="display: none;"></span>
    </div>
    <div class="k-edit-label"><label for="end">End</label></div>
    <div data-container-for="end" class="k-edit-field">
        <input type="text" data-type="date" data-role="datetimepicker" data-bind="value:end" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
        <input type="text" data-type="date" data-role="datepicker" data-bind="value:end" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" />
        <span data-bind="text: endTimezone"></span>
        <span data-bind="text: startTimezone, invisible: endTimezone"></span>
        <span data-for="end" class="k-invalid-msg" style="display: none;"></span>
    </div>
    <div class="k-edit-label"><label for="durationId">Duration</label></div>
    <div data-container-for="durationId" class="k-edit-field">
        <select id="durationId" data-bind="value:durationId" data-role="dropdownlist"
                data-value-field="value" data-text-field="text">
            <option value="30">30 min</option>
            <option value="60">1 hr</option>
            <option value="90">1:30 hr</option>
            <option value="120" selected>2:00 hrs</option>
        </select>
    </div>
    <div data-container-for="start" class="k-edit-field">
        <label> Members (first and last names) :</label>
    </div>
    <div class="k-edit-label"><label for="member1">Member 1:</label></div>
    <div data-container-for="member1" class="k-edit-field">
        <input type="text" class="k-input k-textbox" name="member1" required="required" data-bind="value:member1">
    </div>
    <div class="k-edit-label"><label for="member2">Member 2:</label></div>
    <div data-container-for="member2" class="k-edit-field">
        <input type="text" class="k-input k-textbox" name="member2" required="required" data-bind="value:member2">
    </div>
    <div class="k-edit-label"><label for="member3">Member 3:</label></div>
    <div data-container-for="member3" class="k-edit-field">
        <input type="text" class="k-input k-textbox" name="member3" data-bind="value:member3">
    </div>
    <div class="k-edit-label"><label for="member4">Member 4:</label></div>
    <div data-container-for="member4" class="k-edit-field">
        <input type="text" class="k-input k-textbox" name="member4" data-bind="value:member4">
    </div>
</script>
<script id="event-template" type="text/x-kendo-template">
   
        <p>
            #: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #
        </p>
        <p>#: groupList #</p>
        <p>#: userId #</p>
   
</script>
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);

            var scheduler = $("#scheduler").data("kendoScheduler");
            scheduler.one("dataBinding", function (e) {
                //prevent saving if server error is thrown
                e.preventDefault();
            })
        }
    }
</script>
<script>

    $(function ()
    {
        $("#scheduler").kendoScheduler(
        {
            messages: {
                editor: {
                    editorTitle: "Reserve"
                }
            },
            allDaySlot: false,
            height: 600,
            date: new Date("2018/3/1"),
            startTime: new Date("2018/3/1 07:00 AM"),

            editable: {
                template: kendo.template($('#customEditorTemplate').html())
            },
            eventTemplate: $("#event-template").html(),
            views: [
                {
                    type: "day"
                }
            ],
            timezone: "Etc/UTC",
            group: {
                resources: ["Rooms"]
            },
            resources: [{
                dataSource: {
                    transport: {
                        read: {
                            url: "/Calendar/RemoteDataSource_GetRoom?RoomId=" + $('#currentRoom').text(),
                            dataType: "json",
                            contentType: "application/json; charset=utf-8"
                        }
                    }
                },
                name: "Rooms",
                title: "Room",
                field: "RoomId",
                dataTextField: "RoomNumber",
                dataValueField: "RoomId"
            }],
            dataSource:
            {            
                batch: true,
                transport: {
                    read: {
                        url: "/Calendar/Tasks_Read?RoomIdAsString=" + $('#currentRoom').text(),
                        dataType: "json",
                        contentType: "application/json; charset=utf-8"

                    },
                   update: {
                        url: "@Url.Action("Tasks_Update", "Calendar")",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        type: "POST"
                    },
                    create: {
                        url: "@Url.Action("Tasks_Create", "Calendar")",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        type: "POST"
                    },
                    destroy: {
                        url: "/Calendar/Tasks_Destroy",
                        dataType: "json",
                        contentType: "application/json; charset=utf-8"
                    },

                parameterMap: function (options, operation) {
                        if (operation === "read") {
                            var scheduler = $("#scheduler").data("kendoScheduler");

                            var result = {
                                start: scheduler.view().startDate(),
                                end: scheduler.view().endDate()
                            }

                            return kendo.stringify(result);
                        }

                        return kendo.stringify(options);
                    }
                },
                error: error_handler,
                schema:
                {
                    model:
                    {
                        id: "taskId",

                        fields:
                        {
                            taskId: { from: "TaskId" },
                            groupList: { from: "GroupList", defaultValue: "No members" },
                            start: { from: "Start", type:"date" },
                            end: { from: "End", type: "date" },

                            RoomId: { from: "RoomId", nullable: true },
                            userId: { from: "UserId", defaultValue: '222', type: "string" },
                            member1: { from: "Member1", defaultValue: '', type: "string" },
                            member2: { from: "Member2", defaultValue: '', type: "string" },
                            member3: { from: "Member3", defaultValue: '', type: "string" },
                            member4: { from: "Member4", defaultValue: '', type: "string" },
                            durationId: { from: "Duration", defaultValue: '120' }

                        }
                    }
                }
            }
        });
    });
</script>

Model class

namespace WebMVC.Models
{
    public class EventModel
    {
        public string TaskId { get; set; }
        public string RoomId { get; set; }
        public string GroupList { get; set; }
        
        public string Member1 { get; set; }
        public string Member2 { get; set; }
        public string Member3 { get; set; }
        public string Member4 { get; set; }

        public string Duration { get; set; }

        public string UserId { get; set; }

        private DateTime start;
        public DateTime Start
        {
            get
            {
                return start;
            }
            set
            {
                start = value.ToUniversalTime();
            }
        }

        private DateTime end;
        public DateTime End
        {
            get
            {
                return end;
            }
            set
            {
                end = value.ToUniversalTime();
            }
        }      
    }
}

Controller

 public virtual JsonResult Tasks_Create([DataSourceRequest]DataSourceRequest request, EventModel task)
        {
            if (ModelState.IsValid)
            {
                var entity = new Booking()
                {
                    BookingId = new Guid(task.TaskId)
                };
            
            }
            return Json(new[] { task }.ToDataSourceResult(request, ModelState));

}

Version: 2018.1.117

I've been trying to use the SASS Theme Builder, Bootstrap 4, and the MVC HTML Helpers to generate a very simple menu.  (I'm starting to wonder if Bootstrap 4 is actually supported by UI for ASP .NET MVC properly.)

Version: 2018.1.117

When the menu renders, it puts the k-state-highlight class on my first text item, but that class does not exist in my two .files (bootstrap.min.css and all.css, downloaded from the SASS Theme Builder).  I'm noticing numerous of these classes are missing from these CSS files.

Html.Kendo().Menu()

    .Name("Menu")
.Items(items =>
                              {
                                  items.Add().ImageUrl("~/Content/about.png").ImageHtmlAttributes(new {style="width:50%;"});
                                  items.Add().Text("Home").Action("Index", "Default").Selected(true);
                                  items.Add().Text("Help").Action("Index", "Help", new { area = "HelpPage" });
                                  items.Add().Text("Disabled item").Enabled(false);
                              }).Deferred()

Am I missing a CSS file or am I missing the point?  Can someone guide me in the right direction, please?

I would like to add Time Zone support, but the demo doesn't seem to handle DST. When I add an even using GMT London, the time is wrong. See the attached.

Hello,

I try to color "isAllDay" event.
The simpliest way for me to do somethiong like this:

But it's not working. I also tried Convert.ToBoolean(1), but it the same issues.

Do you have any advice ?

Thank you

Hi,

I've used your custom bindings page (https://demos.telerik.com/aspnet-mvc/grid/customajaxbinding) to help create a view i wanted but i noticed you haven't supplied code to help with the aggregates, can you please supply or is there a reason this hasn't been added?

Many thanks,
Lee.

HI

There have a problem about PanelBar.ExpandMode(PanelBarExpandMode.Single) : 

When user expand one item then other expanded item will collapse automatically (THIS IS OK),
but when user click the EXPANDED ITEM, that item will not collapse.

How can I collapse the EXPANDED ITEM while PanelBar.ExpandMode(PanelBarExpandMode.Single) ?

Best regards

Chris

I'm attempting to test out how the Telerik (Kendo) grid will work in a current application I have but am running into some roadblocks.

I have a WebApi controller which inherits from ApiController and implements the following "Get" method:

[System.Web.Http.HttpGet, System.Web.Http.Route(LookupUrl.MyLookup)] public DataSourceResult Get([System.Web.Http.ModelBinding.ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)        

{

            return service.GetModels().ToDataSourceResult(request);

}

and in the .cshtml file I have:

@(Html.Kendo().Grid<MyModel>()           .Name("telerikGrid")           .Columns(col =>           {               col.Bound(c => c.Key);               col.Bound(c => c.DisplayName);               col.Bound(c => c.Inactive);           })           .Scrollable()           .Groupable()           .Sortable()           .Filterable()           .Pageable(pageable => pageable               .Refresh(true)               .PageSizes(true)               .ButtonCount(5))           .DataSource(d =>               d.WebApi()                   .Model(model =>                   {                       model.Id(p => p.Key);                   })                   .Events(events => events.Error("error_handler"))                   .Read(read => read.Url(Url.ApiUrl(LookupUrl.MyLookup)))           )     )

The grid shows up correctly on the page, but the controller method is never accessed.  I'm not entirely sure what I am doing wrong here.

I have a set of grids, one acting as a main grid, which is editable, and works fine. 

There is then a detail grid. When the detail grid is set to not editable, by commenting out all editable/command/toolbar sections, it works fine. However, upon including even just one of those, it causes an invalid template error. Code is included below for the two grids. the second one is the one causing the issue. 

@(Html.Kendo().Grid<eCurriculumAdminJunior.Models.Feedback.Section>()
    .Name("SectionGrid")
    .Columns(col =>
    {
        col.Bound(x => x.position).Title("Section").ClientTemplate("Section #=position#").HtmlAttributes(new { style = "width: 40%" });
        col.Bound(x => x.viewableby).Title("Visibility").EditorTemplateName("VisibleTo").ClientTemplate("#=ArrayToString(data.viewableby)#").HtmlAttributes(new { style = "width: 30%" });
        col.Command(command =>
        {
            command.Edit().IconClass("glyphicon glyphicon-edit").Text(" ").HtmlAttributes(new { style = "text-decoration: none" });
            command.Destroy().IconClass("glyphicon glyphicon-ban-circle").Text(" ").HtmlAttributes(new { style = "text-decoration: none" });
        }).Width("5em").Title(" ");
    })
    .RowAction(row => row.DetailRow.Expanded = true)
    .ToolBar(x => x.Create())
    .Events(x => x.Edit("defaultSectionIndexer"))
    .Editable(x => x.Mode(GridEditMode.InLine))
    
    .DataSource(ds => ds.Ajax()
        .Model(m =>
        {
            m.Id(i => i.id);
            m.Field(f => f.id).DefaultValue(-1).Editable(false);
            m.Field(f => f.position).DefaultValue(-1).Editable(false);

        })
        .Batch(false)
        .ServerOperation(false)
        .Read(r => r.Action("ReadSection", "FeedbackForm", new { formID = Model }))
        .Update(u => u.Action("UpdateSection", "FeedbackForm"))
        .Create(c => c.Action("CreateSection", "FeedbackForm", new { formID = Model }))
        .Destroy(d => d.Action("DeleteSection", "FeedbackForm"))
        .Sort(s => s.Add(x => x.position))
    ).ClientDetailTemplateId("sectionHeaderTemplate")
)
<script id="sectionHeaderTemplate" type="text/kendo">

    <text>Headers</text>
    @(Html.Kendo().Grid<eCurriculumAdminJunior.Models.Feedback.SectionHeader>()
        .Name("SectionHeaderGrid#=id#")
        .Columns(col =>
        {
            col.Bound(c => c.position).Hidden(true);
            col.Bound(c => c.text).EditorTemplateName("RichText").HtmlAttributes(new { style = "width: 60%" });
            col.Bound(c => c.viewableby).Title("Visibility").EditorTemplateName("VisibleTo").ClientTemplate("#=ArrayToString(data.viewableby)#").HtmlAttributes(new { style = "width: 30%" });
            col.Command(command =>
            {
                command.Edit().IconClass("glyphicon glyphicon-edit").Text(" ").HtmlAttributes(new { style = "text-decoration: none" });
                command.Destroy().IconClass("glyphicon glyphicon-ban-circle").Text(" ").HtmlAttributes(new { style = "text-decoration: none" });
            }).Width("5em").Title(" ");
        })
        .ToolBar(t =>
        {
            t.Create();
        })
        .DataSource(ds => ds.Ajax()
        .Model(m =>
        {
            m.Id(id => id.id);
            m.Field(f => f.id).DefaultValue(-1);

        })
        .ServerOperation(false)
        .Read(r => r.Action("ReadSectionHeader", "FeedbackForm", new { sectionID = "#=id#" }))
        .Update(u => u.Action("UpdateSectionHeader", "FeedbackForm"))
        .Create(c => c.Action("CreateSectionHeader", "FeedbackForm",new { sectionID = "#=id#" }))
        .Destroy(d => d.Action("DeleteSectionHeader", "FeedbackForm"))
        ).ToClientTemplate()
    )
    <text>Content</text>
   
</script>