1) How to hide the Action column with the edit and delete button?

Go to TableHelper.cs > ClientTableConfig > set ShowActionColumn to false

2) Besides the edit and delete buttons on the Action column, how to add more custom buttons to the Action column?

The related code is in /Views/Home/_Table.cshtml. You can add more <a></a> links into @if (showActionColumn == true){}

3) How to change the default sorting?

Edit the DefaultSortOrder in ClientTableConfig. The screenshot below means that, by default, the table listing is sorted by the Name column in ascending order. If you want to sort by descending order by default, use -desc instead of -asc.

4) How to change the "Show 10 Records" page size options? For example, instead of "10, 25, 50, All", I want to change to "10, 20, 30, 40, 50, All".

Open to _Table.cshtml, original code is:

@await Html.PartialAsync("_TableLengthAndSearch", new TableLengthViewModel { Options = TableHelper.DefaultPageSizeOptions, SearchPlaceholder = ClientTableConfig.SearchMessage })

You can change to:

@await Html.PartialAsync("_TableLengthAndSearch", new TableLengthViewModel
   {
       Options =
        new List<SelectListItem>
        {
        new SelectListItem { Text = "Show 10 Records", Value = "10", Selected =  true  },
        new SelectListItem { Text = "Show 20 Records", Value = "20", Selected =  false },
        new SelectListItem { Text = "Show 30 Records", Value = "30", Selected =  false },
        new SelectListItem { Text = "Show 40 Records", Value = "40", Selected =  false },
        new SelectListItem { Text = "Show 50 Records", Value = "50", Selected = false },
        new SelectListItem { Text = "Show All", Value = "-1", Selected = false }
        },
       SearchPlaceholder = ClientTableConfig.SearchMessage
   })

5) How to change the "Search..." placeholder?

Go to Helpers > TableHelper.cs > ClientTableConfig > change the value for "SearchMessage"

6) How to change the exported file's file name?

Change the "data-filename" value in /Views/Home/Index.cshtml

By default, system will append date time string after the "data-filename" value. You can remove the date time string in wwwroot/js/auratheme.table.js.

7) How to change column orders?

You can change the order of TableColumns in ClientTableConfig. For example, from the code below, the table will render the columns in this order: Name, Email and Notes.

public static readonly List<ColumnHeader> TableColumns = new List<ColumnHeader>() {
    new ColumnHeader { Title = nameof(ClientViewModel.Name), Sortable = true,Exportable=true  },
    new ColumnHeader { Title = nameof(ClientViewModel.EmailAddress), Sortable = true ,Exportable=true },
    new ColumnHeader { Title = nameof(ClientViewModel.Notes), Sortable = true ,Exportable=true }
};

If you change to the code below, the table will render the columns in this order: Email, Name and Notes.

public static readonly List<ColumnHeader> TableColumns = new List<ColumnHeader>() {
     new ColumnHeader { Title = nameof(ClientViewModel.EmailAddress), Sortable = true ,Exportable=true },
    new ColumnHeader { Title = nameof(ClientViewModel.Name), Sortable = true,Exportable=true  },
    new ColumnHeader { Title = nameof(ClientViewModel.Notes), Sortable = true ,Exportable=true }
};

8) How to dynamically display the content in a column?

Go to /Views/Home/_Table.cshtml. Find the code below:

@foreach (var column in CrudElite.Helpers.ClientTableConfig.TableColumns)
{
    <td class="d-block d-lg-table-cell py-2 py-lg-3">@item.GetType().GetProperty(column.Title)?.GetValue(item, null)</td>
}

Let's say we want to display the "Name" column values in red if it's less than 5 characters and in yellow if it's more than 5 characters. You can change it to become like this:

if (column.Title == nameof(ClientViewModel.Name))
{
    <td class="d-block d-lg-table-cell py-2 py-lg-3 @(item.Name.Length>5?"text-warning":"text-danger")">@item.Name</td>
}
else
{
    <td class="d-block d-lg-table-cell py-2 py-lg-3">@item.GetType().GetProperty(column.Title)?.GetValue(item, null)</td>
}

9) How to change the title and description in deletion confirmation pop up modal?

Open /Views/Home/_Table.cshtml, find the part of code as shown in image below. Change the null, null into your title and description.

For example, before:

<a class="fw-bolder fs-4 lh-1 text-decoration-none" href="javascript:void(0)"
onclick="event.stopPropagation();openConfirmationModal('@GeneralHelper.EscapeQuotes(item.Name)',
   '@Url.Action("delete", new { id= item.Id})', null, null)">
   <i class="bi bi-trash3"></i>
</a>

After:

<a class="fw-bolder fs-4 lh-1 text-decoration-none" href="javascript:void(0)" onclick="event.stopPropagation();openConfirmationModal('@GeneralHelper.EscapeQuotes(item.Name)',
   '@Url.Action("delete", new { id= item.Id})', 'Are you sure to delete the client?', 'Please make sure the client can be deleted.')">
   <i class="bi bi-trash3"></i>
</a>

10) I edited the auratheme.table.js in wwwroot/js. But the changes are not reflected in the web application when running the project.

Please do the following.

open auratheme.table.min.js and remove the code inside
copy the code in auratheme.table.js, paste in Minify JavaScript - Free Online JS Minifier and Compressor (extendsclass.com)
Copy the minified js code and paste inside from the website and paste in auratheme.table.min.js

Alternatively, you can change to not use the minified js file from _Layout.cshtml.

Just change "~/js/auratheme.table.min.js" to "~/js/auratheme.table.js" in _Layout.cshtml.

0 comments

How to insert demo data for the CRUD project?

CRUD Operations in ASP.NET Core MVC

What you need to download and install before running ASP.NET Core MVC projects

Need Your Input! What ASP.NET Core MVC Project Should I Build Next?

Ever Attended a Progress Update Meeting in a Software Company?

See all posts from Aura Theme