Questions on Kendo UI for jQuery Forum

1 answer

493 views

How to change the name of "no file chosen"?

kendo.ui.Upload.prototype.options.messages =

$.extend(true, kendo.ui.Upload.prototype.options.messages, {

FileChosen: "Nessun elemento caricato."

});

Upload

answered on 30 Oct 2017

14 answers

1.5K+ views

DataSource Remote Grouping

Hello all,

I had a quick question.

I have been looking at Kendo for a couple of days now, and am really impressed. Everything is smooth and works quite well.

My question is: To support remote grouping on a datasource, what gets sent to the server when someone changes the grouping (Meaning query parameters), and how is the data expected to come back to the data source (JSON in my case)?

Data Source

answered on 30 Oct 2017

8 answers

962 views

Weird behaviour on dropdownlist.open()

Hello

There is a weird behaviour using Kendo.dropdownlist.open() function: In the fully working example below you see 3 defined Kendo DropdownList. As soon as a value is chosen from first dropdownlist it opens the second dropdownlist. Choosing an option of second dropdownlist opens the third dropdownlist. Try this to show you the weird effect:

1. Choose "SUV" from first dropdownlist
2. Choose "Normal" from second dropdownlist
3. Choose "orange" from third dropdownlist.

So far it works fine as it should. Now open the first dropdownlist again and choose "Convertible": The second AND the third dropdownlist will be opened. The third dropdownlist shouldn't be opened! The reason why the third dropdownlist will be opened is caused by resetting the datasource source3 in the change event of dropdownlist1 (took me a while to find that out).

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

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

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.common.min.css" />

<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.blueopal.min.css" />

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

<script>

// Define datasources for dropdownlists

var source1 = new kendo.data.DataSource({

data: [

{ id: -1, name: "Choose type..." },

{ id: 1, name: "SUV" },

{ id: 2, name: "Convertible" }

]});

var source2 = new kendo.data.DataSource({

data: [

{ id: -1, name: "Choose size..." },

{ id: 1, name: "Normal" },

{ id: 2, name: "Small" }

]});

var source3 = new kendo.data.DataSource({

data: [

{ id: -1, name: "Choose color..." },

{ id: 1, name: "green" },

{ id: 2, name: "blue" }

]});

$(document).ready(function() {

$("#dropdownlist1").kendoDropDownList({

value: -1,

dataSource: source1,

dataTextField: "name",

dataValueField: "id",

change: function () {

// Change options of dropdownlist3

source3.data([

{ id: -1, name: "Choose color..." },

{ id: "Choose type...", name: "orange" },

{ id: "Choose type...", name: "brown" }

]);

$("#dropdownlist2").data("kendoDropDownList").open();

}

});

$("#dropdownlist2").kendoDropDownList({

value: -1,

dataSource: source2,

dataTextField: "name",

dataValueField: "id",

change: function () {

$("#dropdownlist3").data("kendoDropDownList").open();

}

});

$("#dropdownlist3").kendoDropDownList({

value: -1,

dataSource: source3,

dataTextField: "name",

dataValueField: "id"

});

</script>

<div id="mydiv">

<input id="dropdownlist1" style='width: 170px;' />

<input id="dropdownlist2" style='width: 170px;' />

<input id="dropdownlist3" style='width: 170px;' />

</div>

</body>

</html>

(I am aware of cascading dropdownlists but my project goes beyond that so I need to refill datasources by myself).

What needs to be done to avoid the third dropdownlist get opened in such a case?

DropDownList

answered on 27 Oct 2017

3 answers

93 views

Entering 2 shows 1 in Angular2 DatePicker component

When we start entering the year first in Angular2 DatePicker component, the picker is displayed the entered value decreased with 1.For example, if I enter 2, 1 is displayed.

Date/Time Pickers

answered on 27 Oct 2017

1 answer

173 views

connect to remote API

I am having problem connect to Web API CORE

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
using Example.API.Data;
using Microsoft.AspNetCore.Authorization;
using ExampleAPI.Models;

namespace Example.API.Controllers
{

[Produces("application/json")]
[Route("api/Activity")]
public class ActivityController : Controller
{
private readonly SampleContext _context;

public ActivityController(SampleContext context)
{
_context = context;
}

// GET: api/Activity
[HttpGet]
public IEnumerable<Activity> Read()
{
return _context.Activity.ToList();
}
}
}
the code above returns JSON string back , I can see it in the browser
http://localhost:49624/api/Activity

but my grid is empty

<!DOCTYPE html>
<html>
<head>

<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.silver.mobile.min.css" />

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

</head>
<body>

<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "http://localhost:49624/api/Activity",
dataType: "jsonp"
},
parameterMap: function (data, operation) {
return JSON.stringify(data);
}
},
schema: {
model: {
fields: {
ActivityID: { type: "number" }
}
}
},
pageSize: 20

},
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field:"ActivityID"

}
]
});
});
</script>
</div>

</body>
</html>

I found an example of Web API Core
http://demos.telerik.com/aspnet-core/grid/webapi
I replaced my HttpGet with:

[HttpGet]
public DataSourceResult Get([DataSourceRequest]DataSourceRequest request)
{
var result = _context.Activity.ToList();
return result.AsReadOnly().ToDataSourceResult(request);
}
A break point in the Get method never hit when I run it in the VS and I navigate in the browser to
http://localhost:49624/api/Activity

