GridDropdownColumn in the Batch edit mode attach to SelectedIndexChanged event

[Mark]

I have a grid that is in Batch edit mode. It has two GridDropdownColumn's. When I select the first GridDropdownColumn, I want the value to help load the second GridDropdownColumn. I assume that is somehow connecting to the SelectedIndexChanged event. How do I go about doing that.

[Attila Antal]

Hello Mark,

Thanks for sharing the details.

 

Allow me to clarify a few things.

The  Telerik static JavaScript function "$telerik.findControl(htmlElement, "ControlId")" requires an HTML as the first argument and the Telerik Control's ID as the second, (see Telerik Static Client Library) but in the JavaScript code you shared, passes an integer value as the first argument.

 

For example, if you had this structure:

<div id="myElement">
    <telerik:RadComboBox ID="Combo_CarModel" runat="server" RenderMode="Lightweight">
    </telerik:RadComboBox>
</div>

This is the JavaScript code you would need to use

// Get the Div element
var myDiv = document.getElementById("myElement");
// Find the Combo in the Div element
var combo = $telerik.findControl(myDiv, "Combo_CarModel");

 

Since, the combo is inside the Grid that would mean, the Grid renders an HTML table with TR (row) and TD (cell) elements the combo would look similar to this:

<table>
    <tr>
        <td>
            <telerik:RadComboBox ID="Combo_CarModel" runat="server" RenderMode="Lightweight">
            </telerik:RadComboBox>
        </td>
    </tr>
</table>

 

So the jQuery.closest() will help you find the nearest parent TR element  with this code:

var combo = sender; // Telerik.Web.UI.RadComnboBox object

var comboElement = combo.get_element(); // Html element <div class="RadComboBox"></div>

var parentRowElement = $(comboElement).closest('tr')[0]; // returns the row element <tr>

 

If the jQuery.closest does not work, then probably there is no reference to jQuery. Check out the Using the jQuery Brought by Telerik article to learn about its usage.

However, if the RadScriptManager had the necessary ScriptReferences, this problem would not happen.

<form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>

 

If this doesn't work, then there are likely other JavaScript exceptions already on the page. You will need to eliminate all JS errors before trying to test new JS functions.

For tips and tricks, you can check out the following two Blog Posts:

• Debugging Your Application on Client-Side
• Improve Your Debugging Skills with Chrome DevTools

 

Regards,
Attila Antal
Progress Telerik

[Mark]

It is working partly now. Adding the asp:ScriptReference  and your explanation helped a ton.  I am getting the value from the dropdown in the javascript. Thank You! 

The only issue now is var context = args.get_context();

"JavaScript runtime error: Object doesn't support property or method 'get_context'"

I am now trying to pass the value to the serverside

[Attila Antal]

Mark, 

Be sure to use the correct event. Not all events contain the same properties in the event arguments.

The get_context() is available in the OnClientItemsRequesting event, but will not be available in the OnClientItemsRequested event which triggers after the Items have been requested.

[Mark]

It works! Thanks!!!!

[Doncho]

Hi Mark,

BatchEdit is a Client-Side (JavaScript-based) functionality of the Grid, therefore, interaction with the Grid must be done on the Client-Side. Having that in mind, PostBacks must not happen hence, otherwise, the editing will be interrupted and all changes lost. This makes using the server-side SelectedIndexChanged event inappropriate when RadGrid is in Batch editing mode.

One thing you can try is to replace the GridDropDownColumn(s) with GridTemplateColumn(s) and follow the approach demonstrated in the following kb article:

• Cascading ComboBoxes in Grid with BatchEdit

I hope this will help you achieve the desired.

Please let me know if any further questions come up.

Kind regards,
Doncho
Progress Telerik

[Mark]

I keep getting a null for  var currentRow = $(sender.get_element()).closest('tr')[0]; 

 

