I have a web page on which some of the drop down lists need normal text, and some of them will be used on touch screens and hence need large text. If I just add the style...
k-popup .k-item { font-size: 24px;}
That sets the fonts for all drop down lists - not just the touchscreen ones. I have tried the following...
.gatehousedropfont.k-popup .k-item { font-size: 24px;}
$("#LoadTipTypeDropDown").kendoDropDownList({ open: function(e) { e.sender.list.addClass("gatehousedropfont"); }});
...but that just removes all the items from the drop down list. Indeed, even the following call removes all the items from the drop down list:
$("#NewExtraVehicle").kendoDropDownList();
Also, looking at the object in the Chrome inspector implies that something like the following might work - but unfortunately it doesn't:
var theList = $("#LoadTipTypeDropDown").kendoDropDownList;theList[0].style.fontSize = "24";
I've long thought the pattern for bundling files, that included the version number was ugly, and was a barrier to quick upgrade of Kendo versions. Now that we have a private nuget, I wanted to make upgrading versions easier.
As an idea I came up with the following : this removes all version constants from the bundling and layout. It would be nice if there was a static Version getter on the Kendo class though :-) Kendo.Version would make it much clearer (hint!)
//BundleConfig.cs var version = typeof(Kendo.Mvc.UrlGenerator).Assembly.GetName().Version; var kendoVersion = string.Format("{0}.{1}.{2}", version.Major, version.Minor, version.Build); bundles.Add(new StyleBundle("~/Content/kendo/"+kendoVersion+"/css").Include( "~/Content/kendo/"+kendoVersion+"/kendo.common.min.css", "~/Content/kendo/"+kendoVersion+"/kendo.default.min.css" )); bundles.Add(new ScriptBundle("~/Scripts/kendo/" + kendoVersion +"/scripts").Include( "~/Scripts/kendo/" + kendoVersion + "/kendo.all.min.js", "~/Scripts/kendo/" + kendoVersion + "/kendo.aspnetmvc.min.js", "~/Scripts/kendo/" + kendoVersion + "/cultures/kendo.culture.en-GB.min.js" )); //_Layout.cshtml@{ var version = typeof(Kendo.Mvc.UrlGenerator).Assembly.GetName().Version; var kendoVersion = string.Format("{0}.{1}.{2}", version.Major, version.Minor, version.Build);}@Styles.Render("~/Content/kendo/" + kendoVersion + "/css")/* ... */@Scripts.Render("~/Scripts/kendo/" + kendoVersion +"/scripts")
@(Html.Kendo().Grid<Central.Models.ProjectsModel>() .Name("Grid") .Columns(columns => { columns.Bound(p => p.projectCode) .HeaderTemplate("Project Code"); columns.Bound(p => p.protocolNo) .HeaderTemplate("Protocol") .ClientTemplate("<div style='width: 100%; height: 20px; overflow: hidden;'>#if(protocolNo !== null) {#<span title='#=protocolNo#'>#=protocolNo#</span>#}#</div>"); columns.Bound(p => p.description) .HeaderTemplate("Description") .ClientTemplate("<div style='width: 100%; height: 20px; overflow: hidden;'>#if(description !== null) {#<span title='#=description#'>#=description#</span>#}#</div>"); columns.Bound(p => p.typeCode) .HeaderTemplate("Type"); columns.Bound(p => p.userCode) .HeaderTemplate("User"); columns.Bound(p => p.contractValue) .ClientTemplate("<div style='text-align: right;'>#= kendo.toString(contractValue, \"n\")#$#=currency# </div>") .HeaderTemplate("<div style='float: right; margin-right: 10px;'>Contract Value</div>"); columns.Command(c => { c.Edit(); c.Destroy(); }) .HtmlAttributes(new { style = "display: none;" }) .Width(1); }) .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("Projects_Read", "Projects")) .Create(create => create.Action("Projects_Create", "Projects")) .Update(update => update.Action("Projects_Update", "Projects")) .Destroy(destroy => destroy.Action("Projects_Destroy", "Projects")) .PageSize(30) .Model(model => { model.Id(p => p.projectCode); model.Field(p => p.projectCode).DefaultValue("#=projectCode#"); }) ) .Pageable() .Filterable() .Sortable() .Resizable(resize => resize.Columns(true)) .Selectable() .Scrollable((scr => scr.Height(500))) .ClientDetailTemplateId("projectsGridDetail") .ToolBar(t => { t.Create(); }) .Editable(e => e.Mode(GridEditMode.PopUp)) .Events(e => { e.Edit(@<text>function(e) { onEdit(e); }</text>); }))<script id="projectsGridDetail" type="text/kendo-tmpl"> @(Html.Kendo().TabStrip() .Name("TabStrip_#=projectCode#") .SelectedIndex(0) .Items(items => { items.Add().Text("Project Details").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Details.cshtml")</text>); items.Add().Text("Sites").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Sites.cshtml")</text>); items.Add().Text("Contact").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Contacts.cshtml")</text>); items.Add().Text("Invoices").Content(@<text>@Html.Partial("~/Views/Projects/ProjectsTabs/Invoices.cshtml")</text>); }) .ToClientTemplate() ) </script>@using Kendo.Mvc.UI<div> @(Html.Kendo().Grid<Central.Models.ProjectsInvoiceModel>() .Name("Invoices_#=projectCode#") .Columns(columns => { columns.Bound(p => p.description) .HeaderTemplate("Description"); columns.Bound(p => p.amount) .HeaderTemplate("Amount") .ClientFooterTemplate("Sum: #=sum# "); columns.Bound(p => p.ubcAmount) .HeaderTemplate("UBC Amount"); columns.Command(p => { p.Edit(); p.Destroy(); }) .Width(158); }) .DataSource(dataSource => dataSource .Ajax() .Aggregates(aggregates => { aggregates.Add(p => p.amount).Sum(); }) .Read(read => read.Action("Invoice_Read", "ProjectsInvoice", new { projectCode = "#=projectCode#" })) // Specify the action method and controller name .Create(create => create.Action("Invoice_Create", "ProjectsInvoice")) .Destroy(destroy => destroy.Action("Invoice_Destroy", "ProjectsInvoice")) .Update(update => update.Action("Invoice_Update", "ProjectsInvoice")) .PageSize(30) .Model(model => { model.Id(p => p.projectInvoiceId); model.Field(p => p.projectCode).DefaultValue("#=projectCode#"); }) ) .ToolBar(toolbar => { toolbar.Create(); }) .Pageable() .HtmlAttributes(new { style = "margin: 7px 0px;" }) .Scrollable(scr => scr.Height(200)) .Filterable() .Sortable() .Editable(edit => { edit.Mode(GridEditMode.PopUp); }) .ToClientTemplate() )</div>I have a grid that is sourced by a List of Objects within my model (local binding). I need to have the editor for the Name column (the only column in the grid) to be a ComboxBox where they can choose from a specified list. I got that part working, however, whenever I leave the combobox, it sets the column to the default value for the name field instead of the chosen item from the combobox. I can not figure out what I am doing wrong.
Here is my grid:
@(Html.Kendo().Grid(Model.Locations) .Name("LocationsGrid") .ToolBar(toolbar => { toolbar.Create().Text("Add Location"); }) .HtmlAttributes(new { style = "height: 150px;" }) .Columns(columns => { columns.Bound(l => l.Name); columns.Command(cmd => cmd.Destroy().Text("<i class='fa fa-trash-o'></i>")).Width(50); }) .Scrollable() .Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false)) .DataSource(ds => ds.Ajax() .Batch(true) .ServerOperation(false) .Model(model => { model.Id(p => p.Id); model.Field(l => l.Name).DefaultValue("Select a Location"); }) .Create(create => create.Action("AddLocationToProcess", "ProjectConfiguration")) .Destroy(destroy => destroy.Action("RemoveLocationFromProcess", "ProjectConfiguration")) ) .Events(events => events.Edit("LocationsGrid_edit")) )
Here is my Editor:
@model int?@(Html.Kendo().ComboBoxFor(model => model) .Name("SweepTriggeredLocationCB_" + new Random().Next()) .DataTextField("Name") .DataValueField("Id") .Placeholder("Select Location...") .Suggest(true) .Filter(FilterType.StartsWith) .DataSource(ds => { ds.Read(read => read.Action("GetAddProcessLocations", "ProjectConfiguration").Data("GetAddLocationData")); }) .Value(Model.HasValue ? Model.Value.ToString() : null) .Events(events => events.Change("StandardComboBox_change")))
Here is the portion of my Model showing the UIHint for the Editor:
[Required(ErrorMessage = "{0} is required.")][NoWhiteSpace(ErrorMessage = "{0} cannot begin or end with a space.")][UIHint("SweepTriggeredLocationEditor")]public string Name { get; set; }
My grid has 2 aggregate Sum() columns which display and work properly - except for when the user updates the grid amount I want the sum to dynamically update when users tab out of the cell they're editing.
I have tried a myGrid.refresh() on the grid Save event and on the grid datasource Change event. I believe its refreshing the grid but not the sums.
The aggregate is added with this code:
.Aggregates(aggregates =>
{
aggregates.Add(expense => expense.allowedamt).Sum();
aggregates.Add(expense => expense.expenseamt).Sum();
}
and the column and clientFooterTemplates are added with this code:
columns.Bound(expense => expense.expenseamt).HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:right;" }).Width(50)
.ClientFooterTemplate("#= kendo.toString(sum, 'C') #").FooterHtmlAttributes(new { style = "text-align:right;" });
columns.Bound(expense => expense.allowedamt).HtmlAttributes(new { style = "text-align:right;" }).HeaderHtmlAttributes(new { style = "text-align:right;" }).Width(50)
.ClientFooterTemplate("#= kendo.toString(sum, 'C') #").FooterHtmlAttributes(new { style = "text-align:right;" });
Any ideas how to get the Grid summary row values to dynamically update ?
Hello
I'm using a kendo dropdownlistfor() inside a scheduler edit template, if I use just the basic dropdown everything works as expected, but if I try to use the templates for the dropdown all I get is undefined when I click to see the options of the dropdown. If I use the same dropdown directly on the page instead of in a template everything works ok with the dropdown template. Why are they not displaying correct in the scheduler edit template.
So the problem is not with the datasource, I get all values from the db, and the code should be fine since it works directly on the page. I guess the only thing wrong with then code is "data.name" when used inside a template since this gives the undefined. What should it be when used inside a template?
Code:
@(Html.Kendo().DropDownListFor(model => model.equipmentId) .HtmlAttributes(new { style = "width: 240px", @class = "showOpsDiv" }) .DataTextField("name") .DataValueField("id") .OptionLabel("Välj Utrustning...") .Value("-1") .DataSource(source => { source.Read(read => { read.Action("GetEquipment", "Home"); }) .ServerFiltering(true); }) .Template("<span class=\"k-state-default\"></span><span class=\"k-state-default\"><h3>#= data.name #</h3></span>") .HtmlAttributes(new { data_value_primitive = "true" }) ) Hi,
I have read the following in the docs:
Kendo UI Grid Integrates a responsive pager, which automatically adjusts to different screen widths and provides the ability to define which columns to be hidden on small view ports. This makes them more flexible for mobile web usage.
I use MVC Core Version of the grid and cannot find a property for the columns to set this?
robert

The text on the Cancel Changes button on an InCell batch editing toolbar changes to a blue color and it is underlined, much like a visited <a> when the text-decoration is not set to none. See attached screenshot.
How can I overwrite this in a stylesheet so that when I move move the mouse off of the button it returns back to its original styling (like the Save Button in the screenshot)?
Thanks,
Shawn
I'm evaluating the spreadsheet component for possible use and I ran into an issue with saving changes to sorted data in the spreadsheet. I'm binding a datasource into a sheet with CRUD references to the controller. When the data is sorted and a user edits a row, on saving the update, the wrong row in the datasource is updated/sent to the controller. Is this a known issue? If so, do you know when this will be corrected?
Thanks.
Scott
