ASPNETZERO - How to change index page to render tiles instead of table

Question

I currently have a normal ASPNETZERO index page, which renders a datatable grid with search fuctions. I want to change this view to render "tiles" for each row in the grid. I already have the CSS/HTML for rendering tiles working. I basically want to repurpose the below index.js code to render my tiles, instead of the datatable grid.

(function () {
$(function () {
    var _$companyTable = $('#companyTable');
    var _companyService = abp.services.app.company;

    var _permissions = {
        create: abp.auth.hasPermission('Pages.Tenant.Administration.Company.Create'),
        edit: abp.auth.hasPermission('Pages.Tenant.Administration.Company.Edit'),
        impersonation: abp.auth.hasPermission('Pages.Tenants.Impersonation'),
    };

    var _createModal = new app.ModalManager({
        viewUrl: abp.appPath + 'Nursing/Company/CreateModal',
        scriptUrl: abp.appPath + 'view-resources/Areas/Nursing/Views/Company/_CreateModal.js',
        modalClass: 'CreateCompanyModal'
    });

    var _editModal = new app.ModalManager({
        viewUrl: abp.appPath + 'Nursing/Company/EditModal',
        scriptUrl: abp.appPath + 'view-resources/Areas/Nursing/Views/Company/_EditModal.js',
        modalClass: 'EditCompanyModal'
    });

    var dataTable = _$companyTable.DataTable({
        paging: true,
        serverSide: true,
        processing: true,
        responsive: true,
        listAction: {
            ajaxFunction: _companyService.getCompanies,
            inputFilter: function () {
                return {
                    filter: $('#CompanyTableFilter').val()
                };
            }
        },
        columnDefs: [
            {
                targets: 0,
                data: null,
                orderable: false,
                autoWidth: true,
                defaultContent: '',
                rowAction: {
                    cssClass: 'btn btn-xs btn-primary blue',
                    text: '<i class="fa fa-cog"></i> ' + app.localize('Actions') + ' <span class="caret"></span>',
                    items: [{
                        text: app.localize('Edit'),
                        visible: function () {
                            return _permissions.edit;
                        },
                        action: function (data) {
                            _editModal.open({ id: data.record.id });
                        }
                    }]
                }
            },
            {
                targets: 1,
                orderable: true,
                autoWidth: true,
                data: "companyName"
            },
            {
                targets: 2,
                orderable: true,
                autoWidth: true,
                data: "companyLegalName"
            },
            {
                targets: 3,
                autoWidth: true,
                data: "companyTaxID"
            },
            {
                targets: 4,
                orderable: true,
                autoWidth: true,
                data: "currency"
            }
        ]
    });


    function getCompanies() {
        dataTable.ajax.reload();
    }

    $('#CreateNewCompanyButton').click(function (e) {
        _createModal.open();
    });

    $('#GetCompaniesButton').click(function (e) {
        e.preventDefault();
        getCompanies();
    });

    abp.event.on('app.editCompanyModalSaved', function () {
        getCompanies(true);
    });

    abp.event.on('app.createCompanyModalSaved', function () {
        getCompanies(true);
    });

    $('#CompanyTableFilter').focus();

});

How can I change the JS code above to render my tiles instead of the datatable? I also want to retain the search function for the tiles. The app service method GetCompanies used in the JS code above works for rendering my tiles. So that API call will remain the same.

Here is the output I want to achieve from the above JS code.

Here is the current standard ABP index page view. I want to replace this with above tiles.

Answer 1

I figured out a solution. I changed the index.js code by adding the method shown below. I'm using an AJAX call to the API method and then using the results to render my tiled output. This is working for me. If anyone sees any issues with this approach, please do let me know.

        function getCompanies() {
        $.ajax({
            type: 'GET',
            url: '/api/services/app/Company/GetCompanies',
            dataType: 'json',
            success: function (companies) {
                var _tileHtml = "";
                //Iterate thru JSON list of values
                $.each(companies.result.items, function (i, company) {
                    //Tile content start
                    _tileHtml = "<div class='SingleTileContent inline-block'>";
                    //Header
                    _tileHtml += "<div class='Tile-header'>";
                    _tileHtml += "<div class='pull-left inline-block'>";
                    _tileHtml += "<div class='badge badge-info'>" + company.id + "</div>";
                    _tileHtml += "</div>";
                    _tileHtml += "<div class='pull-left inline-block text-bold'> | " + company.companyName + "</div>";
                    _tileHtml += "</div>";
                    //Body start
                    _tileHtml += "<div class='Tile-body text-left'>";
                    //Body row
                    _tileHtml += "<div class='Tile-body-detail'>";
                    _tileHtml += "<label>Legal Name</label> " + company.companyLegalName + "</div>";
                    //Body row
                    _tileHtml += "<div class='Tile-body-detail'>";
                    _tileHtml += "<label>Tax Id</label> " + company.companyTaxID + "</div>";
                    //Body end
                    _tileHtml += "</div>";
                    //Buttons (footer)
                    _tileHtml += "<div class='Tile-buttons'>";
                    _tileHtml += "<a href='javascript:;' class='btn btn-xs blue btnEdit' id='EditCompanyButton'>Edit<i class='fa fa-edit'></i></a>";
                    _tileHtml += "</div>";
                    //Tile content end
                    _tileHtml += "</div>";
                    $("#TestJS2").append(_tileHtml);

                });
                Count = 0;
            },
            error: function (ex) {
                abp.notify.error('Failed to retrieve companies' + ex);
            }
        });
    }