Questions on Kendo UI for jQuery Forum

1 answer

102 views

Can we drag and drop files to a kendo grid?

Hello,

I am trying to implement a drag and drop functionality for grid, so that I can drag files and drop in specific rows, so the file will uploaded and saved for that record.

Is this doable and can you post some links or leads.

My next requirement is to load uppy plugin uploader while I drop files and it will do the file upload for that record.

Thanks

Drag and Drop

Grid

updated answer on 26 Sep 2024

0 answers

88 views

Is there a dataSource function I can call to trigger a read(), but only if necessary?

Hello we have a number of input elements, dropdowns, multiselects, etc which we are trying to defer loading for.

The problem is they use custom shared datasources, so setting them to AutoBind false is not automatically triggering the read() function, and we have added some additional dataSource behavior around multiselectors, which leads me to my question:

Is there a dataSource function like read() which only reads data from the server if its actually necessary? e.g. on the first load, if the dataSource has detected that the user has done something to the UI element to warrant a refresh, etc?

I know there are a tonne of undocumented functions on the kendo objects, some of them not intended for everyday use, but I'd be interested to know if any of them do what we need.

asked on 25 Sep 2024

1 answer

45 views

Adjust Header Attendee name in horizontal resources grouping Kendo UI Scheduler

hello

i am using the horizontal resources grouping in Kendo UI Scheduler and I want to adjust the header attendee name same like word wrap css property so that last name will come after first name.

Scheduler

answered on 25 Sep 2024

1 answer

358 views

ScrollView not anymore working in Firefox

Hello

ScrollView seems not to work anymore in Firefox. You can try it by yourself with KendoUIs sample:

1. Open Firefox

2. Head here: https://demos.telerik.com/kendo-ui/scrollview/index

3. Click the left/right arrow or any dot at bottom of displayed image

-> See tany other image is not displayed.

Firefox shows some warnings but no errors in the Console. Tested on Mac with Firefox 126.0 (64Bit) but also got information it's not working with Firefox on Windows (not sure about Firefox Mobile).

Anyone can confirm this issue/bug?

ScrollView

updated question on 25 Sep 2024

0 answers

64 views

Insert Video from Editor

I didn't find any preconstructed mode, from editor to add a video to the content.

If it can help anyone, here is my solution:

In the html

<div id="kVideoDialog"></div>

in script

