},

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

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?

functiondetailInitMainGrid(e) {

       console.log("IN: detailInitMainGrid()");
        var payCodeList = [];
         var data = _view.get("interimDS.interimPayrollRecords");

    //DEBUG:var data2 = e.data;
    
        $.each(data, function (index, value) {

            if (value.payCode != 'Total') {   // add NON-TOTAL records to data array//DEBUG://console.log("    LAST NAME:" + value.fullName + " : RECORD ID: " +value.interimPayrollRecordId);
                payCodeList.push({

                    interimPayrollRecordId: value.interimPayrollRecordId,
                    payCode: value.payCode,
                    amount: value.amount,
                    amountHrsMins: value.amountHrsMins,
                    monetary: value.monetary,

                });

            }
        });

    console.log("event data source: ID:" + e.data.interimPayrollRecordId + ", NAME: " + e.data.fullName);

    //var detailCell = e.detailCell;//detailCell.css("padding-left", "350px");
    

    $("<div/>").appendTo(e.detailCell).kendoGrid({
            dataSource:
            {
                data: payCodeList,
                serverPaging: false,
                serverSorting: false,
                serverFiltering: false,
                filter: { field: "interimPayrollRecordId", operator: "eq", value: e.data.interimPayrollRecordId }
            },
            scrollable: true,
            sortable: true,
            pageable: false,
            columns: [
                { field: "payCode", title: "Pay Code", width: "110px", attributes: { class: "child-table-details" } },
                { field: "amount", title: "Amount<br/>(HRS)", width: "50px", format: "{0:n}", attributes: { class: "child-table-details" } },
                { field: "amountHrsMins", title: "Amount<br/> (HRS:MIN)", width: "50px", attributes: { class: "child-table-details" } },
                { field: "monetary", title: "Monetary<br/>Amount", width: "50px", format: "{0:c}", attributes: { class: "child-table-details" } }
            ]
    });
    
}
 
 
    
                
                
    

var arr = [
      {text:"Option 11",value:"Value 11"},
      {text:"Option 22",value:"Value 22"}
     ];
    

    arr.push({text:"Option 33",value:"Value 33"});

    var datasource = new kendo.data.DataSource({
      data: arr
    });
    datasource.read();

    jQuery("#operation").data("kendoDropDownList").setDataSource(datasource);

var arr = [
      {text:"Option 11",value:"Value 11"},
      {text:"Option 22",value:"Value 22"}
     ];

for(i=0;i<operators.length;i++) {
      
      var singleElement = {
        text:operators[i],
        value:operators[i]
      };

      arr.push(singleElement);
}

var datasource = new kendo.data.DataSource({
      data: arr
    });

datasource.read();

jQuery("#operation").data("kendoDropDownList").setDataSource(datasource);

var arr = [
      {text:"Option 11",value:"Value 11"},
      {text:"Option 22",value:"Value 22"}
     ];

for(i=0;i<operators.length;i++) {
      
      var singleElement = "{text:\""+operators[i]+",value:\""+operators[i]+"\"}";


      arr.push(singleElement);
}

var datasource = new kendo.data.DataSource({
      data: arr
    });

datasource.read();

jQuery("#operation").data("kendoDropDownList").setDataSource(datasource);

@model System.Data.DataTable
@(Html.Kendo().Grid<dynamic>()
    .Name("Grid")
    .Sortable()
    .Scrollable(sc => sc.Endless(true))
    .Filterable()
    .Groupable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(100)
            .Model(model =>
            {
                var id = "Id";
                model.Id(id);
            })
            .Read(read => read.Action("Data_Read", "DynamicColumn"))
        )
)

 public IActionResult Data_Read([DataSourceRequest] DataSourceRequest request)
 {
     var dt = GetViewsData(request.PageSize, request.Page);
     var data = dt.ToDataSourceResult(request);
     var viewData = new DataSourceResult()
     {
         Data = data.Data, //this return NULL on the second page/scroll request
         Total = 181480 //total rows of table, just make it static
     };
     return Json(viewData);
 }

public DataTable GetViewsData(int pageSize, int page)
    {

        try
        {
            int offSet = (page - 1) * 100;
            string connString = "Server=.; Database=TheVault_VMC; Trusted_Connection=true; MultipleActiveResultSets=True; Encrypt=False;";
            SqlConnection con = new SqlConnection(connString);
            con.Open();
            SqlCommand cmd = new SqlCommand("sp_GetData", con);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@OFFSetRows", offSet);
            cmd.Parameters.AddWithValue("@PageSize", pageSize);
            SqlDataAdapter dataAdapter = new SqlDataAdapter(cmd);
            var dataTable = new DataTable();

            dataAdapter.Fill(dataTable);
            dataAdapter.FillSchema(dataTable, SchemaType.Mapped);
            con.Close();
            return dataTable;

        }
        catch (Exception ex)
        {
            throw ex;
        }
    }

}

CREATE PROCEDURE [dbo].[sp_GetData] 
   @OFFSetRows INT,
   @PageSize INT
As
BEGIN    
SELECT Id, [Column1], [Column2], [Column3],[Column4],[Column5],[Column6]
FROM
[StagingDetail]
ORDER BY Id
OFFSET @OFFSetRows ROWS
FETCH NEXT @PageSize ROWS ONLY
END