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.

How to pass Complete Model from DialogEditorTemplate to Controller for CRUD Operation

Thread ID:

Created:

Updated:

Platform:

Replies:

126220 Oct 1,2016 01:28 PM Feb 10,2017 01:04 AM ASP.NET Core 10
loading
Tags: Grid
Qasim Majeed
Asked On October 1, 2016 01:28 PM

Hello Syncfusion
                           I am working on CRUD operation using Syncfusion components with ASP.NET Core 1.0.0. I have a question that I have a complete HTML form that can be used by DialogEditorTemplateID("#template"). When I enter data from this form and click Ok button we have received empty model in my controller. I want to pass these all values(Model) to controller in Add and Edit case.

Note: I have Some extra Data in case of Edit and Add while in case of grid I have only 3 or 4 fields to show to the user.
my cs.html file

@{Html.EJ().Grid<Object>("FlatGrid")
              .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.data).UpdateURL("/Customers/CellEditUpdate").InsertURL("/Customers/CellEditInsert").RemoveURL("/Customers/CellEditDelete").Adaptor(AdaptorType.RemoteSaveAdaptor))
                      .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template"); })
                      .AllowPaging()
                                      .ToolbarSettings(toolbar =>
                                      {
                                          toolbar.ShowToolbar().ToolbarItems(items =>
                                          {
                                              items.AddTool(ToolBarItems.Add);
                                              items.AddTool(ToolBarItems.Edit);
                                              items.AddTool(ToolBarItems.Delete);
                                              items.AddTool(ToolBarItems.Update);
                                              items.AddTool(ToolBarItems.Cancel);
                                          });
                                      })
                                      .Columns(col =>
                                      {
                                          col.Field("Name").HeaderText("Name").Width(80).EditType(EditingType.String).Add();
                                          col.Field("CompanyLogoPictureName").HeaderText("CompanyLogoPictureName").Width(80).EditType(EditingType.String).Add();
                                          col.Field("Phone").HeaderText("Phone").TextAlign(TextAlign.Right).Width(75).EditType(EditingType.String).Add();
                                          col.Field("Email").HeaderText("Email").TextAlign(TextAlign.Right).Width(75).EditType(EditingType.String).Add();
                                      }).Render();
            }
        </div>
        <script type="text/template" id="template">
            <b>Company Details</b>
            <table cellspacing="10">
                <tr>
                    <td style="text-align: right;">
                        Name
                    </td>
                    <td style="text-align: left">
                        <input id="OrderID" name="OrderID" value="{{: Name}}"
                               style="text-align: right; width: 116px; height: 28px" />
                    </td>
                    <td style="text-align: right;">
                        Company Logo Picture Name
                    </td>
                    <td style="text-align: left">
                        <input id="CustomerID" name="CustomerID" value="{{: CompanyLogoPictureName}}"
                               style="width: 116px; height: 28px" />
                    </td>
                </tr>
                <tr>
                    <td style="text-align: right;">
                        Phone
                    </td>
                    <td style="text-align: left">
                        <input type="text" id="Freight" name="Freight" value="{{:Phone}}" style="text-align: right;" />
                    </td>

                </tr>
                <tr>
                    <td style="text-align: right;">
                        Email
                    </td>
                    <td style="text-align: left">
                        <input type="text" id="Freight" name="Freight" value="{{:Email}}" style="text-align: right;" />
                    </td>

                </tr>

               <tr>
                    <td style="text-align: right;">
                        Primary Email
                    </td>
                    <td style="text-align: left">
                        <input type="text" id="PEmail" name="PEmail" value="{{:PEmail}}" style="text-align: right;" />
                    </td>

                </tr>

             <tr>
                    <td style="text-align: right;">
                        Company Location
                    </td>
                    <td style="text-align: left">
                        <input type="text" id="location" name="location" value="{{:location}}" style="text-align: right;" />
                    </td>

                </tr>
            </table>
        </script>

my Controller class is

public ActionResult CellEditInsert(Company value)
        {
            // I get this value model always Empty
            return View();
        }



Karthick Kuppusamy [Syncfusion]
Replied On October 3, 2016 11:14 PM

Hi Qasim, 

Thanks for Contacting Syncfusion support. 

We have analyzed your requirement and we are creating the sample with Dialog Template mode with remote save adaptor. 