for both functions

           // If the DropDown element Closes even if the Grid cell does not open again
            function ComboCarModel_DropDownClosed(sender, args) {

                // Container is the entire row that is being edited currently
                var currentRow = $(sender.get_element()).closest('tr')[0];

                ResetComboModelColor(currentRow);
            }

 

 

       // Event that fires upon requesting new items
            function ModelColorRequesting(sender, args) {
                var context = args.get_context();
                var currentRow = $(sender.get_element()).closest('tr')[0];
                var ComboCarModel = $telerik.findControl(currentRow, "Combo_CarModel");
                // Send the Context to the server. Contains the Parent Combo's relational value
                context["CarModel"] = ComboCarModel.get_value();
            }

[Mark]

 <BatchEditingSettings EditType="Cell" HighlightDeletedRows="true"/>

[Doncho]

Hi Mark,

Indeed the sample I have shared is based on EditType="Row".

I am afraid that due to the complex internal implementation of the script-based Batch editing mode, using RadComboBox with enabled LoadOnDemand or custom text is not fully supported, hence achieving the desired will be hard to achieve with EditType="Cell".

I would suggest you review the implementation in our Code-library sample demonstrating a scenario of a RadGrid with LoadOnDemand ComboBox in Batch Edit Mode.

 

[Mark]

I switched my grid to EditType="Row"

In the  function ModelColorRequesting(sender, args)

I still get  JavaScript runtime error: Object expected on  $(sender.get_element()).closest('tr')[0];

JavaScript runtime error: Object doesn't support property or method 'getElementsByTagName'  on 

$telerik.findControl(0, "Combo_CarModel");

What am I missing? I copied the sample page into my project and get the same errors. I am using 2021.3.1111.45

 

https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/grid-cascading-comboboxes-in-radgrid-with-batchedit

[Attila Antal]

Hi Mark,

It sounds like there is a jQuery conflict.

Are you including external jQuery by any chance? If you do, have you followed the instructions to disable the embedded jQuery per the Including external jQuery article?

Note: we recommend using the embedded jQuery on the pages where Telerik controls are present. The embedded version is guaranteed to work and it also has backports applied to fix security issues.

 

In case you are not using an external jQuery, then the problem could be caused by something else. We can try debugging the issue, but for that, we would need to see the complete implementation. Would you mind sharing the complete ASPX (include MasterPage if applicable) with us so that we can check what causes the issue?

I look forward to your reply.

[Mark]

