Hi CZ,
Greetings from Syncfusion support.
Query 1:
The input control height is 23px
Response:
We would like to inform you that, by default component will be rendered in the normal mode. If you want to render the Syncfusion components in small size, we need to add the “e-small” class for the body element to render the Syncfusion components in the small mode. Kindly refer the below code example.
Else, we can provide the height for ComboBox control by overriding the height of the “e-input-group” class.
|
<style>
.e-input-group.e-control-wrapper.e-custom.e-ddl,
.e-custom.e-input-group.e-control-wrapper input.e-input {
height: 23px;
}
.e-custom.e-input-group .e-input-group-icon,
.e-custom.e-input-group.e-control-wrapper .e-input-group-icon {
min-height: 23px;
}
</style> |
Query 2:
set input control border color to #808080
Response:
We can override the border-color of the combobox component by overriding the below CSS styles in your application.
|
.e-custom.e-input-group:not(.e-success):not(.e-warning):not(.e-error),
.e-custom.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
border-color: #808080;
} |
Query 3:
Is there any way to improve performance?
we use your company's DataGrid in our application with virtual attribute, the performance is great, I don't know if there are this kind feature to improve performance when user input?
Response:
Currently virtual scrolling is not supported via API. But we can achieve the functionality by manually performing the virtual scroll operation using scroll event handler bound through the open event. Kindly refer to the following code snippet.
|
function onOpen(args) {
if (!isInitial) {
var start = 11;
var end = 20;
var element = this.element.ej2_instances[0];
var listElement = this.element.ej2_instances[0].list;
listElement.addEventListener('scroll', function () {
if ((listElement.scrollTop + listElement.offsetHeight >= listElement.scrollHeight)) {
let filterQuery = query.clone();
data.executeQuery(filterQuery.range(start, end)).then((event) => {
start = end;
end += 5;
element.addItem(event.result);
}).catch(function (e) {
});
}
})
}
} |
For your convenience, we have prepared the sample by integrating above mentioned solution and attached it below.
Regards,
Berly B.C
