[Solved] Difference ? between .HtmlAttributes and .*HtmlAttributes

[Carl]

I am looking for an explanation of the difference between .HtmlAttributes() and the named versions .[ControlName]HtmlAttributes(), for example, the difference between .HtmlAttributes and .DropDownHtmlAttributes.

And what about the order of processing priority for styles that might be appearing in multiple places? For example, what if there is a style width property in .DropDownHtmlAttributes, .HtmlAttributes, and/or set in the .Width() for the column?

What determines the final widths of the columns in the grid? How is it different for columns that do or do not have a width explicitly set?

[Dimo]

Hello Carl,

HtmlAttributes is relevant to the component itself and the specified attributes are normally applied to its wrapper element.

[Something]HtmlAttributes is relevant to a child element of the component.

DropDownHtmlAttributes are applied to the dropdown wrapper of the ComboBox, DropDownList and AutoComplete. The wrapper is a div with "t-popup t-group" CSS classes.

HtmlAttributes of a Grid column are applied to each cell from the column. Setting a width style in this way is not correct - you should use the column's Width() instead.

All the best,
Dimo
the Telerik team

[Carl]

Thanks for remarks which were helpful in understanding the difference between .HtmlAttributes and .[Something]HtmlAttributes.

However, I am still having difficulty getting it to work the way I think it should. First of all, it seems that I cannot just use the column's Width() to set the width because then the column would have same width in both display and edit modes as I understand it. But I need a different width for display when there is no dropdownlist and for edit when there is a dropdownlist that requires a greater width. If I use the column's Width() to set the width large enough for the dropdowncolumn in edit mode, then there's a lot of wasted empty space in display mode.

So I am using .EditorTemplateName("MyDropdownTemplate") to have a separate template for the dropdowncolumn when in edit mode. Now according to your explanation, the .DropDownHtmlAttributes() should apply to just the dropdown and the .HtmlAttributes should apply to the entire column. So in the template file for the  .EditorTemplateName("MyDropdownTemplate") ,  I have used:

.DropDownHtmlAttributes(new { title = "My dropdowncolumn tooltip goes here" })
.HtmlAttributes(new { style = "width: 12em;" })

and that works to solve the column width problems. But the tooltip does NOT work. So then when I try to put the tooltip in the .HtmlAttributes like this:

.HtmlAttributes(new { style = "width: 12em;", title = "My dropdowncolumn tooltip goes here"  })

I can get all the desired results with the right appearance and behavior.  But I have to do so without using .DropDownHtmlAttributes which does not seem to work.

So should .DropDownHtmlAttributes() work, or is it my lack of understanding, unintended bug, or some kind of intended feature?

By the way, I am using the latest release 2011.1.414.340 of MVC Extensions. Thanks.

[Dimo]

Hi Carl,

If I understand you correctly, you are using a DropDownList inside a Grid editor template. The Grid does not seem to be related to our discussion. For example:

<%= Html.Telerik().DropDownList().Name("GridDropDown")
    .Items(items =>
    {
        items.Add().Text("Item 1");
        items.Add().Text("Item 2");
        items.Add().Text("Item 3");
        items.Add().Text("Item 4");
    })
    .HtmlAttributes(new { title = "my main component title" } )
    .DropDownHtmlAttributes(new { title = "my dropdown title" } )

%>

The "main" title will appear if you hover the dropdown component itself, i.e. the top part. The "dropdown" title will appear if you expand the dropdown and hover over the items.

Does this answer your question?

Regards,
Dimo
the Telerik team

[Carl]

Sorry for any misunderstandings, but as I explained, the grid DOES relate to the discussion. I explained why I needed a DropDownList inside a grid EditorTemplate for a column in a grid.

And on my machine, the problem does occur when used in a grid: specifically I cannot get the .DropDownHtmlAttributes to work and therefore must only use the .HtmlAttributes as explained in my previous post in this thread.

[Dimo]

Hello Carl,

The DropDownList declaration in my previous reply is from an actual Grid editor template and it works as expected. Please provide some standalone working demo, so that we can see your exact implementation. Thank you.

Greetings,
Dimo
the Telerik team