Questions on Kendo UI for jQuery Forum

1 answer

50 views

I looked at the demo at https://demos.telerik.com/kendo-ui/menu/orientation.

The code for this demo included the following line of code.

Why is this line of code necessary ?
What is the need of passing the parameter $("#myMenu .k-link") to the close method? I thought we could simply call the close method without any parameters and that would close the menu.

 menu.data("kendoMenu").close($("#myMenu .k-link"));

Menu

answered on 07 Aug 2024

1 answer

84 views

Kendo window with template is producing TS error (TypeError: e.toLowerCase is not a function)

I have a Kendo window:

$("#depDialog").kendoWindow({
    width: "450px",
    modal: true,
    title: "Add Dependency",
    content: {
        template: $('#javascriptTemplate').html()
    },
    visible: false,
    resizable: false,
    actions: [
        { text: "Cancel" },
        { text: "Add", primary: true }
    ]
});

I also have a template:

<script id="javascriptTemplate" type="text/x-kendo-template">
     <div class="row mt-2">
        <div class="col">
            @(Html.Kendo().DropDownList()
                .Name("dep_new")
                .DataTextField("Name")
                .DataValueField("Id")
                .BindTo((System.Collections.IEnumerable)(Model.Applications.ToList()))
                .SelectedIndex(0)
                .ToClientTemplate()
            )
        </div>
        <div class="col">
            @(Html.Kendo().TextBox()
                .Name("dep_notes_new")
                .HtmlAttributes(new { style = "height: 38px;" })
                .ToClientTemplate()
            )
        </div>
    </div>
</script>

I have an empty div to load the template:

<div id="depDialog"></div>

I tried using a dialog (hence the naming) but I couldn't get it to work. Now I'm using a window, and I'm getting the following TS error:

kendo.all.js:96132 Uncaught TypeError: e.toLowerCase is not a function
at kendo.all.js:96132:1
at Function.map (jquery-3.7.0.min.js:2:3967)
at init._actions (kendo.all.js:96130:1)
at init.title (kendo.all.js:96540:1)
at new init (kendo.all.js:95806:1)
at HTMLDivElement.<anonymous> (kendo.all.js:3741:1)
at Function.each (jquery-3.7.0.min.js:2:3129)
at ce.fn.init.each (jquery-3.7.0.min.js:2:1594)
at e.fn.<computed> [as kendoWindow] (kendo.all.js:3740:1)
at init.editOnShow (index.ts:287:29)

The error line points to the kendoWindow initialization. Thoughts?

Window

answered on 05 Aug 2024

0 answers

105 views

How to implement a kendo.ui.progress component on lengthy sheet renderings /page loads

Hi. I have a spreadsheet control that can have ~7000 rows per sheet with formatting used. I need to know where to start the kendo.ui.progress component and where to end it. I tried to put the start in the selectSheet sheet Event handler:

document.getElementById('generateText').innerHTML = "Loading large page...";
$("#popUpProgressWindow").data("kendoWindow").open();
kendo.ui.progress($("#popUpProgressWindow"), true);

...but I couldn't figure out where to put the matching "hide" or:

$("#popUpProgressWindow").data("kendoWindow").close();
kendo.ui.progress($("#popUpProgressWindow"), false);

In addition, it seems like the progress component won't actually start until render event. (which is after everything has rendered).. and by then the sheet seems to be populated already.

I also tried creating an onClick event handler to start the progress component. No luck.

Thanks again for your help and patience ^__^

George

ProgressBar

Spreadsheet

updated question on 01 Aug 2024

1 answer

174 views

What is the method to use PDFViewer with the new Mozilla pdf.mjs?

Hello,

I am using KENDOUI jQuery PDFViewer. PDFViewer essentially uses Mozilla's pdf.js library, and I was using version 2.5.207 of pdf.js. However, there are security vulnerabilities in this version (https://github.com/mozilla/pdf.js/security/advisories/GHSA-wgrm-67xf-hhpq). Mozilla has started using pdf.mjs and pdf.worker.mjs with version 4.x. How can I use these versions with PDFViewer?

