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. Image for the cookie policy date

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

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();
        }



10 Replies

KK Karthick Kuppusamy Syncfusion Team October 4, 2016 03:14 AM UTC

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. 



QM Qasim Majeed replied to Karthick Kuppusamy October 5, 2016 09:45 AM UTC

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


QM Qasim Majeed replied to Karthick Kuppusamy October 5, 2016 09:47 AM UTC

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


MF Mohammed Farook J Syncfusion Team October 6, 2016 07:02 AM UTC

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 



QM Qasim Majeed January 12, 2017 09:04 AM UTC

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,


MF Mohammed Farook J Syncfusion Team January 13, 2017 07:43 AM UTC

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 



QM Qasim Majeed January 18, 2017 11:09 AM UTC

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


RU Ramdhas  Ueikattan Syncfusion Team January 19, 2017 12:30 PM UTC

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. 



QM Qasim Majeed February 9, 2017 07:28 PM UTC

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


PS Pavithra Subramaniyam Syncfusion Team February 10, 2017 06:04 AM UTC

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. 


Loader.
Up arrow icon