1. Home
  2. Forum
  3. ASP.NET MVC
  4. Cell Click or Cell Edit event for Checkbox column

Cell Click or Cell Edit event for Checkbox column

Hello

I want to set date time value for cell 2 when cell 1 check box is checked in ASP.NET MVC Grid. Please let me know how can this be done.

Thank you.



5 Replies
PK Prasanna Kumar Viswanathan Syncfusion Team September 2, 2016 12:20 PM UTC

Hi Arun, 

Thanks for contacting Syncfusion support. 

We achieve your requirement using actionComplete event of ejGrid. This event will be triggered for every grid action success event. In this event we check the condition with the requestType and we can get the rowIndex in the arguments. We also bind the change event for checkbox in the actionComplete event. 
 
Using that we will find the checkbox is checked or not, if checkbox is checked we update the current system date value and time value to the DateTimePicker using setCurrenDateTime method of ejDateTimePicker.  
 
In the change event , if the checkbox is checked we update the current system date value and time value to the DateTimePicker using setCurrenDateTime method of ejDateTimePicker. If the checkbox is unchecked we will set the previous date and time value to DateTimePicker using setmodel 
 
 
@(Html.EJ().Grid<MVCSampleBrowser.Models.EditableOrder>("FlatGrid") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); }) 
         ------------------------------ 
            .AllowPaging() 
            .Columns(col => 
            { 
                col.Field("Verified").HeaderText("Verified").EditType(EditingType.Boolean).TextAlign(TextAlign.Center).Width(110).Add(); 
                col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right).Width(100).Priority(4).EditType(EditingType.DateTimePicker).Format("{0:MM/dd/yyyy hh:mm:ss}").ValidationRules(v => v.AddRule("date", true)).Add(); 
                col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
            }) 
            .ClientSideEvents(eve => eve.ActionComplete("complete")) 
) 
 
<script type="text/javascript"> 
    var datetime, grid, value; 
 
    function complete(args) { 
        if (args.requestType == "beginedit") { 
            var row = this.getRowByIndex(args.rowIndex); 
            row.find(".e-checkbox").ejCheckBox({ "change": checkChange }); 
            datetime = row.find(".e-datetimepicker").ejDateTimePicker("instance"); 
            value = datetime.model.value; 
            if (!ej.isNullOrUndefined(row.find(".e-checkbox").attr("checked"))) { 
                datetime.setCurrentDateTime(); 
            } 
        } 
 
        function checkChange(args) { 
             grid = $("#FlatGrid").ejGrid("instance"); 
             if (args.isChecked) { 
                datetime = grid.element.find(".gridform").find(".e-datetimepicker").ejDateTimePicker("instance"); 
                datetime.setCurrentDateTime(); 
            } 
            else { 
                datetime.option('value', value); 
            } 
 
        } 
    } 
</script> 
 
 
 
If we misunderstood your query please get back to us with more details regarding your requirement. 
 
Refer to the Help documents: 
 
 
 
Regards, 
Prasanna Kumar N.S.V 
 


AG Arun Gandhi September 2, 2016 06:57 PM UTC

Hello,

Thanks a lot for your reply. My issue is that there are multiple checkboxes and Date time column fields in the grid. I want to check if a particular column is checked based on this, certain column needs to be updated.

Thanks a lot for your help.



PK Prasanna Kumar Viswanathan Syncfusion Team September 5, 2016 08:14 AM UTC

Hi Arun, 
 
According to your requirement, we created a sample and in this sample we have two checkbox fields (Verified, Checkbox) and two Date time column fields (OrderDate, RequireDate). 
 
In this when we check the Verified column we update the current system date value and time value to the OrderDate column using setCurrenDateTime method of ejDateTimePicker. When we uncheck the Verified column we will set the previous date and time value to DateTimePicker using setmodel. 

If we check the Checkbox column we update the current system date value and time value to the RequireDate column using setCurrenDateTime method of ejDateTimePicker. When we uncheck the Checkbox column we will set the previous date and time value to DateTimePicker using setmodel. 

Find the code example and sample: 
 
 
@(Html.EJ().Grid<MVCSampleBrowser.Models.EditableOrder>("FlatGrid") 
        .Datasource((IEnumerable<object>)ViewBag.datasource) 
        ---------------------------------- 
            .AllowPaging() 
            .Columns(col => 
            { 
                --------------------- 
            .ClientSideEvents(eve => eve.DataBound("create").ActionComplete("complete")) 
) 
 
<script type="text/javascript"> 
    var datetime, grid, value, datetime2, value2; 
 
    function complete(args) { 
        if (args.requestType == "beginedit") { 
            var row = this.getRowByIndex(args.rowIndex); 
            var checkbox = row.find(".e-checkbox"); 
            for (var i = 0 ; i < checkbox.length ; i++) { 
                if ($(row.find(".e-checkbox")[i]).attr("name") == "Verified") { 
                    var check = $(row.find(".e-checkbox")[i]); 
                    check.ejCheckBox({ "change": checkChange }); 
                    if ($(row.find(".e-datetimepicker")[i]).attr("name") == "OrderDate") { 
                        datetime = $(row.find(".e-datetimepicker")[i]).ejDateTimePicker("instance"); 
                        value = datetime.model.value; 
                    } 
                    if(!ej.isNullOrUndefined($(row.find(".e-checkbox")[i]).attr("checked"))) 
                        datetime.setCurrentDateTime(); 
                } 
                else { 
                    var check2 = $(row.find(".e-checkbox")[i]); 
                    check2.ejCheckBox({ "change": checkChange2 }); 
                    datetime2 = $(row.find(".e-datetimepicker")[i]).ejDateTimePicker("instance"); 
                    value2 = datetime2.model.value; 
                    if (!ej.isNullOrUndefined($(row.find(".e-checkbox")[i]).attr("checked"))) 
                        datetime2.setCurrentDateTime(); 
                } 
            }         
        } 
 
        function checkChange(args) { 
             grid = $("#FlatGrid").ejGrid("instance"); 
             if (args.isChecked) { 
                datetime.setCurrentDateTime(); 
            } 
            else { 
                datetime.option('value', value); 
            } 
 
        } 
 
        function checkChange2(args) { 
            grid = $("#FlatGrid").ejGrid("instance"); 
            if (args.isChecked) { 
                datetime2.setCurrentDateTime(); 
            } 
            else { 
                datetime2.option('value', value2); 
            } 
        } 
    } 
</script> 
 
 
 
Regards, 
 
Prasanna Kumar N.S.V 


AG Arun Gandhi September 6, 2016 07:23 PM UTC

Thanks.

PK Prasanna Kumar Viswanathan Syncfusion Team September 7, 2016 04:17 AM UTC

Hi Arun, 

Thanks for the update.
  
Please let us know if you need any further assistance. 

Regards, 
Prasanna Kumar N.S.V 


Loader.
Up arrow icon