Questions on Kendo UI for jQuery Forum

1 answer

23 views

Insert Image tool does not insert image at current position.

Hii,

I am using Kendo version Kendo UI v2020.2.617 in our project, and while using insertImage tool from the editor I am facing some issues.

Following are the issues I faced -

1. When I select the insertImage tool and try adding an image at a certain position, it jumps to the top of the editor (Once in multiple try it sticks at a certain position).

2. insertImage tool does not render images from all URLs. I entered multiple URLs but only on some URLs I got an image rendered.

I have attached the screenshot above regarding the issue where once the image is rendered at the last position else it is rendered at the top.

Will you please help me out with possible ways to fix this?

Thank you,

Sameep Sawant

ImageEditor

answered on 20 Feb 2024

2 answers

43 views

How to programmatically resize a picture with the ImageEditor

Based on this link we want to use the resize Command to downscale an uploaded picture

https://docs.telerik.com/kendo-ui/api/javascript/ui/imageeditor/methods/executecommand#executecommand

Something like

imageEditor.executeCommand({ command: "ResizeImageEditorCommand", options: {height: 1080, aspectRatio: true } });

How could this be realised

best regards

Maik

ImageEditor

answered on 16 Oct 2023

0 answers

52 views

Kendo ImageEditor canvas support in jquery

Hi, are there any demo counterparts in jquery of canvas mode in asp.net?

https://demos.telerik.com/aspnet-ajax/imageeditor/examples/canvassupport/defaultcs.aspx

so basically we want to edit an image adding text, line and such.

ImageEditor

updated question on 06 Mar 2023

0 answers

76 views

Image Editor i.toolbar.enable is not a function

When utilizing an image editor control I receive the following output in console and the image does not load: Please see markup below

Html Page Div Implementation

Html Page Script Implementation

Console output

Result of View

My Layout has the following implementations for CSS and JS

ImageEditor

asked on 16 Jan 2023

1 answer

114 views

Pagination in ImageBrowser of Kendo Editor

Hello,

I am working with application where I have thousands of images to load on ImageBrowser of Kendo Editor.

ImageBrowser is getting stuck as having too many images to load, Can we have any option to add pagination or lazy loading in ImageBrowser?

So, I can load only 20 images at a time and other based on request.

Please note that I am fetching images from controller method which returns list of FileBrowserEntry as below.

Thanks,

Trusha

answered on 29 Jun 2022

0 answers

185 views

Kendo Image Editor Error in Kendo Window. Please help me.

I don't know what happend with my Kendo Image Editor. It add more Kendo Image Editor to Kendo Window.

I only transmit one link from the data source.

My Json in data source only has 1 link, but when I open kendo window, it crashes.

When it call dataSourceGetImageUrl.read(); it will add new one more kendo Editor

Info in my image: https://ibb.co/hcx2ck7

My code:

var dataSourceGetImageUrl = new kendo.data.DataSource({
        
        transport: {
            read: function (options) {
                $.ajax({
                    url: "/_layouts/15/VuThao.TrainSharepoint/API/ApiHandler.ashx?tbl=like&func=getimageurl",
                    type: 'GET',
                    cache: false,
                    scriptCharset: "utf8",
                    dataType: "json",
                    data: {
                        models: kendo.stringify(options.data.models)
                    },
                    success: function (result) {
                        options.success(result);
                    }
                });
            },
        },
        schema: {
            data: 'data',
            model: {
                id: "imageUrl"
            }
        },
        change: function (e) {
            var view = dataSourceGetImageUrl.view()[0].imageUrl;
            $("#imageEditor").kendoImageEditor({


                imageUrl: view,
                width: "100%",
                height: 650,
                saveAs: {
                    fileName: "image_edited.png"
                }
            });

            var imageEditor = $("#imageEditor").getKendoImageEditor();
            imageEditor.one("imageRendered", function () {
                imageEditor.executeCommand({ command: "ZoomImageEditorCommand", options: imageEditor.getZoomLevel() - 0.2 });
            });
        }
    });

Every time execute:

dataSourceGetImageUrl.read(); //it will add kendo image editor one more time

I'm really tired, can anyone help me to solve it

Data Source

ImageEditor

updated question on 14 May 2021

0 answers

109 views

How to "new kendo.data.DataSource" can use "autoBind: false". And can call .read()

Hi Admin and everybody,

I am working with dataSource for Image Editor.

I completed get data and give it for Kendo Image Editor.

But, I cannot use it with "autoBind: false" to stop load when start page like Title or call it with .read().

This is my code:

var dataSourceGetImageUrl = new kendo.data.DataSource({
        transport: {
            read: function (options) {
                $.ajax({
                    url: "/_layouts/15/xxx/API/ApiHandler.ashx?tbl=like&func=getimageurl",
                    type: 'GET',
                    cache: false,
                    scriptCharset: "utf8",
                    dataType: "json",
                    data: {
                        models: kendo.stringify(options.data.models)
                    },
                    success: function (result) {
                        options.success(result);
                    }
                });
            },
        },
        schema: {
            data: 'data',
            model: {
                id: "imageUrl"
            }
        }
    });

    dataSourceGetImageUrl.fetch(function () {
        var dataSource = dataSourceGetImageUrl;
        var view = dataSourceGetImageUrl.view()[0].imageUrl;
        $("#imageEditor").kendoImageEditor({
            autoBind: false,     //It not working.It still read when my page start

            dataSource: dataSource,
            imageUrl: view,
            width: "100%",
            height: 650,
            saveAs: {
                fileName: "image_edited.png"
            }
        });

        var imageEditor = $("#imageEditor").getKendoImageEditor();
        imageEditor.one("imageRendered", function () {
            imageEditor.executeCommand({ command: "ZoomImageEditorCommand", options: imageEditor.getZoomLevel() - 0.2 });
        });
    });

I tried call .read() with code. But it not working

$("#imageEditor").data("kendoImageEditor").dataSource.read();

//OR

dataSourceGetImageUrl.read(); // All both not working. I cannot call .read() to reload

dataSourceGetImageUrl

Hope to get help soon from everyone. Thanks

Data Source

ImageEditor

updated question on 13 May 2021

0 answers

149 views

How to read imageUrl in Kendo ImageEditor with dataSource

Hi Admins and everybody

I want to read imageUrl of Kendo ImageEditor using dataSource + TRANSPORT WITH FUNCTION

But It don't show. What wrong with my code. I have to image show json data in url

My code:

var dataSourceGetImageUrl = new kendo.data.DataSource({
        transport: {
            read: function (options) {
                $.ajax({
                    url: "/api/handler.ashx?tbl=like&func=getimageurl",
                    type: 'GET',
                    cache: false,
                    scriptCharset: "utf8",
                    dataType: "json",
                    data: {
                        models: kendo.stringify(options.data.models)
                    },
                    success: function (result) {
                        options.success(result);
                    }
                });
            },
        },
        schema: {
            data: 'data'
        }
    });
   
    $("#imageEditor").kendoImageEditor({
        dataSource: dataSourceGetImageUrl,
        width: "100%",
        height: 650,
        saveAs: {
            fileName: "image_edited.png"
        }
    });

    var imageEditor = $("#imageEditor").getKendoImageEditor();
    imageEditor.one("imageRendered", function () {
        imageEditor.executeCommand({ command: "ZoomImageEditorCommand", options: imageEditor.getZoomLevel() - 0.2 });
    });