Questions on Kendo UI for jQuery Forum

1 answer

440 views

How to make readonly all control in Kendo From

I want Kendo From to be readonly for all control, how do I do that?

Please help me, thanks!

Form

answered on 01 Sep 2022

1 answer

145 views

Problem to personalizzation event template in scheduler

Hello

I need your support, please, for the Scheduler (Kendo JQuery UI v2022.2.510)
I have 2 problems: the special characters in the description (example: euro symbol) and the multilines description of the appointments.

I would like to show next invoices to be paid.

The scheduler must be on mounth show, and all event are all day event.

On the event I need to show the number of document, buisness name and the amounth.

I'm trying to implement more filds in schema but the program ignore that.

I also tried to insert html tag in the description filed
(example:

<span class='IntestazioneDocumento'>PA / 1234567890 del 01/01/2000</span>
<span class='aDitta'>Alla ditta Business</span>
<span class='nRata'>Payment 1 di 1</span>
<span class='importo'>Tot. documento 123,45 &euro;</span>

)

but the tasg are showed as text.

In every case, the height of the result cell is too short to show all information.

I use the code

	kendo.ui.progress($("#scheduler"), false);
	
	urlData = url
	
    $("#scheduler").kendoScheduler({
        height: 600,
        views: [
            "day",
            "week",
            { type: "month", selected: true},
            "year"
        ],
        timezone: "Europe/Rome",
		allDayEventTemplate: $("#event-template").html(),
		eventTemplate: $("#event-template").html(),
        dataSource: {
            batch: true,
            transport: {
                read: {
                    url: urlData,
					type: "POST",
					contentType: "application/json; charset=utf-8",
					dataType: " json"
                },
                update: {
                },
                create: {
                },
                destroy: {
                }
            },
            schema: {
                model: {
                    id: "taskId",
                    fields: {
                        taskId: { from: "TaskID", type: "number" },
                        title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                        start: { type: "date", from: "Start" },
                        end: { type: "date", from: "End" },
                        startTimezone: { from: "StartTimezone" },
                        endTimezone: { from: "EndTimezone" },
                        description: { type: "html", from: "Description" },
                        recurrenceId: { from: "RecurrenceID" },
                        recurrenceRule: { from: "RecurrenceRule" },
                        recurrenceException: { from: "RecurrenceException" },
                        ownerId: { from: "OwnerID", defaultValue: '' },
                        isAllDay: { type: "boolean", from: "IsAllDay" },
						IntestazioneDocumento: { from: "IntestazioneDocumento" },
						RagioneSociale: { from: "RagioneSociale" },
						
                    }
                }
            }
        },
		editable: false,
        resources: [
            {
                field: "ownerId",
                title: "Owner",
                dataSource: [
                    { text: "CENTRAL", value: 0, color: "#0000ff" },
                    { text: "LOGGIA", value: 1, color: "#f8a398" },
                    { text: "GIOTTO", value: 2, color: "#2572c0" },
                    { text: "P_COMM", value: 3, color: "#118640" }
                ]
            }
        ]
    });
    $("input[ name=showFarm ]").change(function(e) {
        var checked = $.map($("input[ name=showFarm ]:checked"), function(checkbox) {
            return parseInt($(checkbox).val());
        });

        var scheduler = $("#scheduler").data("kendoScheduler");

        scheduler.dataSource.filter({
            operator: function(task) {
				return $.inArray(task.ownerId, checked) >= 0
            }
        });
    });
});

Scheduler

Templates

answered on 30 Aug 2022

1 answer

279 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

147 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

269 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

150 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

662 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

141 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

127 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

139 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