This is a migrated thread and some comments may be shown as answers.

How to respond to a GridCheckBox checked event?

3 Answers 89 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dave
Top achievements
Rank 1
Dave asked on 22 May 2012, 08:41 PM
I have a master-detail grid defined. In the detail grid I have a GridCheckBoxColumn whose UniqueName is IsCompleted. I have another GridDateTimeColumn column in the detail grid whose UniqueName is DateCompleted. These values are initially populated from our database. Everything works fine so far.

What I would like to do is when the user checks the IsCompleted check box, the DateCompleted column is automatically populated with Today's date. All this should be done on the client side as the user may want to change the date after the automatic setting of the date.

Being fairly new to the Telerik controls, I can't figure out which events and how to accomplish this. Any help would be greatly appreciated!

3 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 23 May 2012, 08:25 AM
Hi Dave,

Try the following code to automatically populate Today's date to GridDateTimeColumn column in the detail table.

C#:
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
if (e.Item is GridEditableItem && e.Item.IsInEditMode && e.Item.OwnerTableView.Name == "Detail")
    {
        GridEditableItem ditem = (GridEditableItem)e.Item;
        int index = ditem.ItemIndex;
        CheckBox chkbox = (CheckBox)ditem["IsCompleted"].Controls[0];
        chkbox.Enabled = true;
        chkbox.AutoPostBack = true;
        chkbox.Attributes.Add("onclick", "oncheckedChaned('" + index + "'); return false;");
                 
    }
}

Javascript:
<script type="text/javascript">
    function oncheckedChaned(index)
    {
        var grid = $find('<%=RadGrid1.ClientID %>');
        var masterTable = grid.get_masterTableView();
        traverseChildTables(masterTable,index);
    }
    function traverseChildTables(gridTableView, index)
    {
        var dataItems = gridTableView.get_dataItems();
        var todaysDate = new Date();
        var date= todaysDate.format("MM/dd/yyyy");
        for (var i = 0; i < dataItems.length; i++)
        {
            if (dataItems[i].get_nestedViews().length > 0)
            {
                var nestedView = dataItems[i].get_nestedViews()[0];
                nestedView.get_dataItems()[index].get_cell("DateCompleted").textContent = date;
            }
        }
    }
</script>

Thanks,
Princy.
0
Dave
Top achievements
Rank 1
answered on 23 May 2012, 01:25 PM
Thanks, Princy! The code you provided got me 90% of the way there. After implementing your suggestion, it works somewhat.

Here is what happens:

  • The user clicks on the Edit button and the record is placed in Edit mode. (I am using in-place editing on the detail radgrid).
  • The user clicks on the IsCompleted checkbox column and the DateCompleted date changes to today's date, which is the desired behavior, however the IsCompleted checkbox does not remain checked,which is not desired. I would like the IsCompleted checkbox to remain checked.

  • If the user clicks on the IsCompleted checkbox that has been previously checked, the DateCompleted date is set to today's date and the IsCompleted checkbox remains checked. I would like the checkbox to be cleared and the DateCompleted date set to null.

I tried various methods but could not get the above scenario to work. If you could point me in the right direction, that would be great.

Thanks for your help!

0
Princy
Top achievements
Rank 2
answered on 24 May 2012, 09:32 AM
Hi Dave,

Please try the following code snippet.

C#:
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode && e.Item.OwnerTableView.Name == "Detail")
    {
        GridEditableItem ditem = (GridEditableItem)e.Item;
        CheckBox chkbox = (CheckBox)ditem["IsCompleted"].Controls[0];
        RadDatePicker DatePicker = (RadDatePicker)ditem["DateCompleted"].Controls[0];
        string id =DatePicker.ClientID;
        int index = ditem.ItemIndex;
        chkbox.Attributes.Add("onclick", "oncheckedChaned(this,'" + index + "','"+id+"'); ");
    }
}

Javascript:
<script type="text/javascript">
    function oncheckedChaned(Checkbox,index,DatePickerId)
    {
        var grid = $find('<%=RadGrid1.ClientID %>');
        var masterTable = grid.get_masterTableView();
        traverseChildTables(Checkbox,masterTable,index,DatePickerId);
    }
    function traverseChildTables(Checkbox,gridTableView, index,DatePickerId) {
        debugger;
        var dataItems = gridTableView.get_dataItems();
        var todaysDate = new Date();
        var datepicker = $find(DatePickerId);
        if (Checkbox.checked == true) {
            datepicker._dateInput.set_selectedDate(todaysDate);
        }
        else {
            datepicker._dateInput.set_selectedDate(null);
        }
    }
</script>

Thanks,
Princy.
Tags
Grid
Asked by
Dave
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Dave
Top achievements
Rank 1
Share this question
or