Smartsite Documentatie > Features & Modules > Add-On Modules > SmartInstant > The GridRowLogic translation

The GridRowLogic translation

Release 1.4 - ...

To comply with Webrichtlijnen, the column containing the most important data in each row can be marked as ContentColumn. The ContentColumn is rendered first, followed by the other columns. CSS is used to shift the ContentColumn to the right and to shift the columns that should appear before the ContentColumn to the left.

If the ContentColumn is 0 or 1 or if it's larger than 8, all columns are simply rendered in order.

To add this behaviour to an existing SmartInstant 2.0 site,

  • add a field ContentColumn to all content types in the Grid Row group.
  • Set ctrl:visible to false, because it will be updated by the Grid Row Chooser.
  • Change the Logic field of the GRIDROW_COLUMN_CHOOSER Application Page to:

Smartsite SXML CopyCode image Copy Code 
<![CDATA[
<style type="text/css">
#grm_row{
 width: 100%;
 height: 100px;
 border: 1px solid #808080;
 position: relative;
 background-color: #f4f4f4;
}
#gridmanager{
 width: 100%;
 position: relative;
}
#grmelding{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100px;
 padding: 7px;
 border: 1px solid #000000;
 background-color: #ff0000;
 color: #ffffff;
 text-align: center;
 display: none;
}
#grmelding span{
 display: block;
 padding-bottom: 10px;
}
#grmelding .closemelding{
 display: inline-block;
 border: 1px solid #000000;
 background-color: #808080;
 color: #ffffff;
 font-weight: bold;
 line-height: 1em;
 padding: 3px 5px;
 text-align: center;
 text-decoration: none;
}
#grm_row table{
 width: 100%;
 height: 100%;
}
#grm_row table td{
 border: 2px solid #EEEEEE;
 padding: 0px;
 background-color: #ffffff;
}
.grm_col{
 display: block;
 height: 92px;
 width: 6.25%;
 background-color: #f1f6f9;
 background-image: url(/scf/gfx/box/boxmanagerback.jpg);
 background-position: bottom;
 background-repeat: repeat-x;
 position: absolute;
 top: 3px;
 left: 0;
 border: 1px solid #000000;
 font-size: 0.8em;
}
.grm_colpad{
 padding: 20px 2px;
 overflow: hidden;
}
a.colb{
 display: inline-block;
 border: 1px solid #000000;
 background-color: #808080;
 color: #ffffff;
 font-weight: bold;
 line-height: 1.2em;
 width: 1.4em;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 text-align: center;
 text-decoration: none;
 position: absolute;
 bottom: 2px;
 left: 2px;
}
a.colb.colplus{
 left: 17px;
}
a.colb.coldel{
 left: auto;
 bottom: auto;
 right: 2px;
 top: 2px;
}
.colname, .maincol{
 display: block;
 font-weight: bold;
}
#add_column{
 margin-top: 5px;
}
.colb:hover{
 background-color: #259fd1;
}
.grm_col:hover{
 background-image: none;
 cursor: pointer;
}
tr.hidden {
 display:none;
}
</style>
<script type="text/javascript">
/* In registry: Manager/Includes should contain valid includes needed for this script */
var $si = jQuery.noConflict();
var grid = {awc:ctrl.gridcolumns}; // 16 of 12 cols-grid
var maxcols = 8; // maximaal aantal kolommen
var cols = 0; // aantal columns
var totalWidth = 0; // totale breedte in columns
var col1w = 100/grid;// breedte van 1 column 100/16 = 6.25%
var intId;
var contentColumnField;
function foutmelding(txt){
 $si('#grmelding').show().find('span').html(txt);
}
function drawColumns(){
 totalWidth = 0;
 $si('tr[id*=CTSpecificText]').addClass('hidden');
 for (var i=1;i<9;i++){
  $si('input[id=CTSpecificInt'+i+']').attr('value',0);
 }
 $si('#grm_row .grm_col').each(function(x){
  var width_cols = $si(this).data('width_cols');
  $si(this).css('width',(width_cols*col1w)-0.5+'%');
  $si(this).css('left',(totalWidth*col1w)+'%').css({marginLeft:'0.25%',marginRight:'0.25%'}).data('left_cols',totalWidth);
  totalWidth = totalWidth + width_cols;
  $si("#CTSpecificInt"+(x+1)).attr('value',width_cols);
  $si('#CTSpecificText'+(x+1)+'_row').removeClass('hidden');
  $si(this).attr('id','column'+(x+1));
  $si('.colw', this).html('Width:'+width_cols);
  $si('.colname', this).html('Col:'+(x+1));
 });
}
function addColumn(w){
 if (cols < maxcols){
  if((totalWidth)<grid){
   if(!w){wc=1;}else{wc=w};
   $si('#grm_row').append('<div class="grm_col" id="col'+cols+'"><div class="grm_colpad"><span class="colname"></span><span class="colw"></span><a href="#" class="colb coldel">X</a><a href="#" class="colb colmin">-</a><a href="#" class="colb colplus">+</a></div></div>');
   var newCol = $si('#col'+cols);
   newCol.data('width_cols',wc).data('left_cols',totalWidth);
   newCol.find('.colname').after('<span class="maincol"><label for="mainSelector_'+cols+'">Contentkolom</label><input type="radio" name="mainSelector" id="mainSelector_'+cols+'" value="'+(cols+1)+'" /></span>');
   var mainSelector = newCol.find("#mainSelector_" + cols);
   if (cols+1 == contentColumnField.val()) mainSelector.attr("checked","checked");
   mainSelector.change(function(){
    if(this.checked) contentColumnField.val(this.value);
   });
   cols = cols +1;
   if(!w){drawColumns();}
  } else {
   foutmelding('Er is geen ruimte voor een nieuwe column. Verklein een andere kolom om ruimte te cre&euml;ren');
  }
 } else {
  foutmelding('Het maximaal aantal kolommen is: '+ maxcols);
 }
}
function deleteColumn(obj){
 if(cols>1){
  obj.remove();
  cols = cols-1;
  drawColumns();
 } else{
  foutmelding('Een rij moet minimaal 1 kolom bevatten');
 }
}
function pluswidth(obj){
 if((totalWidth)<grid){
  var width_cols = obj.data('width_cols');
  obj.data('width_cols',(width_cols+1));
  drawColumns();
 } else {
  foutmelding('De maximale breedte is bereikt.');
 }
}
function minwidth(obj){
 var width_cols = obj.data('width_cols');
 if (width_cols>1){
  obj.css('width',((width_cols-1)*col1w)+'%').data('width_cols',(width_cols-1));
  drawColumns();
 }
}
function loadGrid(grids){
 $si('#grm_row .grm_col').remove();
 cols = 0;
 contentColumnField = $si("#" + getContentTypeField("ContentColumn",0).p);
 totalWidth = 0;
 if(grids){
  myArray = grids.split(",");
  for ( i=0; i<maxcols; i++) {
   if(myArray[i]){addColumn(myArray[i]/1);}
  }
  drawColumns();
 } else {
  if ($si('#CTSpecificInt1').attr('_value') !== undefined) {
   return false;
  } else {
   for ( i=1; i<=maxcols; i++) {
    var w = $si('#CTSpecificInt'+i).attr("value")/1;
    if(w)
    {
     addColumn(w);
    }
   }
   if (cols==0){
    addColumn();
   }
   clearInterval(intId);
   drawColumns();
  }
 }
 return false;
}
$si(document).ready(function(){
 $si('#Layout').css('height','');
 $si('.colplus').live('click', function(){
  pluswidth($si(this).parents('.grm_col'));
 });
 $si('.colmin').live('click', function(){
  minwidth($si(this).parents('.grm_col'));
 });
 $si('.coldel').live('click', function(){
  deleteColumn($si(this).parents('.grm_col'));
 });
 $si('.closemelding').click( function(){
  $si('#grmelding').hide();
 });
 // maak grid tabel als achtergrond
 $si('#grm_row').append('<table><tr></tr></table>');
 for (i=0;i<grid;i++){
  $si('#grm_row table tr').append('<td style="width:'+col1w+'%"></td>');
 }
 $si('.grm_col').live('click', function(){
  var nr = $si(this).attr('id');
 });
 intId = setInterval(loadGrid,250);
});
</script>
<div id="gridmanager">
<div id="grm_row"></div>
<div id="grmelding"><span></span><a href="#" class="closemelding">OK</a></div>
</div>
<button id="add_column" class="cmd" onclick="addColumn()"><img class="" src="/res/new.gif" complete="complete"/>Kolom toevoegen</button>
<a href="" onclick="loadGrid('16');return false;">Laad 1 koloms grid</a>
<a href="" onclick="loadGrid('8,8');return false;">Laad 2 koloms grid</a>
<a href="" onclick="loadGrid('5,6,5');return false;">Laad 3 koloms grid</a>
<a href="" onclick="loadGrid('4,4,4,4');return false;">Laad 4 koloms grid</a>
]]>

  • Change the Replacement field of the GridRowLogic translation to:

