Dynamically add panel with EJ2 controls

[Leigh Anderson]

Hi

I'm looking at the Dashboard Layout control and the example of dynamically adding panels:

https://ej2.syncfusion.com/aspnetcore/documentation/dashboard-layout/panels/add-remove-panels/

If I try and add a panel with content that contains another EJ2 control, it doesn't seem to work.

So in your example I change:

content: "<div class='content'>" + count + "</div>"

To:

content: "<div class='content'>" + count + "<ejs-datepicker id='dp1'></ejs-datepicker></div>"

But when it displays, it doesn't show the date picker.

What am I doing wrong?

Also is it possible to change the content of an existing panel using Javascript with new content containing EJ2 controls?

Thanks

[Indhumathy Loganathan]

Hi Leigh, 

 

Greetings from Syncfusion support. 

 

We understood that you want to add a DatePicker to the Dashboard Layout panel content. But you can’t dynamically render the component using the tag helper; only html elements can be rendered here. We suggest you add a div container inside the panel and append the DatePicker to that div. Check the below code snippet. 

 

document.getElementById('add').onclick = function (e) { 

    var panel = [{ 

        'id': count.toString() + '_layout', 'sizeX': 3, 'sizeY': 2, 'row': 0, 'col': 0, 

        content: '<div id="datepicker"></div>' 

    }]; 

    dashboardObject.addPanel(panel[0]); 

    var month = new Date().getMonth(); 

    var fullYear = new Date().getFullYear(); 

 

    var datepicker = new ej.calendars.DatePicker({ 

        placeholder: 'Choose a date', 

        // Sets the min. 

        min: new Date(fullYear, month, 9), 

        //Sets the max. 

        max: new Date(fullYear, month, 15), 

        // Sets the value. 

        value: new Date(fullYear, month, 11) 

    }); 

    datepicker.appendTo('#datepicker'); 

    count = count + 1; 

}; 

 

Sample: https://www.syncfusion.com/downloads/support/forum/172313/ze/Core_DashboardLayout1775115854 

 

Please check the sample and get back to us if you need any further assistance. 

 

Regards, 

Indhumathy L