Questions on Kendo UI for jQuery Forum

1 answer

159 views

I have a grid on an MVC page, I have an error event as follows:

.DataSource(dataSource => dataSource
.Ajax()
.Batch(false)
.PageSize(50)
.Events(events => events.Error("gridErrorHandler"))

My JavaScript function is something like:

function gridErrorHandler(e) {
...
}

I have an MVC method (that returns ActionResult) that throws the following error when an error condition occurs:

return new HttpStatusCodeResult(System.Net.HttpStatusCode.InternalServerError, "Unexpected error");

My question is this. When my MVC method throws an exception, my JS error handler gets called. But, no matter what I try, I'm not able to get at the type of error it is. What exactly is the correct JS code that tells me a 500 error occurred, or a 401 (unauthorized) error occurred, etc.?

Grid

answered on 30 Jun 2017

6 answers

750 views

Update Non-editable field in edit mode

I have a grid with a Duration field this is not editable and configured as so in the datasource schema. I have a Start Date and End Date in this grid, when the user enters or changes these dates the Duration value gets updated (EndDate - StartDate = x minutes). I have subscribed to the change event of the datasource and have been able to calculate the duration however i am not able to update the duration field. I have tried:

grid.dataitem("tr:eq(1)").set("Duration", value)

and as well as getting item by uid and doing the same but neither work. Is this possible with a non-editable field? Looking at the html there doesn't appear to be a control name (i may be wrong) so is the method to find the column cell and just update the content (though i'm not sure how to do this)?

Grid

answered on 30 Jun 2017

3 answers

177 views

Create action not being called in ListView

I am attempting to use the Create action in ListView for MVC4 according to the Getting Started example, but the Create action does not get called. The Read, Update, and Destroy actions do get called as expected. Here is relevant code, and any help would be appreciated:
From the view:

@model VentSettings

<div class="k-toolbar k-grid-toolbar">

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

</div>

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

<div>

<div class="edit-buttons" style="width:98%; background:lightgray; border:1px solid lightgray; padding:10px;">#:Time#

<a style="float:right" class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>

<a style="float:right" class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>

</div>

<div style="width: 98%; padding:10px; border:1px solid lightgray;">

<span style="width:10%; display: inline-block">Rate:</span><span style="width:22%; display:inline-block">#:Rate# per min</span>

<span style="width:10%; display: inline-block">PIP:</span><span style="width:22%; display:inline-block">#:PIP# cm H<sub>2</sub>O</span>

<span style="width:10%; display: inline-block">PEEP:</span><span style="width:22%; display:inline-block">#:PEEP# cm H<sub>2</sub>O</span>

<span style="width:10%; display: inline-block">MAP:</span><span style="width:22%; display:inline-block">#:MAP# cm H<sub>2</sub>O</span>

<span style="width:10%; display: inline-block">Vent:</span><span style="width:50%; display:inline-block">#:VentDescription# </span>

</div>

</script>

