Filters are not working in row-template with merged cell

[Neeraj]

I am working on Kendo MVVM Grid with row-template. i have applied merged cells (rowspan) inside the row-template.Everything is working fine but when i applied filters on column then that time Grid is not showing any result.

i have tried Filtering without merged cells, its working fine

 

<div data-role="grid"

             id="ProessedReconciliationGrid"

             style="height:250px;"

             data-toolbar="[{'template': kendo.template($('\\#ProessedReconciliationGridTitle').html())}]"

             data-animation="false"

             data-filterable="true"

             data-scrollable="true"

             data-resizable="true"

             data-bind="source: ProessedReconciliationData,visible:isProcessedDivVisible"

             data-columns='[

                     { "field": "SupplierInvoiceReconciliationId", hidden:"true"},

                     { "field": "SI_DocumentNumber", "title": "Doc. No.",width: "80px",editable: function () { return false; }},

                     { "field": "DisplaySI_TransactionDate", "title":"Doc. Dt.","width":"100px",editable: function () { return false; }},

                     { "field": "SI_BookingReference","title":"Booking Ref.",editable: function () { return false; }},

                     { "field": "SI_PassengerName", "title": "Passenger",editable: function () { return false; }},

                     { "field": "SI_Amount", "title": "Amount",editable: function () { return false; },format:"{0:n2}",attributes:{style:"text-align:right;"}},

                     { "field": "SI_Amount", "title": "Amount Payable",editable: function () { return false; },format:"{0:n2}",attributes:{style:"text-align:right;"}},

                     { "field": "DOC_DocumentNo", "title": "Doc. No.",width: "80px",editable: function () { return false; }},

                     { "field": "DisplayDOC_DocumentDate", "title":"Doc. Dt.","width":"100px",editable: function () { return false; }},

                     { "field": "DOC_BookingReference","title":"Booking Ref.",editable: function () { return false; }},

                     { "field": "DOC_PassengerName", "title": "Passenger",editable: function () { return false; }},

                     { "field": "DOC_Total", "title": "Amount",editable: function () { return false; },format:"{0:n2}",attributes:{style:"text-align:right;"}},

                     { "field": "DOC_Total", "title": "Amount Payable",editable: function () { return false; },format:"{0:n2}",attributes:{style:"text-align:right;"}},

                     { "field": "DOC_DocumentID", "title": "Int. ID",width: "125px",editable: function () { return false; }},

                     { "field": "MatchDescription", "title": "Match Criteria",editable: function () { return false; }},

                     { "field": "MatchDifference", "title": "Diff",editable: function () { return false; },format:"{0:n2}",attributes:{style:"text-align:right;"}},

                     { "field": "Payable", "title": "Payable",editable: function () { return false; },format:"{0:n2}",attributes:{style:"text-align:right;"}},

                     { "field": "Action", "title": "Action",editable: function () { return false; }

<script id="ProessedRowTemplate" type="text/x-kendo-template" class="KendoExtTemplate">
    <table class="table">
        #if(data != null){#
        #if(data.length == 1 ){#
        <tr>

            <td>#=data[0].SI_DocumentNumber#</td>
            <td>#=data[0].DisplaySI_TransactionDate#</td>
            <td>#=data[0].SI_BookingReference#</td>
            <td>#=data[0].SI_PassengerName#</td>
            <td style="text-align:right;">#=kendo.toString(data[0].SI_Amount,'n2')  #</td>
            <td style="text-align:right;">#=kendo.toString(data[0].SI_Total,'n2')#</td>
            <td>#=data[0].DOC_DocumentNo#</td>
            <td>#=data[0].DisplayDOC_DocumentDate#</td>
            <td>#=data[0].DOC_BookingReference#</td>
            <td>#=data[0].DOC_PassengerName#</td>
            <td style="text-align:right;">#=kendo.toString(data[0].DOC_Total,'n2')#</td>
            <td style="text-align:right;">#=kendo.toString(data[0].DOC_Total,'n2')#</td>
            <td><a href="../Document/GetDossierDocument/#: data[0].DOC_DocumentID #" target="_blank" title="#: data[0].DOC_DocumentID #" style="white-space: nowrap;">#: data[0].DOC_DocumentID #</a></td>
            <td>#=data[0].MatchDescription#</td>
            <td style="text-align:right;">#=kendo.toString(data[0].MatchDifference,'n2')#</td>
            <td style="text-align:right;">#=kendo.toString(data[0].Payable,'n2')#</td>
            <td><i class="fas fa-unlink text-danger" onclick="DeleteProcessedRow('#=data[0].SupplierInvoiceReconciliationId #')" title="Break/Remove" aria-hidden="true"></i></td>
        </tr>
        #}else {#
        #for(var x=0; x < data.length; x++){#
        <tr>
            # var rowspanVal = data.length #
            <td>#=data[x].SI_DocumentNumber#</td>
            <td>#=data[x].DisplaySI_TransactionDate#</td>
            <td>#=data[x].SI_BookingReference#</td>
            <td>#=data[x].SI_PassengerName#</td>
            <td style="text-align:right;">#=kendo.toString(data[x].SI_Amount,'n2')#</td>
            <td style="text-align:right;">#=kendo.toString(data[x].SI_Total,'n2')#</td>
            <td>#=data[x].DOC_DocumentNo#</td>
            <td>#=data[x].DisplayDOC_DocumentDate#</td>
            <td>#=data[x].DOC_BookingReference#</td>
            <td>#=data[x].DOC_PassengerName#</td>
            <td style="text-align:right;">#=kendo.toString(data[x].DOC_Total,'n2')#</td>
            <td style="text-align:right;">#=kendo.toString(data[x].DOC_Total,'n2')#</td>
            <td><a href="../Document/GetDossierDocument/#: data[x].DOC_DocumentID #" target="_blank" title="#: data[x].DOC_DocumentID #" style="white-space: nowrap;">#: data[x].DOC_DocumentID #</a></td>

            #if(x == 0){#
            <td rowspan="#: rowspanVal #">#=data[x].MatchDescription#</td>
            <td rowspan="#: rowspanVal #" style="text-align:right;">#=kendo.toString(getMatchDifference(data),'n2')#</td>
            <td rowspan="#: rowspanVal #" style="text-align:right;">#=kendo.toString(getPayableAmount(data),'n2')#</td>
            <td rowspan="#: rowspanVal #"><i class="fas fa-unlink text-danger" onclick="DeleteProcessedRow('#=data[0].SupplierInvoiceReconciliationId #')" title="Break/Remove" aria-hidden="true"></i></td>
            #}#
        </tr>
        #}#
        #}#

        #}#
    </table>

</script>

},

             ]'

             data-row-template="ProessedRowTemplate" data-groupable="false" data-selectable="row"

             data-editable="false">

        </div>

 

[Eyup]

Hi Neeraj,

 

Do you see any script errors when you open the Chrome browser debugger with F12? Could you modify the following live sample to demonstrate the problem and send the new URL back to us?
https://dojo.telerik.com/ocAyukuG

 

Regards,
Eyup
Progress Telerik