Data deletion question.

[JohnsonHuang]

Hi Ext.net Support:

This is AHA-Computer, Technical Support Engineer, Johnson.
Hope you are well.
AHA-Computer help user order Ext.NET Pro with 1 year of Premium support about 2023/5/5.

User's information:
Company name: Institute of Nuclear Energy Research, Atomic Energy Council, Executive Yuan
Contract Name: LIOU,ZE-SIAN
Contract Mail: rliu5325@iner.gov.tw

Product Description & Version: Ext.NET Pro V7.3
Developers: 2

Question Description/User's request:

Q2. There is a delete button designed. After deleting the data, it will refresh the GridPanel content (without Paging).
There is no way to design a confirm box in ClentSide first to confirm whether the user selects "Yes", and then Post to the backend to process the data deletion, and then Refresh GridPanel content can only be confirmed simply with javascript.


The delete button will use directEvents, POST to the background to process the data after deletion, success will refresh the GridPanel content.
But this place cannot use Ext.Net's Ext.Msg.confirm to design a post to the background after client side confirmation:



Changing to use the following method also cannot refresh the content of the GridPanel data after the data is deleted:

<listeners>
                <click handler="Ext.Msg.confirm('??','???????????',function(btn){if (btn == 'yes') App.direct.Delete_Click(@getFormValue,{success: function(){@Success}});}); "/>
            </listeners>
Then add the declaration of [DirectModel] and [Direct] in the .cs design

Can support design a confirm box in ClentSide to confirm whether the user selects "Yes" first, then Post to the backend to process the data deletion, and then Rrefresh the GridPanel content?
Thank you for your support very much.

[geoffrey.mcgill]

If I understand your request properly, you are asking for a sample demonstrating how a Confirmation dialog box can call back to the server but only if the yes button is clicked?

We should be able to create a simplified sample demonstrating this scenario.

[JohnsonHuang]

Hi Geoffrey

Really tks for your reply, first.

I already forward your info & question to user, waiting their feedback.
If any update, I will let you know.

Thank you very much again.

[fabricio.murta]

Hello @JohnsonHuang, and welcome to Ext.NET Forums!

There is no way to design a confirm box in ClentSide first to confirm whether the user selects "Yes", and then Post to the backend to process the data deletion, and then Refresh GridPanel content can only be confirmed simply with javascript.

Yes, there is; and with no javascript at all, actually. Here's a little sample button using the confirmation markup code to request user input before effectively calling a server method:

<ext-button text="Delete record">
    <directEvents>
        <click pageHandler="GetDeletionConfirmation" method="POST">
            <confirmation>
                <ext-confirmation confirmRequest="true" title="Are you sure?" message="Really want to delete the record?" />
            </confirmation>
        </click>
    </directEvents>
</ext-button>

Can support design a confirm box in ClentSide to confirm whether the user selects "Yes" first, then Post to the backend to process the data deletion, and then Rrefresh the GridPanel content?

Well, now to refresh the grid, there's no way Ext.NET could tell by itself a direct event meant a grid to be refreshed. In fact, you may be in a page with a grid which shows a row's element in an "edit" form, so it's really hard to make Ext.NET guess whether it should refresh which component with no hint. But the direct method itself can send back commands to the grid or grid's store. Without a test case I'm not going to be able to tell what exactly the command should be, but it would be something like this.GetCmp<GridPanel>("GridPanel1").Store.As<Store>().Reload();.

An example using this concept is this very simple window show one: Window - Basic - Hello World

Provide test cases we could use to help you

I know you need to relay the messages back to your client and then back to us, so you could avoid a lot of back-and-forths if you instructed they to create simplified test cases of what they are unable to make work in Ext.NET 7, and used those as a base for the discussion. Please point them to our examples explorer: https://examples.ext.net/ ; then also let them know they could clone our public git project of that same examples and use it to build test cases, so they could provide simple page + controller code sample pairs just as you can see if you open the Window example above and click the < > button (around top left corner of the page and see the contents of both index.cshtml and index.cshtml.cs).

By providing test cases like those in examples explorers, we can simply run the example, reproduce the issue, and advise on what exactly should go in that example for it to work the way it's desired.

No .zip file or whole projects, please

We can't check whole projects, even if that's the Examples Explorer with an added test case. Let's be simple and objective, a test case to illustrate what I'm saying, given again the example of the Window one, should look just like this:

page code

@page "{handler?}"
@model Ext.Net.Examples.Pages.samples.window.basic.hello_world.IndexModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
    <head>
        <title>
            Hello World - Ext.NET Examples
        </title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <h1>Hello World</h1>

        <p>
            The following sample demonstrates how to configure a new Window and <code>show</code> the Window if closed.
        </p>

        <ext-button text="Show Window (Client Event)" onClientClick="App.Window1.show();" />

        <br />

        <ext-button text="Show Window (Direct Event)" onDirectClick="ShowWindowDirect" />

        <ext-window
            id="Window1"
            title="Hello World"
            height="270"
            width="360"
            bodyPadding="18"
            modal="true">
            <content>
                This is my first <a target="_blank" href="https://ext.net/">Ext.NET</a> Window.
            </content>
        </ext-window>
    </body>
