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

Telerik RadGrid (using Batch Edit) Hide / Disable Column Based on Another Column's Value

9 Answers 449 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Larry
Top achievements
Rank 1
Larry asked on 18 Jan 2014, 09:03 PM

I'm trying to get RadGrid to conditionally hide or disable a field when it is in edit mode based on the value of another field.

I have been able to get this to work when the grid displays the list of items, but once the grid enters edit mode, the columns display ...

I am using OnItemDataBound to successfully conditionally display during the initial load, but setting the items when the user clicks a row to get it into batch mode is not working.

I'm also trying to set the tab order when I go into edit mode, for some reason, the grid throws the cursor to the 2nd column ...

Note: PValue and CValue and in GridTemplateColumns, as is CardStatus.


public void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
foreach (GridDataItem item in RadGrid1.Items)
       {
          string BoundColumnValue = item["CardStatus"].Text; // accessing    GridBoundColumn value using ColumnUniqueName
            string BoundColumnValue2 = item["CValue"].Text;
            TextBox txtbx = (TextBox)item.FindControl("CardStatus");
            Label numlb = (Label)item.FindControl("CardValue");
 
            if (txtbx.Text.Equals("True"))
            {
                txtbx.ForeColor = Color.Red;
 
                numlb.Enabled = false;
                numlb.BackColor = Color.Yellow;
                numlb.ForeColor = Color.Red;
               //Just testing to see if it would evaluate
            }
            else
            {
                txtbx.ForeColor = Color.Beige;
            }
            //string TemplateColumnValue = lb.Text;// accessing Label Text.
        }
 
        foreach (GridEditableItem item in RadGrid1.EditItems)
        {
            string BoundColumnValue = item["CardStatus"].Text; // accessing GridBoundColumn value using ColumnUniqueName
            string BoundColumnValue2 = item["CValue"].Text;
            TextBox txtbx = (TextBox)item.FindControl("CardStatus");
            if (txtbx.Text.Equals("True"))
            {
                txtbx.ForeColor = Color.Red;
 
                //numTxt.BackColor = Color.Yellow;
                //numTxt.ForeColor = Color.Red;
            }
            else
            {
                txtbx.ForeColor = Color.Beige;
            }
}
}

I just need to be able to selectively prevent data entry in a column

The ASPX source is below:


          <telerik:GridTemplateColumn ColumnEditorID="CValue" DataField="CValue" HeaderText="Card" UniqueName="CValue" ItemStyle-Width="75px" HeaderStyle-Width="75px">
 
                                    <EditItemTemplate>
 
                                        <telerik:RadNumericTextBox ID="CValue" Width="50px" AllowOutOfRangeAutoCorrect="false"  runat="server" MaxLength="1" MaxValue="1" NumberFormat-DecimalDigits="0" Text='<%# Bind("CValue") %>'></telerik:RadNumericTextBox>
                                        <asp:RequiredFieldValidator runat="server" ControlToValidate="CValue" ErrorMessage="<br />Required (0-1 Only)!" SetFocusOnError="true"></asp:RequiredFieldValidator>
                                    </EditItemTemplate>
                                    <ItemTemplate>
                                        <asp:Label ID="CValue" Width="50px" runat="server" Text='<%# Bind("CValue") %>'></asp:Label>
                                    </ItemTemplate>
 
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn DataField="DateEdited" ReadOnly="true" Visible="false" DataType="System.DateTime" FilterControlAltText="Filter DateEdited column" HeaderText="DateEdited" SortExpression="DateEdited" UniqueName="DateEdited">
                                </telerik:GridBoundColumn>
                                <telerik:GridTemplateColumn UniqueName="CardStatus" DataField="CardStatus" ItemStyle-Width="50px" HeaderStyle-Width="50px">
                                <ItemTemplate>
                              <asp:TextBox ID="CardStatus" Width="10px"  runat="server" Text='<%# Bind("CardStatus") %>'></asp:TextBox>          
                                </ItemTemplate>
                                    <EditItemTemplate>
      <asp:TextBox ID="CardStatus" Width="10px"  runat="server" Text='<%# Bind("CardStatus") %>'></asp:TextBox>          
 
                                    </EditItemTemplate>
 
                            </telerik:GridTemplateColumn>
 
                            </Columns>
 
                        </MasterTableView>
 
                        <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>
 
                        <FilterMenu EnableImageSprites="False"></FilterMenu>
</telerik:RadGrid>

