I would like to create a custom filter for a kendo ui grid with the following requirements:

1. The column is a date.
2. There are other filterable columns that are not necessarily dates.
3. The filter dropdown should not be unnecessarily complex. There should be a startDate, endDate, filter, and clear buttons. No other dropdowns (no "and", "greater than", "less than", etc).
4. The filter should be in a dropdown menu from the column and not a separate row.
5. The dataSource is a JSON object.
6. The date in the JSON object is in this format: "2022-04-12T00:00:00".
7. When the user clicks the clear button in the dropdown and then tries to filter again it should still work as expected.

I tried following this Dojo: https://dojo.telerik.com/EVEwuREK but it only got me part way there as I do not know how to override the filter button and include the filters from the other columns. In this example, there is no submit or clear button so if the user enters dates they can't bet back to the full list and if they filter by column that filter gets cleared when filtering by date. It also produces unexpected results depending on whether you filter by country or date first. 

I made a sample Dojo here which shows the bug with filtering: Dojo

Steps to Reproduce:

1. Go to the Dojo and click run.
2. Click the birthday filter.
3. Choose 1/1/1980 - 1/1/1989 and click filter
4. Observe that the correct entry is displayed.
5. Click the filter on the birthday field again.
6. Click Clear (observe that all 3 records are now shown as expected)
7. Click the birthday filter again.
8. Choose the same dates as before 1/1/1980 - 1/1/1989 and click filter.
9. Notice this time 2 records are showing and neither fall inside that date range.

I am having an issue with the breadcrumb feature in the File Manager widget. No matter which breadcrumb link I click, it always takes me to the home directory. When I inspect the link, href is set to "#" for all of them. I'm not sure what I'm missing to make this work correctly. I've included my javascript, controller, and view. If other code is needed I can provide it. Thanks in advance for any help!

Javascript:

function loadFileManager() {

	$("#fileManager").kendoFileManager({
        draggable: false,
        resizable: true,
        dataSource: {
            transport: {
                read: {
                    url: $('#urlHolders').data('readFilesUrl'),
                    method: "POST"
                },
                create: {
                    url: $('#urlHolders').data('createFileUrl'),
                    method: "POST"
                },
                update: {
                    url: $('#urlHolders').data('updateFileUrl'),
                    method: "POST"
                },
                destroy: {
                    url: $('#urlHolders').data('destroyFileUrl'),
                    method: "POST"
                }
            }
        },
        uploadUrl: $('#urlHolders').data('uploadFileUrl'),
        toolbar: {
            items: [
                { name: "upload" },
                { name: "sortDirection" },
                { name: "sortField" },
                { name: "changeView" },
                { name: "spacer" },
                { name: "details" },
                { name: "search" }
            ]
        },
        contextMenu: {
            items: [
                { name: "rename" },
                { name: "delete" },
                { name: "download", text: "Download", command: "DownloadCommand", spriteCssClass: "k-icon k-i-download" }
            ],
            open: function (e) {
                //Executes when an item is right-clicked, before the context menu opens
                //We only want context menu actions to be available for files, not folders. So we intercept that here

                //Check whether the clicked item was a treeview item (folder)
                var isTreeviewItem = $(e.target).hasClass('k-treeview-item');

                //Check the clicked item for the folder icon class
                var isFolder = e.target.querySelector('.k-i-folder') != null;

                //if the clicked item a folder, do not open the context menu
                if (isTreeviewItem || isFolder) {
                    e.preventDefault();
                }
            }
        }
    });	

	var fileManager = $("#fileManager").getKendoFileManager();

	fileManager.executeCommand({ command: "TogglePaneCommand", options: { type: "preview" } });
	fileManager.toolbar.fileManagerDetailsToggle.switchInstance.toggle();

	var filemanagerNS = kendo.ui.filemanager;

	filemanagerNS.commands.DownloadCommand = filemanagerNS.FileManagerCommand.extend({
		exec: function () {
			var that = this,
				filemanager = that.filemanager, // get the kendo.ui.FileManager instance
				options = that.options, // get the options passed through the tool
				target = options.target // options.target is available only when command is executed from the context menu
			selectedFiles = filemanager.getSelected(); // get the selected files

			window.location = '/FileManager/Download?path=' + selectedFiles[0].path;

		}
	});
 
}

