Questions on UI for ASP.NET MVC Forum

8 answers

1.2K+ views

Since all the new web project templates in VS 2013 seem to use Bootstrap it would seem Microsoft have adopted this as their "default" layout template. As such I'd expect the Kendo UI libraries to work seamlessly with Bootstrap.

I have seen some documentation on this but the only guidance I can find on using the Kendo UI menu control with Bootstrap was this unanswered post on StackOverflow:
http://stackoverflow.com/questions/17729394/how-do-i-modify-the-kendo-ui-menus-default-html

So, to restate the question, what is the right way to use the Keno Menu control to put a drop down menu into the Bootstrap nav bar?

Menu

answered on 14 Feb 2019

1 answer

363 views

Styling the Menu

I have been trying for several days to bend the menu to my will, and nothing has worked.

I'm using MVC5, Bootstrap 3, and Telerik UI for MVC (2019.1).

I have a div that is 28px tall, and I'm trying to get the menu to be constrained within that div's height. The problem is that the menu appears to be padded/margined and is 50px tall, regardless of the class styles I've tried to set. There doesn't appear to be any documentation (that I've found) that describes how to re-style the components.

For instance, it would be real nice if I could find a description regarding what to do to change the colors, the sizes, and the positioning. What css classes affect each widget?

Menu

answered on 14 Feb 2019

3 answers

5.9K+ views

System.Web.Mvc v5.2.4.0

Hi!

I'm getting all red squigglies on my CSHTML files but the site is still working without compile-time or runtime errors. I'm getting this warning on CSHTML that has Kendo() used on them:

Warning CS1702

Assuming assembly reference 'System.Web.Mvc, Version=5.2.3.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' used by 'Kendo.Mvc' matches identity 'System.Web.Mvc, Version=5.2.4.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' of 'System.Web.Mvc', you may need to supply runtime policy

Also, maybe not related, but all kendo control is not rendering properly at all: Attached

Here is my Web.Config:

<?xml version="1.0" encoding="utf-8"?>

<configuration>

<configSections>

<section name="log4net" type="log4net.Config.Log4NetConfigurationSectionHandler, log4net" />

</configSections>

<appSettings>

<add key="webpages:Version" value="3.0.0.0" />

<add key="webpages:Enabled" value="false" />

<add key="ClientValidationEnabled" value="true" />

<add key="UnobtrusiveJavaScriptEnabled" value="true" />

</appSettings>

<system.web>

<authentication mode="Windows" />

<authorization>

<deny users="?" />

</authorization>

<compilation debug="true" targetFramework="4.7.1">

<assemblies>

<add assembly="netstandard, Version=2.0.0.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51" />

</assemblies>

</compilation>

<httpRuntime requestValidationMode="4.7.1" targetFramework="4.7.1" encoderType=

"System.Web.Security.AntiXss.AntiXssEncoder, System.Web, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"

/>

<globalization uiCulture="auto:en" culture="en-GB" />

<pages>

<namespaces>

<add namespace="Kendo.Mvc.UI" />

</namespaces>

</pages>

</system.web>

<system.web.extensions>

<scripting>

<webServices>

<jsonSerialization maxJsonLength="2147483644" />

</webServices>

</scripting>

</system.web.extensions>

<system.webServer>

<staticContent>

<remove fileExtension=".woff" />

<remove fileExtension=".woff2" />

<remove fileExtension=".otf" />

<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />

<mimeMap fileExtension=".woff2" mimeType="font/woff2" />

<mimeMap fileExtension=".otf" mimeType="font/otf" />

</staticContent>

<modules>

<remove name="FormsAuthentication" />

</modules>

<httpProtocol>

<customHeaders>

<add name="Node" value="Local" />

</customHeaders>

</httpProtocol>

</system.webServer>

<runtime>

<gcServer enabled="true" />

<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">

<dependentAssembly>

<assemblyIdentity name="System.Web.Optimization" publicKeyToken="31bf3856ad364e35" />

<bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="1.1.0.0" />

</dependentAssembly>

<dependentAssembly>

<assemblyIdentity name="WebGrease" publicKeyToken="31bf3856ad364e35" />

<bindingRedirect oldVersion="0.0.0.0-1.6.5135.21930" newVersion="1.6.5135.21930" />

</dependentAssembly>

<dependentAssembly>

<assemblyIdentity name="Antlr3.Runtime" publicKeyToken="eb42632606e9261f" culture="neutral" />

<bindingRedirect oldVersion="0.0.0.0-3.5.0.2" newVersion="3.5.0.2" />

</dependentAssembly>

<dependentAssembly>

<assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" culture="neutral" />

<bindingRedirect oldVersion="0.0.0.0-11.0.0.0" newVersion="11.0.0.0" />

</dependentAssembly>

<dependentAssembly>

<assemblyIdentity name="AutoMapper" publicKeyToken="be96cd2c38ef1005" culture="neutral" />

<bindingRedirect oldVersion="0.0.0.0-6.2.2.0" newVersion="6.2.2.0" />

</dependentAssembly>

<dependentAssembly>

<assemblyIdentity name="System.Web.Helpers" publicKeyToken="31bf3856ad364e35" />

<bindingRedirect oldVersion="1.0.0.0-3.0.0.0" newVersion="3.0.0.0" />

</dependentAssembly>

<dependentAssembly>

<assemblyIdentity name="System.Web.WebPages" publicKeyToken="31bf3856ad364e35" />

<bindingRedirect oldVersion="1.0.0.0-3.0.0.0" newVersion="3.0.0.0" />

</dependentAssembly>

<dependentAssembly>

<assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />

<bindingRedirect oldVersion="0.0.0.0-5.2.4.0" newVersion="5.2.4.0" />

</dependentAssembly>

</assemblyBinding>

</runtime>

</configuration>

And here is the Views\Web.Config

<?xml version="1.0"?>

<configuration>

<configSections>

<sectionGroup name="system.web.webPages.razor" type=

"System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

>

<section name="host" type=

"System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

requirePermission="false" />

<section name="pages" type=

"System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

requirePermission="false" />

</sectionGroup>

</configSections>

<system.web.webPages.razor>

<host factoryType=

"System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=5.2.4.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"

/>

<pages pageBaseType="System.Web.Mvc.WebViewPage">

<namespaces>

<add namespace="System.Web.Mvc" />

<add namespace="System.Web.Mvc.Ajax" />

<add namespace="System.Web.Mvc.Html" />

<add namespace="System.Web.Optimization"/>

<add namespace="System.Web.Routing" />

<add namespace="DA.Services.IBS.Web.FinancePortalFull" />

<add namespace="Kendo.Mvc.UI" />

</namespaces>

</pages>

</system.web.webPages.razor>

<appSettings>

<add key="webpages:Enabled" value="false" />

</appSettings>

<system.webServer>

<handlers>

<remove name="BlockViewHandler"/>

<add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />

</handlers>

</system.webServer>

<system.web>

<compilation>

<assemblies>

<add assembly="System.Web.Mvc, Version=5.2.4.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />

</assemblies>

</compilation>

</system.web>

</configuration>

I'm not using v5.2.3.0 of System.Web.Mvc. I'm on Kendo v2018.1.117.545

_Layout.s

@using DA.Services.IBS.Web.FinancePortalFull.Helpers

<!DOCTYPE html>

<html prefix="og: http://ogp.me/ns#">

<head>

<title>@ViewBag.Title | Finance System</title>

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>

@if (IsSectionDefined("Styles"))

{

@RenderSection("Styles", required: false)

}

<link href="@Url.Content("~/Scripts/plugins/jquery-ui/jquery-ui.min.css")" rel="stylesheet" type="text/css" />

@Styles.Render("~/Content/css")

@Styles.Render("~/Content/plugins/kendo/css")

@Styles.Render("~/Content/plugins/font-awesome/css")

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/bootstrap")

@Scripts.Render("~/bundles/kendo")

</head>

<body class="md-skin">

<div id="wrapper" class="@Html.PageClass()">

@Html.Partial("_Navigation")

<div id="page-wrapper" class="gray-bg @ViewBag.SpecialClass">

@Html.Partial("_TopNavbar")

@Html.Partial("_NotificationBox")

@RenderBody()

@Html.Partial("_Footer")

</div>

@{

<input id="BASE_URL" type="hidden" value="@(string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~/")))" />

}

