Using HtmlAttributes on the Grid now overrides other attributes?

[Patrick Barranis]

Hi.  I was recently trying to figure out why, in a brand new project, the Grid was "losing" some of its styling.  Our designer tracked it down to missing classes on the table - "t-widget t-grid".  That was because our grid is defined with the following line of code:

.HtmlAttributes(new { Class = "SelectionGrid QuickFilterGrid" })

With previous version of the grid we have done this and it added those two classes to the other two classes that are on the grid by default ("t-widget t-grid").  But on the version we're now on (2010.3.1318.340) it appears we have to do the following to get the grid to render correctly:

.HtmlAttributes(new { Class = "SelectionGrid QuickFilterGrid t-widget t-grid" })

Is this correct or did we do something wrong?

Thanks,
Patrick

[Dimo]

Hello Patrick,

Please use

.HtmlAttributes(new { @class = "myClass" })

Greetings,
Dimo
the Telerik team

[Rob]

That's right @class helps, but it doesn't solve the problem. The new release overwrites the standard classes (e.g. t-header).

Best regard
Rob

[Patrick Barranis]

Dimo, thanks.  That's very unintuitive, but it works.

Rob, it appears that Dimo was right - using the lowercase "class" causes the lists to merge, not to overwrite the standard/default classes.

Thanks.

[Dimo]

Hi Patrick,

There is no HTML attribute called Class - it should be written with a small letter.

@Rob - you are right about the HeaderHtmlAttributes, we have already fixed this.

Greetings,
Dimo
the Telerik team

[Patrick Barranis]

Hi Dimo,

I appreciate the help, but I'm 99% certain that HTML <= 4 is case insensitive.  Only XHTML (includes HTML 5+) introduced case-sensitivity into HTML only due to XML being case-sensitive.

So to remain compatible with non-XHTML sites "Class" and "class" should be treated identically.  VB being a case-insensitive language only complicates things further (though this project uses C#, which I admit I prefer).

You can also find a very thorough analysis of this situation as it affects XHTML by John Resig (leader of the jQuery project): http://ejohn.org/blog/nodename-case-sensitivity/

HTH.  I do appreciate the help!
-pb

[Dimo]

Hi Patrick,

Our MVC extensions eventually render both @class and Class with a small letter, which is HTML compliant.

What is different from the MVC framework is that we currently do not throw an exception if you use @class and Class at the same time, and the second key provided is used. We will research why this happens.

All the best,
Dimo
the Telerik team

[Dimo]

Hello again,

Here is a follow-up on the discussed matter. We have found why we don't throw an exception if one sets Class and @class at the same time and have fixed this.

However, currently if a component's HTML element renders a native CSS class and you add another CSS class with Class = "...", this will result in the following HTML output:

<tagname  Class="your-class" class="native-class">...</tagname>

As a result, the second attribute will be ignored and the component will not look as expected.

Supporting this scenario by merging the two class attributes turns out to be rather cumbersome, so we will not support it and I strongly recommend everybody to use @class only.

All the best,
Dimo
the Telerik team

[Patrick Barranis]

Thanks very much for the great customer service and the follow-up!

Personally I think the exception would be better since you know the current design will just cause a problem when being rendered.  A poignant error message would save users from having to rediscover this same problem themselves - potentially saving quite a few hours of busy people's time...

But the decision is up to you!  Thanks again.

[Zoli]

Hello,

I have a problem with HtmlAttributes when I try to use the columns.Command(...).HtmlAttribute(...), it never adds any attribute for CommandColumns.
Do you have any suggestion?
Or, is it a bug?

Thanks
Zoli

RazorCode example:

@(Html.Telerik().Grid(Model)
  .Name("gridExample")
  .DataKeys(keys => keys.Add(m => m.CountryId))
  .Columns(columns =>
    {
      columns.Command(command => command.Edit()).HtmlAttributes(new {@class ="RightAlign"});
    })
  .DataBinding(dataBinding => dataBinding.Ajax().Update("Edit", "Country"))
)

<style type="text/css">
  .RightAlign
  {
    text-align: right;
  }
</style>

[Dimo]

Hi Zoli,

Indeed, this is a bug (related only to Command columns), however, we have recently identified it and fixed it. You can try using the latest internal build.

Regards,
Dimo
the Telerik team

[Shruti]

hi,

i am a designer and wanted to do some customization in telerik controls.

I applied a class on mvc telerik grid:

 Html.Telerik().Grid<OrderViewModel>()
                    .Name("UploadOrderLocGrid")
                    .HtmlAttributes(new { @class = "myClass" })
                    .Columns(columns =>

strangely on some pages it is showing the class in firebug, and in some it is not, any idea, why it is behaving like this?

<div id="UploadOrderLocGrid" height="100px" class="t-widget t-grid">

[Aurel]

Hi am trying to add click event to a tab  
       @Html.Telerik().TabStrip().Name("TabStrip").Items(Sub(items)                                                        items.Add.Text("Application").HtmlAttributes("onclick:onSelect").Content(Html.Partial("ApplicationContent").ToHtmlString())

how can i rewrite HtmlAttributes("onclick:onSelect")  in vbhtml?