Please find the code example. 

 
<ej-grid id="Grid" allow-filtering="true" allow-paging="true"> 
    <e-datamanager json="(IEnumerable<object>)ViewBag.data"  
                   update-url="/Home/CellEditUpdate"  
                   insert-url="/Home/CellEditInsert"  
                   remove-url="/Home/CellEditDelete" 
                   adaptor="remoteSaveAdaptor" /> 
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="DialogTemplate" dialog-editor-template-id="#template"/> 
    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' /> 
    <e-columns> 
        <e-column header-text="Order ID" field="OrderID" is-primary-key="true" is-identity="true" visible="false" /> 
        <e-column header-text="Customer ID" field="CustomerID" /> 
        <e-column header-text="Employee ID" field="EmployeeID" /> 
        <e-column header-text="Freight" field="Freight" format="{0:C2}" /> 
    </e-columns> 
</ej-grid> 
 
 
 
 <script type="text/template" id="template"> 
        <b>Order Details</b> 
        <table cellspacing="10"> 
            <tr> 
                <td style="text-align: right;">Order ID 
                </td> 
                <td style="text-align: left"> 
                    <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable" 
                        style="text-align: right; width: 116px; height: 28px" /> 
                </td> 
                <td style="text-align: right;">Customer ID 
                </td> 
                <td style="text-align: left"> 
                    <input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext valid" 
                        style="width: 116px; height: 28px" /> 
                </td> 
            </tr> 
            <tr> 
                <td style="text-align: right;">Freight 
                </td> 
                <td style="text-align: left"> 
                    <input type="text" id="Freight" name="Freight" value="{{:Freight}}" /> 
                </td> 
                
            <tr> 
                <td style="text-align: right;">Employee ID 
                </td> 
                <td style="text-align: left"> 
                    <input id="ShipCity" name="ShipCity" value="{{: EmployeeID}}" class="e-field e-ejinputtext valid" 
                        style="width: 116px; height: 28px" /> 
                </td> 
                
            </tr> 
            
        </table> 
</script> 
 


Server side code. 

   
        public IActionResult Index() 
        { 
            BindDataSource(); 
            ViewBag.data = order; 
            return View(); 
        } 
        public ActionResult CellEditUpdate([FromBody]CRUDModel<Orders> value) 
        { 
            var ord = value.Value; 
            Orders val = order.Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 
            val.OrderID = ord.OrderID; 
            val.EmployeeID = ord.EmployeeID; 
            val.CustomerID = ord.CustomerID; 
            val.Freight = ord.Freight; 
            val.OrderDate = ord.OrderDate; 
            val.ShipCity = ord.ShipCity; 
 
            return Json(value.Value); 
        } 
        public ActionResult CellEditInsert([FromBody]CRUDModel<Orders> value) 
        { 
            value.Value.OrderID =order.LastOrDefault().OrderID + 1; 
            order.Insert(0, value.Value); 
            return Json(value); 
        } 
        public ActionResult CellEditDelete([FromBody]CRUDModel<Orders> value) 
        { 
            order.Remove(order.Where(or => or.OrderID == int.Parse(value.Key.ToString())).FirstOrDefault()); 
            return Json(value); 
        } 

For your reference we have created a sample based on your requirement and same it can be downloaded from the following location. 

Please let us know if you have any concern. 

Regards, 
K.Karthick. 


Qasim Majeed
Replied On October 5, 2016 05:45 AM

Hi Qasim, 

Thanks for Contacting Syncfusion support. 

We have analyzed your requirement and we are creating the sample with Dialog Template mode with remote save adaptor. 

Please find the code example. 

 
<ej-grid id="Grid" allow-filtering="true" allow-paging="true"> 
    <e-datamanager json="(IEnumerable<object>)ViewBag.data"  
                   update-url="/Home/CellEditUpdate"  
                   insert-url="/Home/CellEditInsert"  
                   remove-url="/Home/CellEditDelete" 
                   adaptor="remoteSaveAdaptor" /> 
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="DialogTemplate" dialog-editor-template-id="#template"/> 
    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' /> 
    <e-columns> 
        <e-column header-text="Order ID" field="OrderID" is-primary-key="true" is-identity="true" visible="false" /> 
        <e-column header-text="Customer ID" field="CustomerID" /> 
        <e-column header-text="Employee ID" field="EmployeeID" /> 
        <e-column header-text="Freight" field="Freight" format="{0:C2}" /> 
    </e-columns> 