No Extrenal jQuery

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPageSingleMenu.Master" AutoEventWireup="true" CodeFile="Grid.aspx.cs" Inherits="Grid" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="styles/grid.css" rel="stylesheet" />
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

        <script type="text/javascript">
            function OnBatchEditOpened(sender, args) {
   
                var editedRowElement = args.get_row();
                if (editedRowElement.id.endsWith("-1")) {
                if (args.get_columnUniqueName() == "JobNumber") {
                    PageMethods.AddRow();
                    var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                    masterTable.rebind();
                } else {
                    // Editing an existing Row
                }
            }
            }

            // If the DropDown element Closes even if the Grid cell does not open again
            function ComboCarModel_DropDownClosed(sender, args) {
                debugger
                // Container is the entire row that is being edited currently
                var ComboCarModel = $telerik.findControl(0, "Combo_JobNumber");
                // Send the Context to the server. Contains the Parent Combo's relational value
                context["CarModel"] = ComboCarModel.get_value();

            }

            // Event that fires upon requesting new items
            function ModelColorRequesting(sender, args) {

                //debugger
                //var context = args.get_context();
                //var currentRow = 1;
                //var ComboCarModel = $telerik.findControl(currentRow, "Combo_JobNumber");
                //// Send the Context to the server. Contains the Parent Combo's relational value
                //context["CarModel"] = ComboCarModel.get_value();
            }
        </script>

    <telerik:RadPageLayout runat="server" ID="JumbotronLayout" CssClass="jumbotron" GridType="Fluid">
        <Rows>
            <telerik:LayoutRow>
                <Columns>
                    <telerik:LayoutColumn Span="10" SpanMd="12" SpanSm="12" SpanXs="12">
                        <h1>Timesheet Creator</h1>
                        <h2>Export Timesheet to Excel and email it to your manager</h2>
                     <p> <asp:Label id="lblUserName" Text="Label Control" runat="server"/></p>
                    </telerik:LayoutColumn>
                    <telerik:LayoutColumn Span="2" HiddenMd="true" HiddenSm="true" HiddenXs="true">
                       <!--  <img src="images/Thumbnails/Desert.jpg" />-->
                    </telerik:LayoutColumn>
                </Columns>
            </telerik:LayoutRow>
        </Rows>
    </telerik:RadPageLayout>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="Server">
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" CssClass="grid_wrapper">
      Start Date: <telerik:RadDatePicker RenderMode="Lightweight" ID="rdpStart" runat="server"  SharedCalendarID="sharedCalendar"
                            Width="150px">
                            <DateInput runat="server" ID="DateInput">
                            </DateInput>
                        </telerik:RadDatePicker>
        End Date:  <telerik:RadDatePicker RenderMode="Lightweight" ID="rdpEnd" runat="server"  SharedCalendarID="sharedCalendar"
                            Width="150px">
                        </telerik:RadDatePicker>
            <asp:CompareValidator ID="CompareValidator1" runat="Server" ControlToCompare="rdpStart"
                ControlToValidate="rdpEnd" Operator="GreaterThan" ErrorMessage=" *(<em>static</em>) Date range is not valid "
                Display="Dynamic"></asp:CompareValidator>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="Server" ControlToValidate="rdpStart"
                ErrorMessage=" *(<em>static</em>) Departure date is not valid " Display="Dynamic"></asp:RequiredFieldValidator>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="Server" ControlToValidate="rdpEnd"
                ErrorMessage=" *(<em>static</em>) Arrival date is not valid " Display="Dynamic"></asp:RequiredFieldValidator>
            <br />
         <telerik:RadCalendar RenderMode="Lightweight" ID="sharedCalendar" runat="server" EnableMultiSelect="false">
        </telerik:RadCalendar>
          <br />
        <hr />
        <telerik:RadGrid ID="RadGrid1" runat="server" PageSize="10" PagerStyle-PageButtonCount="5"
            OnNeedDataSource="RadGrid1_NeedDataSource" OnItemCreated="RadGrid1_ItemCreated" OnItemDataBound="RadGrid1_ItemDataBound" OnItemCommand="RadGrid1_ItemCommand"
            OnDeleteCommand="RadGrid1_DeleteCommand" OnBatchEditCommand="RadGrid1_BatchEditCommand"  ShowFooter="True" 
            AllowPaging="false" AllowSorting="true" ShowGroupPanel="False" RenderMode="Auto">
            <GroupingSettings ShowUnGroupButton="true" />
            <MasterTableView AutoGenerateColumns="False" 
                AllowFilteringByColumn="false" TableLayout="Fixed"
                DataKeyNames="TimeSheetId" CommandItemDisplay="Top"  
                InsertItemPageIndexAction="ShowItemOnFirstPage" EditMode="Batch" >
                <BatchEditingSettings EditType="Row" HighlightDeletedRows="true" />
                <CommandItemSettings ShowExportToCsvButton="false" ShowExportToExcelButton="false" ShowExportToPdfButton="false" ShowExportToWordButton="false" AddNewRecordText="Add Row" />
                <Columns>
                      <telerik:GridDropDownColumn DataSourceID="odsIndirect" DataField="Indirect" HeaderText="Indirect" SortExpression="Description"
                         ListTextField="FullName" ListValueField="Code"   
                        UniqueName="Indirect" DropDownControlType="RadComboBox">
                        <HeaderStyle Width="200px" />
                               </telerik:GridDropDownColumn>
                     <telerik:GridTemplateColumn UniqueName="JobNumber" HeaderText="Job No">
                <ItemTemplate>
                    <%# Eval("JobNumber") %>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadComboBox ID="Combo_JobNumber"  
                         OnClientDropDownClosed="ComboCarModel_DropDownClosed"
                        runat="server"
                        DataSourceID="odsUsJob"
                        DataTextField="FullName"
                        DataValueField="No_"
                        DropDownAutoWidth="Enabled"
                        HighlightTemplatedItems="true">
                    </telerik:RadComboBox>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
                  <telerik:GridTemplateColumn UniqueName="JobWBS" HeaderText="Job WBS">
                <ItemTemplate>
                    <%# Eval("JobWBS") %>
                </ItemTemplate>
                <EditItemTemplate>
                    <telerik:RadComboBox ID="Combo_ModelColor"
                        runat="server"
                        DataTextField="Description"
                        DataValueField="JobWbsCode"                        
                        NoWrap="true"
                        DropDownAutoWidth="Enabled"
                        EnableLoadOnDemand="true"
                        OnItemsRequested="Combo_ModelColor_ItemsRequested"
                        AppendDataBoundItems="true"
                        HighlightTemplatedItems="true">
                    </telerik:RadComboBox>
                </EditItemTemplate>
            </telerik:GridTemplateColumn>
                           <telerik:GridDropDownColumn DataSourceID="odsPayType" DataField="PayType" HeaderText="Pay Type" SortExpression="PayType"
                        ListValueField="PayType"  ListTextField="PayType"
                        UniqueName="PayType" DropDownControlType="RadComboBox">
                        <HeaderStyle Width="150px" />
                    </telerik:GridDropDownColumn>
                         <telerik:GridDropDownColumn DataField="LaborCategory" HeaderText="Labor Category" SortExpression="LaborCategory"
                        ListValueField="LaborCategoryId" ListTextField="LaborCategory"
                        UniqueName="LaborCategory" DropDownControlType="RadComboBox">
                        <HeaderStyle Width="150px" />
                    </telerik:GridDropDownColumn>
                      <telerik:GridNumericColumn DataField="Hour1"  SortExpression="Date1" Aggregate="Sum" FooterAggregateFormatString="{0}"
                        UniqueName="Date1">
                        <HeaderStyle Width="60px" />
                    </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn DataField="Hour2"  SortExpression="Date2"  Aggregate="Sum" FooterAggregateFormatString="{0}"
                        UniqueName="Date2">
                        <HeaderStyle Width="60px" />
                    </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn DataField="Hour3"  SortExpression="Date3"  Aggregate="Sum" FooterAggregateFormatString="{0}"
                        UniqueName="Date3">
                        <HeaderStyle Width="60px" />
                    </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn DataField="Hour4"  SortExpression="Date4"  Aggregate="Sum" FooterAggregateFormatString="{0}"
                        UniqueName="Date4">
                        <HeaderStyle Width="60px" />
                    </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn DataField="Hour5" SortExpression="Date5"  Aggregate="Sum" FooterAggregateFormatString="{0}"
                        UniqueName="Date5"> 
                        <HeaderStyle Width="60px" />
                    </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn DataField="Hour6" SortExpression="Date6"  Aggregate="Sum" FooterAggregateFormatString="{0}"
                        UniqueName="Date6">
                        <HeaderStyle Width="60px" />
                    </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn DataField="Hour7" SortExpression="Date7"  Aggregate="Sum" FooterAggregateFormatString="{0}"
                        UniqueName="Date7">
                        <HeaderStyle Width="60px" />
                    </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn DataField="Hour8"  SortExpression="Date8"  Aggregate="Sum" FooterAggregateFormatString="{0}"
                        UniqueName="Date8">
                        <HeaderStyle Width="60px" />
                    </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn DataField="Hour9" SortExpression="Date9"  Aggregate="Sum" FooterAggregateFormatString="{0}"
                        UniqueName="Date9">
                        <HeaderStyle Width="60px" />
                    </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn DataField="Hour10" SortExpression="Date10"  Aggregate="Sum" FooterAggregateFormatString="{0}"
                        UniqueName="Date10">
                        <HeaderStyle Width="60px" />
                    </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn DataField="Hour11" SortExpression="Date11"  Aggregate="Sum" FooterAggregateFormatString="{0}"
                        UniqueName="Date11">
                        <HeaderStyle Width="60px" />
                    </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn DataField="Hour12" SortExpression="Date12"  Aggregate="Sum" FooterAggregateFormatString="{0}"
                        UniqueName="Date12">
                        <HeaderStyle Width="60px" />
                    </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn DataField="Hour13" SortExpression="Date13"  Aggregate="Sum" FooterAggregateFormatString="{0}"
                        UniqueName="Date13">
                        <HeaderStyle Width="60px" />
                    </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn DataField="Hour14" SortExpression="Date14"  Aggregate="Sum" FooterAggregateFormatString="{0}" 
                        UniqueName="Date14">
                        <HeaderStyle Width="60px" />
                    </telerik:GridNumericColumn>
                      <telerik:GridCalculatedColumn HeaderText="Total Hours" UniqueName="TotalCost" DataType="System.Double" Aggregate="Sum"  FooterAggregateFormatString="{0}" 
                        DataFields="Hour1,Hour2,Hour3,Hour4,Hour5,Hour6,Hour7,Hour8,Hour9,Hour10,Hour11,Hour12,Hour13,Hour14" Expression="{0}+{1}+{2}+{3}+{4}+{5}+{6}+{7}+{8}+{9}+{10}+{11}+{12}+{13}" />
                    <telerik:GridButtonColumn CommandName="Delete" Text="Delete" UniqueName="DeleteColumn" HeaderText="">
                        <HeaderStyle Width="60px" />
                    </telerik:GridButtonColumn>
                </Columns>
            </MasterTableView>
            <ClientSettings AllowColumnsReorder="true" AllowColumnHide="true" AllowDragToGroup="true">
                <Selecting AllowRowSelect="true" />
                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                <ClientEvents OnBatchEditOpened="OnBatchEditOpened" />
            </ClientSettings>
        </telerik:RadGrid>
    </telerik:RadAjaxPanel>

