Here's my transformation:
<%# IsFirst() ? "<div class='row'>" : "" %>
<div class='col-xs-12 col-md-3 col-bdlt'>
<div class='bdlt lt'>
<asp:PlaceHolder runat="server" Visible='<%# IfEmpty( Eval("Headshot"), false, true ) %>'>
<img src="<%# Eval("Headshot") %>" alt="<%# Eval("Name") %>" class='img-responsive'>
</asp:PlaceHolder>
<p class='name'><%# Eval("Name") %><%# IfEmpty( Eval("Accolades"),"</p>",",</p> <p class='accolades'>" + Eval("Accolades") + "</p>" ) %>
<p><%# Eval("Copy") %></p>
</div>
</div>
<%# IsLast() ? "</div>" : "" %>
I'm running Bootstrap, so i'm wrapping these elements in a row. Things are working, but depending on the amount of copy, it's not looking as it should. What i'd like do is have a row for each group of 4.
So like this
Row
item
item
item
item
Row
item
etc.
So after every 4th, close the row div, and start a new one. I think my first line is good, it's the last where i think the logic is needed.
To start the row, you want to make sure the first record starts a row:
<%# ( (DataItemIndex % 4 == 0) ? "<div class=\"row\">" : "" ) %> <!-- Start Row -->
To close the row, you want to make sure the last record ends the current row.
<%# (DataItemIndex % 4 == 3 || DataItemIndex == DataRowView.DataView.Count - 1 ? "</div>" : "") %> <!-- Close Row -->
You want to utilize the DataItemIndex value, and do something like this, coupled with the Modulo
You compare the DataItemIndex %4 = 3 because DataItemIndex is 0 based, so the 4th, 8th, 12th rows have index of 3, 7, 11 which modulo 4 are all 3.
Related
I have a HTML like this :
<ol class="list">
<li class="list-item " id="37647629">
<!---->
<div>
<!---->
<div>
<!---->
<book class="book">
<div class="title">
someText
</div>
<div class="year">
2022
</div>
</book>
</div>
<!---->
</div>
<!---->
</li>
<li class="list-item " id="37647778">
<!---->
<div>
<!---->
<div>
<!---->
<book class="book">
<div class="title">
someOtherText
</div>
<div class="year">
2014
</div>
</book>
</div>
</div>
<!---->
</li>
</ol>
I want to get the first book title and year, directly with two xPath expression.
I tried :
$x('//book') => Ok, get the two books list
$x('//book[0]') => Empty list
$x('//book[0]/div[#class="title"]') => Nothing
Seems I have to do this :
$x('//book')[0]
and then process title, but why I can't do this just with Xpath and directly access the first title with a Xpath expression ?
This will give you the first book title
"(//book)[1]//div[#class='title']"
And this gives the first book year
"(//book)[1]//div[#class='year']"
You're missing that XPath indexing starts at 1; JavaScript indexing starts at 0.
$x('//book') selects all book elements in the document.
$x('//book[0]') selects nothing because XPath indexing starts at 1. (It also signifies to select all book elements that are the first among siblings — not necessarily the same as the first of all book elements in the document.)
$x('//book')[0] would select the first book element because JavaScript indexing starts at 0.
$x('(//book)[1]') would select the first book element because XPath indexing starts at 1.
To select the first div with class of 'title', all in XPath:
$x('(//div[#class="title"])[1]')
or, using JavaScript to index:
$x('(//div[#class="title"])')[0]
To return just the string value without the leading/trailing whitespace, wrap in normalize-space():
$x('normalize-space((//div[#class="title"])[1])')
Note that normalize-space() will also consolidate internal whitespace, but that is of no consequence with this example.
See also
How to select first element via XPath? (And be sure not to miss the explanation of the difference between //book[1] and (//book)[1] — they are not the same.)
I'm trying to trim ending white space from AlertTitle in an ascx transforamtion. I know there is TrimEnd, but i'm drawing a blank getting it to work.
The V9 Documentation has a method for this(https://docs.kentico.com/display/K9/Adding+custom+methods+to+transformations) but i don't want to fix the length.
Here's the transformatin code snippet.
<asp:placeholder id="alert" runat="server" Visible="false">
<li data-date="<%# Eval("AlertDate") %>">
<p class="alert-date"><%# FormatDateTime(Eval("AlertDate"), "MMMM dd, yyyy") %> </p>
<p class="alert-copy"><%# Eval("AlertTitle") %> <%# IfEmpty(Eval("AlertCopy"),"", "... <a href='" + GetDocumentUrl() + "'>" + CMS.Helpers.ResHelper.GetString("kff.Generic-ReadMore") + "</a> »") %></p>
</li>
</asp:placeholder>
In addition to using Trim() or TrimEnd() in the transformation, you can also set it up so Kentico will automatically trim the fields when the form is submitted by checking the "Trim" checkbox under "advanced" Editing control settings.
Like so:
You probably need to cast the ouput of Eval to a string first:
<%# ((string)Eval("AlertTitle")).TrimEnd() %>
In v8 and newer, you can also use a different version of Felix's answer
<%# Eval<string>("AlertTitle").TrimEnd() %>
I am using ExpressionEngine 2.10.3 and also Taxonomy 3 plugin. I have the following code which, when run, returns the 15 nodes I have set up:
<div class="col-md-4">
{exp:taxonomy:nav tree_id="1" display_root="no" root_node_id="2"}
<li>
{node_title}
</li>
{/exp:taxonomy:nav}
</div>
What I would like to do is after every 5 entries, end the current <div> and start a new col-md-4. Usually, I would use {switch} and I have tried it like this:
<div class="col-md-4">
{exp:taxonomy:nav tree_id="1" display_root="no" root_node_id="2"}
<li>
{node_title}
</li>
{switch='||||</div><div class="col-md-4">'}
{/exp:taxonomy:nav}
</div>
But it doesn't work at all, instead it just prints out {switch='||||'}
Is there any way of doing what I'm trying to do?
If you're on 2.7.1 or greater and your taxonomy:nav has the nav_count variable, use the modulo operator. Instead of your {switch...} thing, put
{if nav_count % 5 == 1}
</div><div class="col-md-4">
{/if}
If you end on an modulo-5 count, though, you're going to have an empty div....
I am having an issue with Jade and Bootstrap. I am trying to layout some HTML in this format:
<bootstrap row>
<bootstrap col-sm-6>
<bootstrap col-sm-6>
</bootstrap row>
<bootstrap row>
<bootstrap col-sm-6>
<bootstrap col-sm-6>
</bootstrap row>
etc...
I need this to happen inside an each statement however I cannot get it to work quite how I'd like it. It keeps closing the row after each iteration so I get:
<bootstrap row>
<bootstrap col-sm-6>
</bootstrap row>
<bootstrap row>
<bootstrap col-sm-6>
</bootstrap row>
This is the Jade template I currently have:
div.col-sm-12
#items
- each item, x in items
div.article.col-sm-6
div.title
h3= item.name + " (" + item.cost + ")"
p= item.stats
p= item.recipe
p= item.ability
p= "Purchased from " + item.category
So, for each 2 iterations, I need to wrap the two col-sm-6 items in a row.
Any help would be appreciated.
Thank you.
One way to do it is to only render item when the index is even, and within that condition render the next item. Something like:
.col-sm-12
#items
- var items = ['a', 'b', 'c', 'd']
- each item, index in items
if 0 === index % 2
.row
- var nextItem = items[index + 1]
.col-sm-6= item
.col-sm-6= nextItem
The output:
<div class="col-sm-12">
<div id="items">
<div class="row">
<div class="col-sm-6">a</div>
<div class="col-sm-6">b</div>
</div>
<div class="row">
<div class="col-sm-6">c</div>
<div class="col-sm-6">d</div>
</div>
</div>
</div>
Of course, since your item and nextItem isn't as simple as this example you may need to use a partial to render each with the appropriate markup for its values.
I have the following line of code of search container.
I want to include a new line between the two values that I want to display..
<liferay-ui:search-container-column-text name='Employee Name'
value='<%=String.valueOf(search.getEmpFname()) + String.valueOf(search.getEmpLname()) +"\n" + String.valueOf(search.getEmpTitle()) %>'
href="" >
The reason I want it this way is that I want all these values in one box each row.
So how should I format the above code so that I have:
String.valueOf(search.getEmpFname()) + String.valueOf(search.getEmpLname())
on one line and
String.valueOf(search.getEmpTitle())
on the next line of the same row.
Converting my comment as an answer:
You can try using <br> tag instead of "\n" like this:
String.valueOf(search.getEmpLname()) + "<br>" + String.valueOf(search.getEmpTitle()`
or you can use <liferay-ui:search-container-column-jsp tag instead of <liferay-ui:search-container-column-text tag
or else use the tag as following:
<liferay-ui:search-container-column-text name='Employee Name' href="">
<%=String.valueOf(search.getEmpFname()) + String.valueOf(search.getEmpLname()) %>
<br>
<%= String.valueOf(search.getEmpTitle()) %>
</liferay-ui:search-container-column-text>*emphasized text**emphasized text*