View:

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">File Manager</h1>
</div>

<div id="fileManagerContainer" class="wrapper">
    <div id="fileManagerContent">
        <div id="fileManager" class="rounded"></div>
    </div>
</div>

@section scripts {

    <script type="text/javascript">
        $(function () {
            loadFileManager();
        });

    </script>
}

Controller:

public class HomeController
{

	private readonly FileContentBrowser directoryBrowser;
	private const string contentFolderRoot = @"C:\Users\anna\Desktop\FileManagerContent";

	public HomeController(IPatientListService patientListService)
	{
		directoryBrowser = new FileContentBrowser(patientListService); // Helper utility for the FileManager controller
	}

	public ActionResult Index()
	{
		_auditService.LogEvent(new AuditEventModel
		{
			EventDef = EventDefinitions.PageOpened,
			EventItemName = AuditHelper.PageOpenedEventItemName(this.ControllerContext.RouteData)
		});

		return View("Index");
	}

	#region File Manager
	/// <summary>
	/// Gets the valid file extensions by which served files will be filtered.
	/// </summary>
	public string Filter
	{
		get
		{
			return "*.*";
		}
	}

	public JsonResult Read(string target)
	{
		var path = (string.IsNullOrWhiteSpace(target)) ? contentFolderRoot : target;
		int userId = User.Identity.GetUserId();

		try
		{
			directoryBrowser.Server = Server;

			var result = directoryBrowser.GetFiles(path, Filter).Concat(directoryBrowser.GetDirectories(path, userId));

			return Json(result, JsonRequestBehavior.AllowGet);
		}
		catch (DirectoryNotFoundException)
		{
			throw new HttpException(404, "File Not Found");
		}

		throw new HttpException(403, "Forbidden");
	}

	/// <summary>
	/// Updates an entry with a given entry.
	/// </summary>
	/// <param name="target">The path to the parent folder in which the folder should be created.</param>
	/// <param name="entry">The entry.</param>
	/// <returns>An empty <see cref="ContentResult"/>.</returns>
	/// <exception cref="HttpException">Forbidden</exception>
	public ActionResult Update(string target, FileManagerEntry entry)
	{
		FileManagerEntry newEntry;

		newEntry = RenameEntry(entry);

		return Json(newEntry);
	}

	public FileManagerEntry RenameEntry(FileManagerEntry entry)
	{
		var path = entry.Path;
		var physicalTarget = EnsureUniqueName(Path.GetDirectoryName(path), entry);
		FileManagerEntry newEntry;

		var file = new FileInfo(path);
		System.IO.File.Move(file.FullName, physicalTarget);
		newEntry = directoryBrowser.GetFile(physicalTarget);

		return newEntry;
	}

	public string EnsureUniqueName(string target, FileManagerEntry entry)
	{
		//Remove any extra file extensions that the user may have typed
		while (entry.Name.EndsWith(entry.Extension))
		{
			entry.Name = entry.Name.Remove(entry.Name.Length - entry.Extension.Length);
		}

		var fileName = entry.Name + entry.Extension;

		int sequence = 0;
		var physicalTarget = Path.Combine(target, fileName);

		//If the file name already exists, tack on a sequence #
		while (System.IO.File.Exists(physicalTarget))
		{
			fileName = entry.Name + String.Format("({0})", ++sequence) + entry.Extension;
			physicalTarget = Path.Combine(target, fileName);
		}

		return physicalTarget;
	}

	[HttpGet]
	public FileResult Download(string path)
	{
		FileInfo file = new FileInfo(path);

		System.Net.Mime.ContentDisposition cd = new System.Net.Mime.ContentDisposition
		{
			FileName = file.Name,
			Inline = false
		};
		Response.Headers.Add("Content-Disposition", cd.ToString());
		Response.Headers.Add("X-Content-Type-Options", "nosniff");

		string contentType = MimeMapping.GetMimeMapping(file.Name);
		var readStream = System.IO.File.ReadAllBytes(path);
		return File(readStream, contentType);

	}

