[Solved] Cell Update Event

[Kevin]

I tried to find out any available event in server or client sides which will be fired in out-of-band (AJAX) when user modifies any cell value and move out the cell. So the new value can be validated in server side and also it could change the value on other cell or change the dropdown list on other column according to the new value.

[Princy]

Hi Kevin,

One suggestion would be attaching OnfocusOut event to textbox which is in EditMode, so that you can call and ajax request in order to validate it from code behind and then set the second textbox/dropdownlist value based on the first cell value. Here is the example that I tried:

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem && e.Item.IsInEditMode)
    {
        GridDataItem item = (GridDataItem)e.Item;
        TextBox textbox1 = item["CustomerID"].Controls[0] as TextBox;       // Get the textbox for column CustomerID
        TextBox textbox2 = item["CompanyName"].Controls[0] as TextBox;    // Get the textbox for column CompanyName

        textbox1.Attributes.Add("onFocusout", "return show('" + textbox1.ClientID + "','" + textbox2.ClientID + "')");
    }
}

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
    if (e.Argument == "Validate")
    {
        // Your code to validate
        // You can also pass more values from clientside as argument using array with comma seperated and split it from code behind
        Label1.Text = "Validated";
        HiddenField1.Value = "Validated";
    }
}

JavaScript:

<script type="text/javascript">
function show(cntl1, cntl2)
{
    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
    ajaxManager.ajaxRequest("Validate"); // Ajax request
    var text1 = document.getElementById(cntl1);  // Get clientside object for first textbox
    var text2 = document.getElementById(cntl2);  // Get clientside object for second textbox
    if(text1.value == 'ALFKI')
    {
        text2.value = "Value reset"; // Set the value based on text1 value
    }
}
</script>

Hope this information will be of helpful.

Thanks,
Princy

[Virendra]

Hi,

What about <telerik:GridDropDownColumn, <telerik:GridCheckBoxColumn and <telerik:GridDateTimeColumn?
The onFoucsOut or OnFocusIn is not firing on these type of columns.

Thanks
virendra

[Princy]

Hello Virendra,

You have to access the controls of the specific columns when the grid is in EditMode and then add the attributes accordingly. Check out the example below:
aspx:

 <telerik:GridDropDownColumn UniqueName="DropDownColumn" HeaderText="DropDownColumn" DataField="ProductName" ListTextField="ProductName" DataSourceID="SqlDataSource1" >
 </telerik:GridDropDownColumn>
 <telerik:GridCheckBoxColumn  UniqueName="CheckBoxColumn" HeaderText="CheckBoxColumn" DataField="Checked">
 </telerik:GridCheckBoxColumn>
 <telerik:GridDateTimeColumn UniqueName="DateTimeColumn" HeaderText="DateTimeColumn" DataField="OrderDate">
 </telerik:GridDateTimeColumn>

c#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode)
        {
            GridEditableItem editItem = (GridEditableItem)e.Item;
            CheckBox chk = editItem["CheckBoxColumn"].Controls[0] as CheckBox;
            RadComboBox ddl = editItem["DropDownColumn"].Controls[0] as RadComboBox;
            RadDatePicker picker = editItem["DateTimeColumn"].Controls[0] as RadDatePicker;
            chk.Attributes.Add("onFocusout", "chkshow();");
            // you can similarly add attributes for the combobox and datepicker
        }
   }

js:

    function chkshow()
    {

    }
    // you can use the same logic for the other controls

Thanks
Princy.

[Virendra]

Hi,

I had try it on different types of columns. 

The Javascript fuction "chkshow" fired only for Textbox and RadComboBox, but not for CheckBox and RadDatePicker.

Do they need any special treatment?

Thanks

virendra