Author Topic: PQ Grid examples of images  (Read 2056 times)

dataSQL_

  • Pro Deluxe
  • Newbie
  • *
  • Posts: 48
    • View Profile
PQ Grid examples of images
« on: January 20, 2017, 05:25:23 am »
Thank you for your wonderful patience, got it running... http://35.167.46.75/

Are there any examples of images being displayed in PQGrid, similar to:

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6265
    • View Profile
Re: PQ Grid examples of images
« Reply #1 on: January 20, 2017, 04:13:55 pm »
That's similar to row detail feature of pqGrid.  http://paramquery.com/pro/demos/detail
 
Replace the code in HTML tab with this, click on "Edit and Run" button and you would get a smiley picture in the Address tab of the detail row.

Code: [Select]
<div id="grid_md" style="margin:5px auto;"></div>

<!--script tag used to define detail template-->
<script type="text/pq-template" id="tmpl">
    <div class="pq-tabs" style="width:auto;">
        <ul>
            <li><a href="#tabs-2">Products</a></li>           
            <li><a href="#tabs-1">Address</a></li>           
            <li><a href="#tabs-3">Dates</a></li>
        </ul>
        <div id="tabs-2">
        </div>       
        <div id="tabs-1" class='pq-native-select pq-no-capture'>
            <p><b>Shipping Address:</b> <#=ShipAddress#></p>
            <p><b>Shipping City:</b> <#=ShipCity#></p>
            <p><b>Shipping Region:</b> <#=ShipRegion#></p>
            <p><b>Shipping Postal Code:</b> <#=ShipPostalCode#></p>
<img src="http://www.w3schools.com/tags/smiley.gif" />
        </div>       
        <div id="tabs-3" class='pq-native-select pq-no-capture'>
            <p><b>Order Date:</b> <#=OrderDate#></p>
            <p><b>Required Date:</b> <#=RequiredDate#></p>
            <p><b>Shipped Date:</b> <#=ShippedDate#></p>
        </div>
    </div>
</script>