<script type="text/javascript">

window.applicationBaseUrl = @Html.Raw(HttpUtility.JavaScriptStringEncode(new Uri(new Uri(Context.Request.Url.GetLeftPart(UriPartial.Authority)), Url.Content("~/")).ToString(), true));

window.BASE_URL = $("#BASE_URL").val();

</script>

</div>

@Scripts.Render("~/plugins/slimScroll")

@Scripts.Render("~/bundles/inspinia")

@RenderSection("scripts", required: false)

</body>

</html>

Bundles:

// Kendo UI Scripts

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(

"~/Scripts/plugins/kendo/kendo.all.min.js",

"~/Scripts/plugins/kendo/kendo.aspnetmvc.min.js"));

// CSS style (kendo)

bundles.Add(new StyleBundle("~/Content/plugins/kendo/css").Include(

"~/Content/plugins/kendo/kendo.common-material.min.css",

"~/Content/plugins/kendo/kendo.material.min.css",

"~/Content/plugins/kendo/kendo.dataviz.material.min.css",

"~/Content/plugins/kendo/kendo.mobile.all.min.css",

"~/Content/plugins/kendo/kendo.mobile.material.min.css",

"~/Content/plugins/kendo/kendo.material-mobile.min.css"));

As per chrome's Network tab in dev-mode, there is no missing file and no errors on the console tab either.

