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

Cell Click or Cell Edit event for Checkbox column

Thread ID:

Created:

Updated:

Platform:

Replies:

125676 Sep 1,2016 02:34 PM Sep 7,2016 12:17 AM ASP.NET MVC 5
loading
Tags: Grid
Arun Gandhi
Asked On September 1, 2016 02:34 PM

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.



Prasanna Kumar Viswanathan [Syncfusion]
Replied On September 2, 2016 08:20 AM

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 
 


Arun Gandhi
Replied On September 2, 2016 02:57 PM

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.



Prasanna Kumar Viswanathan [Syncfusion]
Replied On September 5, 2016 04:14 AM

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 


Arun Gandhi
Replied On September 6, 2016 03:23 PM

Thanks.

Prasanna Kumar Viswanathan [Syncfusion]
Replied On September 7, 2016 12:17 AM

Hi Arun, 

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

Regards, 
Prasanna Kumar N.S.V 


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

;