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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Making a checkbox editable within a Hierarchy Grid (Child)

Thread ID:

Created:

Updated:

Platform:

Replies:

128701 Feb 6,2017 11:29 PM UTC Feb 8,2017 12:42 PM UTC ASP.NET MVC 3
loading
Tags: Grid
Allen Wilson
Asked On February 6, 2017 11:29 PM UTC

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

Venkatesh Ayothi Raman [Syncfusion]
Replied On 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. 


Allen Wilson
Replied On 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.

Mani Sankar Durai [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;