We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
. . .
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="SaveAction()">Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div> |
|
<script type="text/template" id="template">
<form id="GridEditForm" role="form">
<div class="form-group">
<label for="OrderID">Order ID:</label>
<input type="text" name="OrderID" class="form-control" id="OrderID" disabled="disabled" value="{{:OrderID}}">
</div>
. . .
</form>
</script> |
|
<script type="text/javascript">
var action;
var temp = $.templates(template);
$(function () {
$.fn.serializeAllArray = function () {
var data = $('#GridEditForm').serializeArray().reduce(function(obj, item) {
obj[item.name] = item.value;
return obj;
}, {});//returns the form data
$(':disabled[name]', this).each(function () {
data[this.name] = this.value;//push the disabled elements values also to the JSON array
});
return data;
}
})
function onBegin(args){
if (args.requestType == "add" || args.requestType == "beginedit") {
action = args.requestType;
var datarow = args.requestType == "add" ? args.data : args.rowData;//get the row data
args.cancel = true;//prevent default action
$(".modal-body").html(temp.render(datarow));//render the model content
$('#myModal').modal('show');//show the modal
}
}
function SaveAction(){
var rowData = $("#GridEditForm").serializeAllArray();//holds the form data
var gridObj = $("#Grid1").ejGrid("instance");
if (action == "add") {
gridObj.addRecord(rowData, true);//add the record
}
else if (action == "beginedit") {
gridObj.updateRecord("OrderID", rowData);//update the record
$('#myModal').modal('hide');//hide the modal dialog
}
}
</script> |
Hi Cody,
Thanks for contacting Syncfusion support.
We have created a sample to display bootstrap modal instead of the grid default edit templates, which can be downloaded from the below location.
In the above sample, we have prevented the default add/edit action and have shown the bootstrap modal pop up using the actionBegin event of the Grid. Similarly, we have handled the save and add action of the grid using the addRecord and updateRecord methods of the Grid.
Bootstrap Modal Definition:
Template for Model content:
Displaying modal on add/edit action:
Regards,Ragavee U S.
This sample doesn't support form validation!
i need validation on this sample from my model data annotation
