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

radDatePicker versus RadCalendar

4 Answers 167 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
blessed
Top achievements
Rank 1
blessed asked on 17 Jun 2017, 03:05 AM

As i am responsible to make our site 508 compliant, i used Wave (chrome) to check the pages for any potential issues.  It turns out that Wave flagged the page because the generated HTML contains a <th> tag without a text.

<caption style="display:none;">
      RadDatePicker
    </caption><thead style="display:none;">
      <tr>
        <th scope="col"></th>
      </tr>
    </thead>

1- Why does Telerik generates a <th> tag without a text. It should have been

 

<caption style="display:none;">
      RadDatePicker
    </caption><thead style="display:none;">
      <tr>
        <th scope="col">RadDatePicker</th>
      </tr>
    </thead>

2- The same issue occured with the title Navigation bar- Was a property not properly set?

<caption>
                    <span style="display:none;">Title and navigation</span>
                  </caption><thead>
                    <tr style="display:none;">
                      <th scope="col"></th>
                    </tr>
                  </thead>

Kindly advise

<div id="ctl00_ContentPlaceHolder1_txtBirthDate_wrapper" class="RadPicker RadPicker_Default" style="display:inline-block;width:160px;">
  <input style="visibility:hidden;display:block;float:right;margin:0 0 -1px -1px;width:1px;height:1px;overflow:hidden;border:0;padding:0;" id="ctl00_ContentPlaceHolder1_txtBirthDate" name="ctl00$ContentPlaceHolder1$txtBirthDate" type="text" class="rdfd_ radPreventDecorate" value="" title="Visually hidden input created for functionality purposes."><table cellspacing="0" class="rcTable rcSingle" summary="Table holding date picker control for selection of dates." style="width:100%;">
    <caption style="display:none;">
      RadDatePicker
    </caption><thead style="display:none;">
      <tr>
        <th scope="col"></th>
      </tr>
    </thead><tbody>
      <tr>
        <td class="rcInputCell" style="width:100%;"><span id="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput_wrapper" class="riSingle RadInput RadInput_Default" style="display: block; width: 100%;"><input id="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput" name="ctl00$ContentPlaceHolder1$txtBirthDate$dateInput" class="riTextBox riEnabled" type="text"><input id="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput_ClientState" name="ctl00_ContentPlaceHolder1_txtBirthDate_dateInput_ClientState" type="hidden" autocomplete="off" value="{"enabled":true,"emptyMessage":"","validationText":"","valueAsString":"","minDateStr":"1900-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00","lastSetTextBoxValue":""}"></span></td><td><a title="Open the calendar popup." href="#" id="ctl00_ContentPlaceHolder1_txtBirthDate_popupButton" class="rcCalPopup">Open the calendar popup.</a><div id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar_wrapper" style="display:none;">
          <table id="ctl00_ContentPlaceHolder1_txtBirthDate_calendar" summary="Calendar control which enables the selection of dates." cellspacing="0" class="RadCalendar RadCalendar_Default" border="0">
            <caption>
              <span style="display:none;">Calendar</span>
            </caption><thead>
              <tr>
                <td class="rcTitlebar"><table cellspacing="0" summary="Title and navigation which can change and show the current year and month." border="0">
                  <caption>
                    <span style="display:none;">Title and navigation</span>
                  </caption><thead>
                    <tr style="display:none;">
                      <th scope="col"></th>
                    </tr>
                  </thead><tbody>
  <tr>

 
 

4 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 21 Jun 2017, 08:49 AM
Hello,

I've already replied to your other thread for a similar query. The empty th cell is the row number column's header:
http://www.telerik.com/forums/raddatepiker-and-508

I suggest that we continue our technical conversation on the mentioned thread.

Regards,
Eyup
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
blessed
Top achievements
Rank 1
answered on 22 Jun 2017, 12:51 AM

Thank you Eyup.

 

I tried the code but it didn't work. For some reason the get_element property does not even grab the html generated tag <th>.

 

I am thinking that we might need to reset the RenderMode as in this link

http://docs.telerik.com/devtools/aspnet-ajax/controls/datepicker/mobile-support/render-mode

what do you think?

 

Kind Regards

 

0
Eyup
Telerik team
answered on 26 Jun 2017, 10:37 AM
Hello,

I've created a sample web site to demonstrate that the approach properly resolves the empty header cell WAVE error. Please run the attached application and verify the result on your side, too.

Regards,
Eyup
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
blessed
Top achievements
Rank 1
answered on 28 Jun 2017, 11:51 AM

Thank you Eyup for your answer.

 

The application was missing the following

<Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
            </Scripts>

I also used pure JavaScript to access the DOM  and update the table header inner text.

 

Once again Thank you so much for your help.

Tags
Calendar
Asked by
blessed
Top achievements
Rank 1
Answers by
Eyup
Telerik team
blessed
Top achievements
Rank 1
Share this question
or