GridView cell to cell drag and drop to save data to store/database

I'm using a .CellDragDrop() in a .GridView() to move data from one cell to another. This works, however I am trying to have the data that I dragged replace what was previously in the database. I am having trouble using a direct event to trigger this. Here is my code:

Code:

---

Html.X().GridPanel()
    .Store(
        Html.X().Store()
            .ID("storeReqPriorities")
            .AutoLoad(true)
            .DataSource(clients)
            .Model(
                Html.X().Model()
                    .Fields(f =>
                    {
                        f.Add(Html.X().ModelField().Name("RequestPriorityKey").Type(ModelFieldType.Int));
                        f.Add(Html.X().ModelField().Name("RequestPriorityName").Type(ModelFieldType.String));
                        f.Add(Html.X().ModelField().Name("RequestPriorityDescription").Type(ModelFieldType.String));
                        f.Add(Html.X().ModelField().Name("SortOrder").Type(ModelFieldType.Int));
                        f.Add(Html.X().ModelField().Name("ResponseTarget").Type(ModelFieldType.String));
                        f.Add(Html.X().ModelField().Name("ResponseFormat").Type(ModelFieldType.String));
                        f.Add(Html.X().ModelField().Name("ResponseSLA").Type(ModelFieldType.String));
                    })
            )
            .ServerProxy(
                Html.X().AjaxProxy()
                    .Url(Url.Action("ManageLists_GetRequestPriorities", "Admin", new { area = "Cadence" }))
            )
    )
    .Listeners(l =>
    {
        l.Select.Handler = "handleReqPopulate(record.data);" + "toggleEditRequest();";
    })
    .ColumnModel(
        Html.X().Column().Flex(1).Text("Request Priority Name").DataIndex("RequestPriorityName"),
        Html.X().Column().Flex(3).Text("Request Priority Desciption").DataIndex("RequestPriorityDescription"),
        Html.X().Column().Flex(1).Text("Sort Order").DataIndex("SortOrder"),
        Html.X().Column().Flex(1).Text("Response Target").DataIndex("ResponseTarget"),
        Html.X().Column().Flex(1).Text("Response Format").DataIndex("ResponseFormat"),
        Html.X().Column().Flex(1).Text("Response SLA").DataIndex("ResponseSLA")
    )
    .View(
        Html.X().GridView()
            .Plugins(
                Html.X().CellDragDrop().ApplyEmptyText(true).EnforceType(true)
            )
            .DirectEvents(d =>
            {

            })
    )

---

Please let me know if there is a way to save the data that I have dragged to the database.

Hello @rymac!

I think you are in the right path. Did you get the Drop directEvent (or listener) to trigger at all? You probably have access to the record being dropped around your line 43, but you have to pass the data you want and need to have the server handle it. It should be passed as ExtraParams in the Drop or BeforeDrop event. You should at least pass information on the exact record (cell, column, or however it is represented in the database) and the value that should be recorded (or instruction on how to get the value from server-side, like value being moved from X to Y, so that it just copies the value internally as well).

This is a very specific behavior and there's not much Ext.NET can do automagically, you have to pass to the server side what change you want it to make.

Here's one example that uses ExtraParams in a grid panel: GridPanel > Selection Models > Checkbox Selection

It is a good starting point, but in the drop event, you should have a much simpler way to get the exact record that is being changed.

If it is getting out of hand to use the grid view's Drop and BeforeDrop events, you may want the appeal of a full-blown implementation using specific drag-drop events. If you are considering this, then also consider this example that should help you get started: DragDrop > Grid > Field to Grid. Moreover, there are other examples with drag-drop within the same grid (with no fancy events), and from the grid to somewhere else; but I believe the first example will prove most useful (as it explores a more complex customization).

Hope this helps!

p.s.: notice the drop event on the grid view may not work at all; in a quick look, I couldn't find the documentation entry in either the grid view or the celldragdrop plugin; thus I'm not sure the event will be wired by using CellDragDrop. You may draw a simple Listener with a simple command like Ext.toast('test') to ensure it works the way you need. You may want to drop a breakpoint (in your browser's development tools) to see what information is available to you at that point, if the event is properly fired.

Hi Fabricio,

Thanks for your reply. I've been able to get an alert to appear in a listener. Here's my code:

Code:

---

                                                            .View(
                                                                Html.X().GridView()
                                                                    .Plugins(
                                                                        Html.X().CellDragDrop().ApplyEmptyText(true).EnforceType(true).EnableDrop(true)
                                                                    )
                                                            .Listeners(d => {
                                                                d.Drag.Handler = "alert('test');";
                                                            })
                                                            )

---

However, I haven't been able to get an alert to appear using a drop method in the same line of code as above.

I'm actually trying to utilize the cell-to-cell drag-drop feature seen here: https://mvc4.ext.net/#/DragDrop_Grid/Cell_to_Cell/. I am able to drag and drop data in the view, but I will try passing ExtraParams in the Drop or BeforeDrop events to target the cell that I want to pass to the database.

After looking at the .Drag method used above, I would probably want to use the .Drop method for what I am trying to do, but as you mentioned, the drag feature doesn't appear to be working. Is there another method I could use instead?

Hello @rymac!

Quote:

---

Originally Posted by fabricio.murta

If it is getting out of hand to use the grid view's Drop and BeforeDrop events, you may want the appeal of a full-blown implementation using specific drag-drop events. If you are considering this, then also consider this example that should help you get started: DragDrop > Grid > Field to Grid. Moreover, there are other examples with drag-drop within the same grid (with no fancy events), and from the grid to somewhere else; but I believe the first example will prove most useful (as it explores a more complex customization).

---

You'll see a onNodeDrop function defined in the first example mentioned above. A possible approach will be to combine it with a DirectMethod instead of DirectEvent. As the DirectEvent is tied to a given event in the component, and you can't have the event to fire, the DirectMethod can be called passing the arguments as a function.

Hope this helps!