	public ActionResult Destroy(FileManagerEntry entry)
	{
		var path = entry.Path;

		if (!string.IsNullOrEmpty(path))
		{
			DeleteFile(path);

			return Json(new object[0]);
		}
		throw new HttpException(404, "File Not Found");
	}

	public void DeleteFile(string path)
	{
		if (System.IO.File.Exists(path))
		{
			System.IO.File.Delete(path);
		}
	}

	/// <summary>
	/// Uploads a file to a given path.
	/// </summary>
	/// <param name="path">The path to which the file should be uploaded.</param>
	/// <param name="file">The file which should be uploaded.</param>
	/// <returns>A <see cref="JsonResult"/> containing the uploaded file's size and name.</returns>
	/// <exception cref="HttpException">Forbidden</exception>
	[AcceptVerbs(HttpVerbs.Post)]
	public virtual ActionResult Upload(string path, HttpPostedFileBase file)
	{
		var fileName = Path.GetFileName(file.FileName);

		if (true)
		{
			file.SaveAs(Path.Combine(path, fileName));

			return Json(new
			{
				size = file.ContentLength,
				name = fileName,
				type = "f"
			}, "text/plain");
		}

		throw new HttpException(403, "Forbidden");
	}
	
}

I am following this guide in order to implement a stepper where clicking on each step opens up a modal window.

The issue is when the stepper is on the Third step for example, clicking on it again does not trigger the select event.

What would be the way to have the select event trigger when the user clicks on the current step?

When I refresh the page using filterOCPPLogRefresh() function paging numbers are not displayed. 

