MVC5 Hieracrhical Grid - Datasource options for ChildGrid?

[Cindy Kee]

Hello,

So the example in the help documentation shows that the Datasource of the child grid in a hierarchical grid is a URL and then the QueryString property is also set to link the child data to the parent date. I loots like this:

child.Datasource("http://mvc.syncfusion.com/Services/Northwnd.svc/Customers/")
             .QueryString("CustomerID")

My question - are there other ways to setup the Datasource for the ChildGrid and still maintain a relationship between the parent and the child? For instance, in the parent grid, you can set the Datasource to:

• A ViewBag property with proper casting to the necessary type - .Datasource((IEnumerable<object>)ViewBag.Orders)
• Convert the ViewBag property to Json like so: .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.Orders)
• A local URL, like .Datasource(ds => ds.URL(@Url.Action("Datasource")))

Are any of these types of Datasources available to the ChildGrid? Is so, how to I keep the relationship between the Grid and ChildGrid together?

The reason I ask about all of this is that, through testing with a sample I downloaded from a Forum post you provided somewhere, I experimented with the different ways to setup editing a grid (just a single parent grid at first.) I discovered that in that case, only the casted ViewBag property with the RemoteSaveAdapter worked to automatically show the latest additions/deletions after the record has been saved. If I use the ds.Json method for the Datasource, or use the UrlAdaptor and the ds.URL() method for setting up the Datasource, then the grid doesn't immediately show the changes. It appears I would have to setup a client-side script to fire for specific event(s) and refresh the grid manually.

My ultimate goal with this is to use a hierarchical grid and setup the ChildGrid for Edit (Add, Edit, Delete). The parent grid will not be editable. And I want to use the cleanest implementation of the ChildGrid so that I don't have to manually refresh after changes are made.

Thank you,

Cindy

[Seeni Sakthi Kumar Seeni Raj]

Hi Cindy,

Thanks for using Syncfusion Product.
We were able to reproduce issue while adding a new record in the following scenarios.

1)      If there is no primaryKey column in the Grid. If you missed the IsPrimaryKey for the corresponding column, enable it.

2)      If the server returns PrimaryKey column as null. So we suggest to ensure whether the Grid InsertURL method returns a proper object as shown in the below code example or not.

@(Html.EJ().Grid<EmployeeView>("HierarchyGrid")

            .Datasource(ds => ds.Json(ViewBag.datasource))

             . . . . . .

            .ChildGrid(child =>

                {

                    child.Datasource(ds =>

                        ds.URL("/Home/DataSource").UpdateURL("/Home/Update").InsertURL("/Home/Insert").RemoveURL("/Home/Delete")

                        .Adaptor(AdaptorType.UrlAdaptor))                  

 .QueryString("EmployeeID")

 . . . .  . . . .

)

        public ActionResult Insert(EditableOrder value)

        {

            OrderRepository.Add(value);

            var data = OrderRepository.GetAllRecords();

            return Json(value, JsonRequestBehavior.AllowGet);
        }

We have prepared a sample that can be downloaded from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/123604/ze/HierarchyURL27626282

 If you are still facing any difficulty, please share the following information to analyze the issue and provide a solution as early as possible.

1)      Code example of Grid and code behind

2)      You have quoted that the you have got a sample from the forum. Please share the forum ID or sample.

3)      If possible, modify the attached sample and replicate the issue

4)      Whether you are using any public methods of Grid like updateRecord ?

Regards,

Seeni Sakthi Kumar S.

[Cindy Kee]

In the screenshot of the example grid you showed me in your post, the child grid's datasource is using the UrlAdaptor. Is that required for the child grid? Or can I use other adaptors with the child grid? If I can use the RemoteSaveAdaptor on the child grid, can you show me how to setup the child grid with it?

I will get back to you with other questions as I work through the sample, but this is the first major question.

Cindy

[Cindy Kee]

