Loading ...
Sorry, an error occurred while loading the content.
 

Datatable with radio buttons

Expand Messages
  • ck55344
    I have a datatable with radio buttons, and here s the column definitions using radio formatter: var colDefs = [{ key: name , label: Name , minWidth:
    Message 1 of 2 , Aug 4, 2008
      I have a datatable with radio buttons, and here's the column
      definitions using "radio" formatter:

      var colDefs = [{
      key: "name",
      label: "Name",
      minWidth: "50px",
      sortable: true
      }, {
      key: "yesKey",
      label: "Yes",
      minWidth: "50px",
      formatter: "radio"
      }, {
      key: "noKey",
      label: "No",
      minWidth: "50px",
      formatter: "radio"
      }];

      In the generated HTML, the radio buttons in each column (vs. row)
      share the same name, making exlcusive selection on the radio buttons
      in each column. In other words, if I click on a radio button in a
      column, it will unselect the previous selection in the same column.
      I want the exclusive selection to be done by row. In other words, if
      I click on a radio button in a row, I want the previous selection in
      the same row (not column) unselected automatically.

      I have tried renaming the radio buttons after they have been
      generated, so that the radio buttons in each row (not column) will
      share the same name. The problem with this is I need to re-render
      the datatable, so that the data source will apply to the correct
      radio-button selections, but the re-rendering will wipe out my
      renaming of the radio buttons by row.

      Any help is appreciated!
    • Satyam
      Take a look at the radio formatter in DataTable-beta.js, it is quite simple: formatRadio : function(el, oRecord, oColumn, oData) { var bChecked = oData;
      Message 2 of 2 , Aug 4, 2008
        Take a look at the radio formatter in DataTable-beta.js, it is quite simple:
            formatRadio : function(el, oRecord, oColumn, oData) {
                var bChecked = oData;
                bChecked = (bChecked) ? " checked" : "";
                el.innerHTML = "<input type=\"radio\"" + bChecked +
                        " name=\"col" + oColumn.getId() + "-radio\"" +
                        " class=\"" + DT.CLASS_RADIO+ "\">";
            },
        
        
        The name is based on the column id.  Make your own custom formatter so that the radio name is made based on the row, such as:

            myFormatRadio = function(el, oRecord, oColumn, oData) {
                var bChecked = oData;
                bChecked = (bChecked) ? " checked" : "";
                el.innerHTML = "<input type=\"radio\"" + bChecked +
                        " name=\"" + oRecord.getData('name') + "-radio\"" +
                        " class=\"" + DT.CLASS_RADIO+ "\">";
            };
        
        

        Satyam




        ck55344 wrote:
        I have a datatable with radio buttons, and here's the column 
        definitions using "radio" formatter:
        
        var colDefs = [{
            key: "name",
            label: "Name",
            minWidth: "50px",
            sortable: true
        }, {
            key: "yesKey",
            label: "Yes",
            minWidth: "50px",
            formatter: "radio"
        }, {
            key: "noKey",
            label: "No",
            minWidth: "50px",
            formatter: "radio"
        }];
        
        In the generated HTML, the radio buttons in each column (vs. row) 
        share the same name, making exlcusive selection on the radio buttons 
        in each column.  In other words, if I click on a radio button in a 
        column, it will unselect the previous selection in the same column.  
        I want the exclusive selection to be done by row.  In other words, if 
        I click on a radio button in a row, I want the previous selection in 
        the same row (not column) unselected automatically.
        
        I have tried renaming the radio buttons after they have been 
        generated, so that the radio buttons in each row (not column) will 
        share the same name.  The problem with this is I need to re-render 
        the datatable, so that the data source will apply to the correct 
        radio-button selections, but the re-rendering will wipe out my 
        renaming of the radio buttons by row.
        
        Any help is appreciated!
        
        
        ------------------------------------
        
        Yahoo! Groups Links
        
        <*> To visit your group on the web, go to:
            http://groups.yahoo.com/group/ydn-javascript/
        
        <*> Your email settings:
            Individual Email | Traditional
        
        <*> To change settings online go to:
            http://groups.yahoo.com/group/ydn-javascript/join
            (Yahoo! ID required)
        
        <*> To change settings via email:
            mailto:ydn-javascript-digest@yahoogroups.com 
            mailto:ydn-javascript-fullfeatured@yahoogroups.com
        
        <*> To unsubscribe from this group, send an email to:
            ydn-javascript-unsubscribe@yahoogroups.com
        
        <*> Your use of Yahoo! Groups is subject to:
            http://docs.yahoo.com/info/terms/
        
        
        No virus found in this incoming message.
        Checked by AVG - http://www.avg.com 
        Version: 8.0.138 / Virus Database: 270.5.12/1589 - Release Date: 03/08/2008 13:00
        
        
        
          
      Your message has been successfully submitted and would be delivered to recipients shortly.