Vestel.EVCMS.OCPPLogs.GetOCPPLogs = function (chargePointID) {
    $(".k-loading-image").show();
    $(document).ready(function () {
        // OCPP Log Grid
        filterStart = $("#start").data("kendoDateTimePicker").value();
        filterEnd = $("#end").data("kendoDateTimePicker").value();
        messageType = $("#dropdowntree").data("kendoDropDownTree").value();
        var direction = "AllMessageDirection";

        var wnd, detailsTemplate;

        var messageDirection = {'ReceivedAtGateway': Vestel.EVCMS.Common.OCPPLogsColumns.Outgoing, 'SentByGateway': Vestel.EVCMS.Common.OCPPLogsColumns.Incoming};

        $("#OCPPLogGrid").kendoGrid({
            dataSource: {
                transport: {
                    read: {
                        url: Vestel.EVCMS.Common.Global.EVCApiUrl + "api/ChargePoint/GetOCPPLogs?ChargePointID=" + chargePointID + "&filterStart=" + filterStart.toDateString() + " &filterEnd=" + filterEnd.toDateString() + "&messageType=" + messageType + "&direction=" + direction,
                        headers: {
                            "accept": "application/json;odata=verbose",
                            'Authorization': 'Bearer ' + Vestel.EVCMS.Common.Global.accessToken,
                        },
                        dataType: "json"
                    }

                },
                schema: {
                    model: {
                        id: "id",
                        fields: {
                            messageDate: {
                                type: "date",
                                editable: false,
                            },
                            messageID: {
                                editable: false,
                            },
                            messageDirection: {
                                editable: false,
                            },
                            messageType: {
                                editable: false,
                            },
                            messageDetails: {
                                type: "dynamic",
                                editable: false,
                            }
                        }
                    },
                }
            },
            pageable: {
                pageSize: 20,
                pageSizes: [10, 20, 30, 40, 50],
                messages: {
                    previous: Vestel.EVCMS.Common.PageableMessages.pagePrevious,
                    next: Vestel.EVCMS.Common.PageableMessages.pageNext,
                    last: Vestel.EVCMS.Common.PageableMessages.pageLast,
                    first: Vestel.EVCMS.Common.PageableMessages.pageFirst
                }
            },
            filterable: {
                operators: {
                    string: {
                        eq: Vestel.EVCMS.Common.Filter.eq,
                        neq: Vestel.EVCMS.Common.Filter.neq,
                        isnull: Vestel.EVCMS.Common.Filter.isempty,
                        isnotnull: Vestel.EVCMS.Common.Filter.isnotempty,
                        startswith: Vestel.EVCMS.Common.Filter.startswith,
                        doesnotstartwith: Vestel.EVCMS.Common.Filter.doesnotstartwith,
                        contains: Vestel.EVCMS.Common.Filter.contains,
                        doesnotcontain: Vestel.EVCMS.Common.Filter.doesnotcontain,
                        endswith: Vestel.EVCMS.Common.Filter.endswith,
                        doesnotendwith: Vestel.EVCMS.Common.Filter.doesnotendwith,
                    },
                    number: {
                        eq: Vestel.EVCMS.Common.Filter.eq,
                        neq: Vestel.EVCMS.Common.Filter.neq,
                        isnull: Vestel.EVCMS.Common.Filter.isempty,
                        isnotnull: Vestel.EVCMS.Common.Filter.isnotempty,
                        gte: Vestel.EVCMS.Common.Filter.gteNumber,
                        gt: Vestel.EVCMS.Common.Filter.gtNumber,
                        lte: Vestel.EVCMS.Common.Filter.lteNumber,
                        lt: Vestel.EVCMS.Common.Filter.ltNumber
                    },
                    date: {
                        eq: Vestel.EVCMS.Common.Filter.eq,
                        neq: Vestel.EVCMS.Common.Filter.neq,
                        isnull: Vestel.EVCMS.Common.Filter.isempty,
                        isnotnull: Vestel.EVCMS.Common.Filter.isnotempty,
                        gt: Vestel.EVCMS.Common.FiltergtDate,
                        gte: Vestel.EVCMS.Common.Filter.gteDate,
                        lt: Vestel.EVCMS.Common.Filter.ltDate,
                        lte: Vestel.EVCMS.Common.Filter.lteDate
                    },
                    enums: {
                        eq: Vestel.EVCMS.Common.Filter.eq,
                        neq: Vestel.EVCMS.Common.Filter.neq,
                        isempty: Vestel.EVCMS.Common.Filter.isempty,
                        isnotempty: Vestel.EVCMS.Common.Filter.isnotempty,
                        startswith: Vestel.EVCMS.Common.Filter.startswith,
                        doesnotstartwith: Vestel.EVCMS.Common.Filter.doesnotstartwith,
                        contains: Vestel.EVCMS.Common.Filter.contains,
                        doesnotcontain: Vestel.EVCMS.Common.Filter.doesnotcontain,
                        endswith: Vestel.EVCMS.Common.Filter.endswith,
                        doesnotendwith: Vestel.EVCMS.Common.Filter.doesnotendwith,
                    },
                }
            },
            scrollable: true,
            persistSelection: true,
            resizable: true,
            sortable: true,
columnMenu: true,
            toolbar: kendo.template($("#ocpplogtemplate").html()),
            columns: [
                { selectable: true, width: "50px" },
                { field: "messageDate", format: "{0:dd.MM.yyyy HH.mm.ss.fff}", title: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDate },
                { field: "messageID", title: Vestel.EVCMS.Common.OCPPLogsColumns.MessageID },
                { field: "messageDirection", title: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDirection, template: function (dataItem) { return messageDirection[kendo.htmlEncode(dataItem.messageDirection)] } },
                { field: "messageType", title: Vestel.EVCMS.Common.OCPPLogsColumns.MessageType },
                //{ field: "messageDetails", title: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDetails, width: 550 },
                { command: { text: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDetails, click: showDetails }, width: "200px" }
            ],
            editable: "popup"
        });

        wnd = $("#loggrid")
            .kendoWindow({
                title: Vestel.EVCMS.Common.OCPPLogsColumns.CustomDimensionsRaw,
                modal: true,
                visible: false,
                resizable: false,
                scrollable: true,
                draggable: true,
                width: '700px',
                height: '200px'
            }).data("kendoWindow");

        detailsTemplate = kendo.template($("#template").html());

        function showDetails(e) {
            e.preventDefault();
            var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
            wnd.content(detailsTemplate(dataItem));
            wnd.center().open();
        }

        $("#ExportOCPPLogs").click(function (e) {
            var grid = $("#OCPPLogGrid").getKendoGrid();
            var dataSource = grid.dataSource;
            var filters = dataSource.filter();
            var sort = dataSource.sort();
            var allData = dataSource.data();
            var query = new kendo.data.Query(allData);
            var data = typeof (sort) !== "undefined" ? query.filter(filters).sort(sort).data : query.filter(filters).data;

            var rows = [{
                cells: [
                    { value: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDate },
                    { value: Vestel.EVCMS.Common.OCPPLogsColumns.MessageID },
                    { value: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDirection },
                    { value: Vestel.EVCMS.Common.OCPPLogsColumns.MessageType },
                    { value: Vestel.EVCMS.Common.OCPPLogsColumns.MessageDetails },
                ]
            }];

            var messageDirectionArray = { 'ReceivedAtGateway': Vestel.EVCMS.Common.OCPPLogsColumns.Outgoing, 'SentByGateway': Vestel.EVCMS.Common.OCPPLogsColumns.Incoming };
            var isSelectedRowOrAllRow = false;
            var trs = $("#OCPPLogGrid").find('tr');
            for (var i = 1; i < trs.length; i++) {
                if ($(trs[i]).find(":checkbox").is(":checked")) {
                    isSelectedRowOrAllRow = true;
                    var dataItem = grid.dataItem(trs[i]);
                    var messageDirection = messageDirectionArray[dataItem.messageDirection];

                    rows.push({
                        cells: [
                            { value: dataItem.messageDate }, //kendo.toString(kendo.parseDate(dataItem.messageDate), "yyyy.MM.dd h.mm.fff") },
                            { value: dataItem.messageID },
                            { value: messageDirection },
                            { value: dataItem.messageType },
                            { value: dataItem.messageDetails },
                        ]
                    });
                }
            }

            if (isSelectedRowOrAllRow === false) {
                $.each(data, function (i, dataItem) {
                    var messageDirection = messageDirectionArray[dataItem.messageDirection];
                    rows.push({
                        cells: [
                            { value: dataItem.messageDate }, //kendo.toString(kendo.parseDate(dataItem.messageDate), "yyyy.MM.dd h.mm.fff") },
                            { value: dataItem.messageID },
                            { value: messageDirection },
                            { value: dataItem.messageType },
                            { value: dataItem.messageDetails },
                        ]
                    })
                });
            }

            var data = [];
            $.each(rows[1].cells, function (index, element) {
                if (typeof element.value != 'undefined') {
                    data.push(index);
                }
            });
            filterForExport(data);

            function filterForExport(data) {
                var eligibleColumns = data;
                var filteredRows = [];

                if (eligibleColumns != null) {
                    $.each(rows, function (index, element) {
                        var tempElement = [];
                        for (i = 0; i < eligibleColumns.length; i++) {
                            tempElement.push(element.cells[eligibleColumns[i]])
                        }
                        filteredRows.push({
                            cells: tempElement
                        });
                    });
                }
                else {
                    filteredRows = rows;
                }

                excelExport(filteredRows)
            }
        });

        function excelExport(rows) {
            for (var j = 1; j < rows.length; j++) {
                for (var i = 0; i < rows[j].cells.length; i++) {
                    if (rows[j].cells[i].value instanceof Date) {
                        rows[j].cells[i].format = "dd.MM.yyyy HH.mm.sss";
                        if (rows[j].cells[i].value.toLocaleDateString() === "1/1/1" || rows[j].cells[i].value.toLocaleDateString() === "01.01.1970") {
                            rows[j].cells[i].value = "-";
                        }
                    }
                }
            }

            var workbook = new kendo.ooxml.Workbook({
                sheets: [
                    {
                        columns: [
                            { autoWidth: true },
                            { autoWidth: true }
                        ],
                        title: "OCPP Logs",
                        rows: rows
                    }
                ]
            });
            kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: "OCPPLogs.xlsx" });
        }
    });

    $("#dropdowntree").kendoDropDownTree({
        placeholder: Vestel.EVCMS.Common.OCPPLogsColumns.SellectMessageType,
        checkboxes: true,
        checkAll: true,
        autoClose: false,
        dataSource: [
            { text: "Authorize", value: "Authorize" },
            { text: "BootNotification", value: "BootNotification" },
            { text: "CancelReservation", value: "CancelReservation" },
            { text: "ChangeAvailability", value: "ChangeAvailability" },
            { text: "ChangeConfiguration", value: "ChangeConfiguration" },
            { text: "DataTransfer", value: "DataTransfer" },
            { text: "DiagnosticsStatusNotification", value: "DiagnosticsStatusNotification" },
            { text: "EmergencyStopTransaction", value: "EmergencyStopTransaction" },
            { text: "FirmwareStatusNotification", value: "FirmwareStatusNotification" },
            { text: "GetConfiguration", value: "GetConfiguration" },
            { text: "GetDiagnostics", value: "GetDiagnostics" },
            { text: "Heartbeat", value: "Heartbeat" },
            { text: "MeterValues", value: "MeterValues" },
            { text: "RemoteStartTransaction", value: "RemoteStartTransaction" },
            { text: "RemoteStopTransaction", value: "RemoteStopTransaction" },
            { text: "ReserveNow", value: "ReserveNow" },
            { text: "Reset", value: "Reset" },
            { text: "StartTransction", value: "StartTransction" },
            { text: "StatusNotification", value: "StatusNotification" },
            { text: "StopTransaction", value: "StopTransaction" },
            { text: "TriggerMessage", value: "TriggerMessage" },
            { text: "UnlockConnector", value: "UnlockConnector" },
            { text: "UpdateFirmware", value: "UpdateFirmware" }
        ],
        animation: false
    });

    var dropdowntree = $("#dropdowntree").data("kendoDropDownTree");

    dropdowntree.value([
        "Authorize",
        "BootNotification",
        "CancelReservation",
        "ChangeAvailability",
        "ChangeConfiguration",
        "DataTransfer",
        "DiagnosticsStatusNotification",
        "EmergencyStopTransaction",
        "FirmwareStatusNotification",
        "GetConfiguration",
        "GetDiagnostics",
        "Heartbeat",
        "MeterValues",
        "RemoteStartTransaction",
        "RemoteStopTransaction",
        "ReserveNow",
        "Reset",
        "StartTransction",
        "StatusNotification",
        "StopTransaction",
        "TriggerMessage",
        "UnlockConnector",
        "UpdateFirmware"]
    );

    dropdowntree.trigger("change");
}

