Questions on Kendo UI for jQuery Forum

1 answer

194 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

1 answer

197 views

checkbox column in grid

i have a grid with one checkbox column bound to a dataitem. what i just want to do is when you click the checkbox to check/uncheck, it will update the data item.

i've tried copying the sample provided here: https://dojo.telerik.com/ozoHUwUP/5 but the onchange event is not triggered

columns.Bound(p => p.IsApproved).ClientTemplate("<input type='checkbox' class='chkbx k-checkbox' onclick='check()' #= IsApproved ? checked='checked' :'' # #=dirtyField(data,'IsApproved')#/>")

.Title("Approved?").Width(150);

Checkbox

Grid

answered on 25 Jul 2024

1 answer

94 views

Duplicate TreeView Nodes When Switching Views in Kendo UI FileManager

Description:

We have encountered an issue with the Kendo UI FileManager component, specifically related to its TreeView functionality. The problem occurs when switching from Grid View to List View within the FileManager interface.

Issue Details:

When a user is working with the Kendo UI FileManager and changes the view from Grid View to List View, the TreeView on the right side of the FileManager continues to expand unexpectedly. This behavior results in an accumulation of TreeView nodes, which are not cleared or updated correctly.

Steps to Reproduce:

Open the Kendo UI FileManager with the TreeView and Grid View.
Switch from Grid View to List View.
Observe the TreeView on the left side.

Expected Behavior:

The TreeView should update appropriately and not exhibit additional, unexpected expansion when changing views.

Attached Video:

A video demonstrating the issue has been attached for reference. It illustrates how the TreeView continues to grow when switching views.

Impact:

This issue affects the user experience by causing confusion and making the FileManager interface less intuitive. It is crucial for the TreeView to function correctly and reflect the current view state accurately.

Reference:
https://demos.telerik.com/kendo-ui/filemanager/index

FileManager

answered on 25 Jul 2024

1 answer

68 views

jsonP callback "callback_ets"

Hello.

I'm new to Telerik and am evaluating Kendo for jQuery.

In the index.html page under apptemplates/dashboard, is the following code:

            $.when($.ajax({
                url: "./content/employee-and-team-sales.json",
                crossDomain: true,
                dataType: "jsonp",
                jsonp: false,
                jsonpCallback: "callback_ets",
                success: function(data) {
                    employeeAndTeamSales = data;
                }
            })

I cannot find "callback_ets" anywhere. Where is this function defined?

Thanks in advance,

Mike

Data Source

answered on 25 Jul 2024

1 answer

229 views

Kendo Telerik license script

Hi,

I have one question regarding kendo-ui-license.js. We added it to the project and we are using it in our solution. But it's safe to use it if someone can see some id in KendoLicensing.setScriptKey. Please confirm if we can use it.

We have similar question here: https://www.telerik.com/forums/kendolicensing-setscriptkey-security-breach

Licensing

answered on 25 Jul 2024

1 answer

78 views

KendoGantt JQuery prevent connectors from overlapping

Hi,

Is there a way to prevent connectors from overlapping in a Gantt diagram?

If we have several nearby tasks the connectors tend to follow the same path making it hard do figure out the origin and destination of each one.

It doesn't seem to exist a template for connectors and playing with the css did not went well.

Thanks for the help,

Daniel.

Gantt

answered on 25 Jul 2024

1 answer

68 views

start work

Hello everyone!
I want to use kendou for jquery and can`t find documentation how to buy license, can you help me?

Licensing

answered on 25 Jul 2024

1 answer

78 views

Kendo JQuery Calendar

Hi,

Anyone know how to resize the whole calendar to fit on your declared container? im having difficulties to target specific classes using css for it.

Any tips or help would be appreciated.

Thank you

Calendar

View

answered on 24 Jul 2024

1 answer

172 views

Do Not Render Buttons With Icons in Kendo Grid Filter Menu

I just upgraded from V2021 to V2024. Now, in the filter menu, I have buttons with icons for filter and clear. I don't want the icons. I know I can target them with CSS and do a display: none, but is there some way of not rendering them in the first place?