We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Making a checkbox editable within a Hierarchy Grid (Child)

Making a checkbox editable within a Hierarchy Grid (Child)

Hello, 

I am using the Hierarchy Grid (MVC) and would like some assistance on working with a checkbox.

In the child grid, I have a field name Converted, which indicates whether an individual accounts has been "converted" to a new account. The values for the fields are true/false (string) and I would like to display it as a checkbox (checked if true).

I can display the check box correctly but I cannot get it to be editable (only want this field to be editable and the other 5 fields in the row not editable).

I know this will probably involve AJAX to update the fields once the selection has been made and I am okay with that.

Just want to get the fields where you can click to select and deselect the checkbox

Any help is appreciated....

Thanks

3 Replies
VA Venkatesh Ayothi Raman Syncfusion Team February 7, 2017 11:02 AM UTC

Hi Allen, 
Thanks for contacting Syncfusion support. 
Query #1: “Render/edit the checkbox column” 
We have achieved your requirement using Type and EditType properties in column. We can set the Type as Boolean which makes the column as checkbox column and set the editing type as “booleanedit” which renders the checkbox while editing the column. Please refer to the code example and Help documentation for more information, 
Code example: 
@Grid 
.ChildGrid(child => 
                     { 
                         child.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).UpdateURL("/Grid/Update") 
                       .InsertURL("/Grid/Insert").RemoveURL("/Grid/Remove").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
                            .QueryString("EmployeeID") 
                            . . . 
                            .Columns(col => 
                            { 
                                . . . 
                                col.Field("Converted").Type(ColumnType.Boolean).EditType(EditingType.Boolean).Width(120).Add();                                 
                            }); 
                     }) 
 

Help documentation:   
Query #2:” I can display the check box correctly but I cannot get it to be editable (only want this field to be editable and the other 5 fields in the row not editable).” 
The Grid has built-in support for disable the column from editing using allowEditing property like as follows, 
Code example: 
.ChildGrid(child => 
                     { 
                       . . . 
                            .Columns(col => 
                            { 
                                . . .                                col.Field("CustomerID").HeaderText("CustomerID").AllowEditing(false).Width(100).Add(); 
col.Field("EmployeeID").HeaderText("Employee ID").AllowEditing(false).Width(90).Add(); 
                                col.Field("Converted").Type(ColumnType.Boolean).EditType(EditingType.Boolean).Width(120).Add();                                 
                            }); 
                     }) 
//Here we can enable the editing only for checkbox column 

Refer to the Help documentation for more information, 

Query #3:” I know this will probably involve AJAX to update the fields once the selection has been made and I am okay with that.” 
We have achieved your requirement using RemoteSaveAdaptor(for demonstration purpose) in Grid. Its automatically call the server side update function while we updating the record. Please refer to the code example, Help documentation and screenshot for your reference, 
  Code example: 
{ 
                         child.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).UpdateURL("/Grid/Update") 
                       .InsertURL("/Grid/Insert").RemoveURL("/Grid/Remove").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
                            .QueryString("EmployeeID") 
                            .AllowPaging() 
                            .PageSettings(page => page.PageSize(5)) 
                             
                            .Columns(col => 
                            { 
                                . . .         
                            }); 
                     }) 
 

Help documentation: 


Screenshot1: 
 
Screenshot2: 
 
We have prepared a sample based on your requirement which can be download from following link, 
Regards, 
Venkatesh Ayothiraman. 


AW Allen Wilson February 7, 2017 05:16 PM UTC

Hello Venkatesh,

Thank you for the prompt response and example to view.

Is it possible to have the checkbox editable from the start. I would prefer the user did not have to click the pencil icon in order to check/uncheck the checkbox. In our current page we have that functionality (which took a lot of work to do) and I would like to have that same functionality if possible.

MS Mani Sankar Durai Syncfusion Team February 8, 2017 12:42 PM UTC

Hi Allen, 

Based on your requirement we have prepared a sample that can be downloaded from the below link. 
In this sample your requirement has been achieved using columnTemplate feature of ejGrid. In columnTemplate, HTML templates can be specified in the template property of the particular column as a string (HTML element) or ID of the template’s HTML element.  
Using templateRefresh event of ejGrid we have rendered the ejCheckbox in the template column based on the value of Verified (Boolean) field. While rendering the checkbox, we bind the change event for the checkbox. In change event, we pass the value of the checkbox and current row to server-side using AJAX. We can get the selected record details using getSelectedRecords method of ejGrid.  
 
Refer the below code example 
 
[Controller.cs] 
  public ActionResult Data(bool value, EditableOrder record) 
        { 
            return Json(value, JsonRequestBehavior.AllowGet); 
        } 
 
[Index.cshtml] 
@(Html.EJ().Grid<object>("FlatGrid") 
       .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).UpdateURL("/Grid/Update") 
                           .InsertURL("/Grid/Insert").RemoveURL("/Grid/Remove").Adaptor(AdaptorType.RemoteSaveAdaptor)) 
   .AllowPaging() 
   .Columns(col => 
   { 
       col.HeaderText("CheckBox").Field("Verified").Template("<input type='checkbox' id={{:OrderID}} />").TextAlign(TextAlign.Center).AllowEditing(false).Width(110).Add(); 
      ... 
   }) 
    .ClientSideEvents(eve => { eve.TemplateRefresh("refresh"); })  
 ) 
 
<script> 
 
    function refresh(args) { 
        if (args.data.Verified) 
            $(args.cell).find("input").ejCheckBox({ change : "check", checked: true }); 
        else 
            $(args.cell).find("input").ejCheckBox({ change : "check" }); 
    } 
 
    function check(args) { 
        var grid = $("#FlatGrid").ejGrid("instance"); 
        var record = grid.getSelectedRecords()[0]; 
        $.ajax({ 
            url: "/Home/Data", 
            type: "POST", 
            dataType: "json", 
            contentType: "application/json;charset=utf-8", 
            data: JSON.stringify({ "value": args.isChecked, "record" : (record) }), 
            success: function (e) { 
                var value = e; 
            } 
        }); 
 
    } 
</script> 
 

Refer the documentation link. 
 
 


Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 


Loader.
Live Chat Icon For mobile
Up arrow icon