Column with boolean value : show and edit as radiobutton ?

[Johann Permanne]

Hello,

Here's an example :

@(Html.EJ().Grid<Object>("GridParameterLoading").Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.listeParameterLoading).UpdateURL("../Parameters/parameterloadingUpdate").InsertURL("../Parameters/parameterloadingInsert").RemoveURL("../Parameters/parameterloadingRemove").Adaptor(AdaptorType.RemoteSaveAdaptor))
            .AllowPaging()
            .PageSettings(p => { p.PageSize(9); })
            .IsResponsive()
            .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Normal).ShowDeleteConfirmDialog(); })
            .ToolbarSettings(toolbar =>
            {
                toolbar.ShowToolbar().ToolbarItems(items =>
                {
                    items.AddTool(ToolBarItems.Add);
                    items.AddTool(ToolBarItems.Edit);
                    items.AddTool(ToolBarItems.Delete);
                    items.AddTool(ToolBarItems.Update);
                    items.AddTool(ToolBarItems.Cancel);
                });
            })
            .Columns(col =>{
                col.Field("PK_ID").HeaderText("PK_ID").IsPrimaryKey(true).Visible(false).Add();
                col.Field("Wording").HeaderText("Wording").ValidationRules(v => v.AddRule("required", true)).TextAlign(TextAlign.Center).Width(100).Add();

                col.Field("Loading").HeaderText("Loading").EditType(EditingType.BooleanEdit).TextAlign(TextAlign.Center).Width(50).Add();
            })
)

Is it possible to have the "Loading" column (while adding/editing) shown as radiobuttons with two values (true and false) and custom text options ?

[Thavasianand Sankaranarayanan]

Hi Johann, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to create a two radio buttons inside Boolean column in Grid. So, we suggest you to use the editTemplate property of ejGrid. In this editTemplate we can create two radio buttons and we can update those button values using the existing/edited value. 

Refer the below code example. 

@(Html.EJ().Grid<object>("Grid") 

           .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource).UpdateURL("/Grid/UrlUpdate") 

                            .InsertURL("/Grid/UrlInsert").RemoveURL("/Grid/UrlDelete").Adaptor(AdaptorType.RemoteSaveAdaptor)) 

                 

             ---- 

 

           .Columns(col => 

            { 

 

               ---- 

 

            col.Field("Verified").HeaderText("Verified").EditTemplate(a => { a.Create("create").Read("read").Write("write"); }).DisplayAsCheckbox(false).Add(); 

                 

            })) 

 

<script type="text/javascript"> 

 

    function create() { 

 

        return $("<input type='radio' style='float:left'/><label for='State1' style='float:left' >True</label><input type='radio' style='float:left'/><label for='State1'>False</label>"); 

 

    } 

 

    function write(args) { 

         

        if (args.rowdata["Verified"]) { 

            $('.e-grid .gridform input[type=radio]').eq(0).prop('checked', true); 

        } 

        else { 

            $('.e-grid .gridform input[type=radio]').eq(1).prop('checked', true) 

        } 

    } 

 

    function read(args) { 

       

        return $('.e-grid .gridform input[type=radio]').eq(0).prop('checked') ? true : false; 

         

    } 

    

</script> 

Note: In your query you have mention that you need a custom text in column. Please provide the following details for better assistance. 

1. You need the custom text in the same radio button column or in a different column.
2. Do you need to save the custom text value also in server end.
3. Share the exact requirement on using custom text inside column which already has radio buttons.

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/137874/ze/RemoteSaveAdaptorSample-1414027032.zip 

Refer the help documentation. 

Link: https://help.syncfusion.com/aspnetmvc/grid/editing#cell-edit-template 

Regards, 

Thavasianand S. 

[Johann Permanne]

It's working great !

I managed the custom text shown with querycellinfo :

function queryCellInfoLoading(args) {
        if (args.column.field == "Verified") {
            if (args.rowData.Verified) {
                args.cell.innerText = "OK verified";
            } else {
                args.cell.innerText = "Caution ! Not verified...";
            }
        }
    }

it's exactly what I wanted. Thanks a lot for your answer  !

[Thavasianand Sankaranarayanan]

Hi Johann, 

 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

                          

Regards, 

Thavasianand S.