Hi, I would like to scrolling a Kendo UI MVC Grid vertically but not horizontally.
.Scrollable(scroll => scroll.Height(80).Enabled(true)) make it scrolls vertically and horizontally.

Hi,
I'm using kendo ui scheduller custom editor template.
How can I change the popup title from defaut (event) to (My Task Name) ?
See attached file
Best regards

Hi, is it posible to have
(Html.Kendo().DatePickerFor(model => model.BeginDate)
with a masked input?
I want to have the option to write the date but with a mask like 00/00/0000
Thanks

Hi Guys recently i have been battling with adding a kendo grid with upload on a toolbar within a kendo ui window. I have a command button on the main grid which when clicked it shows the window that has a grid inside. Please see below the code,
colums.Command(cmd => { cmd.Edit(); cmd.Custom("Upload images").Click("UploadImages"); //cmd.Custom("Upload images").SendDataKeys(true).Click("Upload images"); }).Title("Actions");I have this code on the main grid, when clicked it shows the pop windowand the code for the window,
@{Html.Kendo().Window().Name("AuditPic") .Title("AuditPictureResult Image") .Visible(false) .Modal(true) .Draggable(true) .Width(800).Height(800) .Content((Html.Kendo().Grid<KendoUIApp1_Test.Models.AuditPicIncidentModel>() .Name("Audit") .Columns(columns => { columns.Bound(b => b.AuditResultPictureID); columns.Bound(b => b.FileName).Title("File Name").ClientTemplate("<img src ='" + Url.Content("~/Images/") + "\\#=FileName\\#' height='62' width='62'/>"); columns.Bound(b => b.PictureCaption).Title("Picture Caption").HtmlAttributes(new { style = "overflow: hidden; text-overflow: ellipsis;white-space:nowrap;" }).EditorTemplateName("ConfigurationSettingItemEditor"); columns.Bound(b => b.ReplID); columns.Command(command => command.Destroy()).Width(100); }) .Pageable() .Sortable() .Scrollable() .Filterable() .Selectable() .DataSource(dataSource => dataSource .Ajax() .Model(model => { model.Id(m => m.AuditResultPictureID); }) .Read(read => read.Action("ConfigurationItem_Read", "Home", new { SiteAuditID = "#=SiteAuditID#", QuestionID = "#=QuestionID#" })) .Destroy(update => update.Action("FilesDestroy", "Home")) )).ToHtmlString()).Render(); }the function for the pop up and reading the data but it doesnt show any data on the grid function UploadImages(e) { e.preventDefault(); var dataItem = this.dataItem($(e.currentTarget).closest("tr")); var wnd = $("#AuditPic").data("kendoWindow"); @* wnd.refresh({ url: '@Url.Action("ConfigurationItem_Read","Home")', data: { SiteAuditID: dataItem.SiteAuditID, QuestionID: dataItem.QuestionID } });*@ // wnd.content(detailstemplate(dataItem)); wnd.center().open(); $.ajax({ type: "POST", data: { SiteAuditID: JSON.parse(dataItem.SiteAuditID), QuestionID: JSON.parse(dataItem.QuestionID) }, //gets the value of the field "Department" url: '@Url.Action("ConfigurationItem_Read","Home")', success: function (result) { // console.log(result); // var DepartmentID = JSON.parse(model.DepartmentID); //arg.model.set("field name as string", "value as appropriate data type"); //alert("success:" + DepartmentID); } }) }Hi!
When the user updates a field of a new (create action) or existing (update action) data record, a litte red flag is shown to indicate that the changes haven't been sent to the server yet.
How can I make these flags keep staying after the user clicked on "Save changes" in case a server side error (e.g. validation) occurred, and therefore to signal the user that he/she has to correct its changes and click on "Save changes" again?
(I am working with DataTables)
Best,
Kaan
During testing of our application, user feedback has requested that when using a grid with numeric text-boxes with in-line editing, the values are selected when the user enters a field, or tabs to the next one.
With other text controls this is default behaviour, but not with the numeric text box. (a huge failing of this control).
I have tried the 'solution' proposed in the documentation (shown below)
$(function () { //wire focus of all numerictextbox widgets on the page $("input[type=text]").bind("focus", function () { var input = $(this); clearTimeout(input.data("selectTimeId")); //stop started time out if any var selectTimeId = setTimeout(function () { input.select(); }); input.data("selectTimeId", selectTimeId); }).blur(function (e) { clearTimeout($(this).data("selectTimeId")); //stop started timeout });})However, the page is very complex, and this doesn't work. It looks as though the data is selected for a split second, but then becomes unselected again.
The Grid is in a template, defined as:-
<script id="KPITrackerTemplate" type="text/kendo-tmpl"> <div style="font-size:x-small;"> @(Html.Kendo().Grid<CIPAndRecovery.Models.vKPI_Tracker>() .Name("Data_#=Id#") .HtmlAttributes(new { style = "font-weight:normal" }) .Events(e => e.DataBound("expandAll")) .Events(e => e.DataBound("onKPITracker_Databound")) .Columns(c => { c.Bound(o => o.Id).Title("Id").Hidden(true); c.Bound(o => o.KPI_Id).Title("AccountDetail Id").Hidden(true); c.Bound(o => o.TrackerType).Title("Type").Width(60); c.Bound(o => o.M1).EditorTemplateName("DecimalMinus"); c.Bound(o => o.M2).EditorTemplateName("DecimalMinus"); c.Bound(o => o.M3).EditorTemplateName("DecimalMinus"); c.Bound(o => o.M4).EditorTemplateName("DecimalMinus"); c.Bound(o => o.M5).EditorTemplateName("DecimalMinus"); c.Bound(o => o.M6).EditorTemplateName("DecimalMinus"); c.Bound(o => o.M7).EditorTemplateName("DecimalMinus"); c.Bound(o => o.M8).EditorTemplateName("DecimalMinus"); c.Bound(o => o.M9).EditorTemplateName("DecimalMinus"); c.Bound(o => o.M10).EditorTemplateName("DecimalMinus"); c.Bound(o => o.M11).EditorTemplateName("DecimalMinus"); c.Bound(o => o.M12).EditorTemplateName("DecimalMinus"); c.Command(command => { command.Edit().Text(" ").CancelText(" ").UpdateText(" "); }).Title("Edit").Width(90); }) //.ToolBar(toolbar => //{ // toolbar.Create(); // //toolbar.Save().SaveText(" ").Text(" ").CancelText(" "); //}) .Editable(editable => editable.Mode(GridEditMode.InLine)) .DataSource(dataSource => dataSource .Ajax() .Events(e => e.RequestEnd("onKPITrackerChange(\"Data_#=Id#\")")) //.Events(e => e.RequestStart("requestStartHandler(\"grid\")")) //.Batch(true) .PageSize(3) .Sort(s=>s.Add(p=>p.SortOrder)) .Model(m => { m.Id(p => p.Id); m.Field(e => e.TrackerType).Editable(false); }) .Read(read => read.Action("GetKPITrackerList", "PlanActions", new { KPIId = "#= Id #" })) .Create(create => create.Action("InsertKPITracker", "PlanActions", new { KPIId = "#= Id #" }).Type(HttpVerbs.Post)) .Update(update => update.Action("UpdateKPITracker", "PlanActions").Type(HttpVerbs.Post)) //.Destroy(delete => delete.Action("DeleteKPITracker", "PlanActions")) ) //.Pageable() //.Groupable() .ToClientTemplate() ) </div></script>The DecimalMinus is defined in the editorTemplates folder as:-
@model decimal?@(Html.Kendo().NumericTextBoxFor(m => m) .HtmlAttributes(new { style = "width:100%" }) .Spinners(false) .Decimals(2) )How can I achieve the desired behaviour?
Thanks
Hi,
When I add the option ".Selectable()" to my grid it does not render. Any ideas? Here is the code I am using to define the grid:
@(Html.Kendo().Grid<TEAMSV2.Models.NotYetInvoicedGridDTO>() .Name(Section + TabName + "Grid") .HtmlAttributes(new { style = "border-width: 0px;" }) .DataSource(datasource => datasource .Ajax() .Read(read => { read.Action("GetGridData", "TeamsV2", new { grid = Section + "_" + TabName }).Type(HttpVerbs.Post); }) .Sort(sort => sort.Add("Created").Descending()) .PageSize(120) .ServerOperation(false) ) .Columns(columns => { columns.Template(e => { }).Width(57).ClientTemplate(Html.Partial(ColumnTemplatePath + "IconsTemplate").ToHtmlString()); columns.Bound(entry => entry.QuoteType).Title("Type").Width(100).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "QuoteTypeTemplate").ToHtmlString()); columns.Bound(entry => entry.Client).Title("Client").Width(100).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "ClientTemplate").ToHtmlString()); columns.Bound(entry => entry.Address).Title("Site").Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "SiteTemplate").ToHtmlString()); columns.Bound(entry => entry.Postcode).Title("Postcode").Width(100).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "PostcodeTemplate").ToHtmlString()); columns.Bound(entry => entry.Project).Title("Project").Width(100).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "ProjectTemplate").ToHtmlString()); columns.Bound(entry => entry.JobNoFormatted).Title("Job No.").Width(80).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "JobNoTemplate").ToHtmlString()); columns.Bound(entry => entry.ClientOrderNo).Title("Client Order No.").Width(80).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "ClientOrderNoTemplate").ToHtmlString()); columns.Bound(entry => entry.Value).Title("Value").Width(100).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "ValueTemplate").ToHtmlString()); columns.Bound(entry => entry.Created).Title("Date").Width(80).Template(e => { }).ClientTemplate(Html.Partial(ColumnTemplatePath + "CreatedTemplate").ToHtmlString()); columns.Template(e => { }).Title(" ").Width(35).ClientTemplate(Html.Partial(ColumnTemplatePath + "SelectorTemplate").ToHtmlString()); }) .ClientDetailTemplateId(Section + TabName + "DetailTemplate") .Sortable() .ToolBar(t => t .Template(Html.Partial(ColumnTemplatePath + "ToolsTemplate").ToHtmlString())) .Pageable(p => p .Refresh(true) .PageSizes(new[] { 15, 30, 60, 120 }) .ButtonCount(5)) .Events(e => e .ExcelExport("excelExport") .DataBound(Section + TabName + "Databound")) .Excel(ex => ex .FileName(Section + TabName + ".xlsx") .AllPages(true)) .Selectable())
And here is the error I get from the Chrome console:
kendo.custom.min.js:4 - Uncaught TypeError: Cannot read property 'parseOptions' of undefined
We are using version 2015.1.429 of the kendo tools.
Thanks,
Mark.

