Disable a row based on column value in Batch edit mode

[Sambathraj]

Hi,
I am using Rad Grid in Batch edit mode. I would like to disable editing the row based on the row value. How can I do this?
Thanks,
Sambath

[Shinu]

Hi Sambathraj,

For achieving such functionality, the client-side "OnBatchEditOpened" event of the grid should be handled:

ASPX:

<ClientSettings>
 <ClientEvents OnBatchEditOpened="OnBatchEditOpened" />
</ClientSettings>

JS:

<script type="text/javascript">
    function OnBatchEditOpened(sender, args) {
        if (args.get_columnUniqueName() == "ShipCity") // column to be disabled
        {
            var cardStatusCell = sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(), "OrderID");
            var cardStatusValue = sender.get_batchEditingManager().getCellValue(cardStatusCell);
            if (cardStatusValue == "10302") {
                args.get_cell().getElementsByTagName("input")[0].disabled = "disabled";
            }
            else {
                args.get_cell().getElementsByTagName("input")[0].disabled = "";
            }
        }
    }
</script>

Thanks,
Shinu

[Angel Petrov]

Hi Sambathraj,

Additionally if you want to prevent the row from being opened for edit you can subscribe to the OnBatchEditOpening event and cancel it according to some criteria.

Regards,
Angel Petrov
Telerik

[Sambathraj]

Thanks for your reply. I will try this and implement if it meets my need.
Thanks,
Sambath.

[Cory]

[quote]Shinu said:Hi Sambathraj,

For achieving such functionality, the client-side "OnBatchEditOpened" event of the grid should be handled:

ASPX:

<ClientSettings>
 <ClientEvents OnBatchEditOpened="OnBatchEditOpened" />
</ClientSettings>

JS:

<script type="text/javascript">
    function OnBatchEditOpened(sender, args) {
        if (args.get_columnUniqueName() == "ShipCity") // column to be disabled
        {
            var cardStatusCell = sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(), "OrderID");
            var cardStatusValue = sender.get_batchEditingManager().getCellValue(cardStatusCell);
            if (cardStatusValue == "10302") {
                args.get_cell().getElementsByTagName("input")[0].disabled = "disabled";
            }
            else {
                args.get_cell().getElementsByTagName("input")[0].disabled = "";
            }
        }
    }
</script>

Thanks,
Shinu[/quote]

 

This works brilliantly for INPUT values.  But how would you do it for a RADDROPDOWNLIST?  I've tried a ton of different things - but no success so far:

if (args.get_columnUniqueName() == "WBSL1") // columns to be disabled
{
var ewpnumbercell = sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(), "EWPNumber");
var ewpnumbervalue = sender.get_batchEditingManager().getCellValue(ewpnumbercell);
if (ewpnumbervalue != "") {
args.get_cell().getElementsByTagName("input")[0].disabled = "disabled";
args.get_cell().getElementsByTagName("ul")[0].disabled = "disabled";
args.get_cell().getElementsByTagName("input")[1].disabled = "disabled";
args.get_cell().getElementsByTagName("ul")[1].disabled = "disabled";
}
else {
args.get_cell().getElementsByTagName("input")[0].disabled = "";
args.get_cell().getElementsByTagName("ul")[0].disabled = "";
args.get_cell().getElementsByTagName("input")[1].disabled = "";
args.get_cell().getElementsByTagName("ul")[1].disabled = "";
}
}

 Looking at the details of how the RADDropDownList gets created in the template column I thought the above would work.  But unfortunately it doesn't disable the drop down.

 

Help?  Thanks!

Cory

[Konstantin Dikov]

Hello Cory,

Disabling INPUT elements or any other editor with such approach when Batch Editing is used is not supported and will cause multiple problems in the long run. The only supported scenario for disabling the editing for particular cell or row is to set args.set_cancel(true) within the OnBatchEditOpening event, as per Angel's suggestion.


Best Regards,
Konstantin Dikov
Telerik

[Cory]

OK... I'm trying to work with what you said Konstanin - thanks for your response.

 If the user tries to change a value that shouldn't be changed (in my case part of the PK that is displayed on the screen) - I would like to cancel the event with a warning.  I'm in EDITTYPE = ROW EDITMODE = "BATCH".  What I'm seeing though is that the events flow like this:

1) the user changes a value on the grid.

2) the user clicks on a different row.

3) The OnBatchEditOpening event fires

4) the OnBatchEditOpened event fires

5) the OnBatchEditCellValueChanging event finally fires.

So if I cancel the event in the OnBatchEditCellValueChanging - it puts the value in that column back to the previous one - but doesn't prevent the change of focus from that row to the clicked row. 

