Loader in grid

[thibault fouillat]

Hello Syncfusion team,

I try to change de loader in EJS grid because the default design does not correspond to our graphic charter. Is it possible to do that ? I do not find anything in the documentation.

Concretely I need to put that as the grid loader instead of the default :

.loader-centerd-screen {

    border: 10px solid $medium-grey;

    border-top: 10px solid $light-blue;

    border-radius: 50%;

    width: 60px;

    height: 60px;

    animation: spin 2s linear infinite;

    display: block;

    margin-top: 40vh;

}

@keyframes spin {

    0% {

        transform: rotate(0deg);

    }

    100% {

        transform: rotate(360deg);

    }

}

Regards

[Venkatesh Ayothi Raman]

Hi Thibault, 

Thanks for contacting Syncfusion support. 

Query: I try to change de loader in EJS grid because the default design does not correspond to our graphic charter. Is it possible to do that ? 

Yes, it is possible to change the default spinner to a custom design. To achieve your requirement, we have used template property in the setSpinner method of the spinner component. Please find the below sample and documentation for your reference. 

Code Example: 

[.cshtml] 

@{ 

    ViewBag.Title = "Home Page"; 

} 

 

<style> 

    .loader-centerd-screen { 

        border: 10px solid grey; 

        border-top: 10px solid blue; 

        border-radius: 50%; 

        width: 60px; 

        height: 60px; 

        animation: spin 2s linear infinite; 

        display: block; 

        margin-top: 40vh; 

    } 

 

    @@keyframes spin { 

        0% { 

            transform: rotate(0deg); 

        } 

 

        100% { 

            transform: rotate(360deg); 

        } 

    } 

</style> 

 

<script> 

    ej.popups.setSpinner({ template: '<div class="loader-centerd-screen"><div></div></div>' });               //your custom class in set to the spinner component 

 

    function hide() { 

        var grid = document.getElementById("Grid").ej2_instances[0]; 

        grid.hideSpinner = () => true; 

    } 

 

</script> 

 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col => 

{ 

    ... 

}).AllowPaging().Load("hide").Render() 

 

 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/customSpinner-1311055683  

Documentation: https://ej2.syncfusion.com/documentation/spinner/?lang=typescript#set-the-template-to-the-spinner  

Please get back to us for further assistance. 

Regards,  

Venkatesh Ayothiraman.