Most Efficient JS/CSS File Dependencies

[Matthew]

Hello,

I'm new to Syncfusion, but I was very intrigued with multi-select component uses checkboxes and supports searching.  I have downloaded the installer package and created a few simple version of this component, but all seem to use a file called ej2.min.js as a dependency, and that file itself is almost 17MB.  I can see that the file includes code for every EJ2 JS utility, and was hoping to find a way to use only the js code needed for this utility to try to keep the page as lightweight as possible, but the documentation provided at the How To creates a simplified version of this component without checkboxes and searching. 

Does anyone know how I might obtain just the necessary support css/js files for this implementation, without using the entire ej2.min.js file? Any help would be greatly appreciated.

Example of what I'm looking to create:  https://ej2.syncfusion.com/demos/#/bootstrap5/multi-select/checkbox.html

How To: https://www.syncfusion.com/kb/11626/how-to-create-an-example-of-javascript-multiselect-dropdown-with-bootstrap-theme

[UdhayaKumar Duraisamy]

Hi Matthew,

Syncfusion provides an option to generate a selective controls script (JavaScript ES5) and styles by using the Custom Resource Generator (CRG) web tool. Please refer to the below documentation to know more details.

Documentation :
https://ej2.syncfusion.com/javascript/documentation/multi-select/es5-getting-started/

Custom Resource Generator (CRG) :
https://crg.syncfusion.com/

Regards,

Udhaya Kumar D

[Matthew]

Ahh, thank you, I really appreciate it.  I'll give this a try

[UdhayaKumar Duraisamy]

Hi Matthew,

Thanks for your appreciation. We will wait until hear from you.

Regards,

Udhaya Kumar D

[Matthew]

Although the CRG has worked, there is something I'm not clear on.  I'm embedding the multiselect in an existing webpage that uses bootstrap5 via CDN.  No big deal, I've been able to rewrite most of the CSS downloaded from CRG to suit, but I cannot seem to override the font style and size of the list options for the select.  Is there a way to do this?  So when you click into the dropdown, the options are listed below or above, but I cannot seem to override that font.  Any ideas?

Although I do really like it, I must confess that this tool is pretty difficult to use and customize compared to most select components, even using other plugins like Select2 since all the options are stored in JS and created on load.  Thanks again for all your help.

[UdhayaKumar Duraisamy]

Hi Matthew,

Syncfusion provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference. Use the below CSS to customize the appearance of the popup element.

.e-dropdownbase .e-list-item, .e-dropdownbase .e-list-item.e-item-focus {

    background-color: #29c2b8;

    color: #207cd9;

    font-family: emoji;

    min-height: 29px

}

Please refer to the Below documentation and sample for more details.

Documentation : https://ej2.syncfusion.com/documentation/multi-select/style/#customizing-the-appearance-of-pop-up-element

Sample : https://stackblitz.com/edit/htpjrt?file=index.html

Regards,

Udhaya Kumar D

[Matthew]

Thank you, I'll give that a try!  Much appreciated!

[UdhayaKumar Duraisamy]

Hi Matthew,

Thanks for your appreciation. We are always happy to assist you.

Regards,

Udhaya Kumar D