This is a migrated thread and some comments may be shown as answers.

How to integrate Kendo Progressbar into Grig column ising template?

1 Answer 20 Views
Grid
This is a migrated thread and some comments may be shown as answers.
ILYA
Top achievements
Rank 1
ILYA asked on 21 Feb 2019, 01:25 PM

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>

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 25 Feb 2019, 11:19 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
ILYA
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Share this question
or