I am facing this challenge, when i made some upgrades to Kendo UI controls.

kendo.multiselect.min.js:25

       Uncaught TypeError: Cannot read properties of undefined (reading 'renderChipList')

    at init._tagList (kendo.multiselect.min.js:25:20983)

    at new init (kendo.multiselect.min.js:25:1453)

    at HTMLSelectElement.<anonymous> (kendo.core.min.js:25:40814)

    at Function.each (jquery-1.12.4.min.js:2:2881)

    at n.fn.init.each (jquery-1.12.4.min.js:2:846)

    at n.fn.init.g.fn.<computed> [as kendoMultiSelect] (kendo.core.min.js:25:40791)

    at HTMLDocument.<anonymous> (TrackingTicketInquiry:3590:71)

    at i (jquery-1.12.4.min.js:2:27449)

    at Object.fireWith [as resolveWith] (jquery-1.12.4.min.js:2:28213)

    at Function.ready (jquery-1.12.4.min.js:2:30006)

Hi,

I'm using the .open() method on a timeline. When opening an event with this method, the little triangular caret on the event card is not consistently displayed.

This is what I expect to see. The triangle is displayed when I click on an event.

When an event is opened via the .open() method, the caret is not usually displayed (but sometimes it is, this is not consistent).

Code:

// eventData comes from an ajax call, this function is invoked in the callback