General Discussions

answered on 14 Feb 2019

2 answers

474 views

[Solved] Send Selected Items to Controller Using Pop-Up Editing

I'm working on a solution where I'm using pop-up editing. On create the the pop-up template appears and the Multi-select dropdown loads with data as shown below.

@(Html.Kendo().MultiSelect().Name("permissionsDropDown")

.Placeholder("Select Permissions...")

.AutoClose(false)

.DataTextField("Name")

.DataValueField("Id")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetApplicationPermissions", "PermissionTemplates").Data("addApplicationIdToRequest");

})

.ServerFiltering(false);

})

)

This loads the correct values into the multi select dropdown object correctly. If I select some items they are selected correctly but when I click on the 'Create' button the values are not passed to the controller correctly. The correct number of items is passed to the controller but the value for each is 0 as shown in the attached image.

MultiSelect

answered on 13 Feb 2019

1 answer

1.8K+ views

[Solved] Suspend execution until dialog closed

I'm trying to replace my javascript alert calls with calls to a custom kendo dialog. The difference is that when a javascript alert is called, all javascript execution is suspended until the user clicks ok. With kendo dialogs, execution continues even if the dialog is set to modal. Is there a way to "wait" for the user to click ok before resuming execution of the rest of the javascript? Having the call to the kendo dialog as the last line in the function isn't always an option. Here is the dialog code:

@(Html.Kendo().Dialog()

.Name("alertDialog")

.Title("FastWeigh 10")

.HtmlAttributes(new { @class = "kAlert"})

.Width(400)

.Modal(true)

.Closable(true)

.Visible(false)

.Actions(actions =>

{

actions.Add().Text("OK").Primary(true);

})

)

And the dialog call itself:

function kAlert(message) {

var kDialog = $("#alertDialog").data("kendoDialog");

kDialog.content("<div class='fwAlert'><span class='fa fa-info-circle'/><p class='alertText'>" + message + "</p></div>");

return kDialog.open().result;

}

Dialog

answered on 13 Feb 2019

1 answer

226 views

[Solved] Reminder

Is there a way to have reminders for events in the scheduler similar to the Scheduler for Ajax has?

Scheduler

answered on 13 Feb 2019

1 answer

121 views

Duplicated Grid Pager Controls

Hello,

I'm having troubles after update with the pagination controls in the grids.

there is a same thread in below link;

https://www.telerik.com/forums/duplicated-grid-pager-controls

my css in page;

"~/Content/kendo/2018.3.1017/kendo.common.min.css"

"~/Content/kendo/2018.3.1017/kendo.default.min.css"

grid pagination blok;

.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))

Here is an image of the grid pagination with the duplicated controls.

Thank you!

Grid

answered on 13 Feb 2019

1 answer

110 views

Confused and just a little annoyed - well... a LOT annoyed

Using Telerik UI for MVC5

The template packaged withe the library generates a project that uses bootstrap 3, and the default solution looks like MVC3/4 (btw, that's annoying as hell). Is it even a MVC5 project?

I know there's a menu option in the VS extension that allows you to convert an existing project to be a Telerik project, but what happens regarding bootstrap if the project is currently using bootstrap 4? The conversion process adds bootstrap style files for kendo. Are they for v3, or does it use v4 versions of those files when bootstrap 4 is being used by the project?

For $1100 I expected better. MUCH better. I shouldn't have to ask these kinds of questions.

Is there a template available for MVC5 and bootstrap 4?

General Discussions

answered on 12 Feb 2019

6 answers

452 views

ListView Invalid Template When Using Apostrophes

I am getting an invalid template error when I am creating a ListView in which the Editor Template contains a select list that is bound to a datasource that contains elements with an apostrophe. It looks like the text is getting escaped, as the error message shows it being created as "<option value="Conveners' Corner (New)">Conveners' Corner (New)</option>", but I don't know if it's Kendo doing the escaping or MVC or something else. This encode contains a # sign though, and that doesn't get escaped, which causes the error.

Is this a bug with the ListView control? Is there some other event where I can escape the escaped text to put a \\ before an # characters?

ListView

answered on 12 Feb 2019

1 answer

352 views

Dialogs always visible

I have a page with a pair of dialog controls on it. They "pop-up" into the center of the screen and work as they should, aside from the fact they are also constantly visible at the bottom of the page, overlapping each other.

Here's the definitions:

@(Html.Kendo().Dialog()

.Name("confirmVoid")

.Title("Void Ticket")

.Content("Are you sure you want to void this ticket?")

.Width(300)

.Modal(true)

.Visible(false)

.Actions(action =>

{

action.Add().Text("Yes").Action("onYesVoid");

action.Add().Text("No");