Abp: AJAX DataTable Filter - Best practice in ABP.IO

[SLTsoftware]

Hi

I have a table created and filled with abp.libs.datatables.createAjax method.

Now, I have an AppService with two Methods:

GetList (this is the default CRUD from Framework)
GetListForProductAsync (GUID productID) (Needs a GUID to filter data=

Method "GetListForProductAsync" will return a list of components for a product.

How I can do that with DataTables? I really need Server-Side Filter/Search, because there will be many items.

Thanks a lot!

Regards, Hrvoje

[djlaney3]

I am also looking for this solution. My app service function signature matches GetList so it can handle the paging and sorting. I just need to be able to pass or filter by the AbpUserId.

[ismcagdas]

You can try inputAction function, see https://github.com/abpframework/abp/blob/master/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/datatables/datatables-extensions.js#L278

Something like this;

ajax: abp.libs.datatables.createAjax(_identityUserAppService.getList, function(){
    return {id : 1};
}),

[SLTsoftware]

Hi ismcagdas

Thanks you for this fast answer. I have seen your linked extensions code, but I can't findout why it is not working with my code.

In my browser network tab I see an object passing to the url instead of the value itself:
http://localhost:53929/api/app/productComponent/forProduct/[object%20Object]

When I call the url manually it work, like this:
http://localhost:53929/api/app/productComponent/forProduct/d96c2173-e90e-4f18-b0e9-c28fe11dfb3e

This is the service method, I'm using the version with string becaus passing a Guid from Ajax seem to be a problem:

Not working with Guid:   public async Task<PagedResultDto<ProductComponentDto>> GetListForProductAsync(Guid productId)
Working with string:   public async Task<PagedResultDto<ProductComponentDto>> GetListForProductAsync(string productId)

This is my JQuery code in Details.js:

var dataTable = $('#ProductComponentsTable').DataTable(abp.libs.datatables.normalizeConfiguration({
        processing: true,
        serverSide: true,
        paging: false,
        searching: false,
        autoWidth: false,
        scrollCollapse: true,
        order: [[1, "asc"]],
        ajax: abp.libs.datatables.createAjax(ams.medicationManagement.medication.hospIndex.productComponents.productComponent.getListForProduct, function () {
            return { productid: 'd96c2173-e90e-4f18-b0e9-c28fe11dfb3e' };
        }),
        columnDefs: [
            { data: "cptLNo" },
            { data: "galF" }
        ]
    }));

Am I too stupid for that?

Regards, Hrvoje

[ismcagdas]

what happens when you return return 'd96c2173-e90e-4f18-b0e9-c28fe11dfb3e'; instead of return { productid: 'd96c2173-e90e-4f18-b0e9-c28fe11dfb3e' }; ?

[SLTsoftware]

Hi ismcagdas

You are awesome!!!! That's it!

No I have this…

Service method:
public async Task<PagedResultDto<ProductComponentDto>> GetListForProductAsync(Guid productId)

JQuery script for table:

$('#ProductDetailsModal').on('shown.bs.modal', function () {
    var productId = $('#Id').val();
    var dataTable = $('#ProductComponentsTable').DataTable(abp.libs.datatables.normalizeConfiguration({
        processing: true,
        serverSide: true,
        paging: false,
        searching: false,
        autoWidth: false,
        scrollCollapse: true,
        order: [[0, "asc"]],
        ajax: abp.libs.datatables.createAjax(ams.medicationManagement.medication.hospIndex.productComponents.productComponent.getListForProduct, function () {
            return productId;
        }),
        columnDefs: [
            { data: "cptLNo" },
            { data: "galF" }
        ]
    }));
});

You guys are doing a great job and your support is great!

Greetings from Switzerland!
Hrvoje

[djlaney3]

Can we reopen? I have this working, but I need to pass in PagedAndSortedResultRequestDto input as well as a Guid, so I can also apply paging and sorting.

[ismcagdas]

@djlaney3 if you are using a Dto for your input, this should work for you https://github.com/abpframework/abp/issues/775#issuecomment-459613522

[djlaney3]

I was using PagedAndSortedResultRequestDto, but do I need to add my own with the same properties, plus the id I want to pass?
GetListByAbpUserIdAsync(PagedAndSortedResultRequestDto input, Guid abpUserId)

[ismcagdas]

@djlaney3 I'm not sure about this but if you create a new Dto inherited from PagedAndSortedResultRequestDto it will work.

[djlaney3]

@ismcagdas - you are correct. My final code was this:
public class PagedAndSortedByAbpUserIdDto : PagedAndSortedResultRequestDto
{
public virtual Guid AbpUserId { get; set; }
}

And then in js:
abp.libs.datatables.createAjax(xx.services.xx.getListByAbpUserId, function () { return { abpUserId: abpUserId }; })

Thank you!

[ismcagdas]

Great 😄 , I'm sure that datatables-extensions.js will be improved for the future.

[djlaney3]

one last question, should var query = CreateFilteredQuery(input); automatically filter based on my AbpUserId property value I am passing in? Or do I need to handle this?

[hitaspdotnet]

@ismcagdas I'm glad to see you at vNext project Sir. You and Mr hikalkan are awesome!
I'm waiting for my 18th birthday so then I can having traveling pass for joining any Volo team conferences 😋

[hitaspdotnet]

@djlaney3 Hold the crtl + click on CreateFilteredQuery, VS should navigate you to method body. Then if the method isn't your requirement you can override that or create your own. CreateFilteredQuery is a part of AsyncCrudApplicationService right?

[jakeuj]

one last question, should var query = CreateFilteredQuery(input); automatically filter based on my AbpUserId property value I am passing in? Or do I need to handle this?

override the CreateFilteredQuery method to apply custom filters.
custom filter