Select Row in WEBGRID

Question

How can a select a Row of a WEBGRID after binding it so that row will get highlighted(by mouse click on any row or cell of any row without the use of check-box or option button as column)

1.)After selecting any row can I get the data value for that row?

2.) Can I move selection up and down by keyboard (up and down keyboard button)?

3.) And after changing the index of selecting row(by mouse or by keyboard up-down button) is rowselectedindexchaged or rowselectingindexchanging event can be fired/handled

Thank you

Answer 1

There's a lot to this question, and there are lots of ways to implement it. Here's a rough sketch of how you could do this. I'm going to assume you're using JQuery as that will make this a lot easier.

To highlight a row or cell on click, attach click events to each:

$("tr").click(function() { $(this).css('background', 'yellow'); });
$("td").click(function() { $(this).css('background', 'lightblue'); });

Of course, you'll also need to un-highlight them, but we'll come to that in a moment.

To get data for a row (I assume you mean on the server, not the client), you'll have to do an AJAX call. It will be easiest to get the id of the row rather than passing the whole row back. Something like this inside the click events:

var row_id = $(this).closest("tr").find("input[type=hidden]").attr("value");
$.get("?row_id=" + row_id);

This assumes that you have added a hidden input to each row in your Webgrid with its row ID value.

In case you need to access the selected first row cell you can use this inside the click function:

var cellOne = this.cells[0].innerHTML ;

I also recommend that your click function should only be linked to a certain table (otherwise the selection will be enabled on all tr elements) and use a css class that is added and removed when selection changes.

$('#MainTable tr').click(function () {
            $(this).addClass('select');
            $('#MainTable tr').not(this).removeClass('select');
        });

To move up and down, you can add a "keyup" event listener to the window and handle up/down. See here for more details: jQuery kepress detection on left, right arrows and space bar. You'll have to use Javascript to keep track of which row is currently selected so as to highlight/unhighlight as needed.

Finally, for the last question, you can trigger an AJAX call (or Javascript call) when the user clicks or arrow-keys to a different row. You'll already be keeping track of which row number has been selected, so you can just send that along with the event:

$.get("?event=row_selection_changed&row_id=" + row_id);

Answer 2

You can try this code:

<div id="AjaxWebGrid">
    @grid.GetHtml(
    htmlAttributes: new { id = "MainTable" },
    tableStyle: "webGrid",
    headerStyle: "header",
    alternatingRowStyle: "alt",
    selectedRowStyle: "select",
    columns: grid.Columns(
        grid.Column("SendedInDateTime", "SendDate", null, style: "SendDateTimeStyle"),
        grid.Column("", header:"حذف", format:
        @<text>
            @Ajax.ActionLink("Delete", "Delete",
                new { id = "", DelID = item.Id }, new AjaxOptions { UpdateTargetId = "AjaxWebGrid" },
                new { @class = "button" })
        </text>)
    ));
</div>

<script>
    $(document).ready(function () {
        $('#MainTable tr').click(function () {
            $(this).addClass('select');
            $('#MainTable tr').not(this).removeClass('select');
        });
    });
</script>

Answer 3

@grid.GetHtml(htmlAttributes: new { id="MainTable" }, .....);

<script type="text/javascript">
    $(function () 
    {
        var tr = $('#MainTable').find('tr');
        tr.bind('click', function (event) 
        {

           $("tr").click(function () { $(this).css('background', 'yellow'); });
         });
    }); 
</script>