I have defined external template and trying to use it in kendo as mentioned here

Howevere when page rendered i get error in kendo.all.min.js "0x800a138f - JavaScript runtime error: Unable to get property 'replace' of undefined or null reference". not sure what im doing wrong. 

Also i'm passing ID's to javascript functions, i had to use single quote around ID's so cshtml wont show error, is that correct?

I am trying to use the Grid / Checkbox selection feature in nested grids, inside client detail templates.

I am in face of a disturbing issue because the "select all" operation (by using the checkbox in the header) is always done in the first row having details.

To be clearer, suppose having a master grid with only 2 rows. Each row has a detail template containing a nested grid. Expand the 2 detail templates and try to select all the rows of the 2nd nested grid => That selects all the rows of the 1st one.

Have you an idea to help me ?

Thank you in advance.

Hereafter my shortened code of  the view (the full version is attached):

@(Html.Kendo().Grid<SellerViewModel>()

      .Name("SellersGrid")
      .Columns(columns =>
      {
          columns.Bound(p => p.SellerId).Hidden();
          columns.Bound(p => p.IsSelected);
          columns.Bound(e => e.Name);
          columns.Bound(e => e.IsActive);
      })
      .Events(e =>
      {
          e.DataBound("onHostSellersDataBound");
      })
      .Filterable()
      .Pageable(pager => pager.ButtonCount(3))
      .Editable(editable => editable.Mode(GridEditMode.InCell))
      .Sortable(sortable => sortable
          .AllowUnsort(true)
          .SortMode(GridSortMode.MultipleColumn))
      .ClientDetailTemplateId("marketplaces_template")
      .DataSource(dataSource => dataSource
          .Ajax()
          .Read(read => read.Action("GetHostSellers", "CompetitorGroup", new { competitorGroupId = Model.CompetitorGroupId }))
          .Sort(sort => sort.Add("IsSelected").Descending())
          .PageSize(25)
          .Model(model =>
          {
              model.Id(p => p.UniqueId);
              model.Field(p => p.SellerId).Editable(false);
              model.Field(p => p.IsSelected).Editable(true);
              model.Field(p => p.Name).Editable(false);
              model.Field(p => p.IsActive).Editable(false);
          })
          .ServerOperation(false))
)

<script id="marketplaces_template" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
          .Name("MarketplacesTabStrip_#=SellerId#")
          .SelectedIndex(0)
          .Animation(animation => animation.Open(open => open.Fade(FadeDirection.In)))
          .Items(items =>
          {
              items.Add().Text("Marketplaces")
                  .Content(@<text>
                        @(Html.Kendo().Grid<SellerViewModel>()
                              .Name("MarketplacesGrid_#=SellerId#")
                              .HtmlAttributes(new {style = "height: 543px;"})
                              .Columns(columns =>
                              {
                                  columns.Select().Width(50);
                                  columns.Bound(p => p.SellerId).Hidden();
                                  columns.Bound(p => p.HostSellerId).Hidden();
                                  columns.Bound(p => p.IsSelected).Title("Inclus");
                                  columns.Bound(e => e.Name);
                                  columns.Bound(e => e.IsActive);
                              })
                              .Events(e =>
                              {
                                  e.DataBound("onMarketplacesDataBound");
                              })
                              .Filterable()
                              .Editable(editable => editable.Mode(GridEditMode.InCell))
                              .Scrollable(scrollable => scrollable.Virtual(true))
                              .Sortable(sortable => sortable
                                  .AllowUnsort(true)
                                  .SortMode(GridSortMode.SingleColumn))
                              .PersistSelection()
                              .Pageable(pager =>
                              {
                                  pager.ButtonCount(3);
                                  pager.Messages(msg => msg.Display("Marketplaces {0} à {1} - sur {2}"));
                              })
                              .DataSource(dataSource => dataSource
                                  .Ajax()
                                  .PageSize(500)
                                  .ServerOperation(false)
                                  .Read(read => read.Action("GetMarketplaces", "CompetitorGroup", new {competitorGroupId = Model.CompetitorGroupId, hostSellerId = "#=SellerId#"}))
                                  .Sort(sort => sort.Add("IsSelected").Descending())
                                  .Model(model =>
                                  {
                                      model.Id(p => p.UniqueId);
                                      model.Field(p => p.SellerId).Editable(false);
                                      model.Field(p => p.HostSellerId).Editable(false);
                                      model.Field(p => p.IsSelected).Editable(true);
                                      model.Field(p => p.Name).Editable(false);
                                      model.Field(p => p.IsActive).Editable(false);
                                  })
                              )
                              .ToClientTemplate())
                    </text>);

          })
          .ToClientTemplate())
</script>

I have two questions regarding using the Grid with touchscreen devices such as an iPad. I see that I can press and drag to select multiple consecutive rows of the Grid, but how can I select multiple, non-consecutive rows (i.e. the equivalent of holding Control + clicking rows)? 

Second, if a grid is taking up a large portion of the view port and I want to scroll down the page, when I drag my finger, it wants to do the multi-selection of grid rows instead of scrolling. I tried dragging two fingers instead but that didn't work. Is there a way to scroll down the page when the grid must be touched on to begin scrolling?

HI

I have found that the HtmlAttributes() settings of ResponsivePanel are lost unexpectedly (not keeped) : 

  @(Html.Kendo().ResponsivePanel()
    ...
    .HtmlAttributes(new { @class = "my-class1", @my_attr1 = "my-attr1" }))

ResponsivePanel is not allow to set custom html attributes (css classes, element attributes) ? 
Is this problem will fixed in future release ?

Best regards

Chris

HI

In Desktop environment, User can resize the window of the browser,

But I found that the Close event not fired while user maximize the window (ex. 1024 x 768) : 

Reintroduce steps : 
1.minimize the browser window (ex. width: 400px or smaller, height: any) then the ResponsivePanel's ToggleButton appears;
2.maximize the browser window (ex. 1024 x 768), the Close event not fired.

How can I detect the Close event while user maximize the browser window ? 
Is the functionality will be fixed in the future release ? 

*click the ToggleButton will fire the Close event normally.

Best regards

Chris

I'm trying to write a custom filter function because the field I want to filter on is an object, rather than a primitive value, and the filter value I'm using is a primitive that I'm comparing to a field on the object (based on a selection in a DropDownList). Here's the code I'm using:

However, the "item" argument is *not* an individual item from the datasource that needs to be filtered - it's an array/collection of some sort. What's the correct way to write this function so that I can correctly filter the datasource?

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.