Questions on Kendo UI for jQuery Forum

3 answers

208 views

[Solved] 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

312 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

181 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.5K+ views

[Solved] 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.3K+ 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

501 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

228 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

181 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

5 answers

453 views

[Solved] column reorder event delay

Hi, I'm trying to save grid on most user actions but the column reorder event seems to fire before the actual columns are reordered. To accommodate this oddness I've added setTimeout around the saving of grid options. Is this delay a known bug?

function saveUserAdministrationGridState(arg)

{

if (isLocalStorageAvailable())

{

// column reordering firing delayed, so we must delay our saving of options

// hack source: http://stackoverflow.com/questions/21270748/kendo-grid-saving-state-in-columnreorder-event

setTimeout(function () {

localStorage[customGridOptionsLocalStorageKey] = kendo.stringify(grid.getOptions());

}, 5);

}

Grid

answered on 29 Jun 2017

4 answers

618 views

Grid, Filter and Page

Hi,
I use Kendo UI with Angularjs, I have a grid with datasource calling remote web api and wih just server paging active (in backend I have to call a third part web service with page parameter). I want to use sort and filter on client side. Sort on columns works excellent but when i change page and try to filter on a column value in that page (the second or more), the datasource call again my backend passing page=1 and not the page's number in which i use the filter. I have to build a more advanced filter on the page so i need that filter on columns works locally without changing the page. Sort call WS with the same page's number. A workaround could be passing the current page in a different parameter to the WS, eventually could you help me with that?

Thanks

Grid

answered on 29 Jun 2017