We are using Gantt in our project, the added tasks are using a template and we noticed that when the task progress covers the delete task button and it is not clickable anymore.
The template is similar to the one below:
<script id="task-template" type="text/x-kendo-template"> <div class="template"> <div class="wrapper"> <strong class="title">#= title # </strong> <span class="resource">no resource assigned</span> </div> <div class="progress" style="width:#= (100 * parseFloat(percentComplete)) #%"> </div> </div></script>
I have tried to reproduce this issue in the Kendo Dojo and noticed that it is reproducible only when bootstrap 4 is used (for bootstrap 3 works fine). Here is the link to the kendo dojo where I was able to reproduce this issue: https://dojo.telerik.com/eyutamel
Please help me get the functionality for the delete (k-task-delete) on the task.
Thank you in advance!

Is there a way to SetWidth() on multiple column ranges at once? Kind of like below:
//get columns 0 to 2, 5 to 10 and 26 to 29 and set widthworksheet.Columns[0,2].Columns[5,10].Columns[26,29].SetWidth(new ColumnWidth(400, true));
I cannot successfully migrate this code to Kendo UI:
<div class="form-group"> <div class="col-md-3 col-lg-offset-2"> @Html.RadioButtonFor(m => m.IsNewDeveloper, false, new { @onchange = "chooseExisting(event)" }) Choose from existing developers </div> <div class="col-md-3"> @Html.RadioButtonFor(m => m.IsNewDeveloper, true, new { @onchange = "addNew(event)" }) Add a new developer </div> </div> <div class="form-group"> @Html.LabelFor(m => m.AssignedDeveloper.Email, new { @class = "col-md-2 control-label" }) <div class="col-md-10"> @Html.DropDownList("ExistingDeveloper", new SelectList(Model.DeveloperEmails), "Select an email", new { @class = "form-control", @onchange = "existingDevSelected(event)" }) @Html.TextBoxFor(m => m.AssignedDeveloper.Email, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.AssignedDeveloper.Email) </div> </div> <div class="form-group"> @Html.LabelFor(m => m.AssignedDeveloper.FirstName, new { @class = "col-md-2 control-label" }) <div class="col-md-10"> @Html.TextBoxFor(m => m.AssignedDeveloper.FirstName, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.AssignedDeveloper.FirstName) </div> </div> <div class="form-group"> @Html.LabelFor(m => m.AssignedDeveloper.LastName, new { @class = "col-md-2 control-label" }) <div class="col-md-10"> @Html.TextBoxFor(m => m.AssignedDeveloper.LastName, new { @class = "form-control" }) @Html.ValidationMessageFor(m => m.AssignedDeveloper.LastName) </div> </div><script type="text/javascript"> $(function () { if ('@Model.IsNewDeveloper' === 'True') { addNew(); } else { chooseExisting(); } }); function chooseExisting(e) { $('input#AssignedDeveloper_Email').hide(); $('select#ExistingDeveloper').show(); $('#AssignedDeveloper_FirstName').attr('readonly', 'readonly'); $('#AssignedDeveloper_LastName').attr('readonly', 'readonly'); // if was triggered by user, clear previous values if (e) { if ($('select#ExistingDeveloper').val()) { existingDevSelected(); } else { $('#AssignedDeveloper_FirstName').val(''); $('#AssignedDeveloper_LastName').val(''); } } } function addNew(e) { $('select#ExistingDeveloper').hide(); $('input#AssignedDeveloper_Email').show(); $('#AssignedDeveloper_FirstName').removeAttr('readonly'); $('#AssignedDeveloper_LastName').removeAttr('readonly'); // if was triggered by user, clear previous values if (e) { $('input#AssignedDeveloper_Email').val(''); $('#AssignedDeveloper_FirstName').val(''); $('#AssignedDeveloper_LastName').val(''); } } function existingDevSelected() { // populate email input with the selected one var selectedEmail = $('select#ExistingDeveloper').val(); $('input#AssignedDeveloper_Email').val(selectedEmail); // populate first and last names $.post('@Url.Action("GetDeveloperNames", "Licenses")' + '?email=' + selectedEmail, getAntiForgery()) .done(function (res) { if (res.firstName && res.lastName) { $('#AssignedDeveloper_FirstName').val(res.firstName); $('#AssignedDeveloper_LastName').val(res.lastName); } else { // if for some reason a user is not found with this email, go to adding a new user addNew(); $('#AssignedDeveloper_FirstName').val(''); $('#AssignedDeveloper_LastName').val(''); } }); }</script>
Here is the new version:
<div class="form-group"> @Html.Label(" ", new { @class = "col-md-2 control-label" }) <div class="col-md-3"> @Html.Kendo().RadioButtonFor(m => m.IsNewDeveloper).Checked(false).HtmlAttributes(new { onchange = "chooseExisting(event)"}) Choose from existing developers </div> <div class="col-md-3"> @Html.Kendo().RadioButtonFor(m => m.IsNewDeveloper).Checked(true).HtmlAttributes(new { onchange = "addNew(event)"}) Add a new developer </div></div><div class="form-group"> @Html.LabelFor(m => m.AssignedDeveloper.Email, new { @class = "col-md-2 control-label" }) <div class="col-md-10"> @Html.Kendo().DropDownList().BindTo(Model.DeveloperEmails).OptionLabel("Select an email").Name("ExistingDeveloper").Events(e=>e.Change("existingDevSelected")).HtmlAttributes(new { style = "width: 280px" }) @Html.Kendo().TextBoxFor(m => m.AssignedDeveloper.Email).HtmlAttributes( new {style = "width: 280px"} ) @Html.ValidationMessageFor(m => m.AssignedDeveloper.Email) </div></div><div class="form-group"> @Html.LabelFor(m => m.AssignedDeveloper.FirstName, new { @class = "col-md-2 control-label" }) <div class="col-md-10"> @Html.Kendo().TextBoxFor(m => m.AssignedDeveloper.FirstName).HtmlAttributes( new { style = "width: 280px" }) @Html.ValidationMessageFor(m => m.AssignedDeveloper.FirstName) </div></div><div class="form-group"> @Html.LabelFor(m => m.AssignedDeveloper.LastName, new { @class = "col-md-2 control-label" }) <div class="col-md-10"> @Html.Kendo().TextBoxFor(m => m.AssignedDeveloper.LastName).HtmlAttributes(new{ style = "width: 280px"}) @Html.ValidationMessageFor(m => m.AssignedDeveloper.LastName) </div></div>
The javascript code is not called properly. Why?
I'm attaching the original working code. Thanks,
Alberto


Hi guys
I've been having some problems with kendo scheduler passing the data from the create new meeting moal popup to the controller. I have an MVC solution where the user should select a location, my control will call off to the server to get a list of resources for that location. All working as expected except that my custom template for the modal popup won't pass the RoomID to the controller to create a new meeting room. Here is some of my code
Razor MVC
@(Html.Kendo().Scheduler<MeetingViewModel>() .Name("scheduler") .Date(startOfWeek) .StartTime(startOfWeek.AddHours(8)) .EndTime(startOfWeek.AddHours(18)) .Height(670) .AllDaySlot(false) .Editable(e => e.TemplateId("customTemplate").Destroy(false).Create(true).Move(false).Resize(false).Update(false)) //.Editable(e => e.Destroy(false).Create(true).Move(false).Resize(false)) .Events(e => { e.Save("scheduler_save"); }) .Views(views => { views.DayView(x => x.DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd/MM')#</span>")); views.WeekView(weekView => weekView.Selected(true).DateHeaderTemplate("<span class='k-link k-nav-day'>#=kendo.toString(date, 'dd/MM')#</span>")); }) .Timezone("Etc/GMT") .Resources(resource => { resource.Add(m => m.RoomID) .Title("Room") .DataTextField("ResourceName") .DataValueField("RoomID") .DataColorField("ResourceColour") .Multiple(false) .DataSource(x => x.Read(s => s.Data("GetRoomFromDropdown").Action("Rooms_Get", "ExchangeCalendar", new { Area = string.Empty }))); }).DataSource(d => d.Events(x => x.RequestEnd("check_response")) .Model(m => { m.Id(f => f.MeetingID); m.Field(f => f.Title).DefaultValue("No title"); m.RecurrenceId(f => f.RecurrenceID); m.Field(f => f.Title).DefaultValue("No title"); }).Read(x => x.Data("GetRoomFromDropdown").Action("Rooms_Read", "ExchangeCalendar", new { Area = string.Empty })).Create("Rooms_Create", "ExchangeCalendar", new { Area = string.Empty })))
CustomTemplate
@*TEMPLATE FOR MODAL POPUP*@<script id="customTemplate" type="text/x-kendo-template"> <div class="k-edit-label"> <label for="title">Title</label> </div> <div class="k-edit-field" data-container-for="title"> <input type="text" class="k-input k-textbox" name="title" data-bind="value: title" /> </div> <div class="k-edit-label"> <label for="start">Start</label> </div> <div class="k-edit-field" data-container-for="start"> <span style="display: none;" class="k-widget k-datetimepicker k-header"> <span class="k-picker-wrap k-state-default"> <input type="text" data-bind="value: start, invisible: isAllDay" data-role="datetimepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is 6/10/2013 12:00:00 AM"><span class="k-select" unselectable="on"><span class="k-icon k-i-calendar" unselectable="on" role="button">select</span><span class="k-icon k-i-clock" unselectable="on" role="button">select</span></span> </span> </span><span style="" class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default"><input type="text" data-bind="value: start, visible: isAllDay" data-role="datepicker" data-type="date" required="" name="start" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is Monday, June 10, 2013"><span class="k-select" unselectable="on" role="button"><span class="k-icon k-i-calendar" unselectable="on">select</span></span></span></span><span data-bind=" text: startTimezone"></span><span class="k-invalid-msg" data-for="start" style="display: none;"></span> </div> <div class="k-edit-label"> <label for="end">End</label> </div> <div class="k-edit-field" data-container-for="end"> <span style="display: none;" class="k-widget k-datetimepicker k-header"> <span class="k-picker-wrap k-state-default"> <input type="text" data-bind="value: end, invisible: isAllDay" data-role="datetimepicker" data-type="date" required="" name="end" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is 6/10/2013 12:00:00 AM"><span class="k-select" unselectable="on"><span class="k-icon k-i-calendar" unselectable="on" role="button">select</span><span class="k-icon k-i-clock" unselectable="on" role="button">select</span></span> </span> </span><span style="" class="k-widget k-datepicker k-header"><span class="k-picker-wrap k-state-default"><input type="text" data-bind="value: end, visible: isAllDay" data-role="datepicker" data-type="date" required="" name="end" data-timezone="Etc/UTC" style="width: 100%;" class="k-input" role="textbox" aria-haspopup="true" aria-expanded="false" aria-disabled="false" aria-readonly="false" aria-label="Current focused date is Monday, June 10, 2013"><span class="k-select" unselectable="on" role="button"><span class="k-icon k-i-calendar" unselectable="on">select</span></span></span></span><span data-bind=" text: endTimezone"></span><span class="k-invalid-msg" data-for="end" style="display: none;"></span> </div> <div class="k-edit-label"> <label for="roomID">Room</label> </div> <div data-container-for="RoomID" class="k-edit-field" id="resourcesContainer"></div> <script> jQuery(function () { var container = jQuery("\#resourcesContainer"); var resources = jQuery("\#scheduler").data("kendoScheduler").resources; console.log(resources[0].dataSource._data); jQuery(kendo.format('<select data-bind="value: {0}" name="{0}">', resources[0].field)) .appendTo(container) .kendoDropDownList({ dataTextField: resources[0].dataTextField, dataValueField: resources[0].dataValueField, dataSource: resources[0].dataSource, valuePrimitive: resources[0].valuePrimitive, optionLabel: "N1one", template: kendo.format('<span class="k-scheduler-mark" style="background-color:\#= data.{0}?{0}:"none" \#"></span>\#={1}\#', resources[0].dataColorField, resources[0].dataTextField) }); }) <\/script></script>
The Title, StartDate, EndDate are all coming through as the correct values but the RoomID is coming through NULL.
When I create a simple select like is passes the value correctly
<select name="RoomID" data-bind="value:RoomID"> <option value="2">Yo</option> <option value="4">Blah</option> <option value="6">Blah</option></select>
Any pointers?

Hi,
I am facing troubles disabling a RadDropDownList using Javascript. The given RadDropDownList is being added as a control from back code file with an ID as shown in attachment.
I am accessing the the element by ID on client side as shown in the attachment.
I have tried a few suggestions like h.disable(); h.disabled = true; h.enable = false; from various online help sources but none of them seemed to work.
Can someone please help me find a way to disable the control?
I want it to work without having to disable the pointer methods to the block.
Thanks in advance,
Swanand Nalawade

[AcceptVerbs("Get")]public ActionResult Orders_Read([DataSourceRequest]DataSourceRequest request){ List<OrderViewModel> OrderList = new List<OrderViewModel>(); OrderList.Add(new OrderViewModel() { Freight =2124, OrderID = 1, ShipCity = "test", ShipName = "Test" }); var dsResult = OrderList.ToDataSourceResult(request); return Json(dsResult);}
@(Html.Kendo().Grid<AdorReactUI.Models.OrderViewModel>() .Name("grid") .AutoBind(false) .Columns(columns => { columns.Bound(p => p.OrderID).Filterable(false); columns.Bound(p => p.Freight); columns.Bound(p => p.ShipName); columns.Bound(p => p.ShipCity); columns.Command(c => c.Edit()); }) .Pageable() .Sortable() .Scrollable() .Filterable() .ToolBar(toolbar => { toolbar.Create(); }) .Editable(editable => editable.Mode(GridEditMode.InLine)) .HtmlAttributes(new { style = "height:550px;" }) .DataSource(dataSource => dataSource .Custom() .Schema(schema => { schema.Model(m => { m.Id(field => field.OrderID); m.Field(field => field.OrderID).Editable(false); }); // schema.Data("Data"); }) .Transport(transport => { transport.Read(read => read.Url("/Grid/Orders_Read").Type(HttpVerbs.Get)); transport.Create(read => read.Url("/Grid/EditingInline_Create").Type(HttpVerbs.Post)); transport.Update(read => read.Url("/Grid/EditingInline_Update").Type(HttpVerbs.Post)); transport.Destroy(read => read.Url("/Grid/EditingInline_Destroy").Type(HttpVerbs.Post)); }) .PageSize(20) ) )

I am attempting to use a grid inside of a hidden div that is expandable. When I load the page with the div hidden, the grid does not size completely. Am I missing something here?
<div class="homegroup" style="margin-bottom: 50px;"> <button type="button" class="collapseGroup">My Worklist</button> <div class="dataSection" style="display: none; height: 600px;"> <div> @(Html.Kendo().Grid<MIR.Models.ReportBaseSummaryModel>() .Name("summaryReportGrid") .Columns(col => { col.Bound(m => m.ReportKey).Title("Report Id").Width(150); }) .HtmlAttributes(new { style = "height: 450px;" }) .Sortable() .Resizable(r => r.Columns(true)) .Scrollable() .Filterable() .DataSource(source => source .Ajax() .ServerOperation(false) .Model(m => m.Id(p => p.HeaderReportKey)) .Read(r => r.Action("LoadReportSummary", "Lookup")) ) ) </div> </div></div><style> .homegroup { width: 100%; border: 1px solid #d3d3d3; border-radius: 5px; } .collapseGroup { width: 100%; max-width: 100%; cursor: pointer; border: none; text-align: left; outline: none; padding-left: 30px; padding-top: 10px; padding-bottom: 10px; height: 50px; background-color: #f2f2f2; } .collapseGroup:after { content: '\002B'; font-weight: bold; float: left; margin-right: 10px; } .active:after { content: "\2212"; } .dataSection { margin: 15px; }</style><script> var coll = document.getElementsByClassName("collapseGroup"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); }</script>
Attached are two images:
Example1: I hid the div by making the display: none; and then expand. The entire height of the grid is not rendered.
Example2: I show the div by making the display: block; and the entire height is rendered properly.
Hi Team,
I have a Kendo grid in batch edit mode and want to save the changes using a Submit button on the form as I also need to validate two other controls outside the Kendo Grid on the click of button. Could you please please advise how can I disable the save button on Grid toolbar and use a Custom button on form to save the Grid changes.
I have tried using javascript function but not working. Below is my view :
@{
ViewBag.Title = Project.Web_v5.Framework.PageTitleHelper.GetPageTitle("PriceEdit", Request.Url.AbsolutePath);
Layout = "~/Views/Shared/_Layout_v2.cshtml";
var sess = new CustomerPortal.SessionManagement();
}
<style>
#grid .k-grid-header, .k-grid-header .k-header {
color: palevioletred;
font-size: large;
}
#inputvaluesbox {
height: 25px;
width:70%;
margin:0;
}
.k-edit-cell input {
width: 100%;
}
</style>
@section Scripts
{
<script type="text/javascript">
@*$(document).ready(function () {
$("#datepicker").closest(".k-widget")
.attr("id", "datepicker_wrapper");
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.value(@ViewBag.WeekEndDate);
});*@
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);
}
}
$(function () {
kendo.culture("en-AU");
});
$("#bEdit").click(function () {
window.location.href = '@Url.Action("PriceEdit", "MarketingPrice")' + '&pContactId=@ViewBag.ContactId';
});
function additionalData() {
return {
stateVal: $('#selectedstate option:selected').text(),
weekendVal: $('#datepicker').val()
};
}
$("#grid").kendoGrid({
edit: function (e) {
$(e.container).find(".k-grid-create").click(
function () {
var res = confirm("update item");
if (!res) {
event.preventDefault();
return false
}
})
}
});
$("#bSave").on("click", function () {
$("#Segment").data("kendoGrid").saveChanges();
});
</script>
}
<div class="col-md-12">
<form>
<div class="form-group col-md-12">
<br />
<h3 class="panel-title">
Form Type : Buyer
</h3>
</div>
<div class="col-md-12">
<div>
<table>
<tr>
<td>
<h3>
Week End Date
@(Html.Kendo().DatePicker().Name("datepicker").Value(ViewBag.WeekEndDate).Format("dd/MM/yyyy").DisableDates(DayOfWeek.Sunday, DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Saturday).HtmlAttributes(new { required = "required", validationmessage = "Week End is required", style = "width:100%;", placeholder = "dd/MM/yyyy" }))
<br />
</h3>
</td>
<td>
</td>
<td>
<h3>
State
@Html.DropDownList("StateList", new SelectList(ViewBag.StateList, "Key","Value", ViewBag.State), new { @class = "form-control", required = "required", validationmessage = "State is required", placeholder = "State", tabindex = "3", @id = "selectedstate", style = "width:250%; height:35px;" })
</h3>
<p>
</p>
</td>
</tr>
</table>
</div>
</div>
<div class="text-right btn-toolbar">
<button id="bLoadPrevious" class="btn btn-sm btn-default" type="button">Fill Last Week’s Figures</button>
<button id="bSave" type="button">Save Data</button>
</div>
<br />
<br />
<div class="form-group col-md-12">
<div style="width:100%;overflow:auto;">
@(Html.Kendo().Grid<Project.Core.EF.weekly_price_data>
()
.Name("Segment")
.Columns(columns =>
{
columns.Bound(p => p._type).Title(" Type");
columns.Bound(p => p._weight).Title(" Weight").Width(140);
columns.Bound(p => p.price_type).Title("Price Type").Width(140);
columns.Bound(p => p.price).Title("Price(cent/kg)").Width(50);
columns.Bound(p => p.number_traded).Title("Numbers").Width(50);
})
.ToolBar(toolbar =>
{
toolbar.Save();
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.HtmlAttributes(new { style = "height:1100px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Group(g => g.Add(p => p._type))
.PageSize(50)
.ServerOperation(false)
.Model(model =>
{
model.Id(p => p.id);
model.Field(p => p.id).Editable(false);
model.Field(p => p.week_end_date);
model.Field(p => p.state);
model.Field(p => p._type).Editable(false);
model.Field(p => p._weight).Editable(false);
model.Field(p => p.price_type).Editable(false);
model.Field(p => p.price);
model.Field(p => p.number_traded);
})
.Events(events => events.Error("error_handler"))
.Create(create => create.Action("Editing_Create", "MarketingPrice", new { id = ViewBag.ContactId }).Data("additionalData"))
.Read(read => read.Action("PriceEdit_Read", "MarketingPrice", new { id = ViewBag.ContactId, pModelId = ViewBag.pModelId }))
.Update(read => read.Action("Editing_Update", "MarketingPrice", new { id = ViewBag.ContactId }).Data("additionalData"))
.Destroy("Editing_Destroy", "MarketingPrice")
)
)
<br />
</div>
<br />
</div>
</form>
</div>
