Questions on Kendo UI for jQuery Forum

0 answers

236 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

1 answer

122 views

Waterfall Charts - Is the "summary" option available for Kendo UI jQuery

Hi Team,

In the demo example here, for kendo-angular-ui, we have an option to make "summary: 'runningTotal'" of intermediate data, like for Q1, Q2 etc.

Is there a similar option for the ui-jQuery version also. It will be great if you can point me to the doc for this. I see that there are not many option available for waterfall charts or i'm not seeing the right doc ?

Is Stacking allowed in waterfall charts ?

If there are other features as well for waterfall ui-jquery, kindly indicate them.

Thanks,

Chetan

Charts

answered on 13 May 2021

8 answers

759 views

Export to excel hierarchical grid/ hidden column

Hello ,

I had a hierarchical grid and I want to export it to excel (JavaScript )

The file is generated successfully but only the principal grid is exported.
Also I want to export hidden column.

Thank you for your prompt reply

Grid

answered on 13 May 2021

0 answers

182 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

1 answer

697 views

Sum of a calculated value in footer template and group template

Hello,

I am not able to get the following sum of calculated values using only kendo functionality. I mean I would like not to use custom functions.

So what i need is do the group sum and total sum for the calculated value Total .Lines In red and in blue in the image.

Also I would like to know why the sum for Units in Stocks is not working in the groupHeaderTemplate, blue line.

My current Spinet is here: https://dojo.telerik.com/@fedo/apiNOGOf/2 but i cannot make show the sum for the total it shows error Uncaught ReferenceError: sum is not defined.

Currently this line is commented.

Thanks

Data Source

Grid

answered on 13 May 2021

0 answers

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

What I need to fix it? Hope Admin and eeverybody help me. Thanks.

ImageEditor

updated question on 12 May 2021

1 answer

243 views

Incorrect total and no paging on Kendo MVC ListView

I'm having a problem getting an MVC ListView to initially load via the model and then page using Ajax. I've configured a grid to do this without issues but the ListView datasource doesn't seem to support Ajax, although the documentation suggests it does?

https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/listview/binding

I initiate the list with 10 records and then specify the total amount of records in the datasource. I then expect to see 10 records on the first page and to have the ability to click on the other pages. When I click on a page an Ajax call should be made to retrieve the relevant records. However all I see is the 10 records from the model and no paging.

Here is my ListView:

   @(Html.Kendo().ListView<Feed>(Model)
        .Name("FeedList")
        .TagName("ul")     
        //.BindTo(Model)
        .ClientTemplateId("feed-detail-list-template")
        .DataSource(
            source => source                     
                //.Ajax() I get an error that there is no definition for Ajax if I uncomment this
                .ServerOperation(false)
                .Model(model => model.Id(p => p))
                .Read(
                    read =>
                    {
                        read.Action(action, controller, new { id = parentId });
                    }
                )                
                .PageSize(10)
                .Total(totalRecords) // appears to be ignore
                .Events(events => events
                    .Error("onDataSourceError")
                )
        )
        .Pageable()
    )

Any help appreciated.

Data Source

ListView

answered on 12 May 2021

1 answer

119 views

What is the difference between the two of FileManager demo

I have two link demo from Kendo FileManager.

First link: https://dojo.telerik.com/oFefoyIm

Second link: https://dojo.telerik.com/OxAWOrIF

Each link uses a different method of Kendo FileManager. But, with Second link, I can call function.

Otherwise, First link can not call.

Two image will show you my test, and And I am having a similar case in First Link in my project, it cannot call the function

FileManager

answered on 12 May 2021

1 answer

488 views

Can kendo show images like Image Browser?

Can kendo FileManager show images like Image Browser? If It can, please guide for me.

demo image browser: https://demos.telerik.com/kendo-ui/editor/imagebrowser

Image broswer can show image, that so good

Kendo FileManager is the manager must show the user how the images are?

Or can apply show image from Image Browser to FileManager. Please guide for me. Thanks

FileManager

answered on 12 May 2021

1 answer

214 views

How to get name or path items with custom button in Kendo FileManager

Hi admin and everybody,

Image show result I need

I want get name or path of items inside folder. You can follow code:

<div id="fileManager"></div>
<script>
    var baseUrl = "https://demos.telerik.com/kendo-ui/service/filemanager/";

    $("#fileManager").kendoFileManager({
        dataSource: {
            transport: {
                read: function(options) {
                    var that = this;

                    $.ajax({
                        url: baseUrl + "Read",
                        dataType: "json", 
                        method: "POST",
                        data: that.parameterMap ? that.parameterMap(options.data, "read") : options.data,
                        success: function(result) {
                            options.success(result);
                        }
                    });
                },
                update: function(options) {
                    var that = this;

                    $.ajax({
                        url: baseUrl + "Update",
                        dataType: "json", 
                        method: "POST",
                        data: that.parameterMap ? that.parameterMap(options.data, "read") : options.data,
                        success: function(result) {
                            options.success(result);
                        }
                    });
                },
                create: function(options) {
                    var that = this;

                    $.ajax({
                        url: baseUrl + "Update",
                        dataType: "json", 
                        method: "POST",
                        data: that.parameterMap ? that.parameterMap(options.data, "read") : options.data,
                        success: function(result) {
                            options.success(result);
                        }
                    });
                },
                destroy: function(options) {
                    console.log(options.data.name); // can get name items
                }
            }
        },
      uploadUrl: "/kendo-ui/service/FileManager/Upload",
        toolbar: {
          items: [
            { name: "createFolder" },
            { name: "upload" },
            
            { name: "sortDirection" },
            { name: "sortField" },
            { name: "changeView" },
            { name: "spacer" },
            { name: "details" },
            { name: "search" }
          ]
        },
        contextMenu: {
          items: [
            { name: "rename" },
            { name: "delete" },
            { name: "custom", text: "Get Info", command: "MyCustomCommand", spriteCssClass:"k-icon k-i-info" }
          ]
        },
        draggable: true,
        resizable: true
    });
  
  var filemanagerNS = kendo.ui.filemanager;

        filemanagerNS.commands.MyCustomCommand = filemanagerNS.FileManagerCommand.extend({
          exec: function(options){
            var data = $("#fileManager").data("kendoFileManager").dataSource.data();
            
            console.log(options.data.name); // What I need to do here to get name with button custom?
          }
        });
</script>

FileManager

answered on 12 May 2021