$(document).ready(function () {
	var videoDia = $("#kVideoDialog");
		functionpasteVideoTo(editorToPaste) {
			let source = $("#source").val();
			let autoplay = $("#play").val() == 1 ? " autoplay" : null;
			let controls = $("#ctrl").val() == 1 ? " controls" : null;
			if(source != "") {
				editorToPaste.exec("insertHtml", { value: '<video' + controls + autoplay + '><source src="' + source + '"></video><p></p>'});
				return true;
			}
			return false;
				
			
		}
	
	functionopenVideoDialog(editorToPaste) {
		videoDia.kendoDialog({
			title: "Select Video",
			closable: true,
			modal: true,
			actions: [
				{ text: 'OK', primary: true,
					action: function (e) {

						return pasteVideoTo(editorToPaste);
				},
				},
				{ text: 'Annulla' },

			]
		});
		videoDia.data("kendoDialog").open();
		videoDia.html('<div id="videomanager"></div><div><label for="source">Sorgente Video:</label><br><input type="text" style="width: 100%;" id="source"><br><label for="play">Autoplay</label><input type="checkbox" value="1" id="play"><br><label for="ctrl">Show Controls</label><input type="checkbox" value="1" checked id="ctrl"></div>');
		
		$("#videomanager").kendoFileManager({
                dataSource: {
                   schema: kendo.data.schemas.filemanager,
                   transport: {
                    read: {
                        url: "/kendo-video-reader.php",
                        method: "POST"
                    },
                    create: {
                        url: "/kendo-fm-dir-maker.php",
                        method: "POST"
                    },
                    update: {
                        url: "/kendo-fm-updater.php",
                        method: "POST"
                    },
                    destroy: {
                        url: "/kendo-fm-deleter.php",
                        method: "POST"
                    }
                  }
               },
            uploadUrl: "/kendo-video-uploader.php",
		select: function(e) {
			let video = JSON.stringify(e.entries);
			const json = JSON.parse(video);
			const source = json[0].path;
			if(source.endsWith(".mp4") ||source.endsWith(".ogg") ||source.endsWith(".webm"))
				$("#source").val("/" + source);
			else
				$("#source").val("");
		},
            toolbar: {
                items: [
                    { name: "createFolder", text: "New Folder" },
                    { name: "upload", text: "Upload" },
                    { name: "sortDirection", text: "Sort" },
                    { name: "sortField", text: "Sort by" },
                    { name: "changeView", text: "Change View"},
                    { name: "spacer" },
                    { name: "details", text: "Details" },
                    { name: "search", text: "Search" }
                ]
            },
            contextMenu: {
                items: [
                    { name: "rename" },
                    { name: "delete" }
                ]
            },
            draggable: true,
            resizable: true
        });
            var filemanager = $("#videomanager").getKendoFileManager();
	}

//then in editor custom tools:
{  
	name: "insertVideo",
	text: "Insert Video",
        tooltip: "Select and insert Video",
        exec: function (e) {
                   var editor = $("#editor").data("kendoEditor");
	           openVideoDialog(editor);
         },
        icon: {
            viewBox: '0 0 512 512',
            content: '<rect style="fill: none;" width="523" height="523"/></rect>'+
		     '<path style="fill: #A59994;" d="M81 268l360 0 0 203 -360 0 0 -203zm199 63c10,0 19,9 19,19 0,10 -9,19 -19,19 -10,0 -19,-9 -19,-19 0,-10 9,-19 19,-19l0 0zm57 -38l-152 0c-7,0 -13,6 -13,13l0 127c0,7 6,13 13,13l152 0c7,0 13,-6 13,-13l0 -127c0,-7 -6,-13 -13,-13l0 0zm0 108l-25 -25 -32 32 -51 -51 -44 44 0 -95 0 0 152 0 0 0 0 95z"/></path>' + 
                     '<path style="fill: #A59994;" d="M81 52l360 0 0 203 -360 0 0 -203zm248 101l-68 31 -68 31 0 -62 0 -62 68 31 68 31z"/></path>' +
                     '<path style="fill: ##86776F;" d="M510 52l-68 0 0 203 -360 0 0 -203 -68 0 0 419 68 0 0 -203 360 0 0 203 68 0 0 -419zm-484 12l42 0 0 42 -42 0 0 -42zm0 282l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 282l42 0 0 42 -42 0 0 -42zm429 -353l42 0 0 42 -42 0 0 -42zm0 282l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 -71l42 0 0 42 -42 0 0 -42zm0 282l42 0 0 42 -42 0 0 -42z"/></path>'
        } 
 }

}

Bye.

Alessandro

Editor

updated question on 24 Sep 2024

1 answer

81 views

FileManager, call action on open folder

Hello,

I was wondering if there is a way, in FileManager, to call an action when a directory is browsed.

My scenario is the following:

I have a FileManager and an iFrame that shows the link to each file in target directory (root), each file has a button to copy his path to clipboard.

Now, what I want to achieve is to change the directory content listed in iFrame according to what I browse in the FileManager.

something like:

action: refreshIFrame(targetIframeID, pathToBrowse)

Is that possible?

Thank you.

Alessandro

FileManager

answered on 24 Sep 2024

0 answers

59 views

Why is k-reset css class being applied to kendo menu?

I have a page with kendo menu and sometimes k-reset css class is being applied to all ul elements in a kendo menu. As a result the kendo menu is becoming all white and then its impossible to read the menu items.

Is there any way to prevent this css class of k-reset from being applied?

Menu

asked on 23 Sep 2024

0 answers

106 views

Why Rename on FileManager triggers the create url instead of the update one?

I am calling the FileBrowser as follow:

            dataSource: {
                schema: kendo.data.schemas.filemanager,
                transport: {
                    read: {
                        url: "/kendo-fm-reader.php",
                        method: "POST"
                    },
                    create: {
                        url: "/kendo-fm-dir-maker.php",
                        method: "POST"
                    },
                    update: {
                        url: "/kendo-fm-updater.php",
                        method: "POST"
                    },
                    destroy: {
                        url: "/kendo-fm-deleter.php",
                        method: "POST"
                    }
                }
            },
            uploadUrl: "/kendo-fm-file-uploader.php"

But when I rename a folder, the page triggered is "/kendo-fm-dir-maker.php" and not "/kendo-fm-updater.php"...

Is that possible and correct?

I think this behaviour is incorrect, as it creates new folders with the name I want to give to the renamed one.

Is there a way to modify this behaviour or I am doing something wrong?

Thank you.

Alessandro

FileManager

updated question on 23 Sep 2024

0 answers

77 views

Kendo dropdownlist virtual with server filtering making multiple Server Requests

We are instantiating late bind a new dropdownlist using jquery, making it virtual and reading data from an ajax call on the server

Here is an example of a dropdown initialization

$('#articles-row select:first').kendoDropDownList(
{
    filter: "contains",
    dataTextField: "Name",
    dataValueField: "Id",
    virtual: {
        itemHeight: 35,
        valueMapper: valueMapperArticles
    },
    dataSource: {
        pageSize: 80,
        serverPaging: true,
        serverFiltering: true,
        schema: {
            data: function (response) {
                console.log(response.Data)
                return response.Data;
            }
        },
        transport: {
            read: {
                url: "@Url.Action("Filter_Articoli")"
            }
        }
    }
});

And here is a simplified version of the datasource read method used in our program

public JsonResult Filter_Articoli([DataSourceRequest] DataSourceRequest request)
{
    IQueryable<Articles> art = _db.Articles
            .Where(x => !x.Disabled).AsQueryable();
    return Json(art.ToDataSourceResult(request));
}

When i instantiate the dropdown like so, he makes multiple server request, where the first one is correct i guess (using paging, sorting etc), and the other two are not necessary and badly formatted, making the execution of the page interrupt

Here is a screen of the three server request made by the datasource and the data obtained from the data formatting

Am i missing some configuration on the server or in the kendo dropdownlist instantiation?

Thanks in advance

Data Source

DropDownList

asked on 20 Sep 2024

0 answers

154 views

Using multi column combo box as auto complete

I want to use Kendo multi column combo box as an auto-complete input. My data source is accessed via an API. The API URL can include filter parameters. All of our data sources are very large (tens of thousands of records), so I need to do server-side filtering by adjusting the parameter portion of the URL.

What properties, events and methods would I use to refresh the data source as the user is typing (with delay)?

pseudo code:

combobox.onchange() {

ApiUrl = "https://blahblah/getRecords?filterstring=" + combobox.val();

combobox.datasource.transport.read = ApiUrl

}

I can't seem to figure out how to get something to work. Seems like this should be easy to do.

Any suggestions would be greatly appreciated.

MultiColumnComboBox