How can I set the window.pdfjsLib.GlobalWorkerOptions.workerSrc assignment?

PDFViewer

answered on 01 Aug 2024

2 answers

270 views

Tile Layout with variable row heights

Hi,

As the title suggests is it possible to create a Tile Layout where each row has a different height property?

TileLayout

updated answer on 31 Jul 2024

1 answer

106 views

TextBox focus when window opens

Hi,

how to set focus to kendo TextBox widget when a kendo window opens?

I tried the following but no luck. The widget is selected and focused for a fraction of second and then selection and focus is magically removed.

   $(document).ready(function () {
       setTimeout(function () { $("#position").data("kendoTextBox").focus() }, 200)
   });

TextBox

Window

answered on 29 Jul 2024

1 answer

58 views

Adding totals columns to an html table that has been converted to Kendo Grid

I have an HTML table that I can successfully convert to a Kendo Grid report.
But I don't seem able to add aggregates at the bottom of the report.
If I display the totals or counts as rows in the report, they get sorted when the report is sorted by Kendo.
Is there a way to do this natively in Kendo?

All of the examples I can find online are not for HTML tables.

Grid

answered on 29 Jul 2024

0 answers

50 views

Add Class to Treelist Arrow

I'm trying to add a class to the kendo treelist arrow based on the data in the grid, however when I expand a row now, the class disappears for this and all other rows. How can I retain that class? Here is a dojo with an example. In the dojo, you will notice that if the person's name is not "Guy Wooten", they get a class of "maroon". That is then used to turn the drop arrow red. As soon as you click the person, the arrow turns black. I need it to stay red. You'll also notice that none of the subsequent ones have the red anymore either. How do I fix that?

https://dojo.telerik.com/@dojolee/IyOGeduk

Note: Neither versions 2022 or 2024 work correctly, but in 2022, the subsequent rows keep their class.

TreeList

updated question on 26 Jul 2024

2 answers

73 views

Table Edit Tools Showing on init with content

Issue 1:

When I initialize a kendo editor from a div with content, all of the table tools are shown in the editor toolbar (insert row, insert column, etc) on initialization. Once the user clicks in the box they disappear. I prepared a Dojo showing this.

In the Dojo, you will see there are 2 different editors. The first editor uses a function I wrote that worked in version 2022 but doesn't in version 2024 of Kendo. The second editor is just a default initialization using none of my custom code. The purpose of the first one is to show the toolbar on initialization. In both instances of the editor, you will notice that the insert row, insert column, etc are showing at first and then quickly disappear. This only happens the first time the user clicks into the editor. These should not be visible until the user clicks into the editor and selects a table.

I did notice that if I initialize the div empty, then add the content later programmatically (like this: kendoEditor.value("Hello World");), the issue doesn't happen.

Issue 2:

Once you add a table, you can't remove it using backspace or delete. Try this example:

In either editor, click the insert table button.
Insert a table.
Click into the editor and press backspace and/or delete. The table doesn't go away.

https://dojo.telerik.com/@dojolee/OgOpalaL

Note: I also create a bug report for this here: Bug Report

Editor

answered on 26 Jul 2024

1 answer

119 views

tilelayout - resize event is not working for the first time.

In below code, i dynamically loading telerik charts, and the resize of the Charts is not working for the first time. from second time its resizing as expected. For second time also i added some custom logic to fetch the width. I tried multiple ways, like debounce, observer the tilelayout.

