Progresss Bar in Grid

[TheDarkBoz]

Hello

I have tried to add progressbar in a grid but fail

I found this pageInsert control in gridbut not found clientsideevent in core

I found thi pagetemplatetemplate in example work but when I try use the progressbar I fail..

Could you please give me a example

Thanks you

Attachment: progressbar_9f0c0841.zip

[Mani Sankar Durai]

Hi Atolgan, 

Thanks for contacting Syncfusion support.  

We have analyzed your query and found that you would like to show the progressBar inside the column in grid. Based on your requirement we have prepared a sample that can be downloaded from the below link 

Link: http://www.syncfusion.com/downloads/support/forum/135245/ze/Grid_progressBar320975543 

We have achieved your requirement using template property by rendering the element and in the template-refresh event we have rendered the progress bar control for the element rendered as template.  

Please refer the code example 

<ej-grid id="Grid" allow-paging="true" datasource="ViewBag.datasource" template-refresh="template"> 

        <e-columns> 

            <e-column field="OrderID" header-text="Order ID" is-primary-key="true"></e-column> 

            <e-column field="EmployeeID" header-text="Employee ID"></e-column> 

            <e-column template="#coltemplate" header-text="progress bar"></e-column> 

           </e-columns> 

    </ej-grid> 

 

 

<script type="text/template" id="coltemplate"> 

    <div id="target1"> 

    </div> 

</script> 

 

<script> 

    function template(args) { 

        $(args.cell).find("#target1").ejProgressBar({ enabled:true , value: 20}); 

 

    } 

</script> 

API link: https://help.syncfusion.com/api/js/ejgrid#events:templaterefresh 

Please let us know if you need further assistance  

Regards, 

Manisankar Durai. 

[TheDarkBoz]

Hello

Thanks you so much it is okay.

I have two more question:

- Could I use custom css class or only syncfusion theme class?
- How could I put the text/template in separated file ? What is the file extension?

Best Regards

[Mani Sankar Durai]

Hi TheDarkBoz, 

Query 1: Could I use custom CSS class or only syncfusion theme class? 

 

We have analyzed your query and we found that you would like to set the different style in grid. We can achieve your requirement using cssClass property in grid.  

Refer the documentation link: 

Link:  https://help.syncfusion.com/js/api/ejgrid#members:columns-cssclass  

Refer the KB link to customize in grid. 

Link: https://www.syncfusion.com/kb/5172/how-to-customize-grid-appearance-using-custom-css 

Also to modify the grid appearance we can also create a custom theme by generating and download the theme for Grid using theme studio. 

Please refer to the below documentation.  

https://help.syncfusion.com/js/theme-studio  

Theme studio Link: http://js.syncfusion.com/themestudio/ 

API link: https://help.syncfusion.com/api/js/ejgrid#members:cssclass 

 

Query 2: How could I put the text/template in separated file? What is the file extension? 

 

To render the template in a separate file and to bind for the grid we suggest you to refer the below document link 

Link: http://www.jsviews.com/#compiletmpl 

Here we can use the template as JS extension or txt file 

 

Please let us know if you need further assistance.  

  

Regards, 

Manisankar Durai.