Smartsite SXML CopyCode image Copy Code 
{buffer.set(rowid, translation.caller())}
{buffer.set(attributes, string.format('class="{0}"',html.combinecssclasses(html.combinecssclasses(gridrow, sys.iif(itemdata.field(equalheight,$rowid),'si_equalheight'),itemdata.field(class,$rowid)))))}
{buffer.set(rowcode, string.tolower(cms.getitemcode($rowid)))}
{buffer.set(rowidtext, string.tolower(itemdata.field(id,$rowid)))}
<se:if expression="(buffer.exists(rowidtext)) AND (string.length($rowidtext) != 0)">
 {buffer.set(attributes, $attributes + string.format(' id="{0}"', $rowidtext))}
</se:if>
<se:if expression="!(itemdata.rawfield('gridspan1',$rowid,Off)==16 AND itemdata.rawfield('column1',$rowid,Off)=='')">
 {buffer.set(maincol, itemdata.field(ContentColumn,$rowid,Off, default=0))}
 <se:if expression="$maincol GT 1 AND $maincol LT 9">
  {buffer.set(mainspan, itemdata.field(string.concat(gridspan,$maincol),$rowid,Off))}
 </se:if>
 <se:if expression="buffer.get(mainspan, default=0) != 0">
  <se:then>
   {buffer.set(pushoffset, 0)}
   <se:for from="1" to="{sys.eval(buffer.get(maincol) - 1)}">
    {buffer.set(pushoffset, $pushoffset + itemdata.field(string.concat(gridspan,this.index()),$rowid,Off))}
   </se:for>
   <se:buffer name="mainresult">
    <div class="{html.combinecssclasses(string.concat('grid_', $mainspan), string.concat('push_', $pushoffset))}">
     {itemdata.field(string.concat('column',$maincol),$rowid,Off)}
    </div>
   </se:buffer>
   <se:for from="1" to="{sys.eval(buffer.get(maincol) - 1)}" save="beforeresult">
    {buffer.set(index, this.index())}
    {buffer.set(gridspan, itemdata.field(string.concat(gridspan,$index),$rowid,Off))}
    {buffer.set(lastgrid, sys.iif($index+1 == $maincol AND itemdata.rawfield(string.concat(gridspan,math.min(8,$maincol+1)),$rowid,Off)==0,'lastgrid',''))}
    <se:if expression="$gridspan GT 0">
     <se:then>
      <div class="{html.combinecssclasses(string.concat('grid_', $gridspan), string.concat('pull_', $mainspan), $lastgrid)}">
       {itemdata.field(string.concat('column',$index),$rowid,Off)}
      </div>
     </se:then>
     <se:else>{this.parent.break()}</se:else>
    </se:if>
   </se:for>
   <se:for from="{sys.eval(buffer.get(maincol) + 1)}" to="8" save="afterresult">
    {buffer.set(index, this.index())}
    {buffer.set(gridspan, itemdata.field(string.concat(gridspan,$index),$rowid,Off))}
    {buffer.set(lastgrid, sys.iif(itemdata.rawfield(string.concat(gridspan,math.min(8,$index+1)),$rowid,Off)==0||$index==8,'lastgrid',''))}
    <se:if expression="$gridspan GT 0">
     <se:then>
      <div class="{html.combinecssclasses(string.concat('grid_', $gridspan), $lastgrid)}">
       {itemdata.field(string.concat('column',$index),$rowid,Off)}
      </div>
     </se:then>
     <se:else>{this.parent.break()}</se:else>
    </se:if>
   </se:for>
   {buffer.set(result, $mainresult + $beforeresult + $afterresult)}
  </se:then>
  <se:else>
   <se:for from="1" to="8" save="result">
    {buffer.set(index, this.index())}
    {buffer.set(gridspan, itemdata.field(string.concat(gridspan,$index),$rowid,Off))}
    {buffer.set(lastgrid, sys.iif(itemdata.rawfield(string.concat(gridspan,math.min(8,$index+1)),$rowid,Off)==0||$index==8,'lastgrid',''))}
    <se:if expression="$gridspan GT 0">
     <se:then>
      <div class="{html.combinecssclasses(string.concat('grid_', $gridspan), $lastgrid)}">
       {itemdata.field(string.concat('column',$index),$rowid,Off)}
      </div>
     </se:then>
     <se:else>{this.parent.break()}</se:else>
    </se:if>
   </se:for>
  </se:else>
 </se:if>
 {buffer.set(result,$result + html.div("",'class="cleargrid"'))}
 {translation.setresult(html.div($result, $attributes))}
</se:if>

Features & Modules