How can I cancel the enter set of events?  I thought I could set a variable in OnBatchEditCellValueChanging and if that was true, do a cancel in the OnBatchEditOpening as well - but that doesn't work as they fire backwards.

 

Thanks!
Cory

[Cory]

[quote]Cory said:

How can I cancel the enter set of events?  I thought I could set a variable in OnBatchEditCellValueChanging and if that was true, do a cancel in the OnBatchEditOpening as well - but that doesn't work as they fire backwards.[/quote]

 

Should have read - how do I cancel the ENTIRE set of events. not enter set of events.  THX.

[Angel Petrov]

Hi,

Actually when you click on a new row the OnBatchEditCellValueChanging event should be fired for the cells in the currently edited row. And if you set a flag to true then you will be able to cancel the OnBatchEditOpening event thus both reverting the value that you want for the currently edited row and preventing a new row from being edited.

Is this not the requirement? If not please share with us the page code so we could examine the implementation. Additionally we would need you to clarify on the exact functionality you are after.

Regards,
Angel Petrov
Telerik

[Cory]

[quote]Angel Petrov said:Hi,

Actually when you click on a new row the OnBatchEditCellValueChanging event should be fired for the cells in the currently edited row. And if you set a flag to true then you will be able to cancel the OnBatchEditOpening event thus both reverting the value that you want for the currently edited row and preventing a new row from being edited.

[/quote]

I have the code working now - using the CELL edit type rather than the ROW edit type.  The attached the old code. 

What happens is that the user changes a value in the ComboBox - which is part of the PK so shouldn't be able to be edited - only inserted.  I wasn't able to disable the combobox in the editor because of the restrictions from batch edit mode - so I'm catching that the user is changing the value and then displaying a message that they aren't allowed to edit this field. 

When the user changes the combobox value, then clicks on another row, then that row actually opens for edit prior to the combobox  batcheditcellchanging event being fired - so even if you cancel, you end up with the columns in the new row in edit mode - except for the combobox.

 Here is the code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SetupEWP.aspx.cs" Inherits="ALEX.SetupEWP" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE HTML >
<html>
<head>
    <title>Welcome</title>
    <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
    <meta content="C#" name="CODE_LANGUAGE">
    <meta content="JavaScript" name="vs_defaultClientScript">
    <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
    <link href="./Style/alex.css" type="text/css" rel="stylesheet">
    <script src="./Script/toolbar.js" type="text/javascript"></script>
</head>
<body leftmargin="0" topmargin="0" rightmargin="0">
    <form id="frmEWP" method="post" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>
                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>
            </Scripts>
        </telerik:RadScriptManager>
       
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        var DoCancel = false;
        function OnBatchEditOpened(sender, args)
            {
            if (args.get_columnUniqueName() == "EWPNumber" || args.get_columnUniqueName() == "ContractorID" ) // columns to be disabled
            {
                var isnewcell = sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(), "IsNewRecord");
                var isnewvalue = sender.get_batchEditingManager().getCellValue(isnewcell);
                if (isnewvalue != "Y") {
                    args.get_cell().getElementsByTagName("input")[0].disabled = "disabled";
                }
                else {
                    args.get_cell().getElementsByTagName("input")[0].disabled = "";
                }
            }
        }
        function OnBatchEditOpening(sender, args) {
            // we would like to cancel if DoCancel is true
            if (DoCancel)
                args.set_cancel(true);
        }
        function BatchEditCellValueChanging(sender, args)
        {
            if (args.get_columnUniqueName() == "WBSL1")
            {
                var isnewcell = sender.get_masterTableView()._getCellByColumnUniqueNameFromTableRowElement(args.get_row(), "IsNewRecord");
                var isnewvalue = sender.get_batchEditingManager().getCellValue(isnewcell);
                var row = args.get_row();
                var rowouter = row.outerHTML;
               
                var editorValue = args.get_editorValue();
                var cellValue = args.get_cellValue();
               
                if (isnewvalue != "Y" && editorValue != cellValue) {
                    args.set_cancel(true);
                    DoCancel = true;
                    alert("You can not change the Funding Type on an existing record.");
                }
            }
        }
        function requestStart(sender, args) {
            if (args.get_eventTarget().indexOf("ExportToExcelButton") >= 0) {
                args.set_enableAjax(false);
            }
        }
        function SaveChanges() {
            var grid = $find('<%=raddgActivityGroup.ClientID%>');
            grid.get_batchEditingManager().saveChanges(grid.get_masterTableView());
        }
    </script>
