How to integrate Kendo Progressbar into Grig column ising template?

[ILYA]

We want to use Kendo vertical progressbar in one of our grig (basic usage) column (named "Zero"). All matherials were took from spring demos.

We have tried to use basic html progress-bar (template="<progress max='100' value='75' style='transform: rotate(-90deg); height: 40px; background-color: \#d40000'></progress></div>'"/>) and it's work correctly (but we already have some problems with style - we can't change progressbar color).

However, when we tried to use:

template="<kendo:grid name='grid' groupable='true' sortable='true' style='height:550px;'>"

it stop worked.

 

Hull code:

<kendo:grid name="grid" groupable="true" sortable="true" style="height:550px;">
<kendo:grid-pageable refresh="true" pageSizes="true" buttonCount="5">
</kendo:grid-pageable>

<kendo:grid-columns>

<kendo:grid-column title="Zero" field="zero" width="470" template="<kendo:grid name='grid' groupable='true' sortable='true' style='height:550px;'>"
/>

<kendo:grid-column title="Contact Name" field="contactName" width="240"
template="<div class='customer-photo' style='background-image: url(../resources/web/Customers/#:data.customerId#.jpg);'></div><div class='customer-name'>#: contactName #</div>">
</kendo:grid-column>
<kendo:grid-column title="Contact Title" field="contactTitle" />
<kendo:grid-column title="Company Name" field="companyName" />
<kendo:grid-column title="Country" field="country" width="150" />
</kendo:grid-columns>

[Konstantin Dikov]

Hello Ilya,

Could you please elaborate what exactly you want to render in the "Zero" column cells, because the code snippet that you have shared (which does not work) contains a definition for a Grid (with the same name as the parent Grid)?

As for the colors of the ProgressBar, you could inspect the elements that the ProgressBar renders and override the colors with custom CSS, using the class names added to the elements as selectors.


Regards,
Konstantin Dikov
Progress Telerik