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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

More Customizable Edit Dialogue?

Thread ID:

Created:

Updated:

Platform:

Replies:

128090 Jan 2,2017 05:58 AM UTC Aug 18,2017 01:17 PM UTC ASP.NET MVC 7
loading
Tags: Grid
Cody S
Asked On January 2, 2017 05:58 AM UTC

In the grid, you can do dialogue template for adding/editing. Is there a built-in way to instead of using a template, to override the add/edit buttons click actions and display something like a bootstrap modal, etc. Something that's not a template, basically.

Just curious if there's something built in to the grid that I'm missing, or if syncfusion has a recommended way to have a truly customizable dialogue without having to use templates.

Ragavee U S [Syncfusion]
Replied On January 3, 2017 11:35 AM UTC

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:  

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

Template for Model content:  

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

Displaying modal on add/edit action:  

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

Regards, 
Ragavee U S. 


Cody S
Replied On January 16, 2017 06:00 AM UTC

Thanks for that, that's pretty close to what I'm looking for! Is there a way to do it without using templates, and instead have the inputs directly within the modal, and load the row data into them?

Prasanna Kumar Viswanathan [Syncfusion]
Replied On January 18, 2017 02:04 PM UTC

Hi Cody, 

In this we can display the bootstrap modal instead of the grid default edit templates without using templates. To display the selected record values in the input box of bootstrap modal, we need to use the templates in the sample.  
 
So, we suggest you to below the below suggestion in your sample.  

Regards, 
Prasanna Kumar N.S.V 


Cody S
Replied On January 18, 2017 02:59 PM UTC

So you're saying I HAVE to use a js template? Why would that be the case instead of being able to have a custom edit dialogue without templates like Kendo UI tools can do?

If I have to use a template, then how do I use inputs like ej dropdown, etc within the template?

Ragavee U S [Syncfusion]
Replied On January 19, 2017 12:46 PM UTC

Hi Cody, 

The ejGrid rendering is based on js-render templates. So, if you would like to bind the selected record values to the form elements within the bootstrap model, we need to use the js-render templates. 

Also, if you would like to render Syncfusion controls within the bootstrap model, then we can achieve it in the ActionComplete event of the Grid as explained in the below documentation. 


Regards, 
Ragavee U S. 


Dalir Bajlany
Replied On August 17, 2017 11:06 AM UTC

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:  

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

Template for Model content:  

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

Displaying modal on add/edit action:  

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

Regards, 
Ragavee U S. 


This sample doesn't support form validation!

i need validation on this sample from my model data annotation


Thavasianand Sankaranarayanan [Syncfusion]
Replied On August 18, 2017 01:17 PM UTC

Hi Dalir, 

The mention query has already raised in the support incident under your account. So, please follow the incident for further updates. 


Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;