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

10 posts, 0 answers
  1. Larry
    Larry avatar
    1 posts
    Member since:
    Jun 2012

    Posted 18 Jan 2014 Link to this post

    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).
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2409 posts

    Posted 21 Jan 2014 Link to this post

    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.
  3. Lydia
    Lydia avatar
    7 posts
    Member since:
    Dec 2013

    Posted 10 Mar 2014 in reply to Konstantin Dikov Link to this post

    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.
  4. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2409 posts

    Posted 13 Mar 2014 Link to this post

    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.

     
  5. jas
    jas avatar
    2 posts
    Member since:
    Aug 2015

    Posted 03 Aug 2015 Link to this post

    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

  6. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2409 posts

    Posted 06 Aug 2015 Link to this post

    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
  7. jas
    jas avatar
    2 posts
    Member since:
    Aug 2015

    Posted 06 Aug 2015 in reply to Konstantin Dikov Link to this post

    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

  8. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2409 posts

    Posted 11 Aug 2015 Link to this post

    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
  9. Neeraj Isaac
    Neeraj Isaac avatar
    3 posts
    Member since:
    Jan 2010

    Posted 20 Nov 2018 Link to this post

    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;   
                        }
                    }
                }

  10. Peter Milchev
    Admin
    Peter Milchev avatar
    483 posts

    Posted 22 Nov 2018 Link to this post

    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 onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top