Questions on Kendo UI for jQuery Forum

8 answers

1.6K+ views

I've created a simple Odata service that reads the contents of a single local SQL table. My service works correctly, I've checked in Postman, but the Kendo UI grid throws the following error:

Uncaught TypeError: Cannot read property '__count' of undefined

I checked entries on the board, and I've seen several that refer to the version of Odata. They imply that you need to use an older version of OData to work with the grid. The version I'm using is v4.0.30319. Will this version work with Kendo UI grid? Or does the error point to something else?

here's my html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//localhost:49666/CustomerComplaintDataService.svc/Complaints"
},
schema: {
model: {
fields: {
RecordNumber: { type: "number" },
Date: { type: "date" },
Brand: { type: "string" },
Filter_part_number: { type: "string" },
PlantMfrgLoc: { type: "string" },
Date_code: { type: "string" },
Person_talked_to: { type: "string" },
Phone_number: { type: "string" },
Company_Name: { type: "string" },
Product_Complaint: { type: "string" },
Action_taken: { type: "string" },
Results: { type: "string" },
Call_taken_by: { type: "string" },
Customer_Required_Response: { type: "string" },
Risk_Level: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "RecordNumber",
filterable: false
},
"Brand",
{
field: "Date",
title: "Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "Product_Complaint",
title: "Product Complaint"
}, {
field: "Action_taken",
title: "Action Taken"
}
]
});
});
</script>
</div>
</body>
</html>

Thanks in advance,

Mark

Grid

answered on 26 Apr 2019

3 answers

229 views

Toolbar.enable() should affect click events

Hello, I have a Menu widget as a child of a Toolbar. I am disabling the menu using the following code:

myToolbar.enable(myMenu, false);

This correctly shows the menu widget as disabled (i.e. it's grayed out), but when I click the menu, it is still displaying the drop down menu under the button. Shouldn't calling enable with a value of false cause click events to be ignored? How can I accomplish this?

Thanks in advance

David

Toolbar

answered on 25 Apr 2019

2 answers

101 views

Documentation not working

The example found on the documentation to change to a custom background marker does not work. https://docs.telerik.com/kendo-ui/controls/diagrams-and-maps/map/how-to/custom-markers is not working as the background image, https://demos.telerik.com/kendo-ui/content/shared/images/we-are-here.png, does not exist (404 error).

Map

answered on 23 Apr 2019

3 answers

1.4K+ views

Solution for Grid Filtering of Dates

I am looking for a solution to an issue with date filtering in the Kendo grid control.
Below are example MVC code segments for this issue. We are currently on Kendo 2018.2.620.440 version.

Issue:
The issue is that the grid date being displayed and used for filtering is incorrect in that it is minus one day. The web server is running
in UTC time and I the client are running in US Central Time. I understand how to use the client template for the column to display the date
correctly using a string property of the date, but in order to filter we need to be filtering on the date property so that the filter menu
displays for dates (IsEqualTo, IsGreaterThanOrEqualTo, IsLessThanOrEqualTo). If I change the column to use a string date property
the filter menu display entries for text filtering, not date filtering.

Running the code locally has no issue since the web server and client are running in the same zone. It's when the web server is
running in a different zone. I understand that the Kendo grid is converting the date from the server (running in UTC) to the client zone.
Is there a way to stop this or what can I set on the server date object so it would not convert the date.

Code:
------------------------------------------------------------------------------------------------
Model: UserAccountModel.cs

public class UserAccountModel
{
public UserAccountModel();

public string ID { get; set; }
public DateTime? BirthDate { get; set; }
public string DisplayName { get; set; }
}
}

------------------------------------------------------------------------------------------------
View: MemberAccounts.cshtml

<div class="row">
@(Html.Kendo().Grid<UserAccountModel>(appEmpList)
.Name("MemberApplicationDatesGrid")
.HtmlAttributes(new { @class = "editor-grid" })
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(3)
)
.Columns(columns =>
{
columns.Bound(e => e.BirthDate).Format("{0:d}").Sortable(true).Filterable(true).Title("Date");
columns.Bound(e => e.DisplayName).Filterable(true).Sortable(true).Title("Name");
})
.Scrollable()
.Resizable(r => r.Columns(true))
.Sortable(sortable => sortable
.AllowUnsort(false)
.SortMode(GridSortMode.SingleColumn))
.Filterable(filterable => filterable
.Extra(false)
.Messages(msg => msg.Clear("Clear"))
.Mode(GridFilterMode.Menu).Operators(operators => operators
.ForDate(date => date.Clear()
.IsEqualTo("Equal To")
.IsGreaterThanOrEqualTo("Greater Than Or Equal To")
.IsLessThanOrEqualTo("Less Than Or Equal To")
)
)
)
.DataSource(d => d.Ajax()
.Events(e => e.Error("onWebApiError"))
.Model(m => m.Id(e => e.ID))
.ServerOperation(false)
.PageSize(10)
)
)
</div>

