Binding and editing complex objects

[Paul Yanzick]

Hello,

I am trying to use the grid to manipulate some Entity Framework objects.  If I am not using a compound object, it is now working great for me (awesome control!!!)  The problem, now, is that I would like to show a subset of data in the grid, and when I edit it (and eventually when I click on it, using master-detail) it would provide more details. 

As an example, lets say I have a Customer class that has:

string FirstName

string LastName

List<Address> Addresses

and Address looks like

string Address1

string Address2

string City

string State

string Zip

Lets also assume that the List<Addresses> will only return a single address even though it is a list... so all I want to do is deal with Address[0], and we can also assume it is always populated.

In the grid, if I want to display FirstName, LastName, and Address1, how would I go about doing that?  In other control sets I could do Address[0].Address1 and that would work, but not here.  Eventually I'd like to edit all of these fields.

Thank you for your help!

[Sellappandi Ramu]

Hi Paul,

Thanks for using Syncfusion products.

Based on your requirement we have created a sample to render the grid by using array data. The sample can be downloaded from following location.

Sample Link: http://www.syncfusion.com/downloads/support/forum/118758/TestGrid-1406488504.zip

For your kind information, we need to use the dot(“.”) symbol in field If we want to render the array of data. Please refer the following code snippet.

<ej:Grid ID="Grid" runat="server">

<Columns>

<ej:Column Field="ID" HeaderText="ID" IsPrimaryKey="true" Visible="false" >

</ej:Column>

<ej:Column Field="FirstName" HeaderText="First Name" >

</ej:Column>

<ej:Column Field="LastName" HeaderText="Last Name" >

</ej:Column>

< ej:Column Field="Addresses.0.Address1" HeaderText="Address" >

</ej:Column>

</Columns>

<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>

<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>

</ej:Grid>

Please try the above sample and get back to us if you need any further assistance.

Regards,

Sellappandi R

[Paul Yanzick]

Hello,

Thank you for your reply!

Your example worked, although I had to change the references to an older version of the controls (must have released a new version in the last week or so???)  In any case, it worked... and I was able to edit.

I implemented the same thing in my app, and the fields are displayed now, but if I try to edit (using a dialog edit), the fields that show data in the grid from the addresses become blank.  If I get rid of the dialog edit so it is inline editing, I have the same problem.. as soon as I go into edit mode, those fields blank out.  Any thoughts as to why that may be happening?  I am not seeing anything different really.  Everything in the parent object is shown in edit, just not the values of the Address object.

Thanks

Paul

[Paul Yanzick]

Here is what my grid looks like right now:

<ej:Grid ID="gridDistributors" runat="server" AllowPaging="True" OnServerEditRow="gridEditEvents_ServerEditRow" OnServerAddRow="gridEditEvents_ServerAddRow"
    OnServerDeleteRow="gridEditEvents_ServerDeleteRow" OnDataBinding="gridDistributors_DataBinding">
    <ClientSideEvents ActionComplete="complete" EndAdd="endAdd" EndDelete="endDelete" EndEdit="endEdit" />
    <Columns>
        <ej:Column Field="DistributorID" Visible="false" HeaderText="DistributorID" IsPrimaryKey="true">
            <NumericEditOptions Tag="" />
        </ej:Column>
        <ej:Column Field="DistributorName" HeaderText="Distributor Name">
            <NumericEditOptions Tag="" />
        </ej:Column>
        <ej:Column Field="DistributorContact" HeaderText="Contact">
            <NumericEditOptions Tag="" />
        </ej:Column>
        <ej:Column Field="PhoneNumber" HeaderText="Phone Number">
            <NumericEditOptions Tag="" />
        </ej:Column>
        <ej:Column Field="EmailAddress" HeaderText="Email Address">
            <NumericEditOptions Tag="" />
        </ej:Column>
        <ej:Column Field="Addresses.0.AddressID" HeaderText="AddressID" Visible="false">
            <NumericEditOptions Tag="" />
        </ej:Column>
        <ej:Column Field="Addresses.0.Address1" HeaderText="Address 1">
            <NumericEditOptions Tag="" />
        </ej:Column>
        <ej:Column Field="Addresses.0.Address2" HeaderText="Address 2">
            <NumericEditOptions Tag="" />
        </ej:Column>
        <ej:Column Field="Addresses.0.City" HeaderText="City">
            <NumericEditOptions Tag="" />
        </ej:Column>
        <ej:Column Field="Addresses.0.State" HeaderText="State">
            <NumericEditOptions Tag="" />
        </ej:Column>
        <ej:Column Field="Addresses.0.Country.CountryID" HeaderText="CountryID" Visible="false">
            <NumericEditOptions Tag="" />
        </ej:Column>
        <ej:Column Field="Addresses.0.Country.CountryDescription" HeaderText="Country" EditType="Dropdown">
            <NumericEditOptions Tag="" />
        </ej:Column>
        <ej:Column Field="Addresses.0.ZipCode" HeaderText="ZipCode">
            <NumericEditOptions Tag="" />
        </ej:Column>
        <ej:Column Field="IsActive" HeaderText="Active Distributor" EditType="Boolean">
            <NumericEditOptions Tag="" />
        </ej:Column>
    </Columns>
    <PageSettings Template="" />
    <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="true" EditMode="Dialog" AllowEditOnDblClick="true"></EditSettings>
    <ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete"></ToolbarSettings>
    <ContextmenuSettings EnableContextmenu="true"></ContextmenuSettings>
