This is a migrated thread and some comments may be shown as answers.

DateTimePicker Summary & Cellspacing Attributes

8 Answers 21 Views
DateTimePicker
This is a migrated thread and some comments may be shown as answers.
Ben
Top achievements
Rank 1
Ben asked on 12 Nov 2020, 02:09 PM

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.

 

 

8 Answers, 1 is accepted

Sort by
0
Ben
Top achievements
Rank 1
answered on 12 Nov 2020, 02:30 PM
See attached image for further help
0
Rumen
Telerik team
answered on 17 Nov 2020, 09:14 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ben
Top achievements
Rank 1
answered on 17 Nov 2020, 10:26 AM

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?

 

0
Rumen
Telerik team
answered on 17 Nov 2020, 11:04 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ben
Top achievements
Rank 1
answered on 17 Nov 2020, 12:41 PM

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?

0
Rumen
Telerik team
answered on 17 Nov 2020, 03:30 PM

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:

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

Best Regards,
Rumen
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ben
Top achievements
Rank 1
answered on 17 Nov 2020, 03:39 PM

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?

0
Rumen
Telerik team
answered on 17 Nov 2020, 04:19 PM

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: