Questions on Kendo UI for jQuery Forum

1 answer

19 views

Kendo Grid column containing a Kendo Grid

I would like to know if it's possible to declare a Kendo grid column to display a Kendo grid within it. If so, how can I do this?

This is my code with my attempt (I couldn't find any demo online describing how to do this) that obviously didn't work as expected:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PSWSv3.aspx.cs" Inherits="PAMsKendo.PSWSv3" %>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started with Kendo UI for jQuery</title>
    <link href="styles/default-main.css" rel="stylesheet" />
    <script src="scripts/jquery-3.7.1.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    <script src="scripts/kendo-ui-license.js"></script>
  </head>
  <body>

    <div id="ordersGrid">
    <div id="fooGrid"></div>

    </div>

    <script>
        $(function () {
            var myData = [
                {
                    "bulkProjectLineItemID": 1234567,
                    "retailPrice": 123.45,
                    "wholesalePrice": 99.99,
                    "cost": 75.32,
                    "oENumbers": [
                        {
                            "oeNumber": "123456789",
                            "bulkProjectOEMNumberID": 123456
                        },
                        {
                            "oeNumber": "23456789",
                            "bulkProjectOEMNumberID": 123457
                        }
                    ],
                    "interchangeNumbers": [
                        {
                            "interchangeNumber": "120-12345R",
                            "bulkProjectInterchangeNumberID": 123456
                        },
                        {
                            "interchangeNumber": "120-12345L",
                            "bulkProjectInterchangeNumberID": 123457
                        }
                    ]
                },
                {
                    "bulkProjectLineItemID": 1234568,
                    "retailPrice": 123.45,
                    "wholesalePrice": 99.99,
                    "cost": 75.32,
                    "oENumbers": [
                        {
                            "oeNumber": "123456789",
                            "bulkProjectOEMNumberID": 123456
                        },
                        {
                            "oeNumber": "23456789",
                            "bulkProjectOEMNumberID": 123457
                        }
                    ],
                    "interchangeNumbers": [
                        {
                            "interchangeNumber": "120-12345R",
                            "bulkProjectInterchangeNumberID": 123456
                        },
                        {
                            "interchangeNumber": "120-12345L",
                            "bulkProjectInterchangeNumberID": 123457
                        }
                    ]
                }
            ];

            var gridDataSource = new kendo.data.DataSource({
                data: myData,
                schema: {
                    model: {
                        fields: {
                            bulkProjectItems: {
                                fields: {
                                    bulkProjectLineItemID: { type: "number" },
                                    retailPrice: { type: "number" },
                                    wholesalePrice: { type: "number" },
                                    cost: { type: "number" },
                                    oENumbers: {
                                        fields: {
                                            oeNumber: { type: "string" },
                                            bulkProjectOEMNumberID: { type: "number" }

                                        }
                                    },
                                    interchangeNumbers: {
                                        fields: {
                                            interchangeNumber: { type: "string" },
                                            bulkProjectInterchangeNumberID: { type: "number" }
                                        }
                                    }
                                }
                            }
                        }
                    }
                },
                pageSize: 10
            });


            $("#ordersGrid").kendoGrid({
                dataSource: gridDataSource,
                height: 400,
                width: 1200,
                pageable: true,
                columns:
                    [
                        {
                            field: "bulkProjectLineItemID",
                            title: "Line Item ID",
                            width: 120
                        },

                        {
                            field: "retailPrice",
                            title: "Retail Price",
                            width: 120
                        },

                        {
                            field: "wholesalePrice",
                            title: "Wholesale Price",
                            width: 120
                        },

                        {
                            field: "cost",
                            title: "Cost",
                            width: 120
                        },

                        {
                            title: "OE NUMBERS",
                            width: 200,
                            field: "oENumbers",
                            template: $().kendoGrid({
                                columns:
                                    [
                                        {
                                            field: "oeNumber",
                                            width: 150
                                        },

                                        {
                                            field: "bulkProjectOEMNumberID",
                                            width: 150
                                        }
                                    ]
                            })
                        },

                        {
                            title: "INTERCHANGE NUMBERS",
                            width: 200,
                            field: "interchangeNumbers",
                            template: $().kendoGrid({
                                columns:
                                    [
                                        {
                                            field: "interchangeNumber",
                                            width: 150
                                        },

                                        {
                                            field: "bulkProjectInterchangeNumberID",
                                            width: 150
                                        }
                                    ]
                            })
                        }

                    ]
            });
        });

    </script>
  </body>
</html>

Thanks,

Pat

Grid

answered on 01 Jul 2024

1 answer

7 views

Resize is Deprecated Warning

When I add the below block of code to Visual Studio, I'm getting a linting warning that resize is deprecated. In my real application, I need to pass true (grid.resize(true)) to it. Is there a way to suppress such warnings or is there a new way of doing this? This code is from this Kendo UI Knowledge Base article:
Resize and Expand Grid to 100% Height

      function resizeGrid() {
        gridElement.data("kendoGrid").resize();
      }

Grid

answered on 01 Jul 2024

0 answers

19 views

Render enum as string in ClientTemplate in Grid

The following grid column definition renders the enum as a string:

columns.Bound(p => p.SomeEnum);

The ajax call actually returns an int for the enum but the grid does some magic and shows the enum string.

If I need to customize the output and use a ClientTemplate, it renders as an int though:

columns.Bound(p => p.SomeEnum).ClientTemplate("foo #=SomeEnum#");

How can I get my ClientTemplate to render the string version of the enum?

Grid

Templates

asked on 28 Jun 2024

1 answer

14 views

Overflow order is possible?

Hi, I need to know if there is a way to give an order to the elements that are placed in overlfow.

I would like to decide which elements to send to overflow first, then if there is a lack of space, move on to the other elements and so on.

Thank you!

Toolbar

answered on 27 Jun 2024

1 answer

15 views

Kendo Filter Multi Check for TreeList

I'm trying to add a column selector to the Kendo Tree List. I have it successfully working in the KendoGrid but when I use it in a treelist, I get a Jquery maximum call stack exceeded error when the kendoFilterMultiCheck is initialized. Do I need to do something differently for a Kendo Grid vs a Treelist? Here is my code:

function initKendoGridNestedColumnSelector(gridId, columnSelectorContainer) {
    if (!columnSelectorContainer) {
        $(`#${gridId}`).before(`<div id="columnChooser_${gridId}" class="column-selector"></div>`);
        columnSelectorContainer = `columnChooser_${gridId}`;
    }

    let grid;
    if ($(`#${gridId}`).hasClass("k-treelist")) {
        grid = $(`#${gridId}`).data("kendoTreeList");
    } else {
        grid = $(`#${gridId}`).data("kendoGrid");
    }

    let visibleColumns = [];
    let includedColumns = [];
    let columns = grid.columns;
    $.each(columns, function (index, column) {
        if (column.columns) {
            $.each(column.columns, function (indexLevel2, columnLevel2) {
                if (columnLevel2.columns) {
                    $.each(columnLevel2.columns, function (indexLevel3, columnLevel3) {
                        if (!columnLevel3.hidden) {
                            visibleColumns.push({ value: columnLevel3.field, operator: "eq", field: "field" });
                        }
                        if (!Object.prototype.hasOwnProperty.call(columnLevel3, "menu") || columnLevel3.menu) {
                            columnLevel3.display = `${columnLevel2.title} ${columnLevel3.title}`;
                            includedColumns.push(columnLevel3);
                        }
                    });
                } else {
                    if (!columnLevel2.hidden) {
                        visibleColumns.push({ value: columnLevel2.field, operator: "eq", field: "field" });
                    }
                    if (!Object.prototype.hasOwnProperty.call(columnLevel2, "menu") || columnLevel2.menu) {
                        columnLevel2.display = `${column.title} ${columnLevel2.title}`;
                        includedColumns.push(columnLevel2);
                    }
                }
            });
        } else {
            if (!column.hidden) {
                visibleColumns.push({ value: column.field, operator: "eq", field: "field" });
            }
            if (!Object.prototype.hasOwnProperty.call(column, "menu") || column.menu) {
                column.display = column.title;
                includedColumns.push(column);
            }

        }
    });
    let chooserDs = new kendo.data.DataSource({
        data: includedColumns,
        filter: {
            filters: visibleColumns,
            logic: "or"
        }
    });
    $(`#${columnSelectorContainer}`).kendoFilterMultiCheck({
        field: "field",
        itemTemplate: function (e) {
            if (e.field == "all") {
                return "<li class='k-item'><label class='k-label'><strong><input type='checkbox' /><span>#= all#</span></strong></label></li>";
            }
            return "<li class='k-item #= data.menu === false ? '' : ''#'><label class='k-label'><input type='checkbox' name='" + e.field + "' value='#=field#'/><span>#= (data.title) ? display : field #</span></label></li>";
        },
        dataSource: chooserDs,
        search: true,
        messages: {
            filter: translateText("Done", "Global"),
            selectedItemsFormat: "{0} " + translateText("Columns Selected", "Global"),
            clear: translateText("Hide All", "Global")
        },
        refresh: function (e) {
            if (e.sender.dataSource.filter()) {
                var columnsToShow = e.sender.getFilterArray();
                $.each(includedColumns, function (i, col) {
                    if (!col.field) {
                        return true;
                    }
                    if (col.field && columnsToShow.indexOf(col.field) > -1) {
                        grid.showColumn(col.field);
                    } else {
                        grid.hideColumn(col.field);
                    }
                });
            } else {
                var columns = includedColumns;
                $.each(columns, function (index, col) {
                    grid.hideColumn(col.field);
                });
            }
        }
    })
        .find(".k-i-filter")
        .removeClass("k-i-filter")
        .addClass("k-i-columns");
    $(`#${columnSelectorContainer}`).find(".k-grid-filter").attr("title", translateText("Select Columns", "Global"));
    $(`#${columnSelectorContainer}`).find(".k-grid-filter").attr("aria-label", translateText("Select Columns", "Global"));
    $(`#${columnSelectorContainer}`).find(".k-grid-filter").addClass("btn btn-link k-state-active");
    $(`#${columnSelectorContainer}`).find(".k-grid-filter").append(translateText("Select Columns", "Global"));

    function grid_columnHide(e) {
        let datasource = e.sender.dataSource;
        let column = e.column.field;
        let filter = datasource.filter();
        let index = null;
        if (filter && filter.filters) {
            index = findObjectIndexByProperty(filter.filters, "field", column);
        }
        if (index !== null) {
            datasource.filter([]);
            $(".k-grid-search input").val("");
        }
    }

    grid.bind("columnHide", grid_columnHide);
}

TreeList

answered on 27 Jun 2024

1 answer

26 views

Issue with duplicated folder after initial load.

Good afternoon,

I'm trying to integrate the FileManager component into an Oracle APEX application. I created a REST web service that generates the following JSON:

[
  {
    "name": "General",
    "isDirectory": true,
    "hasDirectories": true,
    "path": "folder",
    "extension": " ",
    "size": 90,
    "createdUtc": "/Date(1718637638946)/",
    "items": [
      {
        "name": "Test Folder 2",
        "isDirectory": true,
        "hasDirectories": false,
        "path": "folder/Test Folder 2",
        "extension": " ",
        "size": 8820,
        "createdUtc": "2024-06-18T20:56:13Z"
      },
      {
        "name": "TestFolder1",
        "isDirectory": true,
        "hasDirectories": false,
        "path": "folder/TestFolder1",
        "extension": " ",
        "size": 0,
        "createdUtc": "2024-06-07T19:52:48Z"
      },
      {
        "name": "File1.pdf",
        "isDirectory": false,
        "hasDirectories": false,
        "path": "folder/File1.pdf",
        "extension": ".pdf",
        "size": 689541,
        "createdUtc": "2024-06-07T19:52:37Z"
      },
      {
        "name": "File2.pdf",
        "isDirectory": false,
        "hasDirectories": false,
        "path": "folder/File2.pdf",
        "extension": ".pdf",
        "size": 312498,
        "createdUtc": "2024-06-07T19:52:37Z"
      },
      {
        "name": "File3.xlsx",
        "isDirectory": false,
        "hasDirectories": false,
        "path": "folder/File3.xlsx",
        "extension": ".xlsx",
        "size": 107150,
        "createdUtc": "2024-06-07T19:52:38Z"
      },
      {
        "name": "File4.msg",
        "isDirectory": false,
        "hasDirectories": false,
        "path": "folder/File4.msg",
        "extension": ".msg",
        "size": 376832,
        "createdUtc": "2024-06-07T19:52:37Z"
      }
    ]
  }
]

When the page loads, the component is rendered correctly (See the "General" folder in the following image):

However, when I click on the tree viewer (or double click on the folder in the right side) to view its contents, the result is a duplicated "General" folder. If I continue to select any of these folders, it keeps duplicating them:

In the network tab I see that when I selected the folder, two calls were made to the URL I defined in the dataSource.transport, this time adding some extra parameters (path/target and target):

This is the code to initialize the File Manager:

$("#filemanager").kendoFileManager({
    dataSource: {
        schema: kendo.data.schemas.filemanager,
        transport: {
            read: {
                url: "https://myservice/teams",
                method: "GET",
                dataType: "json"
            }
        }
    }
});

Could you please help me understand what am I missing or doing wrong?

As an additional question, I'd like to include in the JSON one more parameter (a download URL) that I'd like to use in the Context Menu, so when I right click on top of a file I select the option to download it. To accomplish this, do I need to modify completely the dataSource.schema? Or can I just simply add the URL to the JSON and then reference its value in the contextMenu.items array? Or (even better) does the File Manager has a built-in function to download files?

Thank you very much!

FileManager

answered on 26 Jun 2024

1 answer

22 views

Treeview - How can I change the background color

I have followed all the examples but nothing is overriding the default theme. I even tried to change it in after everything is loaded inside my done routine.

function createTreeView(dataURL,divName) {
    $.ajax({
        type: 'GET',
        url: dataURL,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function (data) {},
        error: function (request, error) {
            console.log(error);
        }
    }).done(function(data) {
         ds = new kendo.data.HierarchicalDataSource({
            data: data,
            schema: {
                model: {
                    id: "taskid",
                    children: "items",
                    hasChildren: "haschildren"
                }
            }
        });    
        $("#"+divName).kendoTreeView({
            dataSource: ds,
            dataTextField: "taskname",
            dataUrlField: "linkto"
        });
        $('.k-treeview').css('background', 'lightblue');
    })// end done 
}

TreeView

answered on 25 Jun 2024

1 answer

21 views

Kendo UI web is outdated.

I inherited an old MVC application that uses Kendo UI web version which I cannot find on Nuget. The application contains version 2013.2.716, and I can see CSS files and scripts in the correct folder. However, when I try to build the application, I encounter an error. Can someone please help me with this issue?

Error NuGet Package restore failed for project ATG.JourneyDesk.ImageLibrary: Unable to find version '2013.2.716' of package 'KendoUIWeb'.
https://api.nuget.org/v3/index.json: Package 'KendoUIWeb.2013.2.716' is not found on source 'https://api.nuget.org/v3/index.json'.
https://nuget.telerik.com/v3/index.json: Package 'KendoUIWeb.2013.2.716' is not found on source 'https://nuget.telerik.com/v3/index.json'.
. Please see Error List window for detailed warnings and errors.

General Discussions

updated answer on 25 Jun 2024

1 answer

22 views

spreadSheets sheetsbar option: Is it possible to make the entire sheet tab control un-editable?

Hi,

I am currently working with a Kend UI spreadsheet control, and was wondering if there was a way to disable ALL editing for the sheetsbar, or sheets tab:

No deletion of existing sheets
No adding new sheets
No name changes

I found this approach on the forum:

Remove insert and delete on SheetsBar with CSS and jQuery | Kendo UI Dojo (telerik.com)

Using the css and jQuery stuff, additionally I need to turn off the ability to change the name.

Alternatively I came up with kind of a clunky solution, using a Kendo Drop Down list to select the active sheet...but I think it would be much more intuitive to leave the tabs there and just disable the renaming functionality.

DDL Select Active: | Kendo UI Dojo (telerik.com)

but this is clunky, and I am hoping for a cleaner solution based on the first example I found... I may start fiddling with the above approach to see if it is possible, if so, wondering if there is a certain syntax with the Kendo UI controls, sooo much to dig through... that would help me disable and enable features of other components...maybe there is a guide...and since I am kind of new... thinking maybe I haven't stumbled on the naming convention of thecss controls.. and how they can affect the enabling and disabling of different features in the controls/components?

I usually look for an option, like yeah you can set sheetsbar to false and make it disappear or hide it, but I kind of like having it there since the end product is going to populate the spreadsheet control with multiple sheets...and thereby make the controls more intuitive.

Thanks for your help and patience ^___^

George

P.S.

I was hoping some sort of css approach like this would be possible, but then I dunno if you can control css to disable functionality, other than hide something...

Spreadsheet

updated answer on 20 Jun 2024

1 answer

34 views

Issue with jQuery Kendo Map in Firefox 126.0

Description

The jQuery Kendo Map component is not functioning as expected in Firefox version 126.0. Specifically, the map cannot be moved or panned, which is a critical functionality for our application.

Steps to Reproduce

Open Firefox 126.0.
Navigate to the Kendo Map example page (URL: https://demos.telerik.com/kendo-ui/map/index).
Attempt to click and drag to move the map.

Thank you for your attention to this matter.

Map