CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-gridkendo-template
Kibo
Kibo

Reputation: 28

Kendo UI Template refresh

I set up a hierarchical grid with Kendo UI, and I need a way to sort by names.

I have buttons of the alphabet set up to filter names where the first letter equals the letter of the button you clicked, but it won't filter it correctly.

It loads fine, with all the data available. When I click a letter, nothing changes in the first row you expand, and the filter starts working on the rows you expand after the first one, even though the variable gets set. See image at the bottom for an illustration of the problem.

The template

<script type="text/x-kendo-template" id="client-report-detail-template">
    # var active, inactive; $.each(data.clients, function(key, client) { #

        #if(client.status == 20) { active = 1; } else { active = 0; } #
        #if(client.status != 20) { inactive = 1; } else { inactive = 0 } #

        #if(sortBy.length > 0 && sortBy == client.administration_name[0]) { #
            <div class="client-report-detail-container">
                <div class="client-report-detail-pane">#= client.administration_name #</p></div>
                <div class="client-report-detail-pane">#= client.is_new #</p></div>
                <div class="client-report-detail-pane">#= active #</p></div>
                <div class="client-report-detail-pane">#= inactive #</p></div>
            </div>
        # } #

        #if(sortBy.length == 0) { #
            <div class="client-report-detail-container">
                <div class="client-report-detail-pane">#= client.administration_name #</p></div>
                <div class="client-report-detail-pane">#= client.is_new #</p></div>
                <div class="client-report-detail-pane">#= active #</p></div>
                <div class="client-report-detail-pane">#= inactive #</p></div>
            </div>
        # } #
    # }); #
</script>

The buttons (using Laravel's Blade)

@foreach(range('A', 'Z') as $letter)
    <button data-type="name" data-value="{{ $letter }}" class="k-button bizme-button-round filter-text fcl">{{ $letter }}</button>
@endforeach

What I got so far that happens when you click on one of the buttons

$(".fcl").on('click tap', function() {
    sortByLetter = $(this).data().value;

    $("#client-report-grid-container").data("kendoGrid").refresh();
});

The grid setup and detail init

$("#client-report-grid-container").kendoGrid({
    dataSource: {
        data: gridData,
        pageSize: 15
    },
    detailTemplate: kendo.template($("#client-report-detail-template").html()),
    detailInit: detailInit,
    columns: [
        {
            field: "date",
            title: "{{ trans('form.month') }}"
        },
        {
            field: "new"
        },
        {
            field: "active"
        },
        {
            field: "inactive"
        }
    ]
});

function detailInit(){
    $.each(this.dataSource.data(), function(key, data) {
        data.sortBy = sortByLetter;
    });
};

Anyone know how to solve this issue?

Don't judge on my Paint skills :)

Upvotes: 1

Views: 4247

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

What happens is that the detailTemplate runs before detailInit, the detail is rendered before the event. So in the template the sortBy is not set yet. Then the event runs and sets it. That is why it works in the second time. To check that, add a console.log("detailInit") in the first row inside the detailInit event and a # console.log("template"); # inside the template and check the console.

My suggestion to fix that is to set the sort values inside the grid's dataBound event instead of the detailInit event:

dataBound: function()
{
    $.each(this.dataSource.data(), function(key, data) {
        data.sortBy = sortByLetter;
    });
}

Just like that. dataBound is called anytime grid's refresh() method runs, so the sortBy values are set before the detail is rendered, thus the template can read the right sortBy values.

Working demo.

Upvotes: 2

Related Questions