Questions on Kendo UI for jQuery Forum

1 answer

12 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

133 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

13 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

10 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

13 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

15 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

11 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

15 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

asked on 18 Sep 2024

1 answer

13 views

How can one dynamically set field property for Line Chart

I am trying to get my Line Chart to dynamically assert the field text rather than having to explicitly put the field in my remote datasource objects and then state that property as the field in the Line chart series.

so instead of doing it like

data = [

{Date: 09/10/2020, English: 88, Math: 99, Science: 45},

{Date: 08/22/2020, English: 76, Math: 90, Science: 95},

{Date: 08/01/2020, English: 70, Math: 80, Science: 75}

]

and LineSeries = [

{
field: "English",
categoryField: "date",
name: "English",
},
{
field: "Math",
categoryField: "date",
name: "Math",
},
{
field: "Science",
categoryField: "date",
name: "Science",
}

]

like in the Line Chart its done in the JQuery Line Chart example to get a seperate line for each subject and a data point for each distinct date.

Is it possible to instead do

data = [

{Date: 09/10/2020, Subject: "Math", Value: "78" },

{Date: 09/10/2020, Subject: "English", Value: "80" },

{Date: 09/10/2020, Subject: "Science", Value: "65" }

{Date: 08/22/2020, Subject: "Math", Value: "87"},

{Date: 08/22/2020, Subject: "English", Value: "97"},

{Date: 08/22/2020, Subject: "Science", Value: "57"},

]

and something like LineSeries = [ {
field: "Subject",
categoryField: "date",
name: "Subject",
},
] ? if not is there a seperate way to configure the series to get a seperate line for each subject and a data point for each distinct date?

Charts

Data Source

answered on 18 Sep 2024

1 answer

14 views

Can a Kendo Ui Line Chart accept hierachial data?

Currently I am trying to create a kendo UI Line chart based on a nested data model that looks like

{

key: "Kelly"

DateValue: [

{Date: 08/07/2020, Grade: 100}

{Date: 09/10/2020, Grade: 82}

] is this possible to create where for each date there is a data point and for each object with a distinct key there is a distinct line that represents that key?

Charts

Data Source