Display inline form editing with all columns, while only displaying fewer columns in grid view

[Megatron]

Hello, I am interested in this similar scenario http://bit.ly/1mPqMKX where you have a master detail relationship, but I want to edit it and do it on-demand, and both grids to support edits.

• Customer (master, Editing/edit mode all the total 10 columns, but display only 5 cols in grid mode)
• Orders     (details, foreign key, circular ref error)
  

For the master I also want to support, for editing externally but I have problem with the columns edited.  In the Customer Database Table there are 10 columns. I only show 5 in the master grid view format, but in the edit/add update format, during the form/record Form add/edit I want to display all the columns. How can I achieve this?

How can I load both the Master and the Details grid via the data SF adaptor supporting all actions (add edit and delete) when the user clicks on the row in main grid, I would like to load on demand and fetch 30 rows based on the grid query. With EF 6.1 if I use an object with foreign keys as data source, I am getting circular reference.  SF grid, what needs to be done to resolve this.

thanks

[Gowthami V]

Hi Megatron,

Thanks for using Syncfusion products.

Query 1: Customer (master, Editing/edit mode all the total 10 columns, but display only 5 cols in grid mode)

Using template editing concept, we can edit the fields which are not present in the grid columns but in dataSource.   

Refer to the below code example for setting the external edit template in grid.

@(Html.EJ().Grid<OrderTable>("Grid")

        .Datasource(ds => ds.URL("GetEmployeeData")

                            .InsertURL("PerformInsert")

                            .UpdateURL("PerformUpdate")

                            .RemoveURL("PerformDelete")

                            .Adaptor(AdaptorType.UrlAdaptor)

                            )

. . . .

. . . .

.EditSettings(e => e.AllowEditing()

                            .AllowDeleting()

                            .AllowAdding()

                          

                            .EditMode(EditMode.ExternalFormTemplate).ExternalFormTemplateID("#template1")

 )

. . . .

  )

<script id="template1" type="text/template">

    <b>Employee Details</b>

    <table cellspacing="10">

. . .

    //Template comes here

  </table>

</script>

For external form, we can edit the records using ExternalFormTemplate then we need to set EditMode as ExternalFormTemplate and specify the template ID to ExternalFormTemplateID property.

Refer the below links for online demo more clarification,

http://mvc.syncfusion.com/demos/web/grid/inlineformediting

http://mvc.syncfusion.com/demos/web/grid/externalformediting

Refer to the below online documentation link for more clarification,

http://help.syncfusion.com/aspnetmvc/grid/editing#edit-mode

Query 2: if I use an object with foreign keys as data source, I am getting circular reference.  SF grid, what needs to be done to resolve this.
We can avoid circular reference error using “ViewModel” concept. We are highly recommend the ViewModel concept since it will retrieve only required data and avoid the unwanted circular reference error.

Refer to the below link for more details about circular reference error,

http://blogs.microsoft.co.il/gilf/2011/10/17/avoiding-circular-reference-for-entity-in-json-serialization/

http://blog.davebouwman.com/2011/12/08/handling-circular-references-asp-net-mvc-json-serialization/

http://programmers.stackexchange.com/questions/11856/whats-wrong-with-circular-references

For your reference we have attached the sample below with “ViewModel” concept and the same can be downloaded from the following link,

http://www.syncfusion.com/downloads/support/directtrac/general/ze/EntityCodeFirst-1468930071.zip

In the above sample we have generated a ViewModel for the “Orders” table (OrderRepository.cs).

Refer to the below code example,

