Having Fun with SmartGridComponent

time to read 14 min | 2703 words

I am preparing to my Dev Teach talks, and I wanted to show a cool view component. Here is a sample of how it looks like now:

<%

component SmartGridComponent, {

      @source : customers,

      @displayAddress: false,

      @displayFax: false,

      @displayPhone: false

}

%>

I want to ignore some of the properties of the customer entity. This demonstrate both symbols in Brail (hmm, sounds like something else altogether :-) ) and using Convention over Configuration for this.

And here is a bit more complex example, showing how to display just the items that we want, in the order that we want:

<%

component SmartGridComponent, {

       @source : customers,

       @columns: [

              @customerId,

              @companyName,

              @contactName,

              @contactTitle

       ]

}

%>

And here is how I can override spesific behavior for the grid:

<%

component SmartGridComponent, {

       @source : customers,

       @columns: [

              @customerId,

              @companyName,

              @contactName,

              @contactTitle

       ]}:

       section customerIdHeader:

              output "<th>Id</th>"

       end

       section customerID:

       %>

       <td>${Html.LinkTo(item, "Customers", "ListOrder", item)}</td>

       <%

       end

end

%>

Here is how the last one looks like, by the way:

(Image from clipboard).png