1

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 :)

3
  • Can you provide a demo in dojo.telerik.com for us ? Jan 7, 2016 at 10:30
  • Working on it, will post the link when I got the demo done.
    – Kibo
    Jan 7, 2016 at 10:54
  • demo link.
    – Kibo
    Jan 7, 2016 at 11:04

1 Answer 1

2

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.

1
  • @Kibo great! nice to help. Kendo has this lacks of events, most of its events run after some action so you have pay attention on when they run. Jan 7, 2016 at 15:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.