},

https://docs.telerik.com/kendo-ui/controls/scheduler/binding

Thanks,

Charlotte

"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",
.
.
.
  }

      <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}
      />

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}` }
    };
  }
}

    {
        "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",
       

TEST, ABC, DEF

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";
				})
			}
		}
	})
},

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";
})

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

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();
        }
   }
}

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?

 $("#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>"   }
                            
                        ]
                    });