OK, as far as getting the grid to refresh with the newly added record, even when using the UrlAdaptor, I see that returning the value rather than then entire datasource, was part of the problem. (That, and making sure the new row has the proper primary key specified.)

The other night, I could not find any examples for what is to be returned from each of the Urls (in Json format) for each of the editing functions. I have determined that they should each return the following:

• InsertURL - returns the inserted data object with the updated primary key value (return Json(value, JsonRequestBehavior.AllowGet))
• UpdateURL - returns the updated data object, just like the InsertURL does (please confirm that this is correct)
• RemoveURL - I am not sure what this is supposed to return???

So basically none of these return the Json structure that the datasource URL is supposed to return (with the result and count properties.)

I also found out that after each of these URL returns, the grid does a refresh by calling the datasource URL, so that's how it gets the latest data.

Could you please confirm my assumptions listed above and answer what the RemoveURL is supposed to return?

Thank you,

Cindy

[Seeni Sakthi Kumar Seeni Raj]

Hi Cindy,

Query #1: Is that required for the child grid? Or can I use other adaptors with the child grid?

We can use any type of adaptors for the child Grid including remoteSaveAdaptor.

Query #2: Could you please confirm my assumptions listed above and answer what the RemoveURL is supposed to return?

While performing CRUD operations like adding, editing or deleting the corresponding URL must return the respective JSON objects.

InsertURL : It will return the added record as JSON object in the Grid
UpdateURL : It will return the updated record as JSON object in the Grid
RemoveURL: It is not necessary to return  a deleted object as result of RemoveURL

While updating/adding/deleting any record in the Grid, Grid will request to Datasource URL followed by corresponding action (UpdateURL/InsertURL/RemoveURL). This is the current action to update the Grid. Are you saying this as an issue and quoted that refreshing action(calling URL again) only repopulates the Grid with the updated record? Or apart from this behavior, you are manually calling any of the Grid’s public methods to repopulate the Grid?

Regards,
Seeni Sakthi Kumar S.

[Cindy Kee]

Query #1: Is that required for the child grid? Or can I use other adaptors with the child grid?

Your reply: We can use any type of adaptors for the child Grid including remoteSaveAdaptor.

Can you show me an example of how to set that up, because I am not able to get it to work. When I set this up like my code snippet below, and I expand a row in the main grid, the child grid does not load any child-related records. The only way I was able to get the child grid to load records was to use a datasource like:

child.Datasource(ds => ds.URL(@Url.Action("ChildDataSource"))...

.QueryString("OrderID")

Here is what I want to do:

@(Html.EJ().Grid<OrdersView>("FlatGrid")

    .Datasource((IEnumerable<OrdersView>)ViewBag.datasource)
.

.

.

    .ChildGrid(child =>
    {
        child.Datasource((IEnumerable<OrderDetailsView>)ViewBag.childDatasource)
            .InsertURL(@Url.Action("ChildInsert"))
            .UpdateURL(@Url.Action("Update"))
            .RemoveURL(@Url.Action("Delete"))
            .Adaptor(AdaptorType.RemoteSaveAdaptor))
            .QueryString("OrderID")

[Cindy Kee]

Are you saying this as an issue and quoted that refreshing action(calling URL again) only repopulates the Grid with the updated record? Or apart from this behavior, you are manually calling any of the Grid’s public methods to repopulate the Grid?

No, I am not saying that it's a problem. However, it makes me wonder why we return anything at all from the InsertURL and UpdateURL. It seems like even though we return the affected record that since we are calling the URL again anyway, those objects aren't being used anywhere? Must be in your background code?

Cindy

[Seeni Sakthi Kumar Seeni Raj]

Hi Cindy,

Query #1: Can you show me an example of how to set that up, because I am not able to get it to work.

When using remoteSaveAdaptor, you have to use JSON property of DataManager to bind the datasource object. Refer to the following code example.

@(Html.EJ().Grid<EmployeeView>("HierarchyGrid")

            .Datasource(ds => ds.Json(ViewBag.datasource).Adaptor(AdaptorType.RemoteSaveAdaptor))

             . . . . .

        .ChildGrid(child =>

        {

            child.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.childData)

                                .InsertURL(@Url.Action("Insert"))

                                .UpdateURL(@Url.Action("Update"))

                                .RemoveURL(@Url.Action("Delete"))

                                .Adaptor(AdaptorType.RemoteSaveAdaptor))

                .EditSettings(edit =>

                {

                    edit.AllowAdding().AllowDeleting().AllowEditing();

                })

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

                    });

                })

                .QueryString("EmployeeID")

                    . . . . .

        })
)

