Handling row selection from a simple grid using jquery and asp.net mvc

Question

Using a simple table and jquery, how would you manually handle selection on a simple table/grid using jquery?

Here's what I've tried. You could check it out or provide your own way of selection. If there's something better or something you know that works, you don't have to read mine. I'd be happy to learn how others are doing it.

So far, I've managed to add a gridrowselected class on the tr when the click event is called so that I'll know which row is currently selected. But I don't know how to pass the selected data back to the controller (or at least an index I placed on the row).

Using a grid like this

<table id="ProjectList" class="grid reduced-full-span-grid grid-header">
    <thead>
        <tr>
            <th class="long-col">
                Title
            </th>
            <th class="medium-col">
                Type
            </th>
            <th class="medium-col">
                Priority
            </th>
        </tr>
    </thead>
    <tbody>
        <% for ( int i = 0; i < Model.Projects.Count; ++i )
           { %>
        <tr class="gridrow">
            <td>
                <%= Html.HiddenFor( model => model.Projects[i].ProjectId ) %>
                <%= Html.TextBoxFor( model => model.Projects[i].Title,
                    new { @readonly = "readonly" } )%>
            </td>
            <td>
                <%= Html.TextBoxFor( model => model.Projects[i].ProjectType,
                    new { @readonly = "readonly" } )%>
            </td>
            <td>
                <%= Html.TextBoxFor( model => model.Projects[i].Priority,
                    new { @readonly = "readonly" } )%>
            </td>
        </tr>
        <% } %>
    </tbody>
</table>

and selection logic like this

$(function() {
    $('.gridrow').click(function() {
        $(this).siblings('.gridrow').removeClass('gridrow-selected');
        if ($(this).hasClass('gridrow-selected') == true) {
            $(this).removeClass('gridrow-selected');
        } else {
            $(this).addClass('gridrow-selected');
        }
        $(this).change();
    });
});

I tried something like this

$(function() {
    $('#ProjectList .gridrow').click(function() {
        // Get row's index
        var projectId = $(this).find('input[name$=ProjectId]').val();
        // Remove the input if it already exists
        var parentForm = $(this).parents('form');
        parentForm.remove('input[name="selectedRows"]');
        // If it is selected, create the form. If it's not selected then the input just gets removed (the user must have clicked on it and deselected the row)
        if ($(this).hasClass('gridrow-selected') === true) {
            parentForm.append($('<input>', { type: "hidden", name: "selectedRows", value: projectId }));
        }
    });
});

which I'm expecting to create a hidden input so that when I post, selectedRows gets passed onto the controller. But all it does is create the input, but the data still doesn't get passed to the controller.

Nothing jumps out at me from this code. Can you post some of the generated grid html? — Adrian
– Adrian, Commented Jan 11, 2011 at 0:38
you can look here how the rows are selected using jquery mrgsp.md:8080/awesome/lookupdemo (click on a small button) — Omu
– Omu, Commented Jan 15, 2011 at 21:45

Tom Clarkson · Accepted Answer · 2011-01-11 01:31:03Z

1

Since you are using textboxes, the table row is editable - it might be easier to include a selected property in your project model. Including a single selectedrow property in your top level model would also simplify things a lot so you just need to update a single known field on click rather than making complex dom changes. With both these options you can start with a checkbox/textbox rather than a hidden field so it is very clear what is happening.

Another improvement would be to add an id to the table row - that way your update js is simplified to something like

$("#selectedRows").val($(".gridrow-selected").attr("id"));

answered Jan 11, 2011 at 1:31

Tom Clarkson

16.2k2 gold badges45 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jonn Over a year ago

Nice! Tons easier than what I was trying to do.

rob waminal · Accepted Answer · 2011-01-11 00:47:45Z

0

instead of

parentForm.append($('<input>', { type: "hidden", name: "selectedRows", value: projectId }));

try

parentForm.append('<input type="hidden" name="selectedRows" value="' + projectId + '" />');

answered Jan 11, 2011 at 0:47

rob waminal

18.5k18 gold badges53 silver badges65 bronze badges

1 Comment

Jonn Over a year ago

Does that change anything? The results seem the same.

Collectives™ on Stack Overflow

Handling row selection from a simple grid using jquery and asp.net mvc

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related