
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>

I would like to combine a stacked bar and line chart in the same graph. I am able to generate the stacked bars, however, I am having difficulties generating the line graph. The data for the chart is fed from the Model. Any help is appreciated.
Here is the "View"
01.@(Html.Kendo().Chart<MyModelName>()02. .Name("MyChartName")03. .AutoBind(true)04. .Legend(legend => legend05. .Visible(true)06. )07. .DataSource(ds => ds08. .Read(read => read.Action("MyAction", "MyController"))09. .Group(group => group.Add(model => model.Country))10. )11. .SeriesDefaults(seriesDefaults =>12. seriesDefaults.Column().Stack(true)13. )14. .Series(series =>15. {16. series17. .Column(model => model.ValueAmount)18. .CategoryField("ValueYearMonth")19. .Labels(labels => labels20. .Visible(true)21. .Background("transparent").Visible(true)22. .Position(ChartBarLabelsPosition.OutsideEnd))23. ;24. series25. .Line(model => <!!! NOT SURE HERE !!!>) //model.ValueAmount does not work26. //.Line (new int[] { 35, 25, 50, -10, 15, 5, 35 }) //27. .Color("#ff1c1c");28. 29. })30. .CategoryAxis(axis => axis31. .Labels(label => label32. .Position(ChartAxisLabelsPosition.Start)33. )34. .MajorGridLines(lines => lines.Visible(true))35. .Line(line => line.Visible(false))36. .Visible(true)37. )38. .ValueAxis(axis => axis.Numeric()39. .MajorGridLines(lines => lines.Visible(false))40. .Visible(true)41. )42. .Tooltip(tooltip => tooltip43. .Visible(true)44. )45. .Events(events => events46. .DataBound("onDataBoundStackedChart")47. )48. )
The Model:
01.public class MyModel02.{03. public string Country { get; set; }04. public decimal ValueAmount { get; set; }05. public string Color { get; set; }06. public DateTime ValueDate { get; set; }07. public int ValueYearMonth { get; set; }08. public decimal GlobalValueAmountByMonth { get; set; }09.}
And the Controller reads the data into the Model and "return Json(result);"
Thanks in advance,
Ricky


Hello!
I'd like to create a tooltip displaying information about a task-item (event-item?) in the scheduler, however i have run into some problems.
Based on the demos you provide that shows the source for how to create the tooltip I tried to createa tooltip for the scheduled events inside of my scheduler. The code for the tooltip looks like this:
@(Html.Kendo().Tooltip() .For("div.k-scheduler-content") .Filter("div.k-event") .Position(TooltipPosition.Top) .Width(120))Since this is not working, im assuming that it is incorrect. I also tried doing it like this:
@(Html.Kendo().Tooltip() .For("div.k-scheduler-content") .Filter("[data-uid=]") .Position(TooltipPosition.Top) .Width(120))This did not work either.
Thanks for helping me.