<div id="reports-container"></div>
<script>
$(document).ready(function () {
fetchReports();

function fetchReports() {
var loginId = @Model.CurrentUserId;
$.ajax({
url: '/api/Dashboard/ListDashboardItemByProfile',
type: 'POST',
data: { LoginId: loginId },
success: function (data) {
displayReports(data);
},
error: function (e) {
error_handler(e);
}
});
}

function displayReports(reports) {
var container = $('#reports-container');
container.empty(); // Clear any existing reports

var tileLayout = $('<div></div>')
.attr('id', 'tilelayout')
.attr('name', 'tilelayout')
.addClass('k-widget k-tilelayout')
.css({
'display': 'grid',
'grid-template-columns': 'repeat(6, 1fr)', // Ensure each column takes equal space
'grid-auto-rows': 'minmax(0, 185px)', // Ensure each row has a minimum height
'gap': '16px',
'padding': '16px'
});

container.append(tileLayout);

reports.forEach(function (report) {
var tileContainer = $('<div></div>')
.addClass('k-tilelayout-item k-card')
.attr('id', 'tile-container-' + report.ReportId)
.attr('data-profiledetailid', report.ProfileDetailId)
.css({
'grid-column-end': 'span ' + report.ColumnSpan,
'grid-row-end': 'span ' + report.RowSpan,
'order': report.ReportSequence,
'display': 'inline-flex',
'width': '100%', // Ensure tiles take full width within the grid column
'height': '100%' // Ensure tiles take full height within the grid row
});

var tileHeader = $('<div></div>')
.addClass('k-tilelayout-item-header k-card-header k-cursor-grab')
.text(report.AltReportName);

tileContainer.append(tileHeader);

var tileBody = $('<div></div>')
.addClass('k-tilelayout-item-body k-card-body');

tileContainer.append(tileBody);
tileLayout.append(tileContainer);

loadChart(report, tileBody); // Pass tileBody to loadChart function
});

initializeTileLayout();
}

function initializeTileLayout() {
var computedWidthList = [];
var resizeObserver;

function handleResize(container, computedWidth, computedHeight) {
var parentWidth = container.parent().width();
var columnWidth = parentWidth / 6;
var rowHeight = 225; // Adjust rowHeight if needed

computedWidthList.push(computedWidth);
console.log(computedWidthList);

if (computedWidthList.length > 3) {
var lastcomputedWidth = computedWidthList[computedWidthList.length - 1];
var beforeLastcomputedWidth = computedWidthList[computedWidthList.length - 2];
var beforeBeforeLastcomputedWidth = computedWidthList[computedWidthList.length - 3];

if (beforeLastcomputedWidth == 0) {
var lastcomputedWidth = computedWidthList[computedWidthList.length - 1];
var beforeLastcomputedWidth = computedWidthList[computedWidthList.length - 3];
var beforeBeforeLastcomputedWidth = computedWidthList[computedWidthList.length - 4];
}

if (beforeBeforeLastcomputedWidth < beforeLastcomputedWidth && lastcomputedWidth < beforeLastcomputedWidth) {
computedWidth = beforeLastcomputedWidth;
} else if (beforeBeforeLastcomputedWidth > beforeLastcomputedWidth && lastcomputedWidth < beforeLastcomputedWidth) {
computedWidth = beforeLastcomputedWidth;
}
}

// Calculate the new column and row spans
var newColumnSpan = Math.max(1, Math.round(computedWidth / columnWidth));
var newRowSpan = Math.max(1, Math.round(computedHeight / rowHeight));

// Update grid-column-end and grid-row-end styles
container.css('grid-column-end', 'span ' + newColumnSpan);
container.css('grid-row-end', 'span ' + newRowSpan);

// Update data attributes for future calculations
container.attr('data-colspan', newColumnSpan);
container.attr('data-rowspan', newRowSpan);

// Trigger chart resize if chart exists
var chartContainer = container.find(".k-chart");
if (chartContainer.length) {
chartContainer.data("kendoChart").resize();
}
}

// Initialize the Kendo TileLayout
$("#tilelayout").kendoTileLayout({
columns: 6,
gap: {
columns: 16,
rows: 16
},
containers: $(".k-tilelayout-item"),
draggable: true,
resizable: true,
reorderable: true,
resize: function (e) {
var resizedElement = e.container;
var resizedWidth = resizedElement.width();
var container = e.container;
console.log(resizedWidth);
if (!container || container.length === 0) {
console.error("Container not found");
return;
}

var containerElement = container[0];

// Disconnect previous observer if exists
if (resizeObserver) {
resizeObserver.disconnect();
}

// Create a new ResizeObserver to observe size changes during resize
resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
const computedWidth = entry.contentRect.width;
const computedHeight = entry.contentRect.height;
handleResize(container, computedWidth, computedHeight);
}
});

// Observe the container element during resize
resizeObserver.observe(containerElement);
},
reorder: function (e) {
var container = $(e.container[0]);
if (container) {
var tileId = container.attr('id').replace('tile-container-', '');
var newIndex = e.newIndex;

// Update the order property based on the new index
container.css('order', newIndex); // Adjust for 1-based indexing
// Optionally, you may update this order value in your data model as well
}
}
});

}

