Questions on Kendo UI for jQuery Forum

1 answer

338 views

How items: [...] work . And How can the folder read the items corresponding to each folder when the URL has only the data of the Folder.

This is demo code about filemanage: https://demos.telerik.com/kendo-ui/filemanager/index

<script>
        $("#filemanager").kendoFileManager({
            dataSource: {
                schema: kendo.data.schemas.filemanager,
                transport: {
                    read: {
                        url: "/kendo-ui/service/FileManager/Read",
                        method: "POST"
                    },
                    create: {
                        url: "/kendo-ui/service/FileManager/Create",
                        method: "POST"
                    },
                    update: {
                        url: "/kendo-ui/service/FileManager/Update",
                        method: "POST"
                    },
                    destroy: {
                        url: "/kendo-ui/service/FileManager/Destroy",
                        method: "POST"
                    }
                }
            },
            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" }
                ]
            },
            draggable: true,
            resizable: true
        });

        $(document).ready(function () {
            var filemanager = $("#filemanager").getKendoFileManager();

            filemanager.executeCommand({ command: "TogglePaneCommand", options: { type: "preview" } });
            filemanager.toolbar.fileManagerDetailsToggle.switchInstance.toggle();
        })
    </script>

I still don't understand, right at the items position there is nothing related to "tranport: read" but still can read the data of the items. So where is that data retrieved through?

This is link read data but it only of Folder: https://demos.telerik.com/kendo-ui/service/FileManager/Read

Can Admins explain in depth for me??

I am working on a project using filemanager and I am currently spending a lot of time. Hope Admins can help me.

THis is my Project code:

$("#filemanager").kendoFileManager({
            
        dataSource: {
            transport: {
                read: function (options) {
                    var that = this;
                    $.ajax({
                        url: "/_layouts/15/xxx/API/ApiHandler.ashx?tbl=like&func=getalllibrary",
                        
                        cache: false,
                        scriptCharset: "utf8",
                        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("Here Hello"); //[error] not show log when click delete => cannot call function destroy
                }
            },
            schema: {
                data: 'data',
            }
        },
        toolbar: {
            items: [
                { name: "custom", type: "button", text: "Create", command: "MyCustomCommandCreate" },
                { name: "custom", type: "button", text: "Upload", command: "MyCustomCommandUpload" },
                { name: "sortDirection" },
                { name: "sortField" },
                { name: "changeView" },
                { name: "spacer" },
                { name: "details" },
                { name: "search" }
            ]
        },
        contextMenu: {
            items: [
                { name: "rename" },
                { name: "delete" },
                { name: "custom", text: "Detect", command: "MyCustomCommandDetect", spriteCssClass: "k-icon k-i-info" }
            ]
        },
        draggable: true,
        resizable: true
    });

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

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

    var filemanagerNS = kendo.ui.filemanager;

    filemanagerNS.commands.MyCustomCommandUpload = filemanagerNS.FileManagerCommand.extend({
        exec: function () {
            myWindow.data("kendoWindow").open();
            
        }
    });

    filemanagerNS.commands.MyCustomCommandCreate = filemanagerNS.FileManagerCommand.extend({
        exec: function () {
            myWindowAddLibrary.data("kendoWindow").open();
            
        }
    });

Click Folder not red hover and Console show Error: ( image1.png )

My json data in Url transport: read: ( image2.png )

Hope the admin can show me how to show the item corresponding to my folder

FileManager

answered on 11 May 2021

1 answer

312 views

Column editor with combobox/autocompete shows undefined

Hello. I am using a custom column editor as shown in your example : https://docs.telerik.com/kendo-ui/knowledge-base/custom-editor-autocomplete. Even in the example that you provided, if I type a value that is not in the list, on focus out the field will display "undefined" and will remain this way even if i try to select another value. Is there a fix for this situation? Thank you in advance :)

I attached a screenshot from your working example.

answered on 11 May 2021

3 answers

354 views

How to update gantt task assignments directly on datasource

Using the code below I can successfully update a gantt task (I'm using a custom edit screen + custom update function). It fires off my transport update handler and axios does the update just fine.

  var task = ganttdataSource1.at(0);
  ganttdatasource1.update(task, { title: "New Title" });
  ganttdatasource1.sync()

What I can't figure out is how to update the resource assignments, doing as below seems to ignore the 'resources' property so when in the transport update handler 'resources' just has the ones that were originally set,

  var task = ganttdataSource1.at(0);
  ganttdatasource1.update(task, { 
        title: "New Title", 
        resources: {
            taskId: 111,
            resourceId: 222,
            value: 5,
        } 
    });

  ganttdatasource1.sync()

Gantt

answered on 10 May 2021

1 answer

3.7K+ views

Is it possible to export the data of a grid as a CSV file with jQuery for now?

I'm trying to make my grid be able to export its data as a CSV file, and I saw this:

https://www.telerik.com/forums/export-to-csv-also-collapse-data

which said that currently, Kendo UI does have only build-on support for export to PDF and Excel(xlsx).

However, after surveying on the internet I find another one:

https://feedback.telerik.com/kendo-jquery-ui/1359149-export-ability-to-export-the-grid-in-csv-and-xml-formats

It says that it's a completed feature, but I only find the sample using ASP.net:

https://demos.telerik.com/aspnet-mvc/grid/server-export

Since It's a completed feature, does it involve jQuery? or is it just support using ASP.net?

If it involves jQuery, can anyone provide a sample of it?

Thanks.

Grid

answered on 10 May 2021

4 answers

113 views

Gantt column editor strange behaviour

Hi,

I have added Kendo dropDownList as cell editor to Kendo Gantt.

After some time, some users reported issue where doubleclick on cell randomly just opens and closes dropdown on its own.

We did quite a lot of debugging until we were able to reproduce issue.

It turns out that in some cases (not clear under which conditions) when doubleclick is either too fast or performed on laptop touchpad, it happens almost in 30% of cases.

(We are using kendo UI 2020 R2 version, but issue is reproducible even in latest version).

Issue was reproduced by developer on Dell Latitude 5580 (using touchpad doubleclick), while users reported on other systems.

Here you can find the dojo where issue is reproducible.

https://dojo.telerik.com/aHuDaYup/4

Also, we recorded video on the same dojo, where behavior is demonstrated.

First 4 clicks are mouse, and next ones are with touchpad. (users were having issues even with mouse)

If there are any things we can do to help, please let me know.

Thank you and best regards.

Vedad

DropDownList

Gantt

answered on 10 May 2021

1 answer

84 views

How to get value name of Folder, get value name of Items in Folder when click

I am working With Kendo FileManager, I need get value name of Folder and get value of Items in Folder to API work.

Please guide for me.

Thanks Admins and Everyone so much.

FileManager

answered on 08 May 2021

7 answers

1.7K+ views

How add/remove item dynamic in Tilelayout ~

Hi !

I'm using Kendo TileLayout in Jquery. When I create Tilelayout.

I want add or remove item dynamic at runtime, but I don't find way to do it.

Please help me do it

Many thanks !

TileLayout

updated answer on 07 May 2021

1 answer

718 views

Grid update VERY slow with 60000 rows

I have a large grid (to support filter functions) and I have editable: "popup" set. This is fine when I have a 20 row set, but it doesn't finish in a tolerable length of time with a 60,000 row set.

I have not yet written the writeback functions to update the database. This is just updating the grid.

Any advice would be appreciated.

Here is the code:

@{
    ViewBag.Title = "Casebook Files";
}

<h2>Casebook Files</h2>
<script src="~/Scripts/jquery-3.6.0.min.js"></script>

<link href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css" rel="stylesheet" />
@*<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>*@
<script src="https://kendo.cdn.telerik.com/2021.1.330/js/kendo.all.min.js"></script>


<div id="kendoGrid">
    
</div>

<script>
    var caseBookDatasource;
    $(function () {

        $("#kendoVersion").text(kendo.version);
        var casebooks = getCaseBooks();

    });

    function getCaseBooks() {

        $.ajax({
            //url: "/Home/GetCaseBooks"
            url:"/Home/GetNewtonCaseBooks"
        }).done(function (rows) {
            var datarows = JSON.parse(rows);
            buildCasebookDatasource(datarows)
            createGrid();
        });

    }

    function buildCasebookDatasource(rows) {
        caseBookDatasource = new kendo.data.DataSource({
            data: rows,
            schema: {
                model: {
                    fields: {
                        recordId: { type: "number" },
                        caseNumber: { type: "string" },
                        caseName: { type: "string" },
                        serviceReqDate: { type: "date" },
                        srProg: { type: "string" },
                        srUnit: { type: "string" },
                        boxNumber: { type: "number" },
                        destructDate: { type: "date" },
                        notes: { type: "string" },
                        otherNames: { type: "string" },
                        initials: { type: "string" },
                        xRef1: { type: "string" },
                        xRef2: { type: "string" },
                        xRef3: { type: "string" },
                        xRef4: { type: "string" }

                    }
                }
            },
            pageSize: 20,
            sort: {
                field: "caseNumber",
                dir: "asc"
            }

        });
    }

    function createGrid() {
        $("#kendoGrid").kendoGrid({
            dataSource: caseBookDatasource,
            height: 750,
            pageable: true,
            sortable: true,
            filterable: true,
            scrollable: "virtual",
            columns: [
                {
                    field: "recordId"

                },
                {
                    field: "caseNumber",
                    title: "Case #",
                    width: 100
                },
                {
                    field: "caseName",
                    title: "Name",
                    width: 200
                },
                {
                    field: "serviceReqDate",
                    title: "Received",
                    template: "#= kendo.toString(kendo.parseDate(serviceReqDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",
                    width: 120
                },
                {
                    field: "srProg",
                    title: "Program",
                    width: 50
                },
                {
                    field: "srUnit",
                    title: "Unit",
                    width: 50
                },
                {
                    field: "boxNumber",
                    title: "Box",
                    width: 50
                },
                {
                    field: "destructDate",
                    title: "Destroyed",
                    template: "#= kendo.toString(kendo.parseDate(destructDate, 'yyyy-MM-dd'), 'MM/dd/yyyy') #",
                    width: 120
                },
                {
                    field: "notes",
                    title: "Notes",
                    width: 200
                },
                {
                    field: "otherNames",
                    title: "Other Names",
                    width: 200
                },
                {
                    field: "initials",
                    title: "Initials",
                    width: 50
                },
                {
                    field: "xRef1",
                    title: "XRef1",
                    width: 50
                },
                {
                    field: "xRef2",
                    title: "XRef2",
                    width: 50
                },
                {
                    field: "xRef3",
                    title: "XRef3",
                    width: 50
                },
                {
                    field: "xRef4",
                    title: "XRef4",
                    width: 50
                },
                {command: "edit"}
            ],
            editable: "popup",
            toolbar:["create","cancel", "save"]
        });
    }

   


</script>

Data Source

Grid

answered on 07 May 2021

1 answer

11.0K+ views

default value in dropdownlist

I have this

$('<input data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        suggest: true,
        select: function(e) {
            personSource.setDirty();
        },
        dataSource: rows,
    });
////////////////
whenever I load the page the dropdownlist is not automatically filled with the first value of the list (default value).
I have to click the mouse or do something and it gets filled.

if I put it like this
alert('hello');
$('<input data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        suggest: true,
        select: function(e) {
            personSource.setDirty();
        },
        dataSource: rows,
    });

after I click the alert the default value is filled.
How can I make it fill the default without needing a popup?