Disable a row based on column value in Batch edit mode

10 posts, 0 answers
  1. Sambathraj
    Sambathraj avatar
    16 posts
    Member since:
    Jan 2011

    Posted 06 Mar 2014 Link to this post

    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
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 07 Mar 2014 in reply to Sambathraj Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 11 Mar 2014 Link to this post

    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

    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. Sambathraj
    Sambathraj avatar
    16 posts
    Member since:
    Jan 2011

    Posted 11 Mar 2014 in reply to Angel Petrov Link to this post

    Thanks for your reply. I will try this and implement if it meets my need.
    Thanks,
    Sambath.
  6. Cory
    Cory avatar
    21 posts
    Member since:
    Sep 2015

    Posted 31 Dec 2015 in reply to Shinu Link to this post

    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

     

    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

  7. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1798 posts

    Posted 04 Jan Link to this post

    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
    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
  8. Cory
    Cory avatar
    21 posts
    Member since:
    Sep 2015

    Posted 04 Jan in reply to Konstantin Dikov Link to this post

    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

  9. Cory
    Cory avatar
    21 posts
    Member since:
    Sep 2015

    Posted 04 Jan in reply to Cory Link to this post

    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.

     

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

  10. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 07 Jan Link to this post

    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
    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
  11. Cory
    Cory avatar
    21 posts
    Member since:
    Sep 2015

    Posted 07 Jan in reply to Angel Petrov Link to this post

    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.

    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>

     

     

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017