Custom Row Templates with Progress Bar

[Ken]

Are there any asp.net core examples for embedding controls in a grid?  I am trying to show a progressbar along with my row data.  The data fields display fine, but not the progress bar. I've attached a couple screen images - one showing a list version of what I am trying to do and the second of my results.  Here is how my grid is setup:

        @(Html.Kendo().Grid<ITFactory.Models.ChartModels.FeatureProgress>()
                                .Name("FeatureProgress")
                                .DataSource(dataSource => dataSource
                                    .Ajax()
                                    .PageSize(10)
                                    .Read(read => read
                                        .Action("GetFeatureProgress", "Dashboards")
                                        .Data("FeatureProgressFilter")
                                    )
                                )
                                .Columns(columns =>
                                {
                                    columns.Bound(c => c.FeatureName);
                                    columns.Bound(c => c.EstimatedCardCount);
                                    columns.Bound(c => c.CompletedCardCount);
                                    columns.Template(" ").Title("ProgressBar");
                                })
                                .ClientRowTemplate(
                                           "<tr>" +
                                                "<td>" +
                                                    "#:FeatureName#" +
                                                "</td>" +
                                                "<td>" +
                                                    "#: EstimatedCardCount#" +
                                                "</td>" +
                                                "<td>" +
                                                    "#: CompletedCardCount#" +
                                                "</td>" +
                                                "<td>" +
                                                    "@(Html.Kendo().ProgressBar()" +
                                                    ".Name(Progress#:FeatureName#)" +
                                                    ".Type(ProgressBarType.Percent)" +
                                                    ".Max(#: EstimatedCardCount#)" +
                                                    ".Value(#: CompletedCardCount#))" +
                                                "</td>" +
                                            "</tr>"
                                )
                                .Sortable()
        )

 

 

[Tsvetomir]

Hi Ken,

If the Progress bar for ASP.NET Core is not initialized in the dataBound event handler of the grid, it will be shown as plain text. Also, I recommend you to make use of the ClientTemplate configuration of the column.

.Columns(columns =>
{
    columns.Bound(p => p.OrderID).Filterable(false);
    columns.Bound(p => p.Freight).ClientTemplate("<div class='progress'></div>");

And then initialize the ProgressBar widgets in the dataBound event handler:

.Events(ev=>ev.DataBound("dataBound"))

<script>
    function dataBound(e) {
        var grid = this;

        grid.tbody.find(".progress").each(function (e) {
            var row = $(this).closest("tr");
            var model = grid.dataItem(row); // get the current data item values

            $(this).kendoProgressBar({ // configure and initialize the widget
                max: 1000,
                value: model.Freight
            })
        });
    }
</script>

This approach has been covered in further details in the following Knowledge Base article:

https://docs.telerik.com/kendo-ui/knowledge-base/add-a-progressbar-in-a-grid-cell

Let me know if you encounter any issues with implementing the aforementioned suggestion.


Kind regards,
Tsvetomir
Progress Telerik

[Ken]

Thanks Tsvetomir - that worked.

[Ken]

I have the progressbar displaying in my grid, now my problem is setting the width of the progressbar.  I have tried adjusting the width property but nothing seems to work. Attached is a screenshot of how it is displaying

        @(Html.Kendo().Grid<ITFactory.Models.ViewModels.ProductViewModels.FeatureGrid>()
                                                    .Name("FeatureList")
                                                    .DataSource(dataSource => dataSource
                                                        .Ajax()
                                                        .PageSize(10)
                                                        .Read(read => read
                                                            .Action("GetFeatureList", "Products")
                                                            .Data("FeatureListFilter")
                                                            )
                                                    )
                                                    .Selectable(selectable => selectable
                                                        .Mode(GridSelectionMode.Single)
                                                        .Type(GridSelectionType.Row))
                                                    .Columns(columns =>
                                                    {
                                                        columns.Bound(c => c.FeatureName).Filterable(ftb => ftb.Multi(true).Search(true));
                                                        columns.Bound(c => c.Complexity).Filterable(ftb => ftb.Multi(true).Search(true));
                                                        columns.Bound(c => c.ActualStartDate);
                                                        columns.Bound(c => c.CompletedCardCount);
                                                        columns.Bound(c => c.EstimatedCardCount);
                                                        columns.Bound(c => c.PercentCompletion).Width(100).ClientTemplate("<div id='progressbar'><div class='progress'></div></div>");
                                                    })
                                                    .Events(events => events
                                                        .Change("onGridSelection")
                                                        .DataBound("dataBound")
                                                    )
                                                    .ToolBar(toolbar =>
                                                    {
                                                        toolbar.ClientTemplateId("GridToolbarTemplate");
                                                    })
                                                    .Sortable()
                                                    .Groupable()
                                                    .Filterable()
                                                    .Resizable(resize => resize.Columns(true))
                                                    .Pageable(pageable => pageable
                                                        .Refresh(true))
                                                    .HtmlAttributes(new { style = "width: 100%" })
        )

<style>

    #progressbar {
        width: auto;
        display: block;
    }
</style>

<script type="text/javascript">

    $(function () {
        $("#progressbar").kendoProgressBar();
    });

    function dataBound(e) {
        var grid = this;

        grid.tbody.find(".progress").each(function (e) {
            var row = $(this).closest("tr");
            var model = grid.dataItem(row); // get the current data item values

            $(this).kendoProgressBar({ // configure and initialize the widget
                max: 100,
                value: model.PercentCompletion
            })
        });
    }

 

 

[Tsvetomir]

Hi Ken,

To fit the Progressbar use CSS similar to:

<style>
    .progress{
        width: 100%;
    }
</style>

Furthermore, nesting the Kendo UI ProgressBar inside another HTML div element is not necessary.

Also, In the provided code, you are adding a Div with an ID in the ClientTemplate. By doing this, an element with this ID will be added for every row. This will result in many HTML elements with the same ID, and this is not a good practice. 

Please, give the above a try, and let me know if it works for you.


Kind regards,
Tsvetomir
Progress Telerik