jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by sp 10 years, 12 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Button in DataTable Posts

June 25, 2014 at 3:10 pm Button in DataTable #56358

Participant

Hi!

I’m trying to transform an already existing html table into a jQWidgets DataTable.
Unfortunately the last column of my table contains a submit button.

Example:

<table id='jqxdatatable'>
  <thead>
    <tr>
      <th>Name</th>
      <th>Challenger</th>
      <th>Rfp</th>
      <th>Operational</th>
      <th>Archived</th>
      <th>View</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>cuc1</td>
      <td>1</td>
      <td>0</td>
      <td>0</td>
      <td>0</td>
      <td>
        <form style='margin-bottom:0;' method='post' action='/Cucs.page'>
          <input type='hidden' name='Name' value='1'/>
          <input type='submit' name='submit' value='Show Details'/>
        </form>
      </td>
    </tr>
    <tr>
      <td>cuc_test</td>
      <td>0</td>
      <td>0</td>
      <td>1</td>
      <td>0</td>
      <td>
        <form style='margin-bottom:0;' method='post' action='/Cucs.page'>
          <input type='hidden' name='Name' value='2'/>
          <input type='submit' name='submit' value='Show Details'/>
        </form>
      </td>
    </tr>
  </tbody>
</table>

I found the following example
http://www.jqwidgets.com/custom-grid-cells-rendering/
and I tried to use cellsrenderer but failed to write the renderer function.
It would be great if you could help me with it.

Heres what I’ve got so far

<html>
  <head>
... some css included ...
    <script type='text/javascript' src='/scripts/jquery-1.10.2.min.js'></script>
    <script type='text/javascript' src='/jqwidgets/jqxcore.js'></script>
    <script type='text/javascript' src='/jqwidgets/jqxdata.js'></script>
    <script type='text/javascript' src='/jqwidgets/jqxchart.js'></script>
    <script type='text/javascript' src='/jqwidgets/jqxgauge.js'></script>
    <script type='text/javascript' src='/jqwidgets/jqxscrollbar.js'></script>
    <script type='text/javascript' src='/jqwidgets/jqxbuttons.js'></script>
    <script type='text/javascript' src='/jqwidgets/jqxpanel.js'></script>
    <script type='text/javascript' src='/jqwidgets/jqxdatatable.js'></script>
    <script type='text/javascript' src='/jqwidgets/jqxlistbox.js'></script>
    <script type='text/javascript' src='/jqwidgets/jqxdropdownlist.js'></script>
     <script type='text/javascript'>
  $(document).ready(function () {
      var getLocalization = function () {
        var localizationobj = {};
        localizationobj.decimalseparator = ",";
        localizationobj.thousandsseparator = ".";
        return localizationobj;
      };
       $('#jqxdatatable').jqxDataTable(
       {
         width: '100%',
         height: '80%',
         altrows: true,
         sortable: false,
         columnsResize: true,
         theme: 'rs-jqwidgets',
         localization: getLocalization(),
         columns: [
           { text: 'Name', datafield: 'Name', width: '40%', cellsalign: 'left' },
           { text: 'Challenger', datafield: 'Challenger', width: '12%', cellsalign: 'right'},
           { text: 'Ready for Production', datafield: 'Rfp', width: '12%', cellsalign: 'right' },
           { text: 'Operational', datafield: 'Operational', width: '12%', cellsalign: 'right' },
           { text: 'Archived', datafield: 'Archived', width: '12%', cellsalign: 'right' },
           { text: 'View Details', datafield: 'View', width: '12%', cellsalign: 'center'}
         ]
       });
  });
     </script>
  </head>

Thank you very much in advance for your advice!

Best regards,
Sabrina

June 25, 2014 at 3:24 pm Button in DataTable #56362

Peter Stoev

Keymaster

Hi Sabrina,

The topic you’re pointing out is about another widget – jqxGrid, not jqxDataTable. We already have a sample which displays Buttons in jqxDataTable. Please, see: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatatable/javascript-datatable-command-column.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

June 26, 2014 at 8:21 am Button in DataTable #56411

Participant

Hi Peter,

thanks for the example, but I still don’t get it.
I think my problem is, that I don’t need a button to edit my data table but to forward some html form:

<form style='margin-bottom:0;' method='post' action='/Cucs.page'>
   <input type='hidden' name='Name' value='1'/>
   <input type='submit' name='submit' value='Show Details'/>
  </form>

Do I have to use the ‘rendered’ property to define a ‘click’ function?
And if yes, what should it return?

Best Regards,
Sabrina

June 26, 2014 at 12:37 pm Button in DataTable #56434

Participant

Ok, I got it!
Thanks again!

Best Regards,
Sabrina

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.