We have also prepared a sample that can be downloaded from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/123604/ze/HierarchyURL_RemoteSave-1517556956.zip

Query #2: it makes me wonder why we return anything at all from the InsertURL and UpdateURL
 
It is not mandatory to return an updated object as a result of CRUD action methods that handles InsertURL, UpdateURL and RemoveURL. We have changed this behavior in Volume 3, 2015 Essential Studio (v13.3.0.7) and prior to this CRUD operations methods must return a updated record as an object. Please refer to the following code example.

namespace MvcApplication66.Controllers

{

    public class HomeController : Controller

    {

        public ActionResult Index(){

            ViewBag.datasource = new NorthwindDataContext().EmployeeViews.ToList();

            ViewBag.childData = OrderRepository.GetAllRecords();

            return View();

        }

          . . . . . .

        // We can use either void as return type

        // or not mandatory to return an updated record

        //public ActionResult Update(EditableOrder value)

        //{

        //    OrderRepository.Update(value);

        //    var data = OrderRepository.GetAllRecords();

        //    return Json(new {success = success}, JsonRequestBehavior.AllowGet);

        //}

        public void Update(EditableOrder value)

        {

            OrderRepository.Update(value);

            var data = OrderRepository.GetAllRecords();

        }

        public void Insert(EditableOrder value)

        {

            OrderRepository.Add(value);

            var data = OrderRepository.GetAllRecords();

        }

        public void Delete(int key)

        {

            OrderRepository.Delete(key);

            var data = OrderRepository.GetAllRecords();

        }

    }
}

While updating/adding/deleting any record in the Grid, Grid will send URL request followed by corresponding action(UpdateURL/InsertURL/RemoveURL) which is the default behavior.

Regards,
Seeni Sakthi Kumar S.

[Cindy Kee]

Thank you! My child grid is all working now!

Cindy

[Seeni Sakthi Kumar Seeni Raj]

Hi Cindy,

We are happy to hear that your issue has been resolved.

Get back to us if you need further assistance.

Regards,

Seeni Sakthi Kumar S.

[Juan de Dios]

OK, as far as getting the grid to refresh with the newly added record, even when using the UrlAdaptor, I see that returning the value rather than then entire datasource, was part of the problem. (That, and making sure the new row has the proper primary key specified.)

The other night, I could not find any examples for what is to be returned from each of the Urls (in Json format) for each of the editing functions. I have determined that they should each return the following:

• InsertURL - returns the inserted data object with the updated primary key value (return Json(value, JsonRequestBehavior.AllowGet))
• UpdateURL - returns the updated data object, just like the InsertURL does (please confirm that this is correct)
• RemoveURL - I am not sure what this is supposed to return???

So basically none of these return the Json structure that the datasource URL is supposed to return (with the result and count properties.)

I also found out that after each of these URL returns, the grid does a refresh by calling the datasource URL, so that's how it gets the latest data.

Could you please confirm my assumptions listed above and answer what the RemoveURL is supposed to return?

Thank you,

Cindy

I  agree to the privacy policy and terms of service.

[Sathyanarayanamoorthy Eswararao]

Hi Juan, 

We have already provided the solution for the mentioned queries in the previous updates. 

If you need any further assistance please get back to us with more details. 

Regards, 

Sathyanarayanamoorthy