How to add a link button in knockout grid using MVC

Question

I am new to knockout and MVC. I wanted to add a link button(delete) which will delete the record that is displayed in my knockout grid. I really dont have any idea how to achieve this. I have the following code that displays the record using the KO grid. Now I want to add a link button in the grid to delete the record

CONTROLLER:

public JsonResult GetResult()
    {
        GetResultRequest req = new GetResultRequest() { AcctID=57345, PartyType=2 };
        var getResultInfo = WSHelper.WsService.GetResults(req);
        return Json(getResultInfo.Signers, JsonRequestBehavior.AllowGet);
    }

VIEW:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/SafeHarborBundle")
<script src="~/Scripts/koGrid-2.1.1.js"></script>
<script type="text/javascript">
var dataViewModel = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model)));

<div id="gridSigner">
<div id="grids123" style="height: 700px; width: 650px;"
    data-bind="koGrid: {
data: gridItems, columnDefs: [{ field: 'AcctID', displayName: 'AcctID', width: '150' },
{ field: 'FName', displayName: 'First Name', width: '150' },
{ field: 'LName', displayName: 'Last Name', width: '150' },
{ field: 'AliasFName', displayName: 'Alias First Name', width: '150' },
{ field: 'SSN', displayName: 'AcctID', width: '150' }],
autogenerateColumns: false,
isMultiSelect: false,
showFilter: true,
showColumnMenu: true,
enablePaging: false,
displaySelectionCheckbox: false,
enableColumnResize: false,
multiSelect: false

}">

JQUERY FILE:

$(document).ready(function () {
loadApplication(dataViewModel);

ko.applyBindings(Gridviews, document.getElementById('gridSigner'));
});

function loadApplication(initialData) {

self = this;
self.ViewModel = initialData;
self.BranchOptions = ko.observableArray([]);
self.AcctTypeOptions = ko.observableArray([]);
self.OriginationOptions = ko.observableArray([]);    
self.Message = ko.observable();
SearchSignerData();
ko.applyBindings(self, document.getElementById('main-search'));

}

SearchSignerData = function () {

$.ajax({
    type: "Get",
    url: "/SafeHarborApp/GetResult",
    contentType: 'application/json',
    async: true,
    cache: false,
    beforeSend: function () {
    },
    success: function (result) {
        alert(result[0].AcctID.toString());
        if (result.length != 0) {
            $.each(result, function (i, item) {
                Gridviews.gridItems.push(item);
            });

        }
        else {

            Gridviews.gridItems.removeAll();
            alert("No Records found");
        }
    },
    complete: function () {

    },
    error: function (xhr, textStatus, errorThrown) {
        //alert(jqXHR.responseText);
        var title = xhr.responseText.split("<title>")[1].split("</title>")[0];
        alert(title);
        // Handle error.
    }
});
}

The above code works fine in displaying the record in the KO grid. However, I dont know how to add a delete button in the displayed KO grid now. I tried searching for it but was not able to find anything useful that will get me the result. Please help...

Answer 1

Use CellTemplate in ko grid.plese see code below

    <script type="text/javascript">
    self.NoOfAccountColumn = '<a data-bind="value: $parent.entity"     onclick="Popup(this.value)">No Of Account</a>';
    self.Delete = '<a data-bind="value: $parent.entity"     onclick="deleteRow(this.value)">Delete</a>';
    function Popup(rowItem) {
        alert(rowItem.AffinityNum + ' ' + rowItem.ClientName + ' : NoOfAccount Clicked');
    }
    function deleteRow(rowItem) {
        alert(rowItem.AffinityNum + ' ' + rowItem.ClientName + ' : Delete Clicked');
    }
    function isDoubleClick(oldValue, currentValue) {
        var responseTime = 400;
        if ((currentValue - oldValue) <= responseTime) {
            self.clickTime = currentValue;
            return true;
        }
        self.clickTime = currentValue;
        return false;
    };
    </script>
    <script src="~/Scripts/Packages/koGrid-2.1.1.js"></script>
    <div id="disp">
    <div id="grid" style="height: 200px; width: 600px"
        data-bind="koGrid: {
    data: BranchOptions,
    afterSelectionChange: function (rowItem, event) {
        if (event.type == 'click' && isDoubleClick(self.clickTime, event.timeStamp)) {
            alert(rowItem.entity.ClientName + ' : Row DoubleClick');
        }
    },
    columnDefs: [{ field: 'ClientName', displayName: 'Client Name', width: '*', },
                 { field: 'AffinityNum', displayName: 'Affinity Num', width: '*', cellTemplate: NoOfAccountColumn },
                 { field: 'AffinityID', displayName: 'Affinity ID', width: '*',     cellTemplate: Delete }],
    autogenerateColumns: false,
    isMultiSelect: false,
    showFilter: true,
    showColumnMenu: true,
    enablePaging: false,
    displaySelectionCheckbox: false,
    enableColumnResize: true,
    multiSelect: false
}">
    </div>
</div>