Questions on UI for ASP.NET MVC Forum

8 answers

210 views

TreeMap - Unhandled exception kendo.all.min.js 0x800a01b6

Hello, I have a problem with the treemap component in the MVC project, when it displays an exception :

Unhandled exception at line 122, column 18825 in http://localhost:58298/Scripts/kendo/kendo.all.min.js
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'level'

Index:

@(Html.Kendo().TreeMap()

.Name("treeMap")

.DataSource(dataSource => dataSource

.Read(read => read.Action("FrekvenceCestujicich", "Dashboard"))

.Model(m => m.Children("Items"))

)

.ValueField("Value")

.TextField("Name")

.HtmlAttributes(new { style = "height:600px; font-size: 12px;" })

)

Controller :

public class DashboardController : BaseController

{

public ActionResult FrekvenceCestujicich()

{

List<Zastavky> zastavky = new List<Zastavky>();

Zastavky mesto = new Zastavky("mesto", 5111856, new List<Zastavky>());

zastavky.Add(mesto);

mesto.Items.Add(new Zastavky("Plotní", 166313, null));

mesto.Items.Add(new Zastavky("Česká", 125917, null));

mesto.Items.Add(new Zastavky("Celní", 415796, null));

mesto.Items.Add(new Zastavky("Moravská", 512761, null));

mesto.Items.Add(new Zastavky("Smetanova", 333111, null));

mesto.Items.Add(new Zastavky("Náměstí Republiky", 298119, null));

mesto.Items.Add(new Zastavky("Haškova", 131222, null));

mesto.Items.Add(new Zastavky("Nerudova", 256771, null));

mesto.Items.Add(new Zastavky("Dětská nemocnice", 139012, null));

mesto.Items.Add(new Zastavky("Svatoplukova", 431233, null));

mesto.Items.Add(new Zastavky("Jana Žižky", 99019, null));

mesto.Items.Add(new Zastavky("Nová", 76511, null));

mesto.Items.Add(new Zastavky("Kotlářská", 100988, null));

mesto.Items.Add(new Zastavky("Mahenova", 188988, null));

mesto.Items.Add(new Zastavky("U Buku", 36981, null));

mesto.Items.Add(new Zastavky("Kolmá", 88999, null));

mesto.Items.Add(new Zastavky("Divadelní", 889231, null));

mesto.Items.Add(new Zastavky("Koniklecová", 234111, null));

mesto.Items.Add(new Zastavky("Lesní", 31651, null));

mesto.Items.Add(new Zastavky("Mrakodrap", 555122, null));

return Json(zastavky, JsonRequestBehavior.AllowGet);

}

Model :

public class Zastavky

{

public Zastavky(string name, int value, List<Zastavky> items)

{

Name = name;

Value = value;

Items = items;

}

public string Name { get; set; }

public double Value { get; set; }

public List<Zastavky> Items { get; set; }

}

Included javascripts :

"jquery.min.js"

"kendo.all.min.js",

"kendo.aspnetmvc.min.js"

TreeMap

answered on 12 Nov 2018

1 answer

830 views

Grid.Column.title

columns.Bound("").HeaderTemplate("#=getTitleforAllownceColumn(data)#").ClientTemplate("#=getTemplateForAllownceColumn(data)#");
columns.Bound("").Title("#=getTitleforDeductionColumn(data)#") or .HeaderTemplate("#=getTitleforDeductionColumn(data)#").ClientTemplate("#=getTemplateForDeductionColumn(data)#");

I want to set title dynamically through a java script method so that i can iterate through a list of items that i don't have idea how many members will be inside the list and what will be their value and description.

ClientTemplate is hitting the method but title and headertemplate do not

Is there any way i can achieve this.

Grid

answered on 12 Nov 2018

2 answers

568 views

Inline Editing for Dropdown when empty returns [Object object]

Trying to implement inline editing. Following is a simplified version.

EmployeeEditor.cshtml inside EditorTemplates folder

@(Html.Kendo().DropDownList()
.Name("ToBranch")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((System.Collections.IEnumerable)ViewData["toBranch"])
)

Employee class

public class Employee

{

public string EmployeeName {get; set;}

[UIHint("EmployeeEditor"]

public string ToBranch {get; set;}

}

View

@Html.Kendo().Grid(Model.Employees)
.Name("BranchGrid")
.Columns(col =>
{
col.Bound(o => o.EmployeeName);
col.Bound(o => o.ToBranch);
col.Command(command => { command.Edit(); });
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Field(o => o.EmployeeName).Editable(false);
})
.Update(update => update.Action("EditingInline_Update", "BranchForm"))
.ServerOperation(false))
.Events(events => events.DataBound("error_handler"))
.Render();

Controller

public ActionResult Index()

{

//Populate a model

ViewData["toBranch"] = branches

return View(model);

}

/////// Important Part

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult EditingInline_Update([DataSourceRequest] DataSourceRequest request, Employee model)
{

//// If there was a branch initially say 24 and I change it to 28, I do see model.ToBranch as 28 ( works fine)

//// However, if the branch was initially an empty string and I change it to 28, model.ToBranch is "[Object object]"

}

Can you please tell me why this is happening? This is kind of critical and an urgent reply would be really appreciated

Grid

answered on 09 Nov 2018

1 answer

121 views

bootstrap-v4 PDF export loading bar appears in pdf

When using bootstrap V4 css, the loading bar appears in the exported PDF.

I checked the telerik pdf export demo page which I assume doesn't use V4 and it doesn't have this issue.

I'm getting around this temporarily by setting

.k-loading-pdf-mask {
display: none !important;
}

Grid

answered on 09 Nov 2018

5 answers

610 views

Bootstrap-v4 Theme button issue

I have a site, using the bootstrap-v4 theme (version 2018.3.1017), along with bootstrap version 4.1.3.

When showing the Edit and Delete buttons on a grid, there is no spacing between them (Image attached). If I include the kendo.common.css file, button spacing is corrected, but the pop-up editor window then shows a vertical scroll bar, and the close button is outside of the window.

The css files that are included in the site are:-

bootstrap.css
font awesome/all.css
site.css (default MVC starting css file)
kendo.bootstrap-v4.min.css

What do I need to add / alter to correct the button spacing issue?

Thanks

Grid

answered on 08 Nov 2018

3 answers

141 views

Iicensee issue

Hi Telerik,

I bought one licensee, but system show "You're using a trial version of Telerik UI for asp.net mvc by progress".

can you tell how to resolve this issue?

Thanks

Grady Lu

General Discussions

answered on 08 Nov 2018

8 answers

1.4K+ 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

95 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

199 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