Any help / workarounds would be appreciated ... again, "just" need to prevent editing in the CValue column when the CardStatus value is true (bit field) ... using batch mode (using another solution isn't an option now).

Also, the issue with the tab order being messed up is particularly frustrating ... any hints on that one?

Thanks

Larry


(sorry , this is cross-posted elsewhere, but am a bit desperate right now).

9 Answers, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 21 Jan 2014, 07:19 PM
Hi Larry,

Please refer to the answer in your support ticket (ID: 777922 ) regarding the same issue. If any further assistance is needed I suggest that we continue the communication there.

I am posting the provided solution from the ticket here, since it could help others with similar requirement:

For achieving such functionality, the client-side "OnBatchEditOpened" event of the grid should be handled:
<ClientSettings>
    <Scrolling AllowScroll="True" UseStaticHeaders="True" />
    <ClientEvents OnBatchEditOpened="OnBatchEditOpened" />
</ClientSettings>
And the JavaScript:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function OnBatchEditOpened(sender, args) {
            if (args.get_columnUniqueName() == "CValue") {
                var cardStatusCell = sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(), "CardStatus");
                var cardStatusValue = sender.get_batchEditingManager().getCellValue(cardStatusCell);
                if (cardStatusValue == "True") {
                    args.get_cell().getElementsByTagName("input")[0].disabled = "disabled";
                }
                else {
                    args.get_cell().getElementsByTagName("input")[0].disabled = "";
                }
            }
        }
    </script>
</telerik:RadCodeBlock>


Regards,
Konstantin Dikov
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Lydia
Top achievements
Rank 1
answered on 11 Mar 2014, 03:34 AM
Hi, the disabling is working, just wondering how to disable the whole row in radgrid batch edit?
Also how to disable combobox? it seems it's only working with textbox.
Thanks.
0
Konstantin Dikov
Telerik team
answered on 13 Mar 2014, 03:20 PM
Hello Lydia,

Actually, a more appropriate approach for disabling the editing for a certain row would be to handle the client-side OnBatchEditOpening event and use the args.set_cancel(true); method for canceling the opening of a row/cell.

Following is a simple example of that approach, where the CardStatus is a boolean value:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function OnBatchEditOpening(sender, args) {
            var cardStatusCell = sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(), "CardStatus");
            var cardStatusValue = sender.get_batchEditingManager().getCellValue(cardStatusCell);
            if (cardStatusValue == false) {
                args.set_cancel(true);
            }
        }
    </script>
</telerik:RadCodeBlock>
 
<telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView EditMode="Batch">
    </MasterTableView>
    <ClientSettings>
        <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        <ClientEvents OnBatchEditOpening="OnBatchEditOpening" />
    </ClientSettings>
</telerik:RadGrid>

Hope that helps.


Regards,
Konstantin Dikov
Telerik
 

DevCraft Q1'14 is here! Watch the online conference to see how this release solves your top-5 .NET challenges. Watch on demand now.

 
0
jas
Top achievements
Rank 1
answered on 03 Aug 2015, 11:47 PM

Hi,

This really helped me a lot. I need to set my input maxValue to 100 (for percentages) but I can't get it right.

<telerik:GridTemplateColumn HeaderText="f4" DataField="f4" UniqueName="f4">
    <ItemTemplate>
        <%# Eval("f4Display") %>
    </ItemTemplate>
    <EditItemTemplate>
        <telerik:RadNumericTextBox Width="110px" runat="server" ID="txtf4" NumberFormat-DecimalDigits="0"></telerik:RadNumericTextBox>
    </EditItemTemplate>
    <HeaderStyle CssClass="GridHeaderGrey OpBold" HorizontalAlign="Center" Width="12%" />
    <ItemStyle CssClass="RadBorder OpCenter" BackColor="#FFFABC" />
</telerik:GridTemplateColumn>

01.function OnBatchEditOpened(sender, args) {
02.    if (args.get_columnUniqueName() == "f4") {
03.     
04.        var inputTypeCell = sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(), "f2").innerHTML;
05.         
06.        if (inputTypeCell.toString().indexOf("(%)") > 0) {
07.             
08.            args.get_cell().getElementsByTagName("input")[0].disabled = "disabled"; //works, but not what I need
09.             
10.            args.get_cell().getElementsByTagName("input")[0].maxValue = "100"; //not working, but what I need
11.        }
12.    }
13.}

Please help,

Jas

0
Konstantin Dikov
Telerik team
answered on 06 Aug 2015, 02:32 PM
Hello,