------------------------------------------------------------------------------------------------
Controller Method: MemberBase.cs

[HttpGet]
public ActionResult MemberAccounts()
{
//set mock data
List<UserAccountModel> appMbrList = new List<UserAccountModel>();
for (int idx = 0; idx < 20; idx++)
{
appMbrList.Add(new UserAccountModel()
{
BirthDate = DateTime.Now.AddYears(-idx).Date,
ID = idx.ToString(),
DisplayName = "Name-" + idx.ToString()
});
}
ActionResult actionResult = this.View(appMbrList);

return actionResult;
}

Grid

answered on 23 Apr 2019

4 answers

684 views

How to create a Kendo Scheduler custom view with a majortick of a month?

I would like to have a Kendo Scheduler of a complete year where a major tick is a month, and a minor tick is half of the month.
I created a custom view representing an year, that's ok but this view represent an year where each majortick is a day due to the majortick that can have only minutes values.

This is the custom view:

(function ($, undefined) {

var kendo = window.kendo,

ui = kendo.ui,

SchedulerTimelineView = ui.TimelineView,

extend = $.extend,

NS = ".kendoTimelineYearView";

var SchedulerTimelineYearView = SchedulerTimelineView.extend({

nextDate: function() {

var start = this.startDate();

return new Date(start.getFullYear()+1, 0, 1);

},

previousDate: function() {

var start = this.startDate();

return new Date(start.getFullYear()-1, 0, 1);

},

calculateDateRange: function() {

var selectedDate = this.options.date,

start = new Date(selectedDate.getFullYear(), 0, 1),

end = kendo.date.previousDay(new Date(selectedDate.getFullYear()+1, 0, 1)),

dates = [];

while (start <= end) {

dates.push(start);

start = kendo.date.nextDay(start);

//start = dateAdd(start, 'month', 1);

}

this._render(dates);

}

})

//extend UI

extend(true, ui, {

SchedulerTimelineYearView: SchedulerTimelineYearView

});

})(window.kendo.jQuery);

this are the property of the view in the init:

{

type: "kendo.ui.SchedulerTimelineYearView",

title: "Year",

majorTick: 1440*30, // 30 days but i want exactly a month

minorTickCount: 2,

columnWidth: 50

},

How I've already said, I would like to have a scheduler with a complete year where the major tick represent a month and the minortick represent half month(not 30 days but exactly a month).
Is this possible?

Scheduler

answered on 23 Apr 2019

2 answers

1.2K+ views

Kendo UI Grid update only changed cell/column

When performing an update on the grid it sends all column data.

How can I Send only changed (with dirty class) data?

Grid

answered on 23 Apr 2019

1 answer

82 views

Error message after upgrading

Hi,

After upgrading recently, the browser shows error message as shown in attachment. The scenario is that I have a tree structure and will step through each node, and show or hide a button for each step. Then for each execution, we get the error message in browser console, which is annoying. It worked fine before and not sure if we need to change after upgrading. Can you help me to detect it? Thanks.

Best regards,

James

General Discussions

answered on 23 Apr 2019

9 answers

1.0K+ views

Sharepoint Online + Full CRUD solution

Hi all,

I am rather new to JS and Kendo UI and I am trying to hook up a Kendo UI Grid to a sharepoint list via the Sharepoint REST Interface.

So far I have set up a datasource for read, create, update and destroy and it is working like charm. My biggest issue I have are the different Sharepoint field types.

CRUD operations for simple text, date, number fields are working without an issue. But I don't understand how to implement fields like choice filelds, lookupfields, people and groups fields. Can somebody show me an working example how to properly display a people-and-groups column in the grid and how to edit it? Same for a choice field.

Many thanks in adavance.

Data Source

answered on 23 Apr 2019

1 answer

140 views

How do I send selected values to Action Method?

Hello

I keep getting null values I am trying to get a list of int or string for selected DataValueField.

Thank you,

@using (Html.BeginForm("SetPermitValues", "BusinessLocation"))
{
<div class="modal-body">
<label asp-for="SelectedPermitTypes" class="control-label"></label>
@(Html.Kendo().MultiSelectFor(b => b.SelectedPermitTypes)
//.Name("businessPurposes")
.HtmlAttributes(new { style = "width:100%" })
.Placeholder("Choose...")
.DataValueField("Value")
.DataTextField("Text")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetPermitTypesAsync", "BusinessLocation", new { id = Model.Id });
});
})
)
<span asp-validation-for="SelectedPermitTypes" class="text-danger"></span>

