Questions on UI for ASP.NET MVC Forum

8 answers

1.5K+ views

DropDownList with Server Filtering on Bootstrap Modal

Hi there,

We are using Q2 2014 MVC official release and are having an issue with filtering on a dropdownlist when this is on a Twitter Bootstrap modal.

Code sample:

Editor Template:

@model string

@(Html.Kendo().DropDownListFor(m => m)

.DataTextField("Username")

.DataValueField("UserDetailId")

.OptionLabel("-- Please select --")

.Filter("contains")

.DataSource(source =>

{

source.Read(read =>

{

read.Action("Search", "User", new { area = "Search" });

})

.ServerFiltering(true);

})

)

Modal form:

@model SelectUserModel

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

<h4 class="modal-title">Select User</h4>

</div>

@using (Html.BeginForm())

{

if (Html.ViewData.ModelState.Any(m => m.Key == string.Empty))

{

<div class="row">

<div class="form-group col-md-12 alert alert-danger">Error:@Html.ValidationSummary()</div>

</div>

}

<div class="modal-body">

<div class="form-vertical">

<div class="row">

<div class="form-group">

<div class="col-md-6 ">

@Html.LabelFor(model => model.UserDetailId)

@Html.EditorFor(model => model.UserDetailId)

@Html.ValidationMessageFor(model => model.UserDetailId)

</div>

<div class="modal-footer">

@Html.SubmitButton()

@Html.ModalCancelButton()

</div>

}

The dropdownlist renders correctly and works fine in Chrome and Firefox. However, in IE 9-11 the dropdown opens when the arrow is clicked but immediately closes again.

Any ideas?

Thanks,

Paul

DropDownList

answered on 07 Nov 2018

1 answer

132 views

Donut Chart Tool Tip Position is Inconsistent.

I found this problem on a simple donut chart I was creating, but found that the demo linked below has the same issue:

https://demos.telerik.com/aspnet-mvc/donut-charts/donut-labels

When hovering over each of the categories in the chart, the proximity of the tool tip to the graph is inconsistent. The 'tennis', 'basketball' and 'rugby' tool tips are a few pixels of white space away from the graph, the tool tip for 'volleyball' is a bit closer to the graph and the corner of the tool tip for 'football' is touching the graph.

Ultimately, I would like a way to make the spacing to be consistent. However, if there is a way to increase the amount of space to ensure that none of the tool tips are touching the graph that would work as well.

Thanks!

Chart

answered on 07 Nov 2018

1 answer

245 views

Unable to use Kendo Editor in asp.net mvc core

Hi, I attempted to use Kendo-editor control in my asp.net mvc core application. I added the control to a cshtml file in the simple form.

<kendo-editor name="editor">

</kendo-editor>

But when starting the web, there is an error in the console:

bundle.js:39 Uncaught TypeError: e.kendoSelectBox is not a function
at Object.initialize (bundle.js:39)
at HTMLSelectElement.<anonymous> (bundle.js:39)
at Function.each (bundle.js:28)
at xe.fn.init.each (bundle.js:28)
at init.bindTo (bundle.js:39)
at new init (bundle.js:39)
at HTMLTextAreaElement.<anonymous> (bundle.js:1)
at Function.each (bundle.js:28)
at xe.fn.init.each (bundle.js:28)
at xe.fn.init.e.fn.(:44398/anonymous function) [as kendoEditor] (https://localhost:44398/bundle.js:

The same error is in both chrome and IE.

FYI: I am able to use other controls, such as dropdownlist, grid, without issue.

See the attachment for the display of the kendo-editor.

What step did I miss?

Thanks,

Wei

Editor

answered on 06 Nov 2018

3 answers

957 views

Kendo UI Grid Pager options are not translated

Hi,

I have a problem with kendo ui grid where the pager options are not getting translated based on culture.

options like: "items per page", Pager Buttons tooltips: "Next", "Previous", "Last", "First" and "Refresh" are not translated.

I am using Kendo Version: 2018.2.620

Could you Please help me out.

Thanks for helping.

Grid

answered on 05 Nov 2018

4 answers

134 views

Invalid sort param throws exception

We have a simple kendo MVC grid works fine. However, if a bot/scan adds some normally invalid parameters to the querystring, the page throws an exception.

You can see that in action with the Telerik demo page:

This works

https://demos.telerik.com/aspnet-mvc/grid

This throws an exception. If you examine the console, you'll see a 500 error

https://demos.telerik.com/aspnet-mvc/grid?grid-sort=testsort

"testsort" is not a valid column, thus an exception occurs.

The above example isn't *exactly* what's happening with our grid since our grid is bound to a server side Model rather than an ajax source, but the concept is the same. In our page, the Kendo grid throws the error (rather than the ajax source) and the error is

Invalid property or field - '[invalid sort parameter passed in]' for type: [our model]

What is the best way to handle this since the Telerik Grid doesn't handle it automatically? I hate to wrap every grid in a try/catch just because the telerik control doesn't handle an invalid sort param, but I can certainly do that if that's the only option.

Grid

answered on 05 Nov 2018

1 answer

1.8K+ views

WebComponentsIcons not appearing

I'm having issue with getting WebComponentsIcons to appear in a testing environment after publishing. It works fine in dev.

I've looked everywhere to find the problem but with no success.

The font files are where the should be according to @font-face in kendo-common-bootstrap.css (/Content/web/fonts/glyphs/)

I haven't changed or overridden any of the css classes such as .k-tool-icon.

The class assignments are kendo - provided. I did not choose any of the classes that include WebComponentsIcons

I'm a little stumped here and and unsure of what I should be looking at for a solution.

I can't provide code due to security policy, but if I could get some general pointers to what I should be looking at that would be a huge help

General Discussions

answered on 02 Nov 2018

1 answer

271 views

All day row formatting

Hi,

I'm trying to figure out how to get the "All Day" section in the Days and Week view to have a max height.

I've narrowed it down to the following CSS selector but i'm wondering if there's an easier way to achieve this.

.k-scheduler-dayview > tbody > tr:nth-child(1) > td > .k-scheduler-times > .k-scheduler-table > tbody > tr:nth-child(2),

.k-scheduler-weekview > tbody > tr:nth-child(1) > td > .k-scheduler-times > .k-scheduler-table > tbody > tr:nth-child(2) {

height: 100px !important;

overflow-y: auto !important;

}

.k-scheduler-header > .k-scheduler-header-wrap > div {

height: 100px !important;

overflow-y: auto !important;

}

One issue i've found going with this method is that on pages where there are no all day events, the height of the row does not correspond to the active area of the row inside it - which means the active area is just 1 row height - i.e. you can't click on the whole all day row to create a new item.

I've tried using the max-height property too but this doesn't seem to work.

Is the correct way to be setting row heights or is there an easier option?

Thanks

Scheduler

answered on 02 Nov 2018

1 answer

186 views

Programmatically changing hours shown on screen

I'm trying to create a scheduler to present shift work for users

This view will require 2 sets of data to show up, one from 7am to 7pm and one from 7pm to 7am.

Is there a way to programmatically set the start and end times for the screen using Javascript so that when the clock goes to 7am, the view shows 7am to 7pm, and when it goes to 7pm, the screen automatically jumps to 7pm - 7am?

If the above is not possible, what is the closest way that we can achieve the above functionality?

Thanks

Scheduler

answered on 02 Nov 2018

5 answers

958 views

[Solved] Post All Gridview Data to Controller

Hi,
I purchased this product and I have some problems.
1. How to post all data in KendoGrid back to controller on button click? The button is html input button. Can anybody provide a very simple sample, please?
2. I also use client template for editing and deleting because I use custom pop up window. So, in each row there are two more columns for editing and deleting single row selected by user. Can I also send one complete row as Json format or single model to the controller? I have no idea how to do it.

Thanks in advance.

Grid

answered on 01 Nov 2018

2 answers

7.5K+ views

The field must be a date - format dd/MM/yyyy

Hi,

I have read as many of the post surrounding this issue that I could find and still have no clue as to whether there is a solution that has been supplied for what seems to be a simple enough request. I simple want the DatePicker to format the date as dd/MM/yyyy (Culture en-IE), yet the validation keeps throwing this error. Here's what I have and maybe someone out there can suggest more things to try.

My Model:

[DataType(DataType.Date)]

[Display(Name = "Birth Date")]

[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]

public DateTime BirthDateE { get; set; }

My _layout.cshtml:

@*had to move it here from the bottom as otherwise ajax wouldn't work*@

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

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

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

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

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

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

@RenderSection("styles", required: false)

@RenderSection("scripts", required: false)

<script src="~/Scripts/jquery.validate.min.js"></script

<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

@* Adding style for DatePicker *@

<link href="../../Content/themes/base/all.css" rel="stylesheet" type="text/css" />

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

@* NOT <script src="/ReportViewer/js/telerikReportViewer-10.2.16.1025.min.js"></script>*@

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script src="@Url.Content("~/Scripts/cultures/kendo.culture.en-IE.min.js")"></script>

<script>

kendo.culture("en-IE");

</script>

My View:

<tr>

<td class="text-right" width="30%">

@Html.LabelFor(model => model.BirthDateE)

</td>

<td width="70%">

<div class="form-group">

@(Html.Kendo().DatePickerFor(model => model.BirthDateE)

.Culture("en-IE")

.Format("dd/MM/yyyy")

.ParseFormats(new List<string>() { "dd/MM/yyyy" })

.HtmlAttributes(new { @class = "form-control" }))

@Html.ValidationMessageFor(model => model.BirthDateE, "", new { @class = "text-danger" })

</div>

</td>

</tr>

My web.config:

<system.web>

<globalization culture="en-IE" uiCulture="en-IE" />

<authentication mode="None" />

<compilation debug="true" targetFramework="4.5.2" />

<httpRuntime targetFramework="4.5.2" />

</system.web>

And my resulting screen shot is attached.

What am I missing to get this working? It should not be this difficult!!!

Shawn

DatePicker

answered on 01 Nov 2018