Questions on UI for ASP.NET MVC Forum

1 answer

128 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

235 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

948 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

128 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

267 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

180 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

940 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

2 answers

4.8K+ views

[Solved] Setting value in Javascript results in null property at controller

I'm fairly new to MVC (and web development in general) and I keep coming across several 'gotchas' which result in unexpected behaviour. I am using Kendo UI for ASP.NET MVC, however I'm 99% certain that my problem is due to my lack of understanding of either Javascript or MVC rather than anything to do with Kendo.
You should be able to reproduce the problem using the following code:

Models:

public class DemoClass

{

public int id { get; set; }

public string randomData { get; set; }

public List<DemoPartyDetails> partyDetails { get; set; }

public DemoClass()

{

partyDetails = new List<DemoPartyDetails>();

}

public class DemoPartyDetails

{

public int id { get; set; }

public string firstName { get; set; }

public string surname { get; set; }

public string gender { get; set; }

public DemoPartyDetails()

{

}

Controller:

public class DemoController : Controller

{

// GET: Demo

public ActionResult Index()

{

DemoClass demo = new DemoClass();

return View(demo);

}

[HttpPost]

public ActionResult Create(DemoClass model)

{

try

{

if (model.partyDetails[0].gender != null)

Console.WriteLine("Party details populated");

else

Console.WriteLine("Something went wrong...");

return RedirectToAction("Index");

}

catch

{

return View();

}

View:

@model DemoPortal.Models.DemoClass

<html>

<head>

<meta name="viewport" content="width=device-width" />

<title></title>

</head>

<body>

@using (Html.BeginForm("Create", "Demo", FormMethod.Post))

{

<div>

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

</div>

<div>

<a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-i-add"></span>Add Party</a>

@(Html.Kendo().ListView(Model.partyDetails)

.Name("demoListView")

.TagName("div")

.ClientTemplateId("demoTemplate")

.DataSource(dataSource => dataSource

.Model(model => model.Id(x => x.id))

)

.Editable(editable => editable.TemplateName("DemoPartyDetails"))

)

</div>

<input type="submit" value="Submit" />

}

</body>

</html>

<script type="text/x-kendo-tmpl" id="demoTemplate">

<div class="demoParty">

<h3>#:firstName#</h3>

<span>#:surname#</span>

<input type="hidden" name="PartyDetails[#:index(data)#].firstName" value="#:firstName#" />

<input type="hidden" name="PartyDetails[#:index(data)#].surname" value="#:surname#" />

<input type="hidden" name="PartyDetails[#:index(data)#].gender" value="#:gender#" />

</div>

</script>

<script>

$(function() {

var listView = $("#demoListView").data("kendoListView");

$(".k-add-button").click(function(e) {

listView.add();

e.preventDefault();

});

function index(dataItem) {

var data = $("#demoListView").data("kendoListView").dataSource.data();

return data.indexOf(dataItem);

}

function maleClick(e) {

document.getElementById("gender").value = "M";

document.getElementById("randomData").value = "random";

var maleButton = document.getElementById("IsMale");

var femaleButton = document.getElementById("IsFemale");

femaleButton.classList.remove("k-primary");

maleButton.classList.add("k-primary");

};

function femaleClick(e) {

document.getElementById("gender").value = "F";

var maleButton = document.getElementById("IsMale");

var femaleButton = document.getElementById("IsFemale");

maleButton.classList.remove("k-primary");

femaleButton.classList.add("k-primary");

};

</script>

DemoPartyDetails Editor Template

@model DemoPortal.Models.DemoPartyDetails

@using (Html.BeginForm())

{

<div>

<label>Gender:</label>

@(Html.Kendo().Button()

.Name("IsMale")

.Content("Male")

.HtmlAttributes(new { type = "button" })

.Events(ev => ev.Click("maleClick")))

@(Html.Kendo().Button()

.Name("IsFemale")

.Content("Female")

.HtmlAttributes(new { type = "button", @class = "k-primary" })

.Events(ev => ev.Click("femaleClick")))

</div>

@(Html.HiddenFor(model => model.id))

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

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

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

<div class="btnArea">

<a class="k-button k-update-button" href="\\#"><span class="k-icon k-update"></span></a>

<a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>

</div>

}

When running this code, I can click the button to add a new party, the editor template appears as expected and I press the 'Male' button, which populates the gender field with "M".

I then fill in the other two fields with generic "Test" and "Person" data before confirming the entry and then pressing submit.
What I find when I place a breakpoint at the controller however is that the model being passed through has the gender set to null. The first name and surname ("Test" and "Person") are fully populated however. The randomData is also fully populated as expected.

Interestingly, if I go back and manually type something like "Male" into the gender field, that is now also populated. It's only when I try to use javascript to set the value that it's null.

The ultimate goal is to have a hidden field populated by javascript when a button is pressed, so if someone could point out my mistake it would be very much appreciated!

General Discussions

answered on 01 Nov 2018