</div>
<div class="modal-footer">
<button type="button" id="HidebtnModal" class="btn btn-primary">Cancel</button>
<button type="submit" class="btn btn-primary">Add New Permit</button>

</div>
}

[HttpPost]
public ActionResult SetPermitValues(List<int> Value)
{

}

MultiSelect

answered on 22 Apr 2019

2 answers

448 views

Grid read with parameter by ajax successfully, but update fail in front end

I'm trying to use kendo grid and ASP.NET Web Api,

I use read (with additional parameter), and update function,

but when I execute update (Save Changes), front end console error happen....

so, I appropriate any help..

----------------------------------------------------------------------------------------------------------------

My Step as below:

step1. query with additional parameter with Ajax (choose datepicker, and press "QueryByDate" button) => success

step2. modify data in Grid

step3. then press "Save Changes" button to update => console error as below:

kendo.web.js:7040 Uncaught TypeError: r.transport[i].call is not a function
at Object.<anonymous> (kendo.web.js:7040)
at Function.Deferred (jquery.min.js:2)
at init._promise (kendo.web.js:7037)
at init._send (kendo.web.js:7059)
at init.sync (kendo.web.js:6802)
at init.saveChanges (kendo.web.js:61295)
at HTMLAnchorElement.<anonymous> (kendo.web.js:61457)
at HTMLDivElement.dispatch (jquery.min.js:3)
at HTMLDivElement.r.handle (jquery.min.js:3)

----------------------------------------------------------------------------------------------------------------

1.(front-end) HTML:

<button id="btnSearch">QueryByDate</button>
<div id="grid">

<script>
$("#btnSearch").click(() => {
grid.setDataSource(ds);
grid.dataSource.read();
});

let ds = new kendo.data.DataSource({
transport: {
read: function (options) {
let myDate = $("#datepicker").val();
$.ajax({
url: "API_Reg12StationStress/GetByDate",
type:"get",
dataType: "json",
data: { queryDate: myDate},
success: function (result) {
options.success(result);
}
});
},
update: {
url: "API_Reg12StationStress/Update2",
type: "get",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
schema: {
model: {
id: "id",
fields: {
id: { editable: false },
name_level1: { editable: false },
name_level2: { editable: false },
stress_data1: { editable: true },
stress_data2: { editable: true },
data_YYYYMMDD: { editable: false }
}
}
}
});

let grid = $("#grid").kendoGrid({
toolbar: [
{ name: "save" },
{ name: "cancel" }
],
editable: false,
noRecords: {
template: "查無資料"
},
columns: [
{ field: "name_level1", title: "廠所別" },
{ field: "name_level2", title: "記錄地點" },
{
title: "水壓指示",
columns: [
{ field: "stress_data1", title: "上午" },
{ field: "stress_data2", title: "下午16時" },
{ field: "data_YYYYMMDD", title: "提供時間" }
]
}
]
}).data("kendoGrid");

</script>

----------------------------------------------------------------------------------------------------------------

2.ASP.NET MVC (back-end) :

public class API_Reg12StationStressController : Controller

{

MyEntities _db = new MyEntities();

public ActionResult GetByDate(string queryDate) //Query By Date (ex:2019/4/12)
{
DateTime dtQuery = DateTime.Parse(queryDate);
List<REG12_STATION_STRESS> models = _db.REG12_STATION_STRESS.Where(model => model.report_date == dtQuery).ToList();
return Json(models, JsonRequestBehavior.AllowGet);
}

public ActionResult Update2() //Update batch data
{
var jsonString = this.HttpContext.Request.QueryString.Get("models");

IEnumerable<REG12_STATION_STRESS> updateItems = null;

DataContractJsonSerializer deserializer = new DataContractJsonSerializer(typeof(IEnumerable<REG12_STATION_STRESS>));
using (MemoryStream stream = new MemoryStream(Encoding.UTF8.GetBytes(jsonString)))
{
updateItems = (IEnumerable<REG12_STATION_STRESS>)deserializer.ReadObject(stream);
}

foreach (var item in updateItems)
{
var target = _db.REG12_STATION_STRESS.FirstOrDefault(x => x.id == item.id);
target.stress_data1 = item.stress_data1;
target.stress_data2 = item.stress_data2;
}
_db.SaveChanges();

bool act = true;
return Json(act, JsonRequestBehavior.AllowGet);
}

Grid

answered on 19 Apr 2019