Returning to any list after searching and editing 1 item - search information lost

6 months ago
Is there any way to fix this?

Scenario:
Search for customer last name Zero. Click edit  for customer 123 zero.
review customer information. No changes made
Now I want to return to the customer list and go to customer 456 zero so I click the back arrow.

Entire customer list is reloaded.

I repeat the search. click edit for customer 456 zero.
no changes made.
This time I click return to customer list

Again entire customer list is reloaded.

Is there any configuration changes that can be made for 1 of these either "back button" or "return to customer list" to reload the customer page with the search results?
6 months ago
Shift-click the Edit button to open a new window.  Or, Ctrl-click for a new tab.  Close window (tab) to get back to search results   ;)
6 months ago
I would like to have this working too, so I went down the rabbit hole.

checkout:
https://datatables.net/examples/basic_init/state_save.html

However, you can't just do something like this because you can't re-initialize the datatable after it's rendered:

$(document).ready(function() {
    $('#orders-grid').DataTable( {
        stateSave: true
    } );
} );


which will lead you to try something like this:
https://datatables.net/manual/tech-notes/3

Which I couldn't get working either, so to do it right we probably have to extend Nop.Web.Framework\Models\Datatables\DataTablesModel.cs

I created Nop.Web.Framework\Models\Datatables\Extensions\DataTablesModelExtension.cs:

namespace Nop.Web.Framework.Models.DataTables
{
    /// <summary>
    /// Represents base DataTables extension model
    /// </summary>
    public partial class DataTablesModel
    {
        /// <summary>
        /// Feature control DataTables' stateSave mode
        /// </summary>
        public bool StateSave { get; set; } = false;
    }
}


And add to: Nop.Web\Areas\Admin\Views\Shared\_Table.Definition.cshtml

@if (Model.StateSave)
{
    <text>
        stateSave: @Model.StateSave.ToString().ToLower(),
    </text>
}


