Kendo UI Template refresh
<p>I set up a hierarchical grid with Kendo UI, and I need a way to sort by names.</p>

<p>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.</p>

<p>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.</p>

<p>The template</p>

<pre><code>&lt;script type="text/x-kendo-template" id="client-report-detail-template"&gt;
    # 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 &gt; 0 &amp;&amp; sortBy == client.administration_name[0]) { #
            &lt;div class="client-report-detail-container"&gt;
                &lt;div class="client-report-detail-pane"&gt;#= client.administration_name #&lt;/p&gt;&lt;/div&gt;
                &lt;div class="client-report-detail-pane"&gt;#= client.is_new #&lt;/p&gt;&lt;/div&gt;
                &lt;div class="client-report-detail-pane"&gt;#= active #&lt;/p&gt;&lt;/div&gt;
                &lt;div class="client-report-detail-pane"&gt;#= inactive #&lt;/p&gt;&lt;/div&gt;
            &lt;/div&gt;
        # } #

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

<p>The buttons (using Laravel's Blade)</p>

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

<p>What I got so far that happens when you click on one of the buttons</p>

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

    $("#client-report-grid-container").data("kendoGrid").refresh();
});
</code></pre>

<p>The grid setup and detail init</p>

<pre><code>$("#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;
    });
};
</code></pre>

<p>Anyone know how to solve this issue?</p>

<p><a href="https://i.stack.imgur.com/1pKqx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1pKqx.png" alt="Don&#39;t judge on my Paint skills :)"></a></p>