Questions on Kendo UI for jQuery Forum

3 answers

115 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.

DatePicker

answered on 27 Oct 2017

1 answer

196 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

931 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

228 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

234 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.2K+ views

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

420 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

6 answers

188 views

Need help with binding external data and setting up connections

Hi,

I am trying to create a diagram hierarchy for some company data. I started with the demo "Editing" diagram posted on the site (http://dojo.telerik.com/uNUrU) and tried to update the data service. But, my diagram is not working. My code and the data returned by my services is shown below. I have commented out the connections piece to debug the data source issue. Appreciate your help in fixing the data issue and also pointers on how to defined the connections object and schema -

function visualTemplate(options) {

var dataviz = kendo.dataviz;

var g = new dataviz.diagram.Group();

var dataItem = options.dataItem;

g.append(new dataviz.diagram.Rectangle({

width: 240,

height: 67,

stroke: {

width: 0

},

fill: "#e8eff7"

}));

return g;

}

function onDataBound(e) {

var that = this;

setTimeout(function () {

that.bringIntoView(that.shapes);

}, 0);

}

//function createDiagram() {

//var serviceRoot = "https://demos.telerik.com/kendo-ui/service";

var shapesDataSource = {

batch: false,

transport: {

read: {

url: "https://Service/SQLService.svc/GetLEData",

dataType: "jsonp"

}//,

//update: {

// url: serviceRoot + "/DiagramShapes/Update",

// dataType: "jsonp"

//},

//destroy: {

// url: serviceRoot + "/DiagramShapes/Destroy",

// dataType: "jsonp"

//},

//create: {

// url: serviceRoot + "/DiagramShapes/Create",

// dataType: "jsonp"

//}

},

schema: {

model: {

id: "id",

fields: {

id: { from: "PID", type: "number", editable: false },

LE_Code: { type: "string" },

LE_Country: { type: "string" }

}

};

var connectionsDataSource = {

batch: false,

transport: {

read: {

url: serviceRoot + "/DiagramConnections",

dataType: "jsonp"

}

},

schema: {

model: {

id: "id",

fields: {

id: { from: "Id", type: "number", editable: false },

from: { from: "FromShapeId", type: "number" },

to: { from: "ToShapeId", type: "number" },

fromX: { from: "FromPointX", type: "number" },

fromY: { from: "FromPointY", type: "number" },

toX: { from: "ToPointX", type: "number" },

toY: { from: "ToPointY", type: "number" }

}

};

$("#diagram").kendoDiagram({

dataSource: shapesDataSource,

layout: {

type: "tree",

subtype: "tipover",

underneathHorizontalOffset: 140

},

shapeDefaults: {

visual: visualTemplate,

content: {

template: "#= dataItem.JobTitle #",

fontSize: 17

}

},

connectionDefaults: {

stroke: {

color: "#586477",

width: 2

}

},

dataBound: onDataBound

});

JSON sample from GETLEData service

[{"LE_Code":"CO001","LE_Country":"USA","PID":1},{"LE_Code":"CO002","LE_Country":"Canada","PID":2},{"LE_Code":"CO100","LE_Country":"USA","PID":3},{"LE_Code":"CO101","LE_Country":"China","PID":4},{"LE_Code":"CO105","LE_Country":"United States","PID":5},{"LE_Code":"CO110","LE_Country":"United States","PID":6},{"LE_Code":"CO180","LE_Country":"Canada","PID":7},{"LE_Code":"CO210","LE_Country":"Brazil","PID":8}]

JSON sample from connections service

[{"AccountID":4,"Country":"Singapore","F_LE_Code":"CO510","Function":4,"LE_Code":"CO510","Label":"OSP","PID":1,"Performed":0,"Return":0,"Treatment":"Cost +","TreatmentID":2},{"AccountID":4,"Country":"Singapore","F_LE_Code":"CO510","Function":4,"LE_Code":"CO510","Label":"OSP","PID":2,"Performed":0,"Return":0,"Treatment":"Cost +","TreatmentID":2}, {"AccountID":10,"Country":"Austria","F_LE_Code":"CO780","Function":7,"LE_Code":"CO746","Label":"Royalty","PID":57,"Performed":1,"Return":0,"Treatment":"% Sales","TreatmentID":1},{"AccountID":10,"Country":"China","F_LE_Code":"CO780","Function":7,"LE_Code":"CO527","Label":"Royalty","PID":58,"Performed":1,"Return":0,"Treatment":"% Sales","TreatmentID":1},{"AccountID":10,"Country":"United States","F_LE_Code":"CO780","Function":7,"LE_Code":"CO100","Label":"Royalty","PID":59,"Performed":1,"Return":20,"Treatment":"% Sales","TreatmentID":1},{"AccountID":5,"Country":"Isle Of Man","F_LE_Code":"CO790","Function":2,"LE_Code":"CO790","Label":"CSP","PID":60,"Performed":1,"Return":1,"Treatment":"Cost +","TreatmentID":2}]

Diagram

answered on 27 Oct 2017

3 answers

164 views

Issue Accessing Nested Object Properties in SharePoint 2013

I'm experiencing issues accessing properties of an object nested (a couple levels down). The REST call is pulling in a couple lookup columns using $expand.
I seem to be able to access a couple layers, but I'm not able to access the needed property.

Schema

schema: {

data: "d.results",

}

The lookup Column is (e.g.) "team_Info", and the 2 linked columns are "Team_MemberName" (Text) & "Team_Branch" (Calculated).

I'm using this data in a comboBox, so I'd set up...

ComboBox Definition

$("#combobox_teamInfo").kendoComboBox({

dataSource: $myDataSource,

dataTextField: "team_Info.results[0].Team_MemberName",

dataValueField: "",

});

The problem is team_Info.results[0].Team_MemberName is returned as undefined.
On testing, team_Info[0] does return a series of objects, but I'm unable to access any sub-property of that object.

Thx!

Data Source

answered on 27 Oct 2017

1 answer

2.3K+ views

Dropdonw: Multi column support in dropdown list

HI ,

I have a requirement where I need to show drop down options is a table format with headers and data(i.e like combox with mutiple columns in windows) and user should be able to select a row from the options. is it feature is supported in kendo UI dropdown .if yes can you please help me with a sample.

please find the attached screen shot .

General Discussions

answered on 26 Oct 2017