Search when cells rendering with textboxes

Search when cells rendering with textboxes

DevBrokercoreDevBrokercore Posts: 3Questions: 1Answers: 0

Hi,

I'm using render to display the data in a textbox. The problem is when I use the built-in search feature it doesn't find the data. I know that it only works when I render the data with a visible html element like a label. I'm using knockout and I use this as an example: https://datatables.net/dev/knockout/

Here is the DataTable references I use:

<link rel="stylesheet" href="https://nightly.datatables.net/css/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.2.7/css/rowReorder.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.24/sorting/custom-data-source/dom-text.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.24/sorting/custom-data-source/dom-text-numeric.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.7/js/dataTables.rowReorder.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap4.min.js"></script>

HTML
<table id="coverages-datatable" class="table dt-responsive w-100 table-bordered sticky-table-header" data-bind="dataTableCoverages: { Data: coverages(), ModelName: 'CoveragesDataTable' }"></table>

JS:

var policy = function(){
var self = this;

self.coverages = ko.observableArray();

self.coverages.push({
    coverage_description: "Coverage 1"
});

self.coverages.push({
    coverage_description: "Coverage 2"
});

self.coverages.push({
    coverage_description: "Coverage 3"
});

}

ko.bindingHandlers.dataTableCoverages = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {

    let value = valueAccessor();

    let dt = $(element).DataTable({
        processing: true,
        deferRender: true,
        rowId: "array_id",
        order: [],
        info: false,
        paging: false,
        columns: [
            {
                data: "coverage_description()",
                title: "Coverage",
                render: function (data, type, row) {
                    return '<div class="input-group ko-element">' +
                        '<input class="form-control coverage-autocomplete" type="search" placeholder="Type in a coverage" autocomplete="on" data-bind="value: coverage_description"  />' +
                        '</div>';
                },
                orderDataType: "dom-text",
                type: "string",
            },
        ],
        createdRow: function (row, data, dataIndex) {

            let $koElements = $(row).find(".ko-element");

            $koElements.each(function (index, element) {
                ko.applyBindings(data, element);
            });
        }
    });

    bindingContext.$root.CoveragesDataTable = {
        add: function (addedItem) {
            dt.row.add(addedItem).draw();
        },
        delete: function (deletedItem) {
            var rowIdx = -1;
            // Find the index of the deletedItem. 
            ko.utils.arrayForEach(dt.columns(0).data()[0], function (item, index) {
                if (item.array_id() == deletedItem.array_id()) {
                    rowIdx = index;
                }
            });

            if (rowIdx != -1) {
                dt.row(rowIdx).remove().draw();
            } 
        }
    };

    setTimeout(function () {
        ko.utils.arrayForEach(value.Data, function (dataItem) {
            dt.row.add(dataItem).draw();
        });
    }, 800);

}

}

Answers

  • kthorngrenkthorngren Posts: 12,788Questions: 25Answers: 3,009

    You will need to use Orthogonal data. This example shows how to handle sorting with inputs. I have tis example that shows how to use Orthogonal data to set the filter to the input's value. You need to use cell().invalidate() for Datatables to update its data cache after the input change.
    http://live.datatables.net/zukacehi/71/edit

    Kevin

  • DevBrokercoreDevBrokercore Posts: 3Questions: 1Answers: 0

    Thank you this work!

  • DevBrokercoreDevBrokercore Posts: 3Questions: 1Answers: 0

    Hi Kevin,

    When I use Invalidate it clears out the textbox. Could this be because the input is bound by knockout?

  • kthorngrenkthorngren Posts: 12,788Questions: 25Answers: 3,009

    I've never used knockout so not sure. Maybe someone else knows. Can you update the test case to show the issue?

    Kevin

Sign In or Register to comment.