0

I searched all over and can't seem to find the answer.

I have a MVC3 project with a WebGrid on it. The first column is a Select that is currently using the normal item.GetSelectLink to create a link to select that row.

I want this to be a checkbox instead of the test "Select". When the user hits the checkbox I want that row in the grid to be selected and the box to become "checked".

I would like the checked and unchecked states to be images that I provide.

How do I do this?

user856232
  • 1,073
  • 2
  • 14
  • 40

1 Answers1

0

Unless you're doing something fancy with Ajax, the "select" link refreshes the page with "Selected=index" added to the query string. That would be an unusual experience, because people aren't used to checkboxes triggering a page reload.

You could do something like this, which completely mimics the "Select" link functionality. First add the checkbox to the row:

grid.Column(
    format: (item) => @Html.Raw("<input class='select' type='checkbox'" +  ((grid.SelectedRow == item) ? "checked" : "") + " />")
)

Then add some Javascript to handle the checkbox clicks:

var index = 1;
$("input.select").each(function () {
    $(this).data('row', index);
    $(this).click(function () { window.location = "?Selected=" + $(this).data('row'); });
    index++;
});
McGarnagle
  • 101,349
  • 31
  • 229
  • 260
  • Ooops, hit enter and it saved it. Meant to write more....Thank you for the code, but I actually need it to do the page refresh. It doesn't even have to really be a check box. It could be a button instead. I have a particular graphic that looks sort of like a checkbox that I was going to use. Do you have some code that will let me put a 2 state button there...one state for when the row is selected and one for when it is not and when you click it that is when it does the page refresh with the SelectedRow=X querystring? – user856232 Apr 20 '12 at 02:34
  • @user856232 Yes, I think you can use the above for that also. Just replace the type='checkbox' with type='image', and then set 'src' like 'checked' is set above (depending on whether gridlSelectedRow == item). – McGarnagle Apr 20 '12 at 07:00
  • I can't seem to find a good place to run the javascript that you show. I already have a $(document).ready script that sets up some of my divs. I tried putting this code in there, but the input elements are not there yet. I am wondering if the WebGrid stuff runs after document.ready? What do you suggest? – user856232 Apr 20 '12 at 14:17
  • maybe the elements are there, they don't show up as visible yet. When the script gets to $("input.select").each it just skips it even though there is one line in the list. – user856232 Apr 20 '12 at 14:18
  • NM, just had to put my break point in the right place. It still isn't working, though. Debugging now. – user856232 Apr 20 '12 at 14:26
  • Finally debugged into the problem, but don't know the fix. When I click the input element it runs the script (yea!), but the window.location = does not do anything. I tried adding a variable and setting it to the whole string I want and then call window.location = newURL (the string), but it doesn't go to that URL. Ideas? – user856232 Apr 20 '12 at 14:36
  • @user856232 that's strange, I don't know why window.location wouldn't work. Which browser are you testing with? – McGarnagle Apr 20 '12 at 17:25
  • I tried IE 9 and it didn't work either. Is there a way to get the grid row and put it in the Razor code in the source page so that I can just create the link there? Does it have to be done as a Javascript at click time? – user856232 Apr 20 '12 at 21:20