The default behavior of the Batch Editing will use only one editor for the entire column and dynamically changing properties of the control depending on a value of another cell could cause problems. I would personally recommend that you handle the OnBatchEditCellValueChanging event and perform custom validation of the new value and if it does not match the criteria, inform the user.

Nevertheless, regarding the code that you are using, please keep in mind that the RadNumericTextBox client object is not a DOM element and you can not get reference to it in such manner. In the context of your scenario you could use the BatchEditingManager _getDataControl(cell) method:
function OnBatchEditOpened(sender, args) {
    if (args.get_columnUniqueName() == "f4") {
        var inputTypeCell = sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(), "f2").innerHTML;
        var batchManager = sender.get_batchEditingManager();
        var numericTextBox = batchManager._getDataControl(args.get_cell());
 
        if (inputTypeCell.toString().indexOf("(%)") >= 0) {                        
            numericTextBox.set_maxValue(100);
        }
        else {
            numericTextBox.set_maxValue(10000); // or whatever you need it
        }
    }
}

Once again, please consider using the OnBatchEditCellValueChanging event instead for the validation.


Regards,
Konstantin Dikov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
jas
Top achievements
Rank 1
answered on 06 Aug 2015, 08:00 PM

Thanks. Your suggestion works.

I am now trying to rather set a warning OnBatchEditCellValueChanging  as you mentioned.

Just one question: How do I set the editorValue to the cellValue if a certain condition is met? (basically revert to the old value)

Thanks again for the help,

Jas

0
Konstantin Dikov
Telerik team
answered on 11 Aug 2015, 08:42 AM
Hi Jas,

When you want to prevent the changing of a value within the OnBatchEditCellvalueChanging event you could use the args.set_cancel(true) method:
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function cellValueChanging(sender, args) {
                   //if your condition fails, use the below line  
            args.set_cancel(true);
        }
    </script>
</telerik:RadCodeBlock>

The above will also keep the cell opened for editing. However, if you need to close the cell for editing if the validation fails, you can use the following private method:
args.set_cancel(true);
sender.get_batchEditingManager()._tryCloseEdits(sender.get_masterTableView());

Hope this helps.


Regards,
Konstantin Dikov
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Neeraj Isaac
Top achievements
Rank 1
answered on 20 Nov 2018, 07:16 AM

Hi Team,

How to get datakey value in "OnBatchEditOpened" event and

Please help us how to disable a RadDatePicker in "OnBatchEditOpened" event. Please find the sample code for your quick reference.

function OnBatchEditOpened(sender, args) {
                debugger;
                var rowid = args.get_row().sectionRowIndex;
                var row = $find('<%= radgrdBillRate.ClientID %>').get_masterTableView().get_dataItems()[rowid];
                var IsOrientation = row.getDataKeyValue("IsOrientation");

                if (args.get_columnUniqueName() == "StartDate") {
                    debugger;

                       var txtInTime = '';

                        txtInTime = $telerik.findControl(args.get_cell(), "RadGrdStartDate");    

                       if (IsOrientation == "1")

                       {                        
                           txtInTime._enabled = false;                       
                        }
                    else 

                  {

                        txtInTime._enabled = true;   
                    }
                }
            }

0
Peter Milchev
Telerik team
answered on 22 Nov 2018, 11:42 AM
Hello Neeraj,

To use the getDataKeyValue, you should add the DataField name to the ClientDataKeyNames collection of the Grid as explained in https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/how-to/Selecting/extracting-key-values-client-side

To disable a DatePicker, you should use the set_enabled(false) method of its client-side object API: 

<script>
    function OnBatchEditOpened(sender, args) {
        if (args.get_columnUniqueName() == "OrderDate") {
            var rowid = args.get_row().sectionRowIndex;
            var row = sender.get_masterTableView().get_dataItems()[rowid];
            var orderId = row.getDataKeyValue("OrderID");
            var picker = $telerik.$(args.get_cell()).find(".RadPicker input")[0].control
            if (orderId % 2 == 0) {
                picker.set_enabled(false)
            } else {
                picker.set_enabled(true)
            }
         }
    }
</script>

Attached is a runnable sampe implementing the suggested approach. 

If this is not the desired functionality, please modify the attached project and send it back to us in an official support ticket along with more details and specific examples of the actual and expected behaviors.

Regards,
Peter Milchev
Progress Telerik
Get quickly and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Larry
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Lydia
Top achievements
Rank 1
jas
Top achievements
Rank 1
Neeraj Isaac
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or