function loadChart(report, containerElement) {
var reportContainer = $('<div></div>')
.attr('id', 'report-container-' + report.ReportId)
.css({
'border': '1px solid #ddd',
'padding': '10px',
'margin': '5px',
'width': '100%',
'height': '100%'
});

containerElement.append(reportContainer);

// Check if the report needs a chart or a gauge
if (report.Type === "Bar" && report.ReportName == "Summary By Task") {
loadSummaryByTask(report, reportContainer);
} else if (report.Type === "Bar" && report.ReportName == "Summary By Employee") {
loadSummaryByEmployee(report, reportContainer);
} else if (report.Type === "Bar" && report.ReportName == "Summary By Site") {
loadSummaryBySite(report, reportContainer);
} else if (report.Type === "ArcGauge" && report.ReportName == "Long Duration Assignments") {
loadLongDuration(report, reportContainer);
} else if (report.Type === "Line" && report.ReportName == "Utilization By Site") {
loadUtilizationBySite(report, reportContainer);
} else if (report.Type === "Line" && report.ReportName == "Lines Per Hour by Site") {
loadLinesPerHourbySite(report, reportContainer);
} else if (report.Type === "Line" && report.ReportName == "Productivity By Site") {
loadProductivityBySite(report, reportContainer);
} else if (report.Type === "ArcGauge" && report.ReportName == "Error Audit Summary Report") {
loadErrorAudit(report, reportContainer);
}
}

function loadSummaryBySite(report, containerElement) {
if (report.Duration == null) {
report.Duration = 0;
}
$.post('/api/Dashboard/GetLabelsForReport', { reportName: report.ReportName })
.done(function (labelsResponse) {
var labels = labelsResponse;

$.post('/api/Dashboard/GetDataForReport', { reportName: report.ReportName, siteId: report.SiteId, startDateId: report.StartDateId, endDateId: report.EndDateId, loginId: @Model.CurrentUserId, activityId: report.ActivityId, duration: report.Duration, frequencyId: report.FrequencyId, errorTypeId: report.ErrorTypeId })
.done(function (dataResponse) {
var data = dataResponse;

var chartElement = $('<div></div>')
.attr('id', 'chart-container-' + report.ReportId)
.css({
'width': 'auto',
'height': '400px'
});

containerElement.append(chartElement);

chartElement.kendoChart({
title: {
text: ""
},
legend: {
position: "top"
},
series: [{
name: "Performance",
data: data.map(d => d.Performance),
type: "column",
axis: "performance"
}],
categoryAxis: {
categories: data.map(d => d.SiteName),
labels: {
rotation: -45,
template: "#: value #"
},
title: {
text: "SiteName"
}
},
valueAxes: [{
name: "performance",
title: {
text: "Performance"
}
}],
tooltip: {
visible: true,
format: "{0}"
}
});

// Save the chart instance for resizing
chartElement.data("kendoChart").resize();
})
.fail(function () {
alert("Error loading chart data.");
});
})
.fail(function () {
alert("Error loading chart labels.");
});
}
</script>

TileLayout

answered on 26 Jul 2024