Hi Lalitha,
For edit you can call in html like:
<button data-bind="click: editMA, visible: userLogin()==true && $root.selectedCompany().key =='-1' && selectedItemEditable()==true" class=" btn btn-primary" style="float:left; margin-left:5px;">Edit TA</button>
JS:
self.editMA = function () {
if (taId > 0) {
$.ajax({
url: '/PMTechnicalAccount/GetMAValueByID?pob=' + taId,
type: "GET",
dataType: "JSON",
success: function (result) {
var value = result.pobSubs;
if (result.funcClassList != "") {
self.checkedRig(result.funcClassList);
}
if (value != "") {
self.PMFunction().Id(value[0].ID);
self.PMFunction().Function_Id(value[0].Function_Id);
self.PMFunction().Function_Length(value[0].Function_Length);
self.PMFunction().Function_Parent(value[0].Function_Parent);
self.PMFunction().Function_OnLower(value[0].Function_OnLower);
self.PMFunction().Function_Name(value[0].Function_Name);
self.PMFunction().Function_ThisLevelID(value[0].Function_ThisLevelID);
self.PMFunction().IsActive(value[0].IsActive);
$("#dialog-MAEdit").dialog("open");
}
}
});
}
else {
alert("Select Technical Account First");
}
}
Dialog declaration in JS:
$("#dialog-MAEdit").dialog({
open: function (event, ui) {
$(this).parent().addClass('ui-dialog-3000');
},
autoOpen: false,
height: 350,
width: 700,
modal: true,
dialogClass: "no-titlebar-round"
}).css({ "font-family": "'open sans', 'Helvetica Neue', 'Helvetica', Arial, sans-serif", "font-size": "12px" });
Partial View for Edit:
<div id="dialog-MAEdit" title="Maintenable Area" style="overflow-x: hidden;">
<div data-bind="with: ViewModelMaintenableArea">
<div class="col-md-12">
<div class="ibox-title">
<h5>Edit Technical Account</h5>
</div>
<div class="ibox-content" style="padding-top:0px; position:relative;">
<div class="row">
<div class="wellpob" style="min-height:208px; background-color:#f3f3f4; padding:0px; padding-bottom:10px !important; margin-bottom:3px;">
<div class="col-lg-9" style="background-color: #f3f3f4; min-height:200px; padding:14px; float:left;">
<div class="form-group">
@Html.Label("Account ID", new { @class = "control-label col-md-3" })
<div class="col-md-9 m-b-xs" style="min-height:1px; padding-left:3px; padding-right:3px; position:relative;">
<input class="form-control" readonly="readonly" type="text" data-bind="value:PMFunction().Function_Id" />
</div>
</div>
<div class="form-group">
@Html.Label("Account Name", new { @class = "control-label col-md-3", @style = "align:right;" })
<div class="col-md-9 m-b-xs" style="min-height:1px; padding-left:3px; padding-right:3px; position:relative;">
<input class="form-control" type="text" data-bind="value:PMFunction().Function_Name" />
</div>
</div>
<div class="form-group">
@Html.Label("Componenet Sub ID", new { @class = "control-label col-md-3" })
<div class="col-md-9 m-b-xs" style="min-height:1px; padding-left:3px; padding-right:3px; position:relative;">
<input class="form-control" type="text" readonly="readonly" data-bind="value:PMFunction().Function_Parent" />
</div>
</div>
<div class="form-group">
<div class="col-md-3"></div>
<div class="col-md-9">
<input type="checkbox" data-bind="checked: PMFunction().IsActive" />
@Html.Label("IsActive", new { @class = "control-label" })
</div>
</div>
</div>
<div class="col-lg-3" style="background-color: #f3f3f4; border-left: thick solid white; min-height:200px; padding:14px; float:right;">
<div class="col-md-10">
@Html.Label("Select Rig", new { @class = "control-label" })
<ul data-bind="foreach: Rig">
<li>
<input type="checkbox" data-bind="checked: $parent.checkedRig, value: key">
<span data-bind="text: value"> </span>
</li>
</ul>
</div>
</div>
</div>
</div>
@*<div class="row">
<div class="wellpob" style="min-height:200px; background-color:#f3f3f4; padding:0px; padding-bottom:10px !important; margin-bottom:3px;">
<div class="col-lg-12" style="background-color: #f3f3f4; min-height:180px; padding:14px; float:left;">
<div class="form-group">
@Html.Label("Account ID", new { @class = "control-label col-md-3" })
<div class="col-md-7 m-b-xs" style="min-height:1px; padding-left:3px; padding-right:3px; position:relative;">
<input class="form-control" type="text" data-bind="value:PMFunction().Function_Id" />
</div>
</div>
<div class="form-group">
@Html.Label("Account Name", new { @class = "control-label col-md-3", @style = "align:right;" })
<div class="col-md-7 m-b-xs" style="min-height:1px; padding-left:3px; padding-right:3px; position:relative;">
<input class="form-control" type="text" data-bind="value:PMFunction().Function_Name" />
</div>
</div>
<div class="form-group">
@Html.Label("Parent ID", new { @class = "control-label col-md-3" })
<div class="col-md-7 m-b-xs" style="min-height:1px; padding-left:3px; padding-right:3px; position:relative;">
<input class="form-control" type="text" readonly="readonly" data-bind="value:PMFunction().Function_Parent" />
</div>
</div>
<div class="form-group">
@Html.Label("Location", new { @class = "control-label col-md-3" })
<div class="col-md-7 m-b-xs" style="min-height:1px; padding-left:3px; padding-right:3px; position:relative;">
<input class="form-control" type="text" readonly="readonly" data-bind="value:PMFunction().FuncClass_id" />
</div>
</div>
<div class="form-group">
<div class="col-md-3"></div>
<div class="col-md-7">
<input type="checkbox" data-bind="checked: PMFunction().IsActive" />
@Html.Label("IsActive", new { @class = "control-label" })
</div>
</div>
</div>
</div>
</div>*@
<div class="form-group">
<div class="col-md-offset-2 col-md-8" align="center">
<button class="btn btn-primary" data-bind="click: submitMAEdit" onclick="return false;">Update</button>
<button class="btn btn-white" data-bind="click: cancelMAEdit" onclick="return false;">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
Just modify according to your requirement. If you need help for delete also let me know