public static class OrderRepository

    {

public static IList<EditableOrder> GetAllRecords()

        {

. . .  .

orders = (from ord in new NORTHWNDEntities1().Orders.Take(200)

                select new EditableOrder

                         {

             OrderID = ord.OrderID,

             OrderDate = ord.OrderDate,

             CustomerID = ord.CustomerID,

. . . .

}).ToList();

return orders;

        }

Regards,

Gowthami V.

[Megatron]

Hi, you did not include what the #template should look like in the Inline Editing form, can you please inculde a snippet with the Edit Update Delete command call.

Query#2 I am using EF, no additional VM's. Circular reference is only when I use your grid.

thanks

[Gowthami V]

Hi Megatron,

Query 1: you did not include what the #template should look like in the Inline Editing form, can you please include a snippet with the Edit Update Delete command call.

We can enable the inline form template editing by set “EditMode” as “InlineFormTemplate” and set the template id using “InlineFormTemplateID” as follows,

@(Html.EJ().Grid<OrderTable>("Grid")

        .Datasource(ds => ds.URL("GetEmployeeData")

                            .InsertURL("PerformInsert")

                            .UpdateURL("PerformUpdate")

                            .RemoveURL("PerformDelete")

                            .Adaptor(AdaptorType.UrlAdaptor)
                            )

.EditSettings(e => e.AllowEditing()

                            .AllowDeleting()

                            .AllowAdding()

                          

                            .EditMode(EditMode.InlineFormTemplate).InlineFormTemplateID("#template1")
                                )

.Columns(col =>

                {

                    col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

                    col.Field("FirstName").HeaderText("First Name").TextAlign(TextAlign.Right).Width(75).Add();

                    col.Field("LastName").HeaderText("Last Name").TextAlign(TextAlign.Left).Width(75).Add();

                })
. . . .
. . . .
   )

Template code:

<script id="template1" type="text/template">

    <b>Employee Details</b>

    <table cellspacing="10">

        <tr>

            <td style="text-align: right;">

                Employee ID

            </td>

            <td style="text-align: left">

                <input id="EmployeeID" name="EmployeeID" value="{{: EmployeeID}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable"

                       style="text-align: right; width: 116px; height: 28px" />

            </td>

            <td style="text-align: right;">

                FirstName

            </td>

            <td style="text-align: left">

                <input id="FirstName" name="FirstName" value="{{: FirstName}}" class="e-field e-ejinputtext valid"

                       style="width: 116px; height: 28px" />

            </td>

        </tr>

        <tr>

            <td style="text-align: right;">

                LastName

            </td>

            <td style="text-align: left">

                <input type="text" id="LastName" name="LastName" value="{{:LastName}}" />

            </td>

            <td style="text-align: right;">

                Title

            </td>

            <td style="text-align: left">

                <input id="Title" name="Title" value="{{: Title}}" class="e-field e-ejinputtext valid"

                       style="width: 116px; height: 28px" />

            </td>

        </tr>

        <tr>

            <td style="text-align: right;">

                Ship City

            </td>

            <td style="text-align: left">

                <input id="City" name="ShipCity" value="{{: City}}" class="e-field e-ejinputtext valid"

                       style="width: 116px; height: 28px" />

            </td>

          

    </table>

</script>

Refer to the below code for performing CRUD operations,

//Provide grid datasource

        public ActionResult GetEmployeeData(DataManager dm)

        {

            IEnumerable data = new NORTHWNDEntities1().Employees.ToList();

            int count = data.AsQueryable().Count();

            DataOperations operation = new DataOperations();

            data.Cast<Employee>().Select(x => new

            {

               EmployeeID = x.EmployeeID,

                FirstName = x.FirstName,

                LastName = x.LastName

 

            });

            //Performing paging operations

            data = operation.PerformSkip(data, dm.Skip);

            data = operation.PerformTake(data, dm.Take);

          

            return Json(new { result = data, count = count }, JsonRequestBehavior.AllowGet);

        }

        //Perform file insertion

        public ActionResult PerformInsert(Table value)

        {

           

            NORTHWNDEntities1 db = new NORTHWNDEntities1();

            db.Tables.Add(value);

            db.SaveChanges();

            return RedirectToAction("GetEmployeeData");

        }

        //Perform update

        public ActionResult PerformUpdate(Table value)

        {

            NORTHWNDEntities1 db = new NORTHWNDEntities1();

            Table table = db.Tables.Single(o => o.EmployeeID == value.EmployeeID);

            db.Entry(table).CurrentValues.SetValues(value);

            db.Entry(table).State = EntityState.Modified;

            db.SaveChanges();

            return RedirectToAction("GetEmployeeData");

        }

        //Perform delete

        public ActionResult PerformDelete(int key)

        {

            NORTHWNDEntities1 db = new NORTHWNDEntities1();

            db.OrderTables.Remove(db.OrderTables.Single(o => o.OrderID == key));

            db.SaveChanges();

            return RedirectToAction("GetEmployeeData");
        }

For your reference we have attached the sample below,

http://www.syncfusion.com/downloads/support/directtrac/general/ze/EntityCodeFirst-633630973.zip

Query 2: I am using EF, no additional VM's. Circular reference is only when I use your grid.

We have provided the code example using Entity Framework 6 version.

The main cause of the circular reference issue is database design. That means the child object refer to the parent object and the parent object refer to the child object and hence while transferring the data, the JavaScriptSerializer is unable to serialize the data and throws circular reference error.

For example consider

public class Student

        {

            public Student()

            {

            }

            public int StudentID { get; set; }

            public string StudentName { get; set; }

            //Foreign key for Standard

            [ForeignKey("Standard")]

            public int StandardRefId { get; set; }

            public Standard Standard { get; set; }

        }

        public class Standard

        {

            public Standard()

            {

            }

            public int StandardId { get; set; }

            public string StandardName { get; set; }

            public ICollection<Student> Students { get; set; }

        }

In the above case the Standard object will have a Student property and the Student object will have an Standard property.

When returning the model with above schema from server, the JavaScriptSerializer will try to serialize the data. During that process it tries to serialize all properties of the Standard type which includes “Student” as well. However when traversing the Student object the JavaScriptSerializer discovers the circular reference (the Standard property) and gives up by throwing the aforementioned exception. The grid can bound with such datasource if the JavaScriptSerializer is able to serialize it to send to client side.

Due to the above reason the circular reference error occurred when the JavaScriptSerializer serialize the data.

So that only we suggest you to use the “ViewModel” concept to resolve the circular reference issue.
Refer to the below link for prevent circular reference,

http://www.codeproject.com/Articles/38655/Prevent-Circular-References-in-Database-Design

Refer to the below link for more clarification about ViewModel,

http://sampathloku.blogspot.in/2012/10/how-to-use-viewmodel-with-aspnet-mvc.html

http://rachelappel.com/use-viewmodels-to-manage-data-amp-organize-code-in-asp.net-mvc-applications

Regards,

Gowthami V.