Hi Henry Pham,
Greetings from Syncfusion support.
By default, Dashboard Layout is a responsive layout. When you resize the browser window, it adjust panels based on window resolution. Please, refer the below link.
However, if you want to change the panel position based on screen resolution. You can achieve your requirement by binding the resize event and changing the panel position using panels property.
Please , refer the below code sippet.
|
$(function() {
window.addEventListener("resize", onVideoWallResize);
});
function onVideoWallResize() {
if (
window.matchMedia("(max-width: 1800px)").matches &&
window.matchMedia("(min-width: 1200px)").matches
) {
setTimeout(function() {
dashboardObject.panels = data2;
}, 200);
} else if (
window.matchMedia("(max-width: 1200px)").matches &&
window.matchMedia("(min-width: 700px)").matches
) {
setTimeout(function() {
dashboardObject.panels = data3;
}, 200);
} else {
setTimeout(function() {
dashboardObject.panels = data;
}, 200);
}
setTimeout(function() {
dashboardObject.refresh();
}, 300);
} |
Please, refer the sample link.
If we misunderstood your requirement, please share the screenshot for your requirement. It will help us to give the prompt solution at the earliest.
Please let us know, if you need any further assistance.
Regards,
Sowmiya.P
