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

Dynamically show/hide Column Editor controls in row in edit mode based on data in the row?

5 Answers 125 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 30 Jul 2014, 07:00 PM

In each row of a grid with EditType = "Row", I'm trying to show/hide the column editor controls based on data in that row. When some rows are in edit mode (after being clicked on), they will display a text box, checkbox, etc. approporiate for that particular row. Other rows will hide that option in the same column.
For the entire column, edit controls can be shown/hidden based on the column's ReadOnly field. Can this be turned on/off for individual rows?
Would prefer to handle this server-side. Trying to avoid managing dynamically added controls based on data conditions and instead simply turn on/off editing in specific cells of each row.

In the example below, when a row is in edit mode, I want the edit text box in the MilkType column to only display if the Product for that row is Milk. Otherwise the cell should be read-only when the row is in edit mode.

Thanks!
-Matt

(posting code separately - having problems submitting new thread with code blocks)

5 Answers, 1 is accepted

Sort by
0
Matt
Top achievements
Rank 1
answered on 30 Jul 2014, 07:01 PM
ASPX:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
      
    <telerik:RadGrid ID="TestGrid" runat="server" AllowMultiRowSelection="True" OnNeedDataSource="TestGrid_OnNeedDataSource" >
        <MasterTableView EditMode="Batch" BatchEditingSettings-EditType="Row" AutoGenerateColumns="False">
            <Columns>
                <telerik:GridBoundColumn ReadOnly="True" DataField="Product" HeaderText="Product" UniqueName="Product" DataType="System.String"></telerik:GridBoundColumn>
                <telerik:GridNumericColumn ColumnEditorID="ShortEditbox" ReadOnly="False" UniqueName="Quantity" DataField="Quantity" NumericType="Number" HeaderText="Quantity" DataType="System.Int32"  />
                <telerik:GridBoundColumn ColumnEditorID="TextEditbox" ReadOnly="False" UniqueName="MilkType" DataField="MilkType" HeaderText="MilkType" DataType="System.String"  />
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
  
    <telerik:GridNumericColumnEditor ID="ShortEditbox" runat="server">
        <NumericTextBox Width="50px" BackColor="#edffc3" NumberFormat-DecimalDigits="0" ShowSpinButtons="True" MinValue="0" />
    </telerik:GridNumericColumnEditor>
    <telerik:GridTextBoxColumnEditor ID="TextEditbox" runat="server">
        <TextBoxStyle BackColor="#edffc3" ></TextBoxStyle>
    </telerik:GridTextBoxColumnEditor>
      
  
</asp:Content>
0
Matt
Top achievements
Rank 1
answered on 30 Jul 2014, 07:03 PM
Code Behind:


01.using System;
02.using System.Collections.Generic;
03.using System.Data;
04.using System.Linq;
05.using System.Web;
06.using System.Web.UI;
07.using System.Web.UI.WebControls;
08.using Telerik.Web.UI;
09.  
10.namespace Foo
11.{
12.    public partial class Sandbox1 : App_Code.BasePage2
13.    {
14.        protected void Page_Load(object sender, EventArgs e)
15.        {
16.  
17.        }
18.  
19.        protected void TestGrid_OnNeedDataSource(object sender, GridNeedDataSourceEventArgs e)
20.        {
21.            TestGrid.DataSource = CurrentData;
22.        }
23.  
24.        protected List<ShoppingListItem> CurrentData
25.        {
26.            get
27.            {
28.                List<ShoppingListItem> data = new List<ShoppingListItem>();
29.                ShoppingListItem item = new ShoppingListItem();
30.                item.Product = GroceryItemTypes.Bread;
31.                item.Quantity = 1;
32.                item.MilkType = null;
33.                data.Add(item);
34.  
35.                item = new ShoppingListItem();
36.                item.Product = GroceryItemTypes.Milk;
37.                item.Quantity = 1;
38.                item.MilkType = MilkTypes.TwoPercent;
39.                data.Add(item);
40.  
41.                item = new ShoppingListItem();
42.                item.Product = GroceryItemTypes.Eggs;
43.                item.Quantity = 6;
44.                item.MilkType = null;
45.                data.Add(item);
46.  
47.                return data;
48.            }
49.        }
50.    }
51.  
52.    public class ShoppingListItem
53.    {
54.        public GroceryItemTypes Product { get; set; }
55.        public int Quantity { get; set; }
56.        public MilkTypes? MilkType { get; set; }
57.    }
58.  
59.    public enum GroceryItemTypes { Eggs, Milk, Bread }
60.    public enum MilkTypes { Whole, TwoPercent, Skim }
61.}
0
Matt
Top achievements
Rank 1
answered on 30 Jul 2014, 07:09 PM
Example of desired functionality
0
Accepted
Shinu
Top achievements
Rank 1
answered on 31 Jul 2014, 08:15 AM
Hi Matt,

Please try the following code snippet I tried to hide the TextBox when bread row is clicked.

ASPX:
<telerik:RadGrid ID="TestGrid" runat="server" AllowMultiRowSelection="True" OnNeedDataSource="TestGrid_OnNeedDataSource">
    <MasterTableView EditMode="Batch" BatchEditingSettings-EditType="Row" AutoGenerateColumns="False">
        ....
    </MasterTableView>
    <ClientSettings>
        <ClientEvents OnBatchEditOpened="OnBatchEditOpened" />
    </ClientSettings>
</telerik:RadGrid>

Javascript:
<script type="text/javascript">
    function OnBatchEditOpened(sender, args) {
                var cardStatusCell = sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(), "Product");
                if (cardStatusCell.innerHTML == "Bread") {
                    sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(), "MilkType").getElementsByTagName("input")[0].style.display = "none";
                }
    }
</script>

Thanks,
Shinu.
0
Matt
Top achievements
Rank 1
answered on 31 Jul 2014, 04:45 PM
That works. Thanks!
Tags
Grid
Asked by
Matt
Top achievements
Rank 1
Answers by
Matt
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Share this question
or