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

capture GridBoundColumn input event

4 Answers 89 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 09 Sep 2014, 01:56 PM
Based on input of GridBoundColumn A I would like to do the following

if greater than 0
1) Set GridBoundColumn B value to 0 and to readonly
2) Set a RadComboBox value to one of the options and to readonly (this RadComboBox is one of the columns in the Grid)

If 0
1) remove readonly status from GridBoundColumn B
2) Set a RadComboBox value to one of the options and remove readonly attribute (this RadComboBox is one of the columns in the Grid)

Prefer to do this with no postback


4 Answers, 1 is accepted

Sort by
0
Michael
Top achievements
Rank 1
answered on 10 Sep 2014, 06:50 PM
Any thoughts?
0
Konstantin Dikov
Telerik team
answered on 12 Sep 2014, 04:46 AM
Hi Michael,

The approach that could be used for making such relationships between different cells (editors) will highly depend on the edit mode that you are using, so I would like to ask you to elaborate on that part first, so we can point you in the right direction.

Generally, since there is no built-in functionality for achieving such behavior, it should be the developer's responsibility to figure out how to implement those relationships. Nevertheless, if you are not using Batch edit mode, what I could suggest is that you attach an event handlers for the client-side OnBlur events (or some event fired when a value is changed) and when those events fire, find the other control which value you need to update and change it accordingly.

If you need any pointers on how to accomplish the above, please provide information about the edit mode you are using.


Regards,
Konstantin Dikov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Michael
Top achievements
Rank 1
answered on 12 Sep 2014, 01:21 PM
Thanks, Konstantin. I understand what you are suggesting. But I don't know how to capture an onBlur event from here:

<telerik:GridBoundColumn UniqueName="Placements" HeaderText="Placements" DataField="Placements" DataType="System.Decimal" DefaultInsertValue="0">
 </telerik:GridBoundColumn>

The two items I want to modify on the onBlur event of that column will be:

<telerik:GridBoundColumn UniqueName="ContactHours" HeaderText="Contact Hours" DataField="contact_hrs" DataType="System.Int32" DefaultInsertValue="0" >
 </telerik:GridBoundColumn> 

<telerik:GridTemplateColumn UniqueName="Rate" HeaderText="Is Rate?">
   <ItemTemplate>
     <asp:Label ID="lbl_isRate" Text='<%# Eval("is_rate")%>' runat="server" />
   </ItemTemplate>
   <EditItemTemplate>
     <telerik:RadComboBox ID="rcb_IsRate" runat="server" AutoPostBack="false">
       <Items>
         <telerik:RadComboBoxItem Text="No" Value="N" />
         <telerik:RadComboBoxItem Text="Yes" Value="Y"/>
       </Items>
     </telerik:RadComboBox>
   </EditItemTemplate>
 </telerik:GridTemplateColumn>
0
Konstantin Dikov
Telerik team
answered on 17 Sep 2014, 06:02 AM
Hello Michael,

For the RadComboBox you could add an event handler directly in the markup for the the OnClientSelctedIndexChanged event:
<telerik:RadComboBox ID="rcb_IsRate" runat="server" AutoPostBack="false" OnClientSelectedIndexChanged="comboSelectedIndexChanged">
    <Items>
        <telerik:RadComboBoxItem Text="No" Value="N" />
        <telerik:RadComboBoxItem Text="Yes" Value="Y" />
    </Items>
</telerik:RadComboBox>

As for the TextBox editor for the GridBoundColumn you should handle the server-side OnItemCreated event of the grid, get reference to the editor and attach an event handler for the "onchange" event for example:
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        GridEditableItem editItem = e.Item as GridEditableItem;
        (editItem["ContactHours"].Controls[0] as TextBox).Attributes.Add("onchange", "textBoxValueChanged(this, event);");
    }
}

Following is RadGrid with both of your columns and attached event handlers for both editors:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function textBoxValueChanged(sender, args) {
            console.log("TextBox value changed");
        }
 
        function comboSelectedIndexChanged(sender, args) {
            console.log("combo value changed");
        }
    </script>
</telerik:RadCodeBlock>
 
<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" OnItemCreated="RadGrid1_ItemCreated">
    <MasterTableView AutoGenerateColumns="false">
        <Columns>
            <telerik:GridEditCommandColumn></telerik:GridEditCommandColumn>
            <telerik:GridBoundColumn UniqueName="ContactHours" HeaderText="Contact Hours" DataField="contact_hrs" DataType="System.Int32" DefaultInsertValue="0">
            </telerik:GridBoundColumn>
 
            <telerik:GridTemplateColumn UniqueName="Rate" HeaderText="Is Rate?">
                <ItemTemplate>
                    <asp:Label ID="lbl_isRate" Text='<%# Eval("is_rate")%>' runat="server" />
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadComboBox ID="rcb_IsRate" runat="server" AutoPostBack="false" OnClientSelectedIndexChanged="comboSelectedIndexChanged">
                        <Items>
                            <telerik:RadComboBoxItem Text="No" Value="N" />
                            <telerik:RadComboBoxItem Text="Yes" Value="Y" />
                        </Items>
                    </telerik:RadComboBox>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

And the code-behind:
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    DataTable table = new DataTable();
    table.Columns.Add("ID", typeof(int));
    table.Columns.Add("is_rate", typeof(string));
    table.Columns.Add("contact_hrs", typeof(string));
    for (int i = 0; i < 2; i++)
    {
        table.Rows.Add(i, "Yes", "15:00-20:00");
        table.Rows.Add(i, "No", "15:00-20:00");
    }
 
    (sender as RadGrid).DataSource = table;
}
 
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
        GridEditableItem editItem = e.Item as GridEditableItem;
        (editItem["ContactHours"].Controls[0] as TextBox).Attributes.Add("onchange", "textBoxValueChanged(this, event);");
    }
}

Hope this helps.



Regards,
Konstantin Dikov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or