Then you can add "StateSave = true" to the Datatable initialization in something like Presentation\Nop.Web\Areas\Admin\Views\Order\List.cshtml:

                          var gridModel = new DataTablesModel
                            {
                                Name = "orders-grid",
                                UrlRead = new DataUrl("OrderList", "Order", null),
                                SearchButtonId = "search-orders",
                                StateSave = true,
                                Length = Model.PageSize,
                                LengthMenu = Model.AvailablePageSizes,
                                blah blah blah...



And you will see it begin to allocate the state in local storage.  However, to truly get it saving state the stateSaveParams and stateLoadParams need to be handled, which I don't have working yet.

Refs:
https://datatables.net/reference/event/stateSaveParams
https://datatables.net/reference/option/stateLoadParams

Tried this, but it doesn't work because I'm assuming the table needs to be initialized with the callbacks, rather than after the page is rendered.

$(document).ready(function() {
                                $('#orders-grid')
                                    .dataTable()
                                    .on('stateSaveParams.dt', function (e, settings, data) {
                                        data.StartDate = $('#@Html.IdFor(model => model.StartDate)').val();
                                        data.EndDate = $('#@Html.IdFor(model => model.EndDate)').val();
                                        data.OrderStatusIds = $('#@Html.IdFor(model => model.OrderStatusIds)').val();
                                        data.PaymentStatusIds = $('#@Html.IdFor(model => model.PaymentStatusIds)').val();
                                        data.ShippingStatusIds = $('#@Html.IdFor(model => model.ShippingStatusIds)').val();
                                        data.StoreId = $('#@Html.IdFor(model => model.StoreId)').val();
                                        data.VendorId = $('#@Html.IdFor(model => model.VendorId)').val();
                                        data.WarehouseId = $('#@Html.IdFor(model => model.WarehouseId)').val();
                                        data.BillingEmail = $('#@Html.IdFor(model => model.BillingEmail)').val();
                                        data.BillingPhone = $('#@Html.IdFor(model => model.BillingPhone)').val();
                                        data.BillingLastName = $('#@Html.IdFor(model => model.BillingLastName)').val();
                                        data.BillingCountryId = $('#@Html.IdFor(model => model.BillingCountryId)').val();
                                        data.PaymentMethodSystemName = $('#@Html.IdFor(model => model.PaymentMethodSystemName)').val();
                                        data.ProductId = $('#@Html.IdFor(model => model.ProductId)').val();
                                        data.OrderNotes = $('#@Html.IdFor(model => model.OrderNotes)').val();
                                    });

                                 $('#orders-grid')
                                    .dataTable()
                                    .on('stateLoadParams.dt', function (e, settings, data) {
                                        $('#@Html.IdFor(model => model.StartDate)').val(data.StartDate);
                                        $('#@Html.IdFor(model => model.EndDate)').val(data.EndDate);
                                        $('#@Html.IdFor(model => model.OrderStatusIds)').val(data.OrderStatusIds);
                                        $('#@Html.IdFor(model => model.PaymentStatusIds)').val(data.PaymentStatusIds);
                                        $('#@Html.IdFor(model => model.ShippingStatusIds)').val(data.ShippingStatusIds);
                                        $('#@Html.IdFor(model => model.StoreId)').val(data.StoreId);
                                        $('#@Html.IdFor(model => model.VendorId)').val(data.VendorId);
                                        $('#@Html.IdFor(model => model.WarehouseId)').val(data.WarehouseId);
                                        $('#@Html.IdFor(model => model.BillingEmail)').val(data.BillingEmail);
                                        $('#@Html.IdFor(model => model.BillingPhone)').val(data.BillingPhone);
                                        $('#@Html.IdFor(model => model.BillingLastName)').val(data.BillingLastName);
                                        $('#@Html.IdFor(model => model.BillingCountryId)').val(data.BillingCountryId);
                                        $('#@Html.IdFor(model => model.PaymentMethodSystemName)').val(data.PaymentMethodSystemName);
                                        $('#@Html.IdFor(model => model.ProductId)').val(data.ProductId);
                                        $('#@Html.IdFor(model => model.OrderNotes)').val(data.OrderNotes);
                                    });
});



Looking into further extending DataTablesModels.cs with the callback functions, similar to how it does the FooterCallback but it will take more work.  If I make a breakthrough I will update.  Maybe someone way more familiar with Datatables than I can point us in the right direction.


namespace Nop.Web.Framework.Models.DataTables
{
    /// <summary>
    /// Represents base DataTables model
    /// </summary>
    public partial class DataTablesModel
    {
        /// <summary>
        /// Feature control DataTables' stateSave mode
        /// </summary>
        public bool StateSave { get; set; } = false;

        /// <summary>
        /// Gets or sets state save params function name(js)
        /// See also https://datatables.net/reference/option/stateSaveParams
        /// </summary>
        public string StateSaveParams { get; set; }

        /// <summary>
        /// Gets or sets state load params function name(js)
        /// See also https://datatables.net/reference/option/stateLoadParams
        /// </summary>
        public string StateLoadParams { get; set; }
    }
}
6 months ago
Got it working.

Extend DataTables.cs

Nop.Web.Framework\Models\DataTables\Extensions\DataTablesModelExtension.cs


namespace Nop.Web.Framework.Models.DataTables
{
    /// <summary>
    /// Represents base DataTables model
    /// </summary>
    public partial class DataTablesModel
    {
        /// <summary>
        /// Feature control DataTables' stateSave mode
        /// </summary>
        public bool StateSave { get; set; } = false;

        /// <summary>
        /// Gets or sets state save params function name(js)
        /// See also https://datatables.net/reference/option/stateSaveParams
        /// </summary>
        public string StateSaveParams { get; set; }

        /// <summary>
        /// Gets or sets state save params function name(js)
        /// See also https://datatables.net/reference/option/stateLoadParams
        /// </summary>
        public string StateLoadParams { get; set; }
    }
}


add to: Nop.Web\Areas\Admin\Views\Shared\_Table.Definition.cshtml


@if (Model.StateSave)
{
    <text>
        stateSave: @Model.StateSave.ToString().ToLower(),
    </text>
}
@if (!string.IsNullOrEmpty(Model.StateSaveParams))
{
    <text>
        stateSaveParams: function (settings, data) {
        return @(Model.StateSaveParams)(settings, data);
        },
    </text>
}
@if (!string.IsNullOrEmpty(Model.StateLoadParams))
{
    <text>
        stateLoadParams: function (settings, data) {
        return @(Model.StateLoadParams)(settings, data);
        },
    </text>
}


Then in a List.cshtml with a datatable, initialize like this:



var gridModel = new DataTablesModel
                            {
                                Name = "orders-grid",
                                UrlRead = new DataUrl("OrderList", "Order", null),
                                SearchButtonId = "search-orders",
                                StateSave = true,
                                StateSaveParams = "stateSaveParams",
                                StateLoadParams = "stateLoadParams",

                                Length = Model.PageSize,
                                LengthMenu = Model.AvailablePageSizes,
                                FooterCallback = !Model.IsLoggedInAsVendor ? "ordersfootercallback" : null,
                                FooterColumns = !Model.IsLoggedInAsVendor ? 11 : 0,
                                Filters = new List<FilterParameter>


and add javascript:

                           function stateSaveParams(settings, data) {
                                data.StartDate = $('#@Html.IdFor(model => model.StartDate)').val();
                                data.EndDate = $('#@Html.IdFor(model => model.EndDate)').val();
                                data.OrderStatusIds = $('#@Html.IdFor(model => model.OrderStatusIds)').val();
                                data.PaymentStatusIds = $('#@Html.IdFor(model => model.PaymentStatusIds)').val();
                                data.ShippingStatusIds = $('#@Html.IdFor(model => model.ShippingStatusIds)').val();
                                data.StoreId = $('#@Html.IdFor(model => model.StoreId)').val();
                                data.VendorId = $('#@Html.IdFor(model => model.VendorId)').val();
                                data.WarehouseId = $('#@Html.IdFor(model => model.WarehouseId)').val();
                                data.BillingEmail = $('#@Html.IdFor(model => model.BillingEmail)').val();
                                data.BillingPhone = $('#@Html.IdFor(model => model.BillingPhone)').val();
                                data.BillingLastName = $('#@Html.IdFor(model => model.BillingLastName)').val();
                                data.BillingCountryId = $('#@Html.IdFor(model => model.BillingCountryId)').val();
                                data.PaymentMethodSystemName = $('#@Html.IdFor(model => model.PaymentMethodSystemName)').val();
                                data.ProductId = $('#@Html.IdFor(model => model.ProductId)').val();
                                data.OrderNotes = $('#@Html.IdFor(model => model.OrderNotes)').val();
                            }

                            function stateLoadParams(settings, data) {
                                $('#@Html.IdFor(model => model.StartDate)').val(data.StartDate);
                                $('#@Html.IdFor(model => model.EndDate)').val(data.EndDate);
                                $('#@Html.IdFor(model => model.OrderStatusIds)').val(data.OrderStatusIds);
                                $('#@Html.IdFor(model => model.PaymentStatusIds)').val(data.PaymentStatusIds);
                                $('#@Html.IdFor(model => model.ShippingStatusIds)').val(data.ShippingStatusIds);
                                $('#@Html.IdFor(model => model.StoreId)').val(data.StoreId);
                                $('#@Html.IdFor(model => model.VendorId)').val(data.VendorId);
                                $('#@Html.IdFor(model => model.WarehouseId)').val(data.WarehouseId);
                                $('#@Html.IdFor(model => model.BillingEmail)').val(data.BillingEmail);
                                $('#@Html.IdFor(model => model.BillingPhone)').val(data.BillingPhone);
                                $('#@Html.IdFor(model => model.BillingLastName)').val(data.BillingLastName);
                                $('#@Html.IdFor(model => model.BillingCountryId)').val(data.BillingCountryId);
                                $('#@Html.IdFor(model => model.PaymentMethodSystemName)').val(data.PaymentMethodSystemName);
                                $('#@Html.IdFor(model => model.ProductId)').val(data.ProductId);
                                $('#@Html.IdFor(model => model.OrderNotes)').val(data.OrderNotes);
                            }