</ej-grid> 
 
 
 
 <script type="text/template" id="template"> 
        <b>Order Details</b> 
        <table cellspacing="10"> 
            <tr> 
                <td style="text-align: right;">Order ID 
                </td> 
                <td style="text-align: left"> 
                    <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable" 
                        style="text-align: right; width: 116px; height: 28px" /> 
                </td> 
                <td style="text-align: right;">Customer ID 
                </td> 
                <td style="text-align: left"> 
                    <input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext valid" 
                        style="width: 116px; height: 28px" /> 
                </td> 
            </tr> 
            <tr> 
                <td style="text-align: right;">Freight 
                </td> 
                <td style="text-align: left"> 
                    <input type="text" id="Freight" name="Freight" value="{{:Freight}}" /> 
                </td> 
                
            <tr> 
                <td style="text-align: right;">Employee ID 
                </td> 
                <td style="text-align: left"> 
                    <input id="ShipCity" name="ShipCity" value="{{: EmployeeID}}" class="e-field e-ejinputtext valid" 
                        style="width: 116px; height: 28px" /> 
                </td> 
                
            </tr> 
            
        </table> 
</script> 
 


Server side code. 

   
        public IActionResult Index() 
        { 
            BindDataSource(); 
            ViewBag.data = order; 
            return View(); 
        } 
        public ActionResult CellEditUpdate([FromBody]CRUDModel<Orders> value) 
        { 
            var ord = value.Value; 
            Orders val = order.Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 
            val.OrderID = ord.OrderID; 
            val.EmployeeID = ord.EmployeeID; 
            val.CustomerID = ord.CustomerID; 
            val.Freight = ord.Freight; 
            val.OrderDate = ord.OrderDate; 
            val.ShipCity = ord.ShipCity; 
 
            return Json(value.Value); 
        } 
        public ActionResult CellEditInsert([FromBody]CRUDModel<Orders> value) 
        { 
            value.Value.OrderID =order.LastOrDefault().OrderID + 1; 
            order.Insert(0, value.Value); 
            return Json(value); 
        } 
        public ActionResult CellEditDelete([FromBody]CRUDModel<Orders> value) 
        { 
            order.Remove(order.Where(or => or.OrderID == int.Parse(value.Key.ToString())).FirstOrDefault()); 
            return Json(value); 
        } 

For your reference we have created a sample based on your requirement and same it can be downloaded from the following location. 

Please let us know if you have any concern. 

Regards, 
K.Karthick. 


Thanks for your response. Now I am stuck another problem that can be seen in the attached picture

Qasim Majeed
Replied On October 5, 2016 05:47 AM

Hi Qasim, 

Thanks for Contacting Syncfusion support. 

We have analyzed your requirement and we are creating the sample with Dialog Template mode with remote save adaptor. 

Please find the code example. 

 
<ej-grid id="Grid" allow-filtering="true" allow-paging="true"> 
    <e-datamanager json="(IEnumerable<object>)ViewBag.data"  
                   update-url="/Home/CellEditUpdate"  
                   insert-url="/Home/CellEditInsert"  
                   remove-url="/Home/CellEditDelete" 
                   adaptor="remoteSaveAdaptor" /> 
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="DialogTemplate" dialog-editor-template-id="#template"/> 
    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' /> 
    <e-columns> 
        <e-column header-text="Order ID" field="OrderID" is-primary-key="true" is-identity="true" visible="false" /> 
        <e-column header-text="Customer ID" field="CustomerID" /> 
        <e-column header-text="Employee ID" field="EmployeeID" /> 
        <e-column header-text="Freight" field="Freight" format="{0:C2}" /> 
    </e-columns> 
</ej-grid> 
 
 
 
 <script type="text/template" id="template"> 
        <b>Order Details</b> 
        <table cellspacing="10"> 
            <tr> 
                <td style="text-align: right;">Order ID 
                </td> 
                <td style="text-align: left"> 
                    <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable" 
                        style="text-align: right; width: 116px; height: 28px" /> 
                </td> 
                <td style="text-align: right;">Customer ID 
                </td> 
                <td style="text-align: left"> 
                    <input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext valid" 
                        style="width: 116px; height: 28px" /> 
                </td> 
            </tr> 
            <tr> 
                <td style="text-align: right;">Freight 
                </td> 
                <td style="text-align: left"> 
                    <input type="text" id="Freight" name="Freight" value="{{:Freight}}" /> 
                </td> 
                
            <tr> 
                <td style="text-align: right;">Employee ID 
                </td> 
                <td style="text-align: left"> 
                    <input id="ShipCity" name="ShipCity" value="{{: EmployeeID}}" class="e-field e-ejinputtext valid" 
                        style="width: 116px; height: 28px" /> 
                </td> 
                
            </tr> 
            
        </table> 
</script> 
 