I have an MVC project that implements a database-driven questionnaire for legal contracts using Kendo MVC for ASP.NET version 2016.2.714. I am running into an odd rendering problem with the Tab Strip when I mix programmatic tab selection with manual tab selection.
The questionnaire is arranged into sections, sub-sections, and questions with answers. The user is expected to read a contract presented on the page and answer all of the “required” questions. Because there are about 100 questions on this thing (lawyers!), we allow the user to save a partially-entered questionnaire and return to it later. Because there are so many questions, there is a lot of vertical scrolling going on.
My page uses a vertically-arranged Kendo Splitter to separate the questionnaire from the contract document. Inside the Splitter, a Kendo Tab Strip organizes the questionnaire’s sections, which contain varying numbers of questions. Many partial views are used to render the questionnaire’s overall structure and content. A Kendo Progress Bar is used to display the user’s progress in answering all required questions, and we also prompt the user when they submit to remind them when the questionnaire isn’t 100% entered. If the user cancels that prompt, they can continue answering questions.
During testing, our customer observed that when “required” questions haven’t been answered, the user didn’t know where to look for a missing answer in the sea of questions. So I am implementing a mechanism to display the first unanswered question. I do this by scrolling the Kendo Tab’s DIV that is containing my questionnaire’s section content. So far, so good.
It’s all working perfectly except for one strange thing… the Tab Strip control. I knew that if the first unanswered question was on a different section (i.e. another Kendo Tab) than the one being viewed, that I would have to programmatically select that tab before scrolling its contents. Unfortunately, I have encountered a dramatic sizing anomaly in Kendo.
Out of the three questionnaire sections, one is very tall and the other two are short. I have discovered that if I am viewing either of the two short sections, then initiate the code to bring me to the first unanswered question (which is in the tallest section), the tall section shows just fine. But if I then click the Tab Strip to view the short section I just came from, it’s totally empty! The remaining short section is unaffected until I perform the same sequence of steps on that section. When I do, both short sections become zero pixels tall.
What I observed by using Internet Explorer’s DOM explorer was something strange happening to the “k-content” DIV in the Tab Strip when I use its “select()” method in JavaScript. For the tab I am currently viewing when my scripts runs, it gets a “height: auto” attribute added to it (where none existed before). The Tab Strip then switches to the desired tab as expected. But if I then manually click back to that original tab, its “height: auto” attribute is replaced with a “height: 0px” attribute and I see no content under that tab.
If I use the DOM explorer to remove the height attribute altogether, the content under that tab is restored to its normal appearance. But if I continue to click on tabs, the “height” attribute is immediately re-introduced.
None of this “height” attribute stuff happens if I click on the
tabs manually. Only if I programmatically select one with script does the
problem begin.
The Razor for my Tab Strip looks like this (see below). This
code actually lives in a partial view that the Kendo Splitter presents, so
basically the Tab is surrounded by the Splitter. I experimented with using no tab
animation, to no avail.
@(Html.Kendo().TabStrip()
.Name("uxSections")
.SelectedIndex(0)
.Animation(a => a.Open(e =>
e.Fade(FadeDirection.In).Duration(AnimationDuration.Fast)))
.Items(t =>
{
foreach (SectionViewModel sectionViewModel in
Model.QuestionnaireRevision.Sections.OrderBy(s => s.SortOrder))
{
t.Add()
.Text(sectionViewModel.Description)
.HtmlAttributes(new
{
id =
$"uxSectionTab{sectionViewModel.SectionId}"
})
.Content(Html.Partial("_QuestionnaireSection",
sectionViewModel).ToHtmlString());
}
})
)
I tried stripping my JavaScript code down to the barest essentials (and hard-coded stuff just in case), and what I was left with consists of the following JavaScript statements. Section 2 is the tall section I am switching to. I removed all the code that tries scrolling.
var
sectionId = 2;
var
tabStrip = $("#uxSections").kendoTabStrip().data("kendoTabStrip");
var item
= tabStrip.tabGroup.find("#uxSectionTab" + sectionId);
tabStrip.select(item.index());
If I click on one of the short sections and trigger this code (which takes me to the tall section), then when I manually click back on the short section’s tab, its contents are zero pixels tall.
I have a function that takes an id of a node, and expands the treeview so the node is showing. This is necessary as I need to refresh the treeview as items are added and edited.
I'm loading all the data in one go, from am AJAX call.
The code works when fired from a button, however I need it to be fired once the treeview data has finished loading. Unfortunately the onDataBound event seems to fire multiple times, depending on how many nodes the treeview contains. I did try using the datasource requestEnd event, however this seems to fire before the onDataBound events.
How can I detect that the treeview data has loaded, and the treeview is ready to have my expand function called?
The treeview definition is:-
@(Html.Kendo().TreeView() .Name("Treeview") .ExpandAll(false) .LoadOnDemand(false) .HtmlAttributes(new { style = "display: inline-block;" }) .DataTextField("Text") .Events(e => { e.DragStart("menuDragStart"); e.DataBound("onDataBound"); }) .DragAndDrop(true) .DataImageUrlField("ImageUrl") .DataSource(ds => ds .Model(m => m .Id("Id") .HasChildren("HasChildren") .Children("Items") ) .Events(e=>e.RequestEnd("requestEnd")) .Read(r => r.Action("GetMenuTreeItems", "Menu") ) ) .HtmlAttributes(new { style = "width:480px;height:600px;" }) )Thanks
