1-888-365-2779
+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Modifying the Underlying HTML Being Generated

Modifying the Underlying HTML Being Generated

6 posts, 0 answered
  1. Kaine Varley
    Kaine Varley avatar
    13 posts
    Registered:
    25 Aug 2009
    12 Mar 2010
    Link to this post
    Hi,

    Firstly, I would just like to congratulate you on a first rate product.

    Being fairly new to the product, I feel a little overwhelmed at times by some of the in-depth articles concerning customisation and extending the product, modules, controls, etc.

    Up until now, I have been trying to shoehorn layout through the use of CSS. However, it would be really great to be able to have some degree of control over the way that the underlying HTML is being generated. In this way I can get most of my structure upfront, making my CSS much simpler and easier.

    I have played around with creating my own User Controls using the LibraryManager and the ILibrary, and this was quite satisfying. However, while I can appreciate that you have gone to great lengths to post examples and documentation, as mentioned earlier, I quickly find myself overwhelmed.

    While rummaging around in the various documents and posts, I came across a few articles, one of which by Ivan Osmak (http://www.sitefinity.com/blogs/Ivan/Posts/09-02-23/Introduction_to_ControlsConfig_file.aspx) alludes to the possibility of using a custom .ascx control file, just to handle the placeholders and HTML formatting, without disturbing the .ascx.cs code file that uses it.

    In the example below, I have an EventsView control that lists the events on a page (as the Master) and uses another page (as the Detail). I would like to be able to reformat each item as it is being generated and, especially, format the date into different <span> tags, e.g. <span class="month">Apr</span><span class="day">04</span>.

    There are other issues too, like the use of state. Selecting a country other than the United States, when adding and event via the Events module, disables the state field, and yet it still seems to have been reproduced on the page. It would be great to be able to take control of the formatting of the address as well, though I do not necessarily wish to add more detail than is already present.

    Kind regards,


    Kaine

    <ol class="sf_eventsList">
      <li>
        <h3 class='sf_eventTitle'>
          <a id="ctl00_..._fullContent1" href="Events/...Carvery.aspx">
            Easter Sunday Carvery
          </a>
        </h3>
        <div id="ctl00_..._BasicInfo" class="sf_eventBasicInfo">
     
          <p class='sf_eventPriod'>04 Apr 2010</p>
          <p class='sf_eventPriod'></p>
          <div class='sf_eventSummary'>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut diam euismod urna scelerisque interdum. Nunc ac magna...
          </div>
        </div>
        Venue<address id="ctl00_..._Location" class="sf_eventLocation">
          Street: St George’s Hill<br />
          City: Weybridge<br />
          Country: UNITED KINGDOM<br />
          State: <br />
        </address>
        <a id="ctl00_..._fullContent2" class="sf_readMore" href="Events/...Carvery.aspx">
          More information
        </a>
      </li>
  2. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    18 Mar 2010
    Link to this post
    Hello Kaine Varley,

    1. You can use spans for the data format by modifying the Master template (ListPageMaster.ascx) as shown below

    <div class="someClass">
        <span class="Month"><%#DataBinder.Eval(Container.DataItem, "Publication_Date", "{0:MMMM}")%></span>
        <span class="Day"><%#DataBinder.Eval(Container.DataItem, "Publication_Date", "{0:dd}")%></span>
        <span class="Year"><%#DataBinder.Eval(Container.DataItem, "Publication_Date", "{0:yyyy}")%></span>
    </div>

    This will work only in the master template where you can use Container.DataItem because we have a repeater control there.

    For ListPageDetail mode you need to get the Text that is returned by the Literal control with ID="Publication_Date", divide the string and create new span elements where you set the month, day, year.

    <asp:Literal ID="Publication_Date" runat="server" Text="{0}" />

    2. The state is a metakey. The DropDownList is represented by ListItems declaratively added to EventsItemEdit and EventsItemNew templates. You can map these template and change the DropDownList items. You could also add a new metakey and implement another list of items.

    3. You can take a look at this post Event module questions that explains how you can reformat the address field of Events and get control over the address TextSettings

    Regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. Kaine Varley
    Kaine Varley avatar
    13 posts
    Registered:
    25 Aug 2009
    19 Mar 2010
    Link to this post
    Hi Ivan,

    Thanks for your response, it has really helped me gain a much better understanding and deeper grasp of my options. In the end, I hand rolled the list.

    However, with the single item template for each event, the Event_Start and Event_End literals don't offer the start and end times, even though these can be set in the admin screen. So, while I can publish the date that the events starts, the time cannot be published. Is there a way around this, other than recreating the singleItemTemplate?

    Thanks again for your response.


    Kaine
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    19 Mar 2010
    Link to this post
    Hi Kaine Varley,

    The literal shows the Publication_Date, but most probably you  have not set the correct format that displays the time. You can take a look at Date and Time Format Strings

    Regards,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  5. Kaine Varley
    Kaine Varley avatar
    13 posts
    Registered:
    25 Aug 2009
    19 Mar 2010
    Link to this post
    Hi Ivan,

    Thanks again for your response. Looking at the ContentViewSingleItemView.ascx template, the Event_Start and Event_End are being described as literals:

    <div class="sf_eventBasicInfo">
        <p class='sf_eventPriod'>From: <asp:Literal ID="Event_Start" runat="server" /></p>
        <p class='sf_eventPriod'>To: <asp:Literal ID="Event_End" runat="server" /></p>
    </div>

    Unless I'm missing something, there doesn't appear to be a way of formatting the these dates other than via the admin properties pages.

    I have attached two screenshots of the admin properties pages, one is the basic admin while the other is the advanced properties page. I can change the date format in the basic properties page, I can't seem to change the format in the advanced properties page, since any changes I make have no affect. There is no option to include the time in the basic properties options, it is just a finite list of pre-defined date formats.

    I guess I'm just not getting it.

    Thanks,


    Kaine
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    16 Jun 2017
    19 Mar 2010
    Link to this post
    Hi Kaine Varley,

    Please give a try to the suggestion provided in this post - display-times-in-eventview.
    Map TextSettingsTemplate.ascx located under ExternalTemplates/Sitefinity/Admin/ControlTemplates/Generic_Content. All content view  based controls use TextSettingsTemplate.ascx to populate the date format.

    Best wishes,
    Ivan Dimitrov
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Register for webinar
6 posts, 0 answered