Questions on Kendo UI for jQuery Forum

1 answer

252 views

Grid error config 'pageable' error bootstrap tabs

Hi Telerik,

I created a demo code for error of Kendo Grid for jQuery with Bootstrap 5 error when settings 'pageable', please check and fix this

Link online: https://dojo.telerik.com/@vndevil/ICAPeBeg

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.802/styles/kendo.default-v2.min.css" />

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.2.802/js/kendo.all.min.js"></script>

    <!-- BEGIN Bootstrap 5.0.2 -->
    <!-- PHẢI để ở trên này, trước đống css tự viết ở dưới ^_^ -->
    <!-- CHƯA DÙNG ĐƯỢC BOOTSTRAP 5 do nó bỏ hàm Tooltip, đang chờ phiên bản udpate mới -->
    <link href="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="preload stylesheet" as="style"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
    <script src="//cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <!-- END Bootstrap 5.0.2 -->
</head>

<body>





    <div class="mb-3">
        <h1>Grid normal<h1>
                <div id="grid"></div>
                <div id="grid2"></div>

    </div>

    <div class="mb-3">
        <h1>Grid error config 'pageable' error bootstrap tabs<h1>

                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"
                            type="button" role="tab" aria-controls="home" aria-selected="true">Grid 3 pageable config
                            error</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile"
                            type="button" role="tab" aria-controls="profile" aria-selected="false">Grid 4 pageable
                            config error</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact"
                            type="button" role="tab" aria-controls="contact" aria-selected="false">Grid 5 pageable
                            config error</button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
                        <div id="grid3"></div>
                    </div>
                    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                        <div id="grid4"></div>
                    </div>
                    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                        <div id="grid5"></div>
                    </div>
                </div>

    </div>

    <script>
        var gridConfig = {
            columns: [
                { field: "productName" },
                { field: "category" }
            ],
            dataSource: [
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" },
                { productName: "Tea", category: "Beverages" },
                { productName: "Coffee", category: "Beverages" },
                { productName: "Ham", category: "Food" },
                { productName: "Bread", category: "Food" }
            ],
            pageable: {
                pageSize: 5,
                buttonCount: 3,
                messages: {
                    display: '{0} - {1} of {2:#,##} items'
                }
            }
        };

        $("#grid").kendoGrid(gridConfig);
        $("#grid2").kendoGrid(gridConfig);
        $("#grid3").kendoGrid(gridConfig);
        $("#grid4").kendoGrid(gridConfig);
        $("#grid5").kendoGrid(gridConfig);
    </script>
</body>

</html>

Grid

answered on 29 Aug 2022

1 answer

126 views

Heatmap

Is there a way to have the x-axis at the top of the heatmap and the items shown below the x-axis?

Heatmap

answered on 29 Aug 2022

1 answer

247 views

loadOnDemand: true, Kendo tree view is not working

loadOnDemand: true, Kendo tree view is not working after upgrading kendo and jquery version ,previously we are fetching the chide node data of treeview , after expanding the node but it is not working now

TreeView

answered on 29 Aug 2022

1 answer

123 views

TileLayout from different html files into one Drawer component

Hello,

I am doing a Django project and am creating a base.html that will be used in different pages using {% extend 'base.html'%}.

The base.html includes a Drawer and a TileLayout with only one tile (filter tile: this tile contains search filter components like datepicker, groupbutton, checkbox etc).

Then I have a file named main.html where I need to add several tiles underneath the filter tile from base.html

I was able to add several tiles to main.html but the problem is, it is not included in the Drawer component of base.html. The tiles I've added on main.html appears below the height scope of base.html

I need to include the tiles from main.html into the same Drawer of base.html

I have been trying to figure this out for several days now but is unfortunately have not found a solution. If anyone could assist, it would be really helpful.

Thank you.

Drawer

TileLayout

answered on 26 Aug 2022

4 answers

636 views

Event for dragging column and hide

Hi

In my example - http://dojo.telerik.com/exaBa - I am looking for an event which lets me detect when a user drags the column but does not reorder it...

In other words: the user drags the column outside the grid - intention to delete (hide) that column.

I am aware that I can use the column menu, but that creates a button (that is not floating) and uses too much space (I have a lot of columns in my grid so I need all the space I can get)

columnMenu: {
sortable: false
}

Many thanks

Grid

answered on 26 Aug 2022

0 answers

120 views

Search bar loses focus when the first character typed in it

I am trying to implement kendo autocomplete and I am new to Kendo. When the user enters a character query is taken and a list is made using the database and returned to the view. Everything works fine except when the first character is typed search box loses its focus and I need to click on the search box again to type more characters. For some reason also other buttons gets doubled pic below

Here is my code

 $("#query").keyup(e => {
        e.preventDefault();
        if (e.keyCode === 13) {
            $("#btnSearch").click();
        }

        let ds = new DataServices(`${bc.apiBaseUrl}TrendStations/SearchAutoComplete`);
        let xhr = ds.GetData({ query: $("#query").val() });
        $('#query').attr('autocomplete', 'CUSTOM');
        xhr.done((results) => {
            if (results != null) {
                var data = results;
                $("#query").kendoAutoComplete({
                    dataSource: data,
                    filter: "startswith",
                    placeholder: "Enter your search here...",
                    separator: ", "
                });

            } else {
                window.location.reload();
            }


        }).fail(ex => {
            new ErrorHandler().HandleError(ex);
        });
    });
 
I have looked for an answer but no luck! anybody knows what is going on?

AutoComplete

updated question on 25 Aug 2022

1 answer

109 views

Change autoclose property of multiselect through Javascript after initialization?

I have a form with a bunch of kendo multiselects and I want to give the user the ability to change the "autoclose" property. Is there anyway to update the control after it was initialized through JavaScript to change the "autoclose" property?

MultiSelect

answered on 25 Aug 2022

1 answer

120 views

Kendo grid hidden column in wrong position when exporting to excel

I have a kendo grid with a column that is not displayed in the grid, but is conditionally included when exporting to excel.

However, this column is positioned as the last column in the sheet, instead of being positioned as defined in the grid column definition.

I have no idea what the issue may be.

Any help will be greatly appreciated.

This is the method by which I am conditionally including the column in the excel export:

excelExport: (e: kendo.ui.GridExcelExportEvent) => {
    if (columnShouldShow) {
        e.sender.showColumn('MyColumn');
        e.preventDefault();
        columnShouldShow = false;
        setTimeout(() => {
            e.sender.saveAsExcel();
        });
    } else {
        e.sender.hideColumn('MyColumn');
        columnShouldShow = true;
    }
}

Grid

answered on 23 Aug 2022

2 answers

163 views

Using common variables with kendo theme swatches

Hi,

I have been testing what's the best way to create custom theme swatches, so that they're easy to maintain between Kendo upgrades.

Is it possible somehow to use theme variables inside the json file (of the swatch)?

Here is an example, where I try to use "$component-border" to set border color for tabs:

"name": "Tabstrip",
"variables": {
"tabstrip-item-border": {
"name": "Tabstrip item border color",
"type": "color",
"value": "$component-border !default"
}
}

When running "npm run sass:swatches", it gives me error message: "Error: Undefined variable: "$component-border"."

It works if I hard code the color like this:

"name": "Tabstrip",
"variables": {
"tabstrip-item-border": {
"name": "Tabstrip item border color",
"type": "color",
"value": "#fc0303"
}
}

General Discussions

Styling