Thanks for your help

Grid

answered on 27 Oct 2017

2 answers

854 views

Uncaught TypeError: Cannot read property 'replace' of null

Hello,

I have a scheduler defined like this:

@(Html.Kendo().Scheduler<SignalR.Web.Models.EventInput>()
.Name("scheduler")
.Date(DateTime.Now)
.StartTime(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day))
.Views(views =>
{
views.DayView();
views.WorkWeekView(workWeekView => workWeekView.Selected(true));
views.WeekView();
views.MonthView();
views.AgendaView();
views.TimelineView();
})
.DataSource(d => d
.Model(m =>
{
m.Id(f => f.Id);
m.Field(f => f.Title);
m.Field(f => f.Start);
m.Field(f => f.End);
m.Field(f => f.Description);
})
.Read("Read", "Scheduler")
.Create("Create", "Scheduler")
.Destroy("Destroy", "Scheduler")
.Update("Update", "Scheduler")

)
)

When I load my page, my data loads on the scheduler but I get this error on console:

Uncaught TypeError: Cannot read property 'replace' of null
at Object.eval [as tmpl0] (eval at compile (kendo.all.js:194), <anonymous>:3:152)
at Object.eval (eval at compile (kendo.all.js:194), <anonymous>:3:645)
at d (jquery.min.js:2)
at r._createEventElement (kendo.all.js:91346)
at r._renderEvents (kendo.all.js:91436)
at render (kendo.all.js:91504)
at init.refresh (kendo.all.js:100801)
at init.d (jquery.min.js:2)
at init.trigger (kendo.all.js:124)
at init._process (kendo.all.js:7050)

Then when I click on the scheduler to add a new task on tabs "Work Week", "Week", "Month", no popup to add new Task is displayed.

Scheduler

answered on 27 Oct 2017

1 answer

205 views

how to access datasource child

how to access datasource child.

<div id="a" data-role="grid"

data-toolbar="['excel']"

data-excel='{fileName: "ok.xlsx", proxyURL: "http://demos.telerik.com/kendo-ui/service/export",filterable: true}'

data-editable="false"

data-selectable="true"

data-filterable="true"

data-columnMenu="true"

data-groupable="true"

data-pageable='{ "pageSize": 10}'

data-reorderable="true"

data-resizable="true"

data-sortable="true"

data-height="550"

data-no-records= "true"

data-detail-template="templateSubGrid"

data-columns="[

{ 'field': 'a.nome','title':'nome'},

{ 'field': 'a.stato','title':'stato'}

]"

data-bind="source: GridSource,events:{detailInit: onDetailInit}">

</div>

<script id="templateSubGrid" type="text/x-kendo-template">

<h4>ciao ciao </h4>

<div id="Subgrid"

data-role="grid"

data-bind="source: GridSource.b"

data-columns="[

{ 'field': 'name','title':' name'},

{ 'field': 'company','title':'company'},

]">

</div>

</script>

JS:

this.vm = kendo.observable({

Grid:Source:[],

onDetailInit:function(e){

var dataItem = $("#Subgrid").data("kendoGrid").dataItem(e.masterRow);

kendo.bind("#Subgrid", dataItem);

}

});

kendo.bind($("#m"), this.vm);

//GridSource is filled with the ajax function

The response is like this:

[

{

"a":{

"idName":1,

"name":"abbi",

},

"b":[

{

"idSurname":2,

"surname":"24353453252",

},

{

"idSurname":3,

"surname":"fghgfhjk",

},

{

"idSurname":4,

"surname":"24ssdfds3252",

}

]

}

]

'b' must be the data source of the detailtemplate grid.

Grid

answered on 27 Oct 2017

2 answers

207 views

Rebind columnMenu filter multi data

Hello,

In my application we are constantly changing the data shown in a kendo grid based off of user selected filters on part of the screen (basically selections from dropdownlists). Some columns in the grid are configured with filterable: { multi: true } for the columnMenu. I need to figure out a way to rebind the data that is populated in these columnMenu filter screen.

repro steps (I can try to create a dojo if needed)

1. Load a kendo grid with at least one column configured with filterable: {multi: true} with some data

2. open the filter menu on that column

3. Change the data in the grid (grid.dataSource.data([ //... ])

4. open filter menu again and see that old data has persisted.

Thank you in advance for your time.

Grid

answered on 27 Oct 2017

1 answer

2.1K+ views

Resize and Expand the Kendo UI Grid to 100% Height

There is a good example available how to resize and expand a grid

https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/resize-grid-when-the-window-is-resized

It works very good but until I place some content on top of the grid. I don't know how to adjust css to make it works:

<div>need some content here</div>
<div id="parent">

</div>
Thanks,

Grid

answered on 27 Oct 2017

6 answers

379 views

Kendo UI TipOver tree children not alining vertically

I'm using Kendo UI to create an org chart, I have different levels, I need that every element that hasn't got a child aligns vertically.

If you open the image you can see the output. I need that the fourth level in green becomes linked to the third level in red like the fifth level in red is linked with fourth level in red. How can I do that? It's really urgent, please help.

TreeView

answered on 27 Oct 2017