function initTimeline(eventData) {
    $("#timeline").unbind();
    $("#timeline").html('');
    $("#timeline").removeClass();

    timeline = $("#timeline").kendoTimeline({
        eventTemplate: kendo.template($("#eventTemplate").html()),
        dateFormat: "MMMM yyyy",
        orientation: timelineOrientation,
        collapsibleEvents: true,
        dataSource: {
            data: eventData, 
            schema: {
                model: {
                    fields: {
                        date: {
                            type: "date"
                        },
                    }
                }
            }
        },
        dataBound: function (e) {
            data = e.sender.dataSource.data();

            // Create the timeline type filter menu
            createTimelineFilterMenu();

            // Initalize any timeline datatables
            fInitAllDataTables();
        },
        change: function (e) {
            setTimeout(fInitAllDataTables, 1000);
        }
    });

// this is called on button click, it opens the first event in the timeline
function goToFirst() {
    var kendoTimeline = $("#timeline").data().kendoTimeline;
    var firstEvent = kendoTimeline.element.find(".k-timeline-track-item:not(.k-timeline-flag-wrap):first");
    kendoTimeline.open(firstEvent);
}

I used the kendoGrid for years, and there's something that were never able to fix, until today I think...

When we use resizable + scrollable, we set the "width" value for all of our columns.

If the total of visible columns is less then the width of the grid, when we resize, all columns move in any random width and it's almost unusable.

Over the years, we tried, to add a fake column, we show-hide it, and we tried other sort of hack, or show-hide the first visible column, etc.

But I think that I found the reason why it doesn't work, and kendo can easily fix it.,

There are 2 tables that are sync for header and body:

<table role="grid" >...  which are defined in the "_scrollable" function.

When a resize, or show-hide occurs, a function is run to set the css "width" of that table.

But, initially, it is not set. 

That's why a hack using a columnShow-Hide sometimes fix the problem, as the width is set on these tables.

But, what we just found, is that, if we call the function _updateContentWidth on our kendoGrid after creating it, the width is correctly set on these tables, and it works as expected.

Can you confirm that this method can be used without problem, and, by the way, is possible that you fix the problem, and always call that function in that situation?

Actually, I see in the code that it is only called from inside the showColumn function.

I think that it is called if a "virtual" property is also set, but I think it should be called in other conditons also, like, when there is a specific width on ALL columns.

https://dojo.telerik.com/@foxontherock/oXocEqOh/5

Hello,

I'm working with a Kendo Form. My goal is to get the certain parameter to populate its respective dropdownlist in the kendo form once the user clicks the link provided.

URL Example - User will click this link and navigate to form with their respective session code and paper/abstract code populated in dropdownlist item:

https://website.com/SpeakerRegistration?sessioncode=1234&abstractcode=16143

Test Commentary:

I am able to validate that upon page load, it does get the parameters and prints to console. BUT, I am not able to get it to populate in the dropdownlist. 

The Kendo Form Code & Window.load code at the bottom:

$(document).ready(function () {
            var validationSuccess = $("#validation-success");
 
            $("#exampleform").kendoForm({
                orientation: "vertical",
                formData: {
                    Email: "john.doe@email.com"
                },
                items: [{
                    type: "group",
                    items: [
                        {
                            field: "FirstName",
                            label: "First Name",
                            editor: "TextBox",
                            validation: { required: true }
                        },
                        {
                            field: "LastName",
                            label: "Last Name",
                            editor: "TextBox",
                            validation: { required: true }
                        },
                        {
                            field: "Degrees",
                            label: "Degrees",
                            editor: "TextBox"
                        },
 
                        {
                            field: "Session_ID",
                            label: "Session ID",
                            id: "sessions",
                            editor: "DropDownList",
                            validation: { required: true },
                            editorOptions: {
                                placeholder: "Session #",
                                filter: "contains",
                                dataSource: {
                                    type: "Data",
                                    serverFiltering: true,
                                    transport: {
                                        read: {
                                            url: "@Url.Action("SessionDropdown", "ConfSessions2022")",
                                            contentType: "application/json",
                                            type: "POST"
                                        }
                                    }
                                },
                                change: function (e) {
                                    var paperDrop = $("#Paper_ID").data("kendoDropDownList");
                                    paperDrop.dataSource.read();
                                },
                            }
                        },
 
                        {
                            field: "Paper_ID",
                            label: "Paper ID",
                            id: "papers",
                            editor: "DropDownList",
                            validation: { required: true },
                            editorOptions: {
                                placeholder: "Paper #",
                                filter: "contains",
                                dataSource: {
                                    type: "Data",
                                    serverFiltering: true,
                                    transport: {
                                        read: {
                                            url: "@Url.Action("PaperDropdown", "ConfSessions2022")",
                                            contentType: "application/json",
 
                                            data: ReadData
 
 
 
 
                                        }
                                    }
                                }
                            }
 
                        },
                        {
                            field: "File",
                            editor: function (container, options) {
                                 $('<input type="file" name="' + options.field + '" id="' + options.field + '"/>')
                                    .appendTo(container)
                                    .kendoUpload({
                                        async: {
                                            chunkSize: 11000,// bytes
                                            autoUpload: false,
                                            saveUrl: "@Url.Action("Chunk_Upload_Save", "ConfSessions2022")",
                                            removeUrl: "remove"
 
                                        },
                                        upload: onUpload,
                                        validation: {
                                            allowedExtensions: [".mp4"],
                                            maxFileSize: 524288000
                                        },
                                        select: onSelect
 
                                    });
                            }
                        }
 
 
                    ]
                }],
                validateField: function (e) {
                    validationSuccess.html("");
                },
                submit: function (e) {
                    e.preventDefault();
                    var upload = $("#File").data("kendoUpload");
                    upload.upload();
 
                    validationSuccess.html("<div class='k-messagebox k-messagebox-success'>Form data is valid!</div>");
                },
                clear: function (ev) {
                    validationSuccess.html("");
                }
            });
 
        });
 
        function onUpload(e) {
            e.sender.options.async.saveUrl = "@Url.Action("Chunk_Upload_Save", "ConfSessions2022")" + "?FirstName=" + document.getElementById("FirstName").value + "&LastName=" + document.getElementById("LastName").value + "&SessionID=" + document.getElementById("Session_ID").value + "&PaperID=" + document.getElementById("Paper_ID").value;
        }
 
 
 
        function ReadData() {
            var dropdownVal = document.getElementById("Session_ID").value;
 
            return {
                sessionDrop: dropdownVal
            };
        };
 
        function onSelect(e) {
            $("div.k-action-buttons").hide();
        }
 
 
 
        window.onload = function() {
            try {
                const input = document.getElementsByName('Session_ID');
                const inputTwo = document.getElementsByName('Paper_ID');
                var url_string = (window.location.search).toLowerCase(); //
                var url = new URLSearchParams(url_string);
                var session = url.get('sessioncode');
                var paper = url.get('abstractcode');
                var inputThree = document.getElementsByClassName('k-input-value-text');
                input.value = session;  // fill the form with the SessionID
                inputTwo.value = paper;
                console.log(session+ " and "+paper);
                
            } catch (err) {
                console.log("Issues with Parsing URL Parameter's - " + err);
            }
        }

Thank you, look forward to receiving your help.

Lee

Hi,

I am looking for a way to change the font size & font family after the spreadsheet is loaded.

I know that this can be done when we loop through all the cells and set it individually, i am looking for a more elegant way to do in a sheet/control level. Is it possible?

I saw the defaultCellStyle attribute but i am not able to get it working even changing the values.

TIA

Regards,

Brian