I want to create a dropdown on each row of the grid like the one shown in the picture. However, the action links are not rendering in a proper way. What could I do? enter image description here
This is how I have tried it:
@(
Html.Grid(Model).Build(columns =>
{
columns.Add(m => m.ProjectName).Titled("Project");
columns.Add(m => m.DocumentName).Titled("Document Name");
columns.Add(m => m.DocumentType).Titled("Document Type");
columns.Add(m => m.DocumentSection).Titled("Document Section");
columns.Add(m => Html.ActionLink(" View More", "ViewMore", "Documents", new { id = m.DocumentID }, new { @class = "btn btn-warning" }));
columns.Add(m => Html.ActionLink(" Download", "DownloadFiles", "Documents", new { id = m.DocumentName }, new { @class = "btn btn-primary" }));
**columns.Add(m => Html.ActionLink(" Back to Project", "Index", "ProjectDetails", new { id = m.ProjectNumber }, new { @class = "btn btn-secondary" }));
columns.Add(m => $"<div class=\"dropdown\"><a class=\"btn btn-secondary dropdown-toggle\" href=\"#\" role=\"button\" id=\"dropdownMenuLink\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">Actions</a><ul class=\"dropdown-menu\" aria-labelledby=\"dropdownMenuLink\"><li><a class=\"dropdown-item\" href=\"#\">{Html.ActionLink(" View More", "ViewMore", "Documents", new { id = m.DocumentID }, new { @class = "btn btn-warning" })}</a></li><li><a class=\"dropdown-item\" href=\"#\">{Html.ActionLink(" Download", "DownloadFiles", "Documents", new { id = m.DocumentName }, new { @class = "btn btn-primary" })} </a></li> <li><a class=\"dropdown-item\" href=\"#\">{Html.ActionLink(" Back to Project", "Index", "ProjectDetails", new { id = m.ProjectNumber }, new { @class = "btn btn-secondary" })}</a></li></ul></div>").Encoded(false);**
}).Pageable(pager =>
{
pager.PageSizes = new Dictionary<Int32, String> { { 0, "All" }, { 5, "5" }, { 10, "10" } };
pager.ShowPageSizes = true;
pager.CurrentPage = 1;
pager.RowsPerPage = 5;
})
)