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

[Larry]

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).

[Konstantin Dikov]

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

[Lydia]

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.

[Konstantin Dikov]

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

 

 

[jas]

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

[Konstantin Dikov]

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

[jas]

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

[Konstantin Dikov]

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

[Neeraj Isaac]

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

[Peter Milchev]

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