EditorFor ignores tabindex. How do you set a tabindex?

Question

The use of tabindex seems to only work for htmlhelpers like Textboxfor and not EditorFor

For example;

<%: Html.TextBoxFor(model => Model.MyItem, new { @tabindex = "3" })%>

Produces a tabindex value.

However, if you use;

<%: Html.EditorFor(model => Model.MyItem, new { @tabindex = "3" })%>

Then the result is that the control is created as expected, but the tabindex is missing.

So...... How is it possible to set the tabindex for a given EditorFor control?

Solution 1

The main problem I was having is that I needed to create a EditorFor type mechanism in order to format the decimal like a currency (our system has multiple currencies so "C" would not have been appropriate), get a tab index working AND allow the system to maintain the standard validation.

I've managed to achieve that using the following. By creating my own custom editor control.

Create a file (mine is called decimal.ascx) within the Views/Shared/EditorTemplates directory of your project.

 <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<decimal?>" %>
 <% int intTabindex = 0;
   decimal myVal = 0;

   string strModelValue = "";
   if (Model != null)
   {
       myVal = (decimal)Model;
       strModelValue = myVal.ToString("#.00");
   }
   else
       strModelValue = "";



   if (ViewData["tabindex"] != null)
   {
       intTabindex = (int)ViewData["tabindex"];
   }
 %>
 <%: Html.TextBox("", strModelValue, new { @tabindex = intTabindex })%>

Essentially, this code just overrides what would normally be presented in a "decimal" EditorFor method with the;

<%: Html.TextBox("", Model.ToString("#.00"), new { @tabindex = intTabindex }) %>

template.

My calling code now reads;

<%: Html.EditorFor(model => Model.MyItem, new { tabindex = 5 })%>

The result is the following code on the page.

<input id="Model_MyItem" name="Model.MyItem" tabindex="5" type="text" value="12.33" />

Which is exactly what I required.

Whilst this is only true for my particular circumstances, I would encourage anybody looking to solve this issue to attempt a custom control first for the task as it might save you a considerable amount of time.

If would of course be possible in the code to create a specific type of control required and adjust the results around that.

For example; we could simple add another item in the call to determine the text format.

new {tabindex = 12, numberformat=2}

Then simply create a handler for all the formats.

Solution 2

Since the EditorFor is just a template for a DataType it's only expecting a datatype as it's Model. There are a couple of ways of going about this I am guessing. You could possibly add the tabindex to an anonymous object that will be merged into the ViewData for the EditorTemplate like so.

Code in your View:

Html.EditorFor(m => m.Username, "test", new { tabindex = 3, style = "width: 400px;" })

EditorForModel Template Check for ViewData:

<%: Html.TextBoxFor(m => m.Username, ViewData)%>

This should render an text input with a tabindex of 3 and style="width: 400px;"

Happy coding.

Edited: Here is exactly the markup I have inside of my test page:

<%: Html.EditorFor(m => m.DollarsAmount, "NullableDecimal", new { tabindex = 99 }) %>

I'm telling the EditorFor template to select the "NullableDecimal" EditorTemplate that I have created. (You could place a UiHint attribute on the property inside of the model also to tell it what editortemplate to use)

"NullableDecimal" EditorTemplate located in ~/Views/Shared/EditorTemplates:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<decimal?>" %>

<%: Html.TextBox(string.Empty, (Model.HasValue ? Model.Value.ToString("#.00") : null), ViewData) %>

What's more extensible about my implementation is the extra ViewData that I pass in via my anonymous object is merged into the ViewData dictionary to be used by the EditorTemplate. So if you don't pass any ViewData in to the EditorTemplate then it wont render your text inputs tabindex to 0 as your implementation currently will do. Plus your implementation will only account for tabindexes and not for any other input attributes. i.e. maxlength or style