jQuery UI Widgets › Forums › DataTable › Images with inline table

Tagged: , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  ivailo 9 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Images with inline table Posts
  • November 11, 2015 at 6:30 pm Images with inline table #78011

    ToddHaddaway
    Participant

    I’m trying to add images/links within a cell of my dataTable and am having issues. I know there is an example of using images

    But I’m using regular spelled out table definitions and not sure how to implement the cellRenderers. Here is my current code with the attempt of an input with the type of image. 

    
<html>
  <head>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Project Tracker</title>
  </head>

  <body>

      <link rel="stylesheet" href="scripts/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="scripts/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="scripts/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="scripts/jqwidgets/jqxdatatable.js"></script> 
    <script type="text/javascript" src="scripts/jqwidgets/demos.js"></script>
    
    <script type="text/javascript">
	    
        $(document).ready(function () {
            
            $("#dataTable2").jqxDataTable(
            {
                width: '50%',
                altRows: true,
                sortable: true,
                pageable: false,
                 columnsResize: true,
                filterable: true,
                filterMode: 'simple',
                columns: [
                  { text: 'stuff', dataField: 'stuff' },
                  { text: 'Short Description', dataField: 'Short Description' },
                  { text: 'Long Description', dataField: 'Long Description' }              ]
            });
        });
    </script>
	    <table id="dataTable2" border="1">
	        <thead>
	            <tr>
	                <th align="left">stuff</th>
	                <th align="left">Short Description</th>
	                <th align="left">Long Description</th>
	            </tr>
	        </thead>
	        <tbody>
				<tr>
				   <td><input type="image"  name="DIVIDKEYHOLD" width="24" height="24" value="edit-24" title="Edit" src="images/edit-icon.png"  onClick="this.form.DIVIDKEY.value = this.value;"></td>
				     <td>--Unassigned--</td>
				     <td>--Unassigned--</td>
				</tr>
				<tr>
				   <td><input type="image"  name="DIVIDKEYHOLD" width="24" height="24" value="edit-22" title="Edit" src="images/edit-icon.png"  onClick="this.form.DIVIDKEY.value = this.value;"></td>
				     <td>ACAF</td>
				     <td>Academic Affairs</td>
				</tr>
				<tr>
				   <td><input type="image"  name="DIVIDKEYHOLD" width="24" height="24" value="edit-4" title="Edit" src="images/edit-icon.png"  onClick="this.form.DIVIDKEY.value = this.value;"></td>
				     <td>ADAF</td>
				     <td>Administrative Affairs</td>
				</tr>
				<tr>
				   <td><input type="image"  name="DIVIDKEYHOLD" width="24" height="24" value="edit-6" title="Edit" src="images/edit-icon.png" onClick="this.form.DIVIDKEY.value = this.value;" ></td>
				     <td>DoIT</td>
				     <td>Informationn Technology</td>
				</tr>
				<tr>
				   <td><input type="image"  name="DIVIDKEYHOLD" width="24" height="24" value="edit-28" title="Edit" src="images/edit-icon.png" onClick="this.form.DIVIDKEY.value = this.value;" ></td>
				     <td>PO</td>
				     <td>Office of the President</td>
				</tr>
				<tr>
				   <td><input type="image"  name="DIVIDKEYHOLD" width="24" height="24" value="edit-26" title="Edit" src="images/edit-icon.png" onClick="this.form.DIVIDKEY.value = this.value;" ></td>
				     <td>SAF</td>
				     <td>Student Affairs </td>
				</tr>
            </tbody>
       </table>

  </BODY>
</HTML>
    November 12, 2015 at 7:15 am Images with inline table #78026

    ivailo
    Participant

    Hi ToddHaddaway,

    The widget gets only text values from the table cells.

    Like a workaround you can store some values in the target column and to generate needed images.
    Here is the demo.

    Best Regards,
    Ivailo Ivanov

    jQWidgets Team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.