</html>

controller code

using Ext.Net;
using Ext.Net.Core;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc;

namespace Ext.Net.Examples.Pages.samples.window.basic.hello_world
{
    public class IndexModel : PageModel
    {
        public void OnGet()
        {

        }

        public IActionResult OnPostShowWindowDirect()
        {
            this.GetCmp<Window>("Window1").Show();

            return this.Direct();
        }
    }
}

Following these guidelines brings several benefits:
1. We can understand and reproduce the scenario
2. We can provide exact steps on how to fix the problem
2. Simplified environment without unnecessary and unrelated distraction from the focus in the problem
3. Often building the simplified test case results in finding the problem itself without the need to even contact us!

Hope this helps, and sorry for being thorough!

[JohnsonHuang]

Hi Fabricio:

Tks for your professional & thorough reply sincerely.
It's really large helpful for user.

I already relay the messages back to user.
If any update, I will let you know.

Thank you very much again honestly.

[JohnsonHuang]

Hi Fabricio & all Support:

The client side validation problem has been resolved.
Thank you for your support.

But you mention a solution to refresh gridpanel by using the command:
this.GetCmp<GridPanel>("GridPanel1").Store.As<Store>().Reload();.

it seems not working and reply null object reference for Ext.Net class v7.3.
So I use App.gridStore1.setData(Ext.decode(response.respons eText).result) instead.

Three Simple source codes for your reference to test gridpanel refreshing (reload store).
I merged the above three files as local_paging.zip.
However, since you mentioned that there is no .zip file, I provide these three simple source codes for your reference to test the gridpanel refresh (reload store).

Code of config.xml:

<?xml version="1.0" encoding="utf-8" ?><example>
  <description>
    <![CDATA[Demonstrates how to create a grid from Array data with Paging and Remote reloading.]]>
  </description>
  <tags>grid,gridpanel,progressbar,progressbar pager,paging,renderer,striperows</tags>

</example>

Code of index.cshtml:

@page "{handler?}"@model Ext.Net.Examples.Pages.samples.gridpanel.paging_and_sorting.local_paging.IndexModel
@{
    Layout = null;
}
<!DOCTYPE html>
<html>
    <head>
        <title>GridPanel with local paging - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />


        <script>
            var template = '<span style="color:{0};">{1}</span>';
            var change = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value);
            };
            var pctChange = function (value) {
                return Ext.String.format(template, (value > 0) ? "green" : "red", value + "%");
            };
        </script>
    </head>
    <body>
        <h1>GridPanel with local paging</h1>


        <p>This example demonstrates how to create a GridPanel from an Array of data object and use the PagingToolbar to provide local data paging.</p>


        <ext-gridPanel title="Array Grid" width="960" frame="true">
            <store>
                <ext-store pageSize="10" data="Model.GridData">
                    <model>
                        <ext-model>
                            <fields>
                                <ext-dataField name="company" />
                                <ext-dataField name="price" type="Float" />
                                <ext-dataField name="change" type="Float" />
                                <ext-dataField name="pctChange" type="Float" />
                                <ext-dataField name="lastChange" type="Date" />
                            </fields>
                        </ext-model>
                    </model>
                    <proxy>
                        <ext-memoryProxy enablePaging="true" />
                    </proxy>
                </ext-store>
            </store>
            <columns>
                <ext-column text="Company" dataIndex="company" flex="1" />
                <ext-column text="Price" dataIndex="price" renderer="Ext.util.Format.usMoney" />
                <ext-column text="Change" dataIndex="change" renderer="change" />
                <ext-column text="Change" dataIndex="pctChange" renderer="pctChange" />
                <ext-dateColumn
                    text="Last Updated"
                    width="140"
                    dataIndex="lastChange"
                    format="yyyy-MM-dd"
                    />
            </columns>
            <bbar>
                <ext-pagingToolbar />
            </bbar>
        </ext-gridPanel>
    </body>

</html>

Codes of index.cshtml.cs:

using Ext.Net.Core;using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using System;
using System.Collections.Generic;


namespace Ext.Net.Examples.Pages.samples.gridpanel.paging_and_sorting.local_paging
{
    public class IndexModel : PageModel
    {
        public List<object> GridData { get; set; }


