6/26/2017 - 3:12 PM

Create and populate a grid using KTable

Create and populate a grid using KTable

// the properties that we need to define 
var tableData = ko.observable();
var ApiVendors = ko.observableArray();

// expose the properties and methods publicly using the revealing moduel pattern 
var vm = {
    ApiVendors: ApiVendors,
    tableData: tableData,
    populateModel: populateModel

// method that hydrates the model used to populate the date on the KTable
function populateModel(data) {
        tableView: $("table#vendorTable"),
        idKey: "VendorId",
        source: ApiVendors(),
        selectable: true
<!--this allows us to pass a list of objects to the view to populate KTable-->
@model IEnumerable<MercuryUserWeb.Core.Models.Vendor>

<!--have to imports these files-->

<script type="text/javascript">

<!--this is the table that we are populating with data-->
<div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <table id="vendorTable" class="results selectClick">
                    <th>Vendor Name</th>
                    <th>Date DOS Signed</th>
                    <th>Test Details Provided</th>
                    <th>Complete Date</th>
                    <th>Inactive Date</th>
                <!-- ko foreach: tableData() -->
                <tr data-bind="click: $root.getVendor" data-toggle="modal" data-target="#apiVendorModal">
                    <td data-bind="text: VendorName"></td>
                    <td data-bind="text: SendInvite"></td>
                    <td data-bind="text: Seamless"></td>
                    <td data-bind="text: moment(DateDosSigned).format('MM/DD/YYYY')"></td>
                    <td data-bind="text: DateTestBegin == null ? null : moment(DateTestBegin).format('MM/DD/YYYY')"></td>
                    <td data-bind="text: ActiveDate == null ? null : moment(ActiveDate).format('MM/DD/YYYY')"></td>
                    <td data-bind="text: InactiveDate == null ? null : moment(InactiveDate).format('MM/DD/YYYY')"></td>
                    <td data-bind="text: CertificateRequirements"></td>
                <!-- /ko -->
        <!-- ko ifnot: tableData().present -->No data found<!-- /ko -->