Server side code. 

   
        public IActionResult Index() 
        { 
            BindDataSource(); 
            ViewBag.data = order; 
            return View(); 
        } 
        public ActionResult CellEditUpdate([FromBody]CRUDModel<Orders> value) 
        { 
            var ord = value.Value; 
            Orders val = order.Where(or => or.OrderID == ord.OrderID).FirstOrDefault(); 
            val.OrderID = ord.OrderID; 
            val.EmployeeID = ord.EmployeeID; 
            val.CustomerID = ord.CustomerID; 
            val.Freight = ord.Freight; 
            val.OrderDate = ord.OrderDate; 
            val.ShipCity = ord.ShipCity; 
 
            return Json(value.Value); 
        } 
        public ActionResult CellEditInsert([FromBody]CRUDModel<Orders> value) 
        { 
            value.Value.OrderID =order.LastOrDefault().OrderID + 1; 
            order.Insert(0, value.Value); 
            return Json(value); 
        } 
        public ActionResult CellEditDelete([FromBody]CRUDModel<Orders> value) 
        { 
            order.Remove(order.Where(or => or.OrderID == int.Parse(value.Key.ToString())).FirstOrDefault()); 
            return Json(value); 
        } 

For your reference we have created a sample based on your requirement and same it can be downloaded from the following location. 

Please let us know if you have any concern. 

Regards, 
K.Karthick. 


Thanks for your response. Now I am stuck another problem that can be seen in the attached picture

Attachment: Syncfusion_9930abe.rar

Mohammed Farook J [Syncfusion]
Replied On October 6, 2016 03:02 AM

Hi Qasim, 

We have validated your reported issue,  we have found the root cause of issue if “IsPrimaryKey’ is not defined the columns. So we suggest to use “IsPrimaryKey” . please find the code example.  



.Columns(col => 
                               
                                    col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
                                    col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add(); 
                                    col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(75).Add(); 
                                    col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add(); 
                                }).Render(); 



Note : “IsPrimaryKey” is must be defined while perform CRUD operation . 



Please let us know if you any queries. 

Regards, 
J.Mohammed Farook 


Qasim Majeed
Replied On January 12, 2017 04:04 AM

Hi , 
thanks for your reply  ,, i ran your project while inserting data i am still getting null on server side.
Can you kindly help me out with that ?
Regards,

Mohammed Farook J [Syncfusion]
Replied On January 13, 2017 02:43 AM

Hi Qasim,   
 
We are unable to reproduce the issue at our end.  Please find the general root cause of issue. 
 
1.       Is it include Order class table in your project 
2.       Do you have any script error. 
3.       Please share the screen shot about issue. 
 
Regards, 
J.Mohammed Farook 


Qasim Majeed
Replied On January 18, 2017 06:09 AM

Hi Thanks for replying .. 
the issue is with this sample project which you have provided.
On this page Karthick Kuppusamy [Syncfusion] have attached a sample project please open that.
I have attached screenshots of this project which is giving me exception.
Kindly do see the attached screenshots.
The problem is values are not getting submitted to server upon hitting save using form.
I hope you are clear now with the problem , looking forward for your reply.
Regards

Attachment: screenshots_5699d86c.rar

Ramdhas  Ueikattan [Syncfusion]
Replied On January 19, 2017 07:30 AM

Hi Qasim, 

Thanks for your update. 

We have validate the sample and we were unable reproduce that issue at our side. Please find the screen shot and sample. 

 
 



Regards, 
Ramdhas U. 


Qasim Majeed
Replied On February 9, 2017 02:28 PM

Hi,
Thank you for your reply.There was a validation issue at my end it is now solved.
I have some questions ..
Is there a way to  hide the fields on the add/edit dialogue in dialog editor template ?
Or
Can we have separate dialog editor templates for add and edit  ?
My case is this i want to hide some fields in case of adding a record.

Regards
Qasim

Pavithra Subramaniyam [Syncfusion]
Replied On February 10, 2017 01:04 AM

Hi Qasim, 
 
We have analyzed your query and we can able to change the fields as read only type when add/edit action on dialog editor Template by setting AllowEditing property of Columns as False. Please refer the following code snippet and online document link. 

@{Html.EJ().Grid<Object>("FlatGrid") 
            .Datasource((IEnumerable<object>)ViewBag.DataSource) 
            .AllowPaging() 
            .EditSettings(edit => { edit.AllowEditing(); }) 
            .Columns(col => 
            { 
                col.Field("OrderID").IsPrimaryKey(true).Add(); 
                col.Field("EmployeeID").AllowEditing(false).Add(); 
                col.Field("Freight").Add(); 
                col.Field("ShipCity").Add(); 
                col.Field("ShipCountry").Add(); 
            }).Render(); 
    } 
 
 
Regards, 

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

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.

;