        public void OnGet()
        {
            var now = DateTime.Now.ToString("yyyy-MM-dd hh:mm:tt");


            GridData = new List<object>
            {
                new object[] { "3m Co", 71.72, 0.02, 0.03, now },
                new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, now },
                new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, now },
                new object[] { "American Express Company", 52.55, 0.01, 0.02, now },
                new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, now },
                new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, now },
                new object[] { "Boeing Co.", 75.43, 0.53, 0.71, now },
                new object[] { "Caterpillar Inc.", 67.27, 0.92, 1.39, now },
                new object[] { "Citigroup, Inc.", 49.37, 0.02, 0.04, now },
                new object[] { "E.I. du Pont de Nemours and Company", 40.48, 0.51, 1.28, now },
                new object[] { "Exxon Mobil Corp", 68.1, -0.43, -0.64, now },
                new object[] { "General Electric Company", 34.14, -0.08, -0.23, now },
                new object[] { "General Motors Corporation", 30.27, 1.09, 3.74, now },
                new object[] { "Hewlett-Packard Co.", 36.53, -0.03, -0.08, now },
                new object[] { "Honeywell Intl Inc", 38.77, 0.05, 0.13, now },
                new object[] { "Intel Corporation", 19.88, 0.31, 1.58, now },
                new object[] { "International Business Machines", 81.41, 0.44, 0.54, now },
                new object[] { "Johnson & Johnson", 64.72, 0.06, 0.09, now },
                new object[] { "JP Morgan & Chase & Co", 45.73, 0.07, 0.15, now },
                new object[] { "McDonald's Corporation 99", 36.76, 0.86, 2.40, now },
                new object[] { "Merck & Co., Inc.", 40.96, 0.41, 1.01, now },
                new object[] { "Microsoft Corporation", 25.84, 0.14, 0.54, now },
                new object[] { "Pfizer Inc", 27.96, 0.4, 1.45, now },
                new object[] { "The Coca-Cola Company", 45.07, 0.26, 0.58, now },
                new object[] { "The Home Depot, Inc.", 34.64, 0.35, 1.02, now },
                new object[] { "The Procter & Gamble Company", 61.91, 0.01, 0.02, now },
                new object[] { "United Technologies Corporation", 63.26, 0.55, 0.88, now },
                new object[] { "Verizon Communications", 35.57, 0.39, 1.11, now },
                new object[] { "Wal-Mart Stores, Inc.", 45.45, 0.73, 1.63, now }
            };
        }


        public IActionResult OnPostRefreshGrid()
        {
            return this.Direct(GridData);
        }
    }
}

Thank you for your support very much.

[fabricio.murta]

Hello again, Mr. Huang!

it seems not working and reply null object reference for Ext.Net class v7.3.
So I use App.gridStore1.setData(Ext.decode(response.respons eText).result) instead.

Three Simple source codes for your reference to test gridpanel refreshing (reload store).

I can't seem to find where you are using the stated code in the sample code you shared. The sample itself is fine and is how we could run and advise on what we meant in the last post. I see it's based in the GridPanel > Paging and Sorting > Local Paging example, implements an OnPostRefreshGrid, but there's nothing in the page code that ever triggers the event.

Maybe you mistook the files or something like that?

In a general sense, you have several ways to refresh a grid.

One of them is by assigning a reader proxy to the grid. This example uses one: Grid Panel > Paging and Sorting > Page, albeit it goes a bit farther and uses also remote paging -- that is, fetches the exact page contents instead of fetching all data at once and letting the client do the paging.

Another way is to use a direct event (or method), that can be initiated by other component (like a button click, or a drop-down choice), that will bring back the data and reload the grid with it. Just like the Grid Panel > Miscellaneous > Refresh Store example.

Perhaps you mixed up a bit the two concepts and tried to use store refresh (that uses the reader proxy) with the Refresh Store example above, to trigger an update?

If that's the case, your thinking makes a lot of sense, but internally, what the paging toolbar's refresh button (the last button in the paging toolbar) does is:

1. calls the grid store's refresh method
2. the grid store will check it's reader proxy
3. if it's a memory proxy, it just pulls what is currently loaded client side; if it's an ajax proxy, it fetched from the ajax proxy set up (not from a direct event!)
4. from the returned data (from memory, or from server response if ajax), it will re-populate the grid with the new data.

In other words, it relies in the grid store's reader proxy.

In contrast, the direct event approach skips some steps and adds others:

1. calls the direct event straight up, triggered by interaction with (potentially) any component in the page
2. from the response received from server (the data) it will re-populate the grid, regardless of its proxy, reader, etc, by basically calling said store's reload() method.

In the end, if you use the direct event approach, and add the paging toolbar, it will just do nothing as it will be refreshing data from the grid store's "in-memory" data (reader proxy).

Did this clear out a bit of your questions? Perhaps you just uploaded the wrong code files and I made all this story about grid data refresh for no use?..

Looking forward to your follow-up!

[JohnsonHuang]

Hi Fabricio & all Support:

User's reply as below:

Thank you for taking lot time to describe so many detail description in the reply.


But as users the best appreciated work is to put some example code for our reference.


Our purpose and requirement is very simple, it is to design a paging gridpanel and at the server side modify or delete some rows of gridpanel store data , then return the result and refresh the gridpanel data.


I think it is the most general code designed the users will do.

Your example code will be appreciated.