Custom toolbar with count of items

[Tim]

I have a grid with a Create button and Search field in the toolbar. I would like to add a count of the number of items in the grid. I am aware that it's possible to add paging to display the count and then disable it with:

PreviousNext(false).Numeric(false)

However, that results in wasted space because there's a row for the pager and count, and another row with the Create button and Search field.

Is it possible to add the item count to the custom toolbar so that everything is in in one row?

Thanks

[Mihaela]

Hello Tim,

To achieve the desired result, I would suggest using a custom button within the Grids' toolbar and modifying its label with jQuery when the data is available.

For example:

• Create a custom tool in the Toolbar configuration:

    .ToolBar(t => 
    {
        t.Create();
        t.Search();
        t.Custom().Name("totalRecords").HtmlAttributes(new { @class = "total-records" });
    })

• Handle the RequestEnd event of the Grid's DataSource, get the total number of records, and change the custom tool's label with jQuery:

@(Html.Kendo().Grid<ProductViewModelGridPopUp>()
    .Name("grid")
    ...
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.RequestEnd("onReqEnd"))
        ...
    )
)

<script type="text/javascript">
    function onReqEnd(e) {
        $(".total-records .k-button-text").text(e.response.Total + " records");
    }
</script>

• Adjust the custom button appearance with CSS to remove the border and background color:

<style>
    .k-grid-toolbar .total-records, .k-grid-toolbar .total-records:hover{
        border: unset;
        background-color: inherit;
    }
</style>

Here is a REPL sample for your reference: 

https://netcorerepl.telerik.com/QnbYPuFU10BhAU2T47

I hope that helps.

Regards,
Mihaela
Progress Telerik

[Tim]

Thank you!