DateTimePicker Summary & Cellspacing Attributes

[Ben]

How do i remove the 'Summary' and 'Cellspacing' attributes from the Timeview? This is causing my website to not validate through https://validator.w3.org/.

 

I have tried setting summary="" and cellspacing="-1", gridlines="None", but nothing happens. I think your 'Summary' attribute is broken.

 

 

[Ben]

See attached image for further help

[Rumen]

Hi Ben,

I hope you are doing well!

Please set the RadDatePicker's RenderMode property to Lightweight. This will ensure that the control will use HTML5 and CSS3 rendering. This way no summary and cell spacing will be used.

You can check out the Render Mode demo for more information.

You can also enable the WAI-ARIA support for the screen readers by setting the EnableAriaSupport="true" property, e.g.

<telerik:RadDatePicker RenderMode="Lightweight" Width="100%" ID="RadDatePicker1" runat="server" EnableAriaSupport="true" EnableKeyboardNavigation="true">
            <Calendar ID="Calendar1" runat="server" EnableAriaSupport="true">
            </Calendar>
                <DateInput ToolTip="Date input" runat="server" Label="Delivery date"></DateInput>
</telerik:RadDatePicker>

Best Regards,
Rumen
Progress Telerik

[Ben]

Hi, this does not solve the issue. I'm using the RadTimePicker control, not the RadDatePicker control. This is still an issue on the RadTimePicker control in your docs too when changing the Rendermode to Lightweight. 

See attached image for my code. 

Can you please get this fixed or help again ASAP?

 

[Rumen]

Hi Ben,

Please excuse me for my omission! You are absolutely right that the dropdown of the TimePicker is table based.

You can remove the summary and cellspacing attributes as shown below:

<script>    
    function OnLoad(sender, args) {
        var table = $telerik.$(".RadCalendarTimeView");
        table.removeAttr("summary");
        table.removeAttr("cellspacing");
    }
</script>
<telerik:RadTimePicker RenderMode="Lightweight" ID="RadTimePicker1" EnableAriaSupport="true" runat="server">
    <DateInput ClientEvents-OnLoad="OnLoad" runat="server"></DateInput>
</telerik:RadTimePicker>

You can use the same approach for removing other attributes as well.

Regards,
Rumen
Progress Telerik

[Ben]

Using JS in this case is not acceptable. This is because in order for me to get a valid pass from W3C standards, it checks the source code of the page. Using JS in this example does take those attributes off, but they're still there in the sourcecode. 

 

I need a way to remove them completely when rendering the control.

 

Is this possible?

[Rumen]

Hi Ben,

The provided JavaScript solution does remove the HTML attributes from the control's rendering.

Please look for the result of the DOM manipulation inside the DevTools HTML inspector, but not in the View Source of the browser. This is needed because the original source never changes, but only the DOM.

You can find more information on the above at:

• https://stackoverflow.com/questions/8598836/jquery-dom-changes-not-appearing-in-view-source
• https://css-tricks.com/view-source-in-devtools/ 

 Please test and let me know what is displayed in the Elements tab of Chrome DevTools. 

Best Regards,
Rumen
Progress Telerik

[Ben]

Thanks for getting back to me on this relatively quickly Rumen. 

I can confirm it gets removed from the DOM, but in order for my website to get no errors by W3C (https://validator.w3.org/) I need it removed from the HTML sent originally, not just the DOM. If you were to copy and paste your page source into that website it would result in errors (Tab = Validate by Direct Input)

 

Is there any chance the summary & cellspacing attributes can be removed before the page loads?

[Rumen]

You are welcome, Ben.

Unfortunately, it is not possible to tweak the rendering of the server controls with C#/VB.NET code. But this shouldn't be a problem because the JS solutions for altering the HTML do work for the screen readers.

If you obtain the content from the Element tab of DevTools and validate it at https://validator.w3.org/#validate_by_input (Validate by direct input) it will pass the validation successfully since the summary and cellspacing will be gone:

Regards,
Rumen
Progress Telerik