Hi,
Is there an example of a scheduler consuming a web service for meetings that doesn't expect all meetings to be returned.
I am migrating from a server side based application that used ASP.NET AJAX and that version of the scheduler required you to implement a provider that implemented a GetAppointments( RadScheduler owner ) where the owner object had the start and end dates of the visibile scheduler.
I would like to run a client side page with a Kendo UI for jQuery scheduler and then perform a web service call equivalent to the above GetAppointments. But all the examples I have found return all meetings which is not possible since we are reading from a database with many years of meetings.
The documentation
read: {
dataType:
"jsonp"
How do I bind a listbox datasource to one specific collection returned by a new window.kendo.data.DataSource({ ?
The datasource returns json with two collections like below, and I want to bind to one of the collections
I am trying to fix an issue on an old react application with jquery dependencies and I am not familiar with the approach used here. We are using the following dependencies(some important ones mentioned). Node version is 14.x
"dependencies": { "@progress/kendo-ui": "^2021.3.1207", "@types/node": "^12.20.15", "@types/react": "^17.0.11", "moment": "^2.29.4", "react": "^17.0.2", . . . } "devDependencies": { "@types/jquery": "^3.5.5", . . . }
Right now we are using the below timepicker and this passes in a datetime value on save, in this format 2024-03-14T09:00:00.000Z. But I want to change this to pass in value as a time in this format HH:mm:ss .
<input
id={this.id}
name={this.props.validationName}
data-role="timepicker"
data-bind={`value: ${ValueCodes.Start}`}
data-format="h:mm tt"
required={true}
disabled={true}
/>
I understand that the ValueCodes.Start mentioned above is linked with the type of the input filed. I did find the following set of codes that determine the type of that field in the corresponding datasource builder file.
export class ValueCodes { public static readonly Start = 'sTRT_TIME'; . . . } protected getDataSourceOptions() { const fields: { [key: string]: { type: string } } = {}; switch (this.categoryCode) { case 'INIT': fields[ValueCodes.Start] = { type: 'date' }; . . . break; . . . default: break; } return { fields: fields, transportOptions: { baseUrl: `${X.getApiUrl()}value/${this.categoryCode}` } }; } }
On changing the 'type' from 'date' to 'time' here, fields[ValueCodes.Start] = { type: 'date' }; I encountered some errors. I was only able to save the value in my desired format, if I disable validation. Aprart from that the timepicker now will not load the datetime or time value fetched from the backend because of the 'type' change from 'date' to 'time'.
Is there a specific way in kendo that I can try to overcome this?
Morning,
I've been using the Kendo Grid for years and absolutely love it for what I can do with it, but every so often I get asked to stretch the functionality of what it can do, I haven't found much documentation on this, but i'll try my best to give an example of what I've done, and to see if there is a better way of doing it..
I have a field in my Grid that is a string, with multiple "Tags" explicitly given in the dataSource in filterable.
{
"columnMenu": {
"componentType": "modern"
},
"stickable": true,
"field": "conditions",
"filterable": {
"enabled": true,
"multi": true,
"search": true,
"dataSource": [
{
"conditions": "TEST123"
},
{
"conditions": "TEST"
},
{
"conditions": "ABC"
},
{
"conditions": "DEF"
}
]
},
"groupable": true,
"aggregates": "count",
"groupHeaderTemplate": "Conditions: #= value # (Count: #= count#)",
"sortable": true,
"title": "Conditions",
The data in the field is a string of comma separated tags, i.e.
TEST, ABC, DEF
I've updated the filter method on the Grid so that I can select multiple options in the filter menu, and it does a "contains" look up to match multiple hits.
filter: function(e){
this.columns.forEach(function(f){
if(e.field === f.field){
if(f.filterable.hasOwnProperty('dataSource')){
e.filter.filters.forEach(function(f){
f.operator = "contains";
e.filter.logic = "and";
})
}
}
})
},
I have two issues here.
1. I'm using contains, so if the tags are similar (TEST, TEST123), selecting TEST will show both TEST and TEST123 - which isn't ideal.
2. If I select an option from the filter menu, it doesn't remain checked if you were to go back into the filter menu again.
I've asked this question before and had some great help to get it to this point using: https://docs.telerik.com/kendo-ui/knowledge-base/grid-how-to-change-multi-checkbox-filter-to-contains but I'm wondering if there is a better way of achieving the functionality I'm looking for here with the grid. I added square brackets to the tags to distinguish them ([TEST], [TEST123]) , but my users didn't like this change.
Is there a way to do this without using contains?
I'd also like to be able to see the selected option in the filter menu - I can find the checkbox through jQuery, but I cannot toggle it's state..
e.filter.filters.forEach(function(f){
var checkbox = $(".k-filter-menu").find("input[value='"+f.value+"']");
console.log(checkbox);
checkbox.prop("checked", true).trigger("change");
checkbox.attr("checked", true).trigger("change");
f.operator = "contains";
e.filter.logic = "and";
})
Thanks for your help,
Matt
hello,
i want to use kendo to send data to a REST API. I get a 415 error. But i do not know what i have made wrong.
My test html looks like this:
<button id="button" type="button">Submit</button>
<script>
$("#button").kendoButton({
click: function (e) {
//alert(combobox.value);
//alert(e.event.target.tagName);
var dataSource = new kendo.data.DataSource({
transport: {
// make JSONP request to https://demos.telerik.com/kendo-ui/service/products/create
create: {
url: "https://localhost:7170/api/Kunden",
dataType: "json", // "jsonp" is required for cross-domain requests; use "json" for same-domain requests
type: "PUT"
},
parameterMap: function (data, type) {
if (type == "create") {
// send the created data items as the "models" service parameter encoded in JSON
return { models: kendo.stringify(data.models) };
}
}
},
schema: {
model: {
id: "kundenId", // the identifier of the model
fields: {
id: { editable: false, nullable: true },
}
}
}
});
// create a new data item
dataSource.add({ id: 4713 });
//dataSource.insert(0, { id: 4714 });
// save the created data item
dataSource.sync(); // server response is [{"ProductID":78,"ProductName":"New Product","UnitPrice":0,"UnitsInStock":0,"Discontinued":false}]
//dataSource.pushCreate([{ id: combobox.value }]);
}
});
</script>
My API controller looks like this. I want to use the method SetKunde.
namespace Api.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class KundenController : ControllerBase
{
// GET: api/Kunden
[HttpGet]
public async Task<ActionResult<IEnumerable<Kunde>>> GetKundeItems()
{
//return await _context.KundeItems.ToListAsync();
DataAccess dataAccess = new DataAccess();
return dataAccess.GetKunden();
}
// GET: api/Kunden/5
[HttpGet("{id}")]
public async Task<ActionResult<Kunde>> GetKunde(long id)
{
//var kunde = await _context.KundeItems.FindAsync(id);
DataAccess dataAccess = new DataAccess();
Kunde kunde = dataAccess.GetKunde(id);
if (kunde == null)
{
return NotFound();
}
return kunde;
}
// PUT: api/Kunden/5
[HttpPut]
public async Task<ActionResult<Kunde>> SetKunde(KundeShort kdn)
{
return NotFound();
}
}
}
Hello Teacher:
My front-end code:
var dataSource = new kendo.data.DataSource({
type: "aspnetmvc-ajax",
pageSize: 25000,
serverPaging: false,
serverGrouping: false,
batch: true,
transport: {
read: {
url: urlRead,
data: kendo.antiForgeryTokens(),
type:"GET"
},
create: {
url: urlCreate,
data: kendo.antiForgeryTokens(),
cache: true,
},
update: {
url: urlUpdate,
data: kendo.antiForgeryTokens(),
cache: true,
},
destroy: {
url: urlDestroy,
data: kendo.antiForgeryTokens(),
cache: true
},
parameterMap: function (data, type) {
//if (type == "create") {
// // send the created data items as the "models" service parameter encoded in JSON
// return { models: kendo.stringify(data.models) };
//}
}
},
//requestStart: function() {
// kendo.ui.progress($("#"+gridName), true);
//},
//requestEnd: function() {
// kendo.ui.progress($("#"+gridName), false);
//},
sync: function (e) {
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: model,
errors: function (response) {
//ShowNotification(response);
return response.error;
}
},
error: function (e) {
//ShowNotification("Error");
dataSource.cancelChanges();
}
});
//dataSource.bind("error", function () { ShowNotification("dsError") });
grid.setOptions({
dataSource: dataSource,
persistSelection: true,
navigatable: true,
resizable:true,
reorderable:true,
dataBound: function (e) {
if (e.sender.dataSource.view().length > 0) {
e.sender.select("tr:eq(0)");
grid.trigger("change");
grid.unbind("dataBound");
}
}
});
Processing data in batches, I don't know how the frontend sends backend requests and how the backend receives requests?
Like the title says, my grid doesn't "call home" on row deletion... read/update/create work just fine (and all go to the same .aspx on the server).
Here's my (edited slightly) code:
var sThisPage = location.pathname.substring(location.pathname.lastIndexOf("/") + 1);
$("#divGrid").kendoGrid({
columns: [
{
field: 'Department1',
title: 'Department',
width: 100,
editable: telerik_grid_column_onEditable,
editor: deptDropDownEditor,
template: "${displayDept(Department1)}",
},
{
field: 'EmployeeID',
title: 'Employee',
width: 200,
editable: telerik_grid_column_onEditable,
editor: emplDropDownEditor,
template: "${displayEmpl(EmployeeID)}",
},
{
field: 'SecurityLevel',
title: 'Security level',
width: 100
},
{
field: 'EmplActive',
title: 'Active',
width: 80,
template: "#= EmplActive ? '<span class=\"fa-solid fa-check\"></span>' : '' #"
},
],
dataSource: new kendo.data.DataSource({
serverPaging: false,
serverFiltering: false,
serverSorting: false,
//autoSync: true,
requestStart: function (telerikEvent) {
},
requestEnd: function (telerikEvent) {
},
sync: function (telerikEvent) {
var oToolbar = $("#divToolbar").data("kendoToolBar");
var oFirstLine = this._data[0];
if (!oFirstLine.ID || oFirstLine.ID == '') { //First line is a new recordif ((!oFirstLine.Department1 || oFirstLine.Department1 == '')
|| (!oFirstLine.EmployeeID || oFirstLine.EmployeeID == '')
|| (!oFirstLine.SecurityLevel || oFirstLine.SecurityLevel == '' || oFirstLine.SecurityLevel == 0)) {
alert('New line not saved as some values are missing.');
}
}
oToolbar.enable("#btnSave", false);
oToolbar.enable("#btnCancel", false);
},
error: function (e) {
if (e.xhr) {
alert(e.xhr.responseText);
}
$("#divGrid").data("kendoGrid").cancelChanges();
},
transport: {
read: {
url: sThisPage,
type: "POST",
dataType: "json",
cache: false,
data: { action: "R" }
},
update: {
url: sThisPage,
type: "POST",
dataType: "json",
cache: false,
data: { action: "U" }
},
create: {
url: sThisPage,
type: "POST",
dataType: "json",
cache: false,
data: { action: "C" }
},
destroy: {
url: sThisPage,
type: "POST",
dataType: "json",
cache: false,
data: { action: "D" }
},
},
schema: {
model: {
id: "ID",
fields: {
Department1: {
type: "number"
},
EmployeeID: {
type: "number"
},
DeptName: {
type: "string"
},
EmployeeName: {
type: "string"
},
SecurityLevel: {
type: "number",
validation: { required: true, min: 1, max: 100 }
},
EmplActive: {
type: "boolean",
editable: false
},
}
}
},
}),
editable: true,
sortable: true,
selectable: "row",
change: telerik_grid_onChange,
beforeEdit: telerik_grid_onBeforeEdit,
edit: telerik_grid_onEdit,
cellClose: telerik_grid_onCellClose,
remove: function (telerikEvent) {
var x = telerikEvent;
this.dataSource.sync();
},
});
function telerik_toolbar_button_onClick(telerikEvent) {
var x = telerikEvent;
var oGrid = $("#divGrid").data("kendoGrid");
switch (telerikEvent.id) {
/*snip*/
case 'btnDelete':
var oSelected = oGrid.select();
oGrid.removeRow(oSelected);
break;
}
} //telerik_toolbar_button_onClick
If I set breakpoints on the requestStart and requestEnd functions in the data source and delete a line, neither gets hit.
Am I doing something wrong?
So I have data in this format
{
name: health
data:[[1,2],[2,2],[3,4]]
type:"area"
visible:true
},
{
name: health2
data:[[1,2],[2,2],[3,4]]
type:"line"
visible:true
}
I have attached a screenshot of what i want to achieve need guidance to do this I'm new to kendo .
i have controller using java as @RequestMapping("/charts") and it return in Json format but my question this data is not reflected in my Grid why.
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: function(options)
{ return "${pageContext.request.contextPath}/charts";
},
dataType: "json",
type: "GET"
}
},
schema:{
model: {
fields: {
id: { type: "number" },
fullName : { type: "string" },
address: { type: "string" },
email : { type: "string" },
password: { type: "string" },
designation: { type: "string" },
salary: { type: "number" }
}
}
},
aggregate: [ { field: "fullName", aggregate: "count" },
{ field: "salary", aggregate: "sum" }
]
,pageSize: 8 },
sortable: true,
scrollable: false,
pageSize: 5,
pageSizes: true,
hieght:20,
pageable: {
pageSizes: [4, 6,10,"all"],
buttonCount: 5
},
columns: [
{ field: "id", title: "ID", width: 180 },
{ field: "fullName", title: "Name",width:300,
template: "<div style=color:red>#=fullName#</div>" ,footerTemplate: "Total Count: #=count#" },
{ field: "address", title: "Address",width:300 },
{ field: "email", title: "Email",width:200},
{ field: "password", title: "Password" ,width:200},
{ field: "designation", title: "Designation" ,width:300},
{ field: "salary", title: "Salary" ,width:200,footerTemplate: "Total Sum: #=sum#"},
{ width:200,
template: "<a class='k-button' href='/Home/Index'>Redirect</a>" }
]
});