@(Html.Kendo().ListView<VentSetting>(Model.VentSettingsList)

.Name("listView")

.TagName("div")

.ClientTemplateId("ventTemplate")

.Editable()

.DataSource(datasource => datasource

.Events(events => events.Sync("handleSync"))

.Model(model => model.Id(m => m.VentSettingId))

.Read(read => read.Action("ReadVentSettings", "RunDetail"))

.Create(create => create.Action("CreateVentSetting", "RunDetail"))

.Update(update => update.Action("UpdateVentSetting", "RunDetail"))

.Destroy(destroy => destroy.Action("DeleteVentSetting", "RunDetail"))

)

<script>

function handleSync() {

this.read();

}

</script>

The relevant part of the EditorTemplate:

<div style="padding:10px">

@Html.ValidationSummary(true)

<span style="width:12%; display:inline-block">Resp Rate: </span>

<span style="width:36%; display:inline-block"

> @Html.Kendo().DropDownListFor(x => x.VentTypeId).DataValueField("VentTypeId").DataTextField("Description").BindTo((System.Collections.IEnumerable)ViewData["VentTypes"])</

span>

<div class="edit-buttons">

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

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

</div>

From the controller, the Create action (does not get called) and the Update action (gets called). I've tried the Create action with and without the second parameter:

[HttpPost]

public ActionResult CreateVentSetting([DataSourceRequest] DataSourceRequest request, Models.VentSetting modelVentSetting)

{

if (modelVentSetting != null && ModelState.IsValid)

{ // Create code... }

return Json(ModelState.ToDataSourceResult());

}

[HttpPost]

public ActionResult UpdateVentSetting([DataSourceRequest] DataSourceRequest request, Models.VentSetting modelVentSetting)

{

// Update code...

return Json(ModelState.ToDataSourceResult());

}

Thanks in advance!
Steve

ListView

answered on 30 Jun 2017

4 answers

284 views

Need help applying custom theme

Hey,

I'm new to KendoUI and have been using it with Angular 2. I created a custom theme (http://demos.telerik.com/kendo-ui/themebuilder/), and got a kendo.custom.css file, along with a .json and LESS style sheet.

Now, how do I apply this theme? I tried adding it similar to how I added my regular style.css; by providing the kendo.custom.css in "styles" component of angular-cli.json, but got a "failed to compile" error. Looked at some resources and they said to provide it as a <link href="">, but this gives a "Cannot get localhost:4200/path_to_the_css" error.

I realize this might be a basic question, but I'm stuck anyway. Appreciate any help. Thank you!

General Discussions

answered on 30 Jun 2017

1 answer

157 views

Select and highlight on any chart

Is there anyway to select, drag and highlight a specific area on an area/line chart? I have a chart plotted with a series. I want to allow the user to left-click and drag an area on that chart and just return the select categoryAxis values (i.e. from/to). Is this possible?

Charts

answered on 30 Jun 2017

2 answers

1.4K+ views

Setting the font-family for all the textual elements in chart

Hi,

Does the chart have a single property where I can set the font-family for all of the text elements (title, legend, tooltip, axis label, axis title, etc) that the chart may contain?

I'd like to apply our fonts to charts but not have to set half a dozen or more properties if it can be avoided.

Thanks!

Charts

answered on 30 Jun 2017

22 answers

1.2K+ views

DropDownList jumping from control at end of scrolled items

I have an issue. I found that if scrolling through the pulldownlist when the last record in the pulldownlist is arrived at the scroll jumps down to the grid that is below it and then it scrolls the grid.

Why does the scroll pulldownlist scroll the grid below (or any panel below) after it reaches the end of the list?

Best Regards,

Mark Kilroy

DropDownList

answered on 29 Jun 2017

3 answers

462 views

dataSource.transport.submit handler using initialization syntax

Hey,

I'm currently trying to use batch syncing with the server using the DataSource's transport.submit handler. The documentation tells me to pass a method, and to set batch to true on the DataSource itself in order to work properly. To my surprise I'm facing an exception with the following stacktrace:

Uncaught TypeError: Cannot read property 'data' of undefined

at init.setup (VM3012 kendo.all.min.js:27)

at init.update (VM3012 kendo.all.min.js:27)

at Object.<anonymous> (VM3012 kendo.all.min.js:27)

at Function.Deferred (VM2971 jquery.min.js:2)

at init._promise (VM3012 kendo.all.min.js:27)

at init._send (VM3012 kendo.all.min.js:27)

at init.sync (VM3012 kendo.all.min.js:27)

at init.saveChanges (VM3012 kendo.all.min.js:50)

at HTMLAnchorElement.<anonymous> (VM3012 kendo.all.min.js:50)

at HTMLDivElement.dispatch (VM2971 jquery.min.js:3)

A workaround would be to set the method after grid initialization (code below), but I'm wondering what could be wrong with my initial syntax/code.

var grid = $("#grid").data("kendoGrid");

grid.dataSource.transport.submit = function(e) { alert("alternate submit"); };

Reproduction (DoJo): Try to (inline) edit a row, then press 'save changes', using the code below:

<!DOCTYPE html>

<html>

<head>

<base href="http://demos.telerik.com/kendo-ui/grid/editing">

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>

<title></title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />

<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>

</head>

<body>

<div id="example">

<div id="grid"></div>

<script>

$(document).ready(function () {

var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",

dataSource = new kendo.data.DataSource({

transport: {

read: {

url: crudServiceBaseUrl + "/Products",

dataType: "jsonp"

},

submit: function(e) {alert("submit"); }

},

batch: true,

pageSize: 20,

schema: {

model: {

id: "ProductID",

fields: {

ProductID: { editable: false, nullable: true },

ProductName: { validation: { required: true } },

UnitPrice: { type: "number", validation: { required: true, min: 1} },

Discontinued: { type: "boolean" },

UnitsInStock: { type: "number", validation: { min: 0, required: true } }

}

});

$("#grid").kendoGrid({

dataSource: dataSource,

navigatable: true,

pageable: true,

height: 550,

toolbar: ["create", "save", "cancel"],

columns: [

"ProductName",

{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 120 },

{ field: "UnitsInStock", title: "Units In Stock", width: 120 },

{ field: "Discontinued", width: 120, editor: customBoolEditor },

{ command: "destroy", title: " ", width: 150 }],

editable: true

});

/*

Workaround:

var grid = $("#grid").data("kendoGrid");

grid.dataSource.transport.submit = function(e) { alert("alternate submit"); };

*/

});

function customBoolEditor(container, options) {

$('<input class="k-checkbox" type="checkbox" name="Discontinued" data-type="boolean" data-bind="checked:Discontinued">').appendTo(container);

$('<label class="k-checkbox-label"></label>').appendTo(container);

}

</script>

</div>

</body>

</html>

Kind regards

Data Source

answered on 29 Jun 2017

1 answer

209 views

Multiselect configuration with filter and noDataTemplate throws error

Using this example https://demos.telerik.com/kendo-ui/dropdownlist/addnewitem and changing the kendoDropDownList to kendoMultiSelect, i receive the error below because the instance.filterInput is not defined on the widget instance. According to your docs these two property configurations are supported. How can I get the multiSelect to have a filter?

DOCS

http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect#configuration-filter

http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect#configuration-noDataTemplate

ERROR

Uncaught TypeError: Cannot read property 'val' of undefined
at init.eval [as noDataTemplate] (eval at compile (kendo.all.js:194), <anonymous>:3:196)
at init._renderNoData (kendo.all.js:27300)
at init._listBound (kendo.all.js:33923)
at init.d (jquery.min.js:2)
at init.trigger (kendo.all.js:124)
at init.refresh (kendo.all.js:28807)
at init.d (jquery.min.js:2)
at init.trigger (kendo.all.js:124)
at init._process (kendo.all.js:6965)
at init.success (kendo.all.js:6710)

MultiSelect

answered on 29 Jun 2017

1 answer

158 views

Item Template consuming from MVC DisplayTemplates

Hi,
i'm struggling with the Kendo ListView.
I want to define the Templates with MVC standard DisplayTemplate and EditorTemplates.
But since the support from Telerik does not understand what i want and always pointing me to their demos - which are uselsse - i came here, hopefully there is somebody who can give me an answer about that.
we simply want to use Item Templates for the ListView control.
i dont want to use the Telerik Template language, since its not possible to access complex types (Navigationproperties).
has anybody an idea if its possible in general?
and if yes - are there any examples around?
thanks & best regards
Mike

ListView

answered on 29 Jun 2017