1

So I am using the SLDS and it uses all HTML5 syntax. I'm curious how to build a table/grid using a controller. I am trying using a static reference inside the control.

I figured I'd create a string based on SOQL and then pass that to the visualforce page to render. However, it's showing the code in the static reference.

Curious if I have to re-render. all the examples in the SLDS documentation hard code values. In .NET I'd use Razor syntax. You can see below that it's not putting the static reference in between the table

static reference in wrong spot

Visualforce:

<table class="slds-table slds-table--bordered slds-table--cell-buffer" style="margin-bottom: 30px">
        <thead>
            <tr class="slds-text-heading--label">
               {!test}
            </tr>
        </thead>
        <tbody>
            <tr>
              <th scope="row" data-label="Opportunity Name" title="Cloudhub">
                <div class="slds-truncate"><a href="javascript:void(0);">Cloudhub</a></div>
              </th>
              <td data-label="Account Name" title="Cloudhub">
                <div class="slds-truncate">Cloudhub</div>
              </td>  
            </tr>
        </tbody>
    </table>

Apex:

public string getTest(){
        return '<th scope="col" title="Opportunity Name"> ' + 
                '    <div class="slds-truncate">Opportunity Name</div>' +
                '</th>' +
                '<th scope="col" title="Account Name">' +
                '    <div class="slds-truncate">Account Name</div>' +
                '</th>';
    }
2

Change your html test to:

<table class="slds-table slds-table--bordered slds-table--cell-buffer" style="margin-bottom: 30px">
        <thead>
            <tr class="slds-text-heading--label">
               <apex:outputtext escape="false">{!test}</apex:outputtext>
            </tr>
        </thead>
        <tbody>
            <tr>
              <th scope="row" data-label="Opportunity Name" title="Cloudhub">
                <div class="slds-truncate"><a href="javascript:void(0);">Cloudhub</a></div>
              </th>
              <td data-label="Account Name" title="Cloudhub">
                <div class="slds-truncate">Cloudhub</div>
              </td>  
            </tr>
        </tbody>
    </table>

<apex:outputText> can do this for you.

Also, i would recommend to go through "<apex:repeat/>" and "<apex:dataTable/> tags. They work like for loop.

Try this:

            <apex:column >
                <apex:facet name="header" >
                    <apex:outputLabel styleClass="slds-text-heading--label">field1</apex:outputLabel>
                </apex:facet>
                <apex:outputText value="{!data.field1__c}" styleClass="slds-truncate" />
            </apex:column>

            <apex:column >
                <apex:facet name="header">
                    <apex:outputLabel styleClass="slds-text-heading--label">Field 2</apex:outputLabel>
                </apex:facet>
                <apex:outputText value="{!data.Activity_Time_Stamp__c}" styleClass="slds-truncate" />
            </apex:column>        
        </apex:dataTable> 
  • I tried the <apex:OutputText escape="false"> and I'm still having issues. For some reason the escape is not working. – tjcinnamon Jul 11 '16 at 21:14
  • also, I tried with datatable and couldn't get the styling to work – tjcinnamon Jul 11 '16 at 21:23
  • Also, I updated to include a pic of how it is rendering. – tjcinnamon Jul 11 '16 at 21:34
  • even adding the entire table to the apex controller it's still not rendering in the browser, despite having escape = false – tjcinnamon Jul 11 '16 at 21:42
  • I'm going to try the datatable and repeat – tjcinnamon Jul 12 '16 at 14:45
0

Add some unique id to the tr as below

<tr id="test-headings-id" class="slds-text-heading--label"> </tr>

At the end of page, in the script section add line,

document.getElementById("test-headings-id").innerHtml = '{!test}';
  • dang, that didn't work either – tjcinnamon Jul 12 '16 at 14:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.