not working with my partial view mvc grid

mattcrossette

sorry for the crappy formatting. I don't get how this thing works to post this in a more readable way so I will just type it out and however it comes through is what we get unfortunately.

my grid in my partial view:

@(Html
    .Grid(Model.NewLeads)
    .Named("NewLeads")
    .Build(columns =>
    {
        if (Model.LeadFields.Count > 0) {
            foreach(var leadfield in Model.MyFields) {
                NonfactorsGridHelper.BuildGrid(columns, myfield.Field);
            }
        } else {
            columns.Add(c => c.RecordCreatedAt).Titled("Created Time");
            columns.Add(c => c.Name).Titled("Name");
            columns.Add(c => c.Email).Titled("Email");
            columns.Add(c => c.Phone).Titled("Phone");
        }

    })
    .Using(GridFilterMode.Header)
    .Empty("No data found")
    .Filterable()
    .Sortable()
    .RowAttributed(model => new { data_id = model.Id })
    .Attributed(new { id = "myTable" })

)

*******Code in my Index page that calls my grid************

<div id="myGrid">
    @Html.AjaxGrid(Url.Action("_myPartialView"))
    </div>

---

all these are added to my site:

<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" />

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" crossorigin="anonymous"></script>

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>

---

I've tried adding the code below to both the index page and directly on the partial view page. neither works. what am i doing wrong?

<script>
    $(document).ready(function () {
        $('#myTable').DataTable();
    });
</script>

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide - note, backquotes should be on a newline.

kthorngren

I've tried adding the code below to both the index page and directly on the partial view page. neither works. what am i doing wrong?

Please provide details of what happens.. Do you get errors in the browser's console or alert message?

Probably the best thing to do si post a link to your page or a test case replicating the issues so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

mattcrossette

@kthorngren you're assuming there are more details than I have already provided. there aren't. my grid works fine, there are no error messages in the code or console. i simply want to get the jquery data tables to work with it. I cannot post a link to my page because 1) it is not live yet
and
2) it requires user login to view sensitive data.

kthorngren

Simply saying it doesn't work doesn't give us any hints to help with suggestions. Maybe you can use view source then take that to provide a test case so we can see what you have.

Kevin

mattcrossette

@kthorngren it does not do anything. it's supposed to add pagination and a search bar etc. it doesn't do that. If I build a table from scratch with html and test it will work fine, but when I am trying to access it from my partial view with a grid built by the code it does not work. surely I am not the only one that has ever had this problem, but in all my searches every example shows a table built from scratch. I'm pretty sure that is part of the problem, but I don't know why that wouldn't work since the code builds the table in the expected structure including adding the Id to the "

<

table>" tag needed for the function.

mattcrossette

@kthorngren it doesn't add the search box and pagination etc that you would expect. If I build a table from scratch I can get it to work just fine, but having my code dynamically build the table it no longer works. the table works fine, but no search or pagination etc. Surely I'm not the only one that has ever had this problem. In all my searching I can only find examples where the table has been built from scratch with html. How do I implement this if the table was built with the mvc grid builder?

kthorngren

Sorry I'm not familiar with MVC. Maybe someone else who is will have some ideas. Based on what I've seen your code snippets should work. I would start by inspecting the HTML table to make sure it has the thead and tbody that Datatables requires. See the HTML Reqs docs. Next make sure the id of myTable is applied.

If the table looks good then make sure $('#myTable').DataTable(); is executed after the table is built. Validate the CSS and JS includes you have are being loaded. Use the browser's debugger or console.log statements to make sure $('#myTable').DataTable(); is executed.

Kevin

kthorngren

Also you probably don't need things like:

.Filterable()
.Sortable()

Since Datatables does this. It may cause conflicts with Datatables sorting and searching.

Kevin

mattcrossette

@kthorngren thanks for all your responses... I removed all of my style sheets and it is now sort of working... have to go through now and find what's breaking it as I add stuff back. One weird thing though is it is now affecting all my grids and not just the table Id I pass through it. any thoughts on that?

kthorngren

Sorry but I don't understand why you are removing the style sheets. Not sure how using a unique ID would affect all the grids. As I said we will need to see what you are doing to help debug. Please post a link to a test case showing the issues.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Did you try any of the suggestions I provided?

Kevin