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

[Qasim Majeed]

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]

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. 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication8-1960312378.zip. 

Please let us know if you have any concern. 

Regards, 

K.Karthick. 

[Qasim Majeed]

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. 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication8-1960312378.zip. 

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]

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. 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication8-1960312378.zip. 

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]

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]

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]

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]

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]

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. 

 

 

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication81010422321.zip 

Online document link: https://help.syncfusion.com/aspnetmvc/grid/data-adaptors?cs-save-lang=1&cs-lang=csharp#remotesave-adaptor 

Regards, 

Ramdhas U. 

[Qasim Majeed]

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]

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

    } 

 

Online document link: https://help.syncfusion.com/aspnet-core/grid/columns#read-only 

 

Regards, 

Pavithra S.