<asp:ObjectDataSource ID="odsIndirect" runat="server"
        SelectMethod="GetTypedList"
        TypeName="WebTime.BRL.EntityClass.UsTimePostingGroupBL">
</asp:ObjectDataSource>
<asp:ObjectDataSource ID="odsUsJob" runat="server" OnSelecting="odsUsJob_Selecting"
        SelectMethod="GetDataTable"
        TypeName="WebTime.BRL.EntityClass.UsJobBL">
         <SelectParameters>
      <asp:Parameter Type="String" Name="userName" />
   </SelectParameters>
</asp:ObjectDataSource>
  <asp:ObjectDataSource ID="odsPayType" runat="server" 
        SelectMethod="GetView"
        TypeName="WebTime.BRL.EntityClass.PayTypeBL"></asp:ObjectDataSource>
    <hr />
    Export document to excel<br />
     <telerik:RadButton runat="server" ID="rbExport" Text="Export" ButtonType="SkinnedButton" OnClick="rbExport_Click"></telerik:RadButton>
</asp:Content>

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPageSingleMenu.master.cs" Inherits="MasterPageSingleMenu" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1, maximum-scale=1.0, user-scalable=no" />
    <link href="styles/base.css" rel="stylesheet" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager runat="server" EnablePageMethods="true" EnableEmbeddedjQuery="true"></telerik:RadScriptManager>
        <div id="wrapper">
            <a href="#" class="logo">
                 <img src="images/WebTime-Logo.png" alt="site logo"/>
            </a>
            <div class="header">
                <telerik:RadMenu ID="RadMenu1" CssClass="mainMenu" runat="server" RenderMode="Auto">
                    <Items>
                        <telerik:RadMenuItem Text="Home" NavigateUrl="Default.aspx" />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem Text="Grid Page" NavigateUrl="Grid.aspx" />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem Text="ListView Page" NavigateUrl="ListView.aspx" />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem Text="About" />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem Text="Projects" />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem Text="Dashboard" />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem Text="..." />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem Text="..." />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem Text="Contacts" />
                    </Items>
                </telerik:RadMenu>
            </div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
            </asp:ContentPlaceHolder>
            <hr style="margin-top: 40px" />
            <div class="footer">
               Footer: © 2022 
            </div>
        </div>
    </form>
</body>
</html>