Open Closed

Actions column data is not showing while adding a new row on click event #877


User avatar
0
nurul.talukder created
  • ABP Framework version: v3.3.2
  • UI type: MVC
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Seperated (Angular): yes
  • Exception message and stack trace:
  • Steps to reproduce the issue: Hi I am trying to create a new row in the datatable each time when a button is clicked. The new row data will contain a action button with delete action only (it can be either a single button with delete text or actions button with dropdown options as shown in the tutorial). I can add other data on button click, but the action column data is not showing.

I have written the following script code to add row on click event

$('#AddAchievementsButton').on('click', function (e) {
        e.preventDefault();

        var selectedQual = qualSelect.select2('data');

        var achievementRegId = selectedQual[0].id;

        ///adding a single row in the datatable
        achievementRegisterService.getWithNavigationProperties(achievementRegId)
            .then(function (result) {
                //console.log(result);
                //console.log(result.achievementType.name);
                
                qualListTable.row.add(
                    [
                        {
                            rowAction: {
                                items:
                                    [
                                        {
                                            text: l("Edit"),
                                            action: function (data) {
                                                editModal.open({ id: data.record.id });
                                            }
                                        },
                                        {
                                            text: l("Delete"),
                                            confirmMessage: function () {
                                                return l("DeleteConfirmationMessage");
                                            },
                                            action: function (data) {
                                                organisationService.delete(data.record.id)
                                                    .then(function () {
                                                        abp.notify.info(l("SuccessfullyDeleted"));
                                                        dataTable.ajax.reload();
                                                    });
                                            }
                                        }
                                    ]
                            }
                        }, // not sure how to add a delete button in this column
                        result.achievementType.name,
                        result.achievementRegister.code,
                        result.achievementRegister.name,
                        result.provider.name
                    ]
                ).draw(false);
        });

The output it is showing is like below:

The same Action button is working in other places. I tried to follow ABP tutorial from this link: https://docs.abp.io/en/abp/latest/UI/AspNetCore/Data-Tables.

Please help me to solve the issue.


8 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    I think you should initialize a table with columnDefs. Then add new rows .

  • User Avatar
    0
    nurul.talukder created

    Hi I tried to do that as well, but no luck. May be I am not doing it correctly. Here is the code I tried earlier:

    ` var qualListTable = $("#programmeQualificationTable").DataTable(
            {
                processing: true,
                //serverSide: true,
                paging: true,
                //searching: false,
                scrollY: '50vh',
                autoWidth: true,
                scrollCollapse: true,
                columnDefs: [
                    {
                        title: l('Actions'),
                        rowAction: {
                            items:
                                [
                                    {
                                        text: l('Delete'),
                                        action: function (data) {
                                            ///...
                                        }
                                    }
                                ]
                        },
    
                    },
                    {
                        title: l("Type")
                    },
                    {
                        title: l('Code')
                    },
                    {
                        title: l('Name')
                    },
                    {
                        title: l('Version')
                    }
                ]
            }
        );`
    

    If Possible please share an example.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    You can try this https://stackoverflow.com/questions/55215216/datatables-row-add-based-on-columns?answertab=active#tab-top

    If you still can't solve your problem, you can send me a simple project. liming.ma@volosoft.com

  • User Avatar
    0
    nurul.talukder created

    hi

    You can try this https://stackoverflow.com/questions/55215216/datatables-row-add-based-on-columns?answertab=active#tab-top

    If you still can't solve your problem, you can send me a simple project. liming.ma@volosoft.com

    I am half successful to add a button in the row but still could not figure out how to add the Action Column using ColumnDef. I will share a sample project soon.

    Thanks for your support.

  • User Avatar
    0
    alper created
    Support Team Director

    I think if you redraw the datatables fnRowCallback will be executed and it renders rowActions https://github.com/abpframework/abp/blob/1ccf95f161372353e2ee6027d983739e6b9fb12b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared/wwwroot/libs/abp/aspnetcore-mvc-ui-theme-shared/datatables/datatables-extensions.js#L270

  • User Avatar
    0
    nurul.talukder created

    Hi Alper I have successfully added the Actions button in each row while creating new entries. Here is the code i am using:

    var table = $('#selectedQualTable').DataTable({
            processing: true,
            paging: true,
            searching: false,
            scrollX: true,
            autoWidth: true,
            scrollCollapse: true,
            select: "single",
            "columns": [
                {
                    title: l('Actions'),
                    "defaultContent": "",
                    rowAction: {
                        items:
                            [
                                {
                                    text: l('Edit'),
                                    action: function (data) {
                                        //TODO: Open a modal to edit the book
                                    }
                                },
                                {
                                    text: l('Delete'),
                                    action: function (data) {
                                        // Actions for Delete
                                    }
                                }
                            ]
                    }
                },
                {
                    "title": "Type",
                    "data": "Type"
                },
                {
                    "title": "Code",
                    "data": "Code"
                },
                {
                    "title": "Name",
                    "data": "Name"
                },
                {
                    "title": "Version",
                    "data": "Version"               
                },
                {
                    "title": l("HowToAchieve"),
                    "data": "HowToAchieve"                
                }
        ],
            "order": [[1, 'asc']]
        });
        
        //code for filling up the row and add to Datatable
        achievementRegisterService.getWithNavigationProperties($achievementRegId)
                .then(function (result) {
    
                    table.row.add({
                        "Type": result.achievementType.name,
                        "Code": result.achievementRegister.code,
                        "Name": result.achievementRegister.name,
                        "Version": $version,
                        "HowToAchieve": $howToAchieve
                    }).draw(false);
                });
    

    By the way, I am trying to render two Select2 dropdowns in the 'Version' and 'HowToAchieve' column. and will load the available versions and howToAchieve options while creating new row. Any idea or sample code for that would be appreciated.

    Thanks again for your help!

  • User Avatar
    0
    alper created
    Support Team Director

    in your case the best practise is making the datatable row partial view and after adding a new row, rendering the partial view from host. but you didn't choose this way, and if you keep on your way, I can suggest you the alternative implementation:

    • add a custom attribute to your Version component . eg: <select id='version' data-rendered='0'></select>
    • add a custom attribute to your HowToAchieve component . eg: <select id='HowToAchieve' data-rendered='0'></select>
    • after datatable add row completes, run a JavaScript code to find all data-rendered=0 elements and make an ajax request to populate these components.

    as your main question is answered I'm closing the question. thank you

  • User Avatar
    0
    nurul.talukder created

    Thanks for your suggestion.

    Can you please refere any links for implementing partial view in ABP?

    Thanks and regards

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11