Как добавить ссылку в сетку нокаута с помощью MVC

Question

Я новичок в нокауте и MVC. Я хотел добавить кнопку ссылки (удалить), которая удалит запись, отображаемую в моей сетке нокаута. Я действительно не знаю, как это достичь. У меня есть следующий код, который отображает запись с использованием сетки KO. Теперь я хочу, чтобы добавить кнопку ссылки в сетке, чтобы удалить запись

CONTROLLER:

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

ВИД:

@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. 
    } 
}); 
} 

Приведенный выше код работает отлично при отображении записи в сетке KO. Тем не менее, я не знаю, как добавить кнопку удаления в отображаемую сетку KO сейчас. Я попытался найти его, но не смог найти ничего полезного, чтобы получить результат. Пожалуйста, помогите ...

Answer 1

Использование CellTemplate в Ко grid.plese см ниже код

<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>