</ej:Grid>
<script type="text/javascript">
    function complete(args) {
 
        if (args.requestType == "beginedit") {
            var currentRow = args.model.currentViewData[args.rowIndex];
            $("#gridDistributors_dialogEdit").ejDialog({ title: "Details of " + currentRow.DistributorName });
        }
    }
</script>

[Paul Yanzick]

It is also worthwhile noting I think that inspecting the page I can see all of the data there in JSON format, including the Country databind (which is also showing up blank).  I have removed the Country databind in case that was messing things up, actually stripping it down to basically the example you provided as far as the grid goes (only Address1 being displayed in the grid) and the same thing is happening.

Thanks

Paul

[Paul Yanzick]

It seems that you are using a jsondata.js as well.. I am not.  Not finding that file in the version I am using.  

Here are the scripts I AM using though:

<script src="/Scripts/jquery-1.10.2.min.js"></script>
<script src="/Scripts/jquery.easing.1.3.min.js"></script>
<script src="/Scripts/jquery.globalize.min.js"></script>
<script src="/Scripts/jsrender.min.js"></script>
<script src="/Scripts/ej.web.all.min.js"></script>
<script src="/Scripts/ej.webform.min.js"></script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script>

[Paul Yanzick]

I have also upgraded to the latest controls that were released a couple days ago... same issue.

[Paul Yanzick]

Ok, I have made some progress.  I had replaced the scripts (and apparently the jquery-easing-1.3.min.js file was renamed from jquery-easing.1.3.min.js which caused some issues for me) and the data is being populated in the fields, except there is still a problem.

One of the columns is to be a dropdown.  If I use EditType="DropDown" it no longer works, I am unable to edit anything in the grid.  If I remove EditType="Dropdown" then it renders edit correctly, minus the dropdown.  The same thing happens if I add that parameter to the sample program that was posted earlier, it does not allow editing any longer.

So one problem is resolved, another one is created... Please advise

[Sellappandi Ramu]

Hi Paul,
Thanks for the update.
We have analyzed your reported issue and found that you have created an incident “#137742” and also the forum “#118783” for the same query “Editing is not working while using Edit type as dropdown” . So please refer the incident “#137742” for better follow up.
Please let us know if you have any queries.
Regards,

Sellappandi R

[Sellappandi Ramu]

Hi Paul,
Please ignore the previous update.

The sample using EditTemplate property can be downloaded from the below location.
Sample Link: http://www.syncfusion.com/downloads/support/forum/118783/TestGrid679791128.zip
Please get back to us if you need any further assistance.
Regards
Sellappandi R