504
Views
7
Comments
Solved
[OutSystems Data Grid Web Sample] Request a sample of radio buttons in a DataGrid
Question
outsystems-data-grid-web-sample
Web icon
Forge asset by OutSystems


Hi


I want to implement single row selection with radio buttons.

Could you give us a sample that implements this feature?


Best Regards

UserImage.jpg
Takahisa Oda
Solution

It was realized by writing the following function and calling from the content of the GridColumnAdvanced widget, as well as Javascript of buttonColumn.

redioColumn = function(gridId, widgetId, fieldId) {

    if (fieldId !== '') {

        return '<input type="radio" class="radio-button" name="' + fieldId + '" onchange="OsNotifyWidget(\'' + widgetId + '\',\'$value\')" value="$title">';

    }

}; 


Thank you.

2017-10-31 16-30-21
erik berg

Takahisa Oda wrote:

redioColumn = function(gridId, widgetId, fieldId) {

    if (fieldId !== '') {

        return '<input type="radio" class="radio-button" name="' + fieldId + '" onchange="OsNotifyWidget(\'' + widgetId + '\',\'$value\')" value="$title">';

    }

}; 

Note that for the custom column to work, the passed in javascript function needs to reference both the $value and the $title parameters some place in the function.  It is unclear if this requirement is OutSystems' or Wijmos'.  If both parameters are not used, the default behavior of the $value parameter column is used to define the column's view and editor.  I could not get my custom column to display (no js runtime errors either) until I added the $title parameter as a temporary variable, even though my custom column did not need or use this parameter and subsequent temporary variable.


2018-07-09 07-35-13
Elize van der Riet

Hi Takahisa,


Would like to help, but I need to understand better you requirement. Do you want to select the row in the Data Grid (Table Records) using a radio button, that means one of the column's cell contains a radio button and when you click this then that row is selected? I am assuming this is what you want, so here is an example attached. This example has a table of Persons. It opens on a screen with list of Persons and the link to add more. Then there is an additional screen accessible from the menu with the radio button example, click on this "Grid with Radio Button Select". Select one of the rows with the radio button, then to test if it is working click on the top right hand the link "Check which row is selected". I included an excel to bootstrap some Persons.


The Radio Buttons should be all bound to the same variable to make them work, so you define one variable of PersonId type and bind this to the radio button. The vakue of the radio button must be the PersonId of the row in the table where the radio button is.

Hope this helps.

RadiobuttonGrid.oml
UserImage.jpg
Takahisa Oda

Hi Elize.


Thank you for your reply.


The usage of the radio button I requested is the same as the sample you provided.

I'm sorry, but what I want to know is the radio button in the Data Grid Widget, not the Table Record Widget.


I expect to embed tags of ' input type = "radio" ' as in the 'Button Column' example, but I do not know the specific method.


Thank you for your continued support.

Best Regards

2018-07-09 07-35-13
Elize van der Riet

Hi Takhisa,


I am sorry I cannot help, I am not familiar with a "Data Grid" widget in OutSystems. Is this an additional component you get from the Forge? Because I do not know such a widget in OutSystems I assumed you meant the Table Record Widget. Are you referring to the Data Grid Forge component?

UserImage.jpg
Takahisa Oda

Hi Elize.


The Data Grid widget is released to Forge on March 28 from Outsystems R&D.

This widget is a wrapper around the Javascript library Wijmo, and has many useful features.

(If you search on Forge, you should find it.)


2018-07-09 07-35-13
Elize van der Riet

Hi Takahisa,


Yes, I found in Forge, it is the DataGrid Component, I think it is the term "widget" which we normally use for widgets already existing built into OutSystems. This led me off the track. I have not yet used this. I downloaded and ran the xample, but something is wrong, it seems broken, the buttons are cutoof, not fully visible in the row, even the message box at the top broken, the "i" icon out of line (almost below the text) and the close icon (x) there are 2 of, something's wrong.

So sorry, cannot help you on this because I ahve not yet used it,

UserImage.jpg
Takahisa Oda
Solution

It was realized by writing the following function and calling from the content of the GridColumnAdvanced widget, as well as Javascript of buttonColumn.

redioColumn = function(gridId, widgetId, fieldId) {

    if (fieldId !== '') {

        return '<input type="radio" class="radio-button" name="' + fieldId + '" onchange="OsNotifyWidget(\'' + widgetId + '\',\'$value\')" value="$title">';

    }

}; 


Thank you.

2017-10-31 16-30-21
erik berg

Takahisa Oda wrote:

redioColumn = function(gridId, widgetId, fieldId) {

    if (fieldId !== '') {

        return '<input type="radio" class="radio-button" name="' + fieldId + '" onchange="OsNotifyWidget(\'' + widgetId + '\',\'$value\')" value="$title">';

    }

}; 

Note that for the custom column to work, the passed in javascript function needs to reference both the $value and the $title parameters some place in the function.  It is unclear if this requirement is OutSystems' or Wijmos'.  If both parameters are not used, the default behavior of the $value parameter column is used to define the column's view and editor.  I could not get my custom column to display (no js runtime errors either) until I added the $title parameter as a temporary variable, even though my custom column did not need or use this parameter and subsequent temporary variable.


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.