</telerik:RadCodeBlock>
               
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanelMod" ClientEvents-OnRequestStart="requestStart">
            <div id="toolbarDiv" style="width: 100%; height: 24px; background-color: white">
                <table class="toolBar" id="toolbarTable" style="border-right: gray thin solid; border-top: gray thin solid; border-left: gray thin solid; width: 100%; border-bottom: gray thin solid; font-family: Arial; height: 25px"
                    cellspacing="0" cellpadding="1">
                    <tr>
                        <td style="width: 25px; height: 25px">
                            <asp:ImageButton ID="ibSave" onmouseover="javascript: changeToolBarButtonStyle(this,'over');" onmouseout="javascript: changeToolBarButtonStyle(this,'out');"
                                runat="server" ImageUrl="./image/toolbar/save.gif" Height="20px" BorderColor="LightGray" BorderStyle="Solid" BorderWidth="1" Width="20px"
                                OnClientClick="SaveChanges(); return false;"></asp:ImageButton></td>
                        <td style="width: 25px; height: 25px">
                            <asp:ImageButton ID="ibHelp" onmouseover="javascript: changeToolBarButtonStyle(this,'over');" onmouseout="javascript: changeToolBarButtonStyle(this,'out');"
                                runat="server" ImageUrl="./image/toolbar/help.gif" Height="20px" BorderColor="LightGray" BorderStyle="Solid" BorderWidth="1" Width="20px"></asp:ImageButton></td>
                        <td align="center" width="99%">
                            <asp:Label ID="lblHeading" runat="server" Font-Names="Arial" Font-Size="14px" Font-Bold="True"
                                DESIGNTIMEDRAGDROP="139">Setup EWP Values</asp:Label></td>
                    </tr>
                </table>
            </div>
            <br />
            <asp:Label ID="lblError" runat="server" Font-Bold="True" Visible="False" ForeColor="Red" Font-Names="Arial"></asp:Label>
            <div id="tabDiv" style="padding-top: 6px; padding-left: 10px; background-color: #f5f5f5">
                <table class="Border" style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px; font-family: Arial"
                    cellspacing="0" cellpadding="5">
                    <tr>
                        <td style="border-right: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid; background-color: #6699cc">
                            <table class="Border" style="width: 800px; font-family: Arial; border-collapse: collapse; background-color: white"
                                cellpadding="2">
                                <tr>
                                    <td style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid; background-color: silver"
                                        colspan="2"><b>General</b></td>
                                </tr>
                                <tr>
                                    <td style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; width: 130px; border-bottom: black 1px solid"
                                        align="left"><strong>PIF Number:</strong></td>
                                    <td style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; width: 140px; border-bottom: black 1px solid"
                                        align="left">
                                        <telerik:RadComboBox ID="RadComboPIF" runat="server" AllowCustomText="False" EmptyMessage="Find a PIF NUMBER" Filter="Contains" Height="400px" SortCaseSensitive="False" Width="600px"
                                            AutoPostBack="true" OnSelectedIndexChanged="RadComboPIF_SelectedIndexChanged" CausesValidation="False" EnableScreenBoundaryDetection="False" Skin="WebBlue">
                                        </telerik:RadComboBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; width: 130px; border-bottom: black 1px solid"
                                        align="left"><strong>CWS Number:</strong></td>
                                    <td style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; width: 263px; border-bottom: black 1px solid"
                                        align="left">
                                        <asp:DropDownList ID="ddCWPNumber" runat="server" Width="385px" AutoPostBack="True" Font-Names="Arial"></asp:DropDownList></td>
                                </tr>
                                <tr>
                                    <td bgcolor="#6699cc" colspan="2" height="8"></td>
                                </tr>
                                <tr>
                                    <td style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid; background-color: silver"
                                        colspan="2"><b>Details</b></td>
                                </tr>
                                <tr>
                                    <td style="border-right: black 1px solid; border-top: black 1px solid; border-left: black 1px solid; border-bottom: black 1px solid; border-collapse: collapse"
                                        align="left" colspan="2">
                                        <br />
                                        <telerik:RadGrid ID="raddgActivityGroup" runat="server" OnBatchEditCommand="raddgActivityGroup_BatchEditCommand" OnItemCommand="raddgActivityGroup_ItemCommand"
                                            AllowSorting="True" AutoGenerateColumns="False" GroupPanelPosition="Top" Skin="WebBlue" AutoGenerateDeleteColumn="True">
                                            <GroupingSettings CollapseAllTooltip="Collapse all groups" />
                                            <ClientSettings>
                                                <ClientEvents OnBatchEditOpened="OnBatchEditOpened" OnBatchEditCellValueChanging="BatchEditCellValueChanging" OnBatchEditOpening="OnBatchEditOpening"/>
                                            </ClientSettings>
                                            <ExportSettings ExportOnlyData="true" OpenInNewWindow="true" HideStructureColumns="true">
                                                <Excel Format="Xlsx" />
                                            </ExportSettings>
                                            <MasterTableView EditMode="Batch" CommandItemDisplay="Bottom">
                                                <BatchEditingSettings EditType="Row" HighlightDeletedRows="true" />
                                                <CommandItemSettings ShowExportToExcelButton="True" ShowRefreshButton="False" />
                                                <Columns>
                                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="ewp_number" FilterControlAltText="Filter EWPNumber column"
                                                        Groupable="False" HeaderText="EWP" MaxLength="5" UniqueName="EWPNumber" ColumnEditorID="TextEditorSmall">
                                                        <HeaderStyle Width="75px" />
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="ewp_description" FilterControlAltText="Filter EWPDescription column"
                                                        HeaderText="EWP Description" MaxLength="120" UniqueName="EWPDescription" ColumnEditorID="TextEditorBig"></telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="contractor_id" DataType="System.Int16" FilterControlAltText="Filter ContractorID column"
                                                        HeaderText="Contractor ID" MaxLength="5" UniqueName="ContractorID" ColumnEditorID="TextEditorSmall">
                                                        <HeaderStyle Width="75px" />
                                                    </telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="contractor_name" FilterControlAltText="Filter ContractorName column"
                                                        HeaderText="Contractor Name" MaxLength="120" UniqueName="ContractorName" ColumnEditorID="TextEditorBig"></telerik:GridBoundColumn>

                                                    <telerik:GridTemplateColumn HeaderText="Funding Type"
                                                        UniqueName="WBSL1" DataField="wbs_l1">
                                                        <ItemTemplate>
                                                            <telerik:RadDropDownList ID="ddWBSL1Item" runat="server" DefaultMessage=" Please select "
                                                                SelectedValue='<%# Bind("wbs_l1") %>' Enabled="false">
                                                                <Items>
                                                                    <telerik:DropDownListItem Text="0 - NO WBS L1" Value="0"/>
                                                                    <telerik:DropDownListItem Text="1 - CAP" Value="1"/>
                                                                    <telerik:DropDownListItem Text="2 - EAWC" Value="2"/>
                                                                    <telerik:DropDownListItem Text="3 - NRE" Value="3"/>
                                                                    <telerik:DropDownListItem Text="4 - OPEX" Value="E" />
                                                                </Items>
                                                            </telerik:RadDropDownList>
                                                           
                                                        </ItemTemplate>
                                                        <EditItemTemplate>
                                                            <telerik:RadDropDownList ID="ddWBSL1" runat="server" DefaultMessage=" Please select "
                                                                SelectedValue='<%# Bind("wbs_l1") %>'>
                                                                <Items>
                                                                    <telerik:DropDownListItem Text="0 - NO WBS L1" Value="0"/>
                                                                    <telerik:DropDownListItem Text="1 - CAP" Value="1"/>
                                                                    <telerik:DropDownListItem Text="2 - EAWC" Value="2"/>
                                                                    <telerik:DropDownListItem Text="3 - NRE" Value="3"/>
                                                                    <telerik:DropDownListItem Text="4 - OPEX" Value="E" />
                                                                </Items>
                                                            </telerik:RadDropDownList>
                                                        </EditItemTemplate>
                                                    </telerik:GridTemplateColumn>
                                                    <telerik:GridBoundColumn AllowFiltering="False" DataField="is_new_record"
                                                        HeaderText="" MaxLength="1" UniqueName="IsNewRecord" ColumnEditorID="TextEditorSmall"
                                                        DefaultInsertValue="Y" Display="false">
                                                        <HeaderStyle Width="0px" />
                                                    </telerik:GridBoundColumn>
                                                </Columns>
                                            </MasterTableView>
                                         </telerik:RadGrid><br />
                                        <telerik:GridTextBoxColumnEditor runat="server" ID="TextEditorSmall">
                                            <TextBoxStyle Width="50px" />
                                        </telerik:GridTextBoxColumnEditor>
                                        <telerik:GridTextBoxColumnEditor runat="server" ID="TextEditorBig">
                                            <TextBoxStyle Width="150px" />
                                        </telerik:GridTextBoxColumnEditor>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>
            <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="App_Data/WBSL1.xml"></asp:XmlDataSource>
        </telerik:RadAjaxPanel>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanelMod" runat="server" Skin="Default">
        </telerik:RadAjaxLoadingPanel>
    </form>
</body>
</html>