Some ClientDataKeyNames are disappear after Column Grouping

[Aung]

Dear All,

I'm using radcontextmenu with radgrid. Normally right click event on all rows of radgrid is showing menus. It is ok. But after i drag and group roomtype column, some rows right click event is showing radcontextmenus and some rows right click event is showing browser default menus. When i debug in browser, showing "TypeError: Cannot read properties of undefined (reading 'getDataKeyValue')"  in  RadGridID.get_masterTableView().get_dataItems()[currentSelectedRowIndex].getDataKeyValue("ReservationKey")) of javascript file. I searched in google, but not found. Please ask me. What I need to change or code?

.aspx

<telerik:RadGrid ID="RadGrid1" EnableViewState="true" ViewStateMode="Enabled" GridLines="None" MasterTableView-GroupLoadMode="Server"
    runat="server" ShowStatusBar="false" AllowSorting="true" ShowGroupPanel="true" ShowFooter="true"
    OnNeedDataSource="grdReservation_NeedDataSource" OnSortCommand="grdReservation_SortCommand" OnItemDataBound="grdReservation_ItemDataBound" OnItemCommand="grdReservation_ItemCommand">
    <MasterTableView AutoGenerateColumns="false" DataKeyNames="ReservationKey" ItemStyle-Wrap="true" Width="100%" GroupsDefaultExpanded="false"
        ClientDataKeyNames="ReservationKey,Status,Remark,SubFolioBalance">
        <Columns>            
            <telerik:GridBoundColumn DataField="Status" HeaderStyle-Width="25px" SortExpression="Status" UniqueName="Status">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ReservationType" HeaderStyle-Width="25px" SortExpression="ReservationType" UniqueName="Type">
            </telerik:GridBoundColumn>                      
            <telerik:GridBoundColumn DataField="Company" HeaderStyle-Width="160px" HeaderText="Group Name/Company" SortExpression="Company" ItemStyle-Wrap="false"
                UniqueName="GroupNameCompany">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="RoomType" HeaderText="RoomType" SortExpression="RoomType" HeaderStyle-Width="80px"
                UniqueName="RoomType">
            </telerik:GridBoundColumn>            
            <telerik:GridBoundColumn DataField="Balance" HeaderStyle-Width="70px" HeaderText="Balance" SortExpression="Balance" ItemStyle-HorizontalAlign="Right"
                UniqueName="Balance">
            </telerik:GridBoundColumn>            
        </Columns>
        <NoRecordsTemplate>
            No Records
        </NoRecordsTemplate>
    </MasterTableView>
    <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true" AllowDragToGroup="true" EnableRowHoverStyle="true" AllowGroupExpandCollapse="false"  AllowRowsDragDrop="true">
        <Selecting AllowRowSelect="true" EnableDragToSelectRows="false" />
        <Resizing AllowColumnResize="True" AllowRowResize="false" ResizeGridOnColumnResize="false" ClipCellContentOnResize="true" EnableRealTimeResize="false" AllowResizeToFit="true" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="380px" SaveScrollPosition="true" />
        <ClientEvents OnRowDblClick="rowDblClick" OnRowSelected="OnRwSelected" OnRowMouseOver="OnRowMouseOver" OnRowContextMenu="rowContextMenu" />
    </ClientSettings>
</telerik:RadGrid>
<telerik:RadContextMenu ID="RadContextMenu1" runat="server" EnableRoundedCorners="true" RenderMode="Lightweight" SkinID="MinimalSetOfTools" CssClass="centered-editor" Width="300px" EnableShadows="true"
    OnClientItemClicking="onContextMenuItemClick"
    OnClientShowing="onClientContextMenuShowing">
    <DefaultGroupSettings ExpandDirection="Auto" Flow="Vertical" />
</telerik:RadContextMenu>

 

<script src="../JavaScripts/util/Utilities.js" type="text/javascript"></script>
<script src="../JavaScripts/util/WrapperRadGrid.js" type="text/javascript"></script>
<script src="../JavaScripts/bal/Reservation.js" type="text/javascript"></script>
<script src="../../JavaScripts/lib/jquery.blockUI.min.js" type="text/javascript"></script>

<script type="text/javascript">

function ReloadSelectedRow() {
    var grid = $find("<%=grdReservation.ClientID%>");
    var master = grid.get_masterTableView();

    var scrollArea = document.getElementById(grid.get_element().id + "_GridData");
    var row = master.get_selectedItems()[0];
    currentSelectedRowIndex = row.get_itemIndex();
    GlobalObjectControls.ResKey = row.getDataKeyValue("ReservationKey");
    if (row) {
        if ((row.get_element().offsetTop - scrollArea.scrollTop) + row.get_element().offsetHeight + 20 > scrollArea.offsetHeight) {
            //scroll down to selected row                     
            scrollArea.scrollTop = scrollArea.scrollTop + ((row.get_element().offsetTop - scrollArea.scrollTop) +
                row.get_element().offsetHeight - scrollArea.offsetHeight) + row.get_element().offsetHeight + 150;
        }
        //if the position of the the selected row is above the viewable grid area  
        else if ((row.get_element().offsetTop - scrollArea.scrollTop) < 0) {
            //scroll the selected row to the top                   
            scrollArea.scrollTop = row.get_element().offsetTop;
        }
    }
}

</script>

 <script type="text/javascript" id="commonMethods">
     var GlobalObjectControls = {};

     Sys.Application.add_load(
         function loadHandler() {
             Sys.Application.remove_load(loadHandler);             
             ReloadSelectedRow();
         });

</script>

<script>

function rowContextMenu(sender, eventArgs) {
    currentSelectedRowIndex = eventArgs.get_itemIndexHierarchical();    
    eventArgs.get_tableView().selectItem(eventArgs.get_itemIndexHierarchical());
    var menu = GlobalObjectControls.ContextMenu;    
    var evt = eventArgs.get_domEvent();
    menu.show(evt);
    evt.cancelBubble = true;
    evt.returnValue = false;
    if (evt.stopPropagation) {
        evt.stopPropagation();
        evt.preventDefault();
    }
}

function OnRwSelected(sender, args) {
    GlobalObjectControls.ResKey = args.getDataKeyValue('ReservationKey');
    currentSelectedRowIndex = args.get_itemIndexHierarchical();        
}

function onClientContextMenuShowing(sender) {    
    enabledisableMenuItems();
}

function enabledisableMenuItems() {
    var menu = GlobalObjectControls.ContextMenu;
    alert("ok" + currentSelectedRowIndex);    // this is ok, index is showing
   

var reservationkey = GlobalObjectControls.GridReservation.get_masterTableView().get_dataItems([currentSelectedRowIndex]

.getDataKeyValue("ReservationKey");  // this row is showing error "can't read properties of undefined

 

    var status = GlobalObjectControls.GridReservation.get_masterTableView().get_dataItems()[currentSelectedRowIndex].getDataKeyValue("Status");
    var reservationType = getReservationType();

menu.enable();

}

function onContextMenuItemClick(sender, args) {

}

</script>

[Vasko]

Hello Aung,

Thank you for the provided code snippet, however, I wasn't able to replicate the behavior due to some missing code logic. To help you solve the issue, I'll need more information, especially for the GlobalObjectControls property, as it returned undefined for several of the instances where it is being used. 

I've attached the sample project where I tested and I'd like to ask you to modify it so that it reproduces the issue you're experiencing, then send it back for further investigation. 

I look forward to your reply.

Regards,
Vasko
Progress Telerik

[Aung]

Hello Vasko,

Thanks for your reply,. Sorry for late reply, Vasko. Yeah, i forgot it to submit.

If upper group is not expand, it's still showing 'undefined' for some grid rows. Please help me....

I have been updated your project with attachment. Please look at it. I'm looking forward.....

Thanks and Best Regards

AKL

[Vasko]

Hi Aung,

Thank you for the updated sample.

I took a look at it and noticed the JavaScript errors on load - whenever the page loads, the ReloadSelectedRow() is called, and it returns undefined when trying to access the selected row, due to there not being a selected row on the initial load: 

function ReloadSelectedRow() {
    debugger;
    var grid = $find("<%=grdReservation.ClientID%>");
    var master = grid.get_masterTableView();

    var scrollArea = document.getElementById(grid.get_element().id + "_GridData");
    var row = master.get_selectedItems()[0]; // This will return udefined on initial load
    currentSelectedRowIndex = row.get_itemIndex(); // This will error out
...

After putting the 2 lines inside the if statement, when right-clicking on the rows, I was able to get the context menu to show.

Regards,
Vasko
Progress Telerik

[Aung]

Hello Vasko,

Thanks for your answer, Vasko. I placed the two lines in if statement which you said.

function ReloadSelectedRow() {
        var grid = $find("<%=grdReservation.ClientID%>");
        var master = grid.get_masterTableView();

        var scrollArea = document.getElementById(grid.get_element().id + "_GridData");
       
        if (master.get_selectedItems().length>0) {
            var row = master.get_selectedItems()[0];
            currentSelectedRowIndex = row.get_itemIndex();
            GlobalObjectControls.ResKey = row.getDataKeyValue("ReservationKey");
            if ((row.get_element().offsetTop - scrollArea.scrollTop) + row.get_element().offsetHeight + 20 > scrollArea.offsetHeight) {
                //scroll down to selected row                     
                scrollArea.scrollTop = scrollArea.scrollTop + ((row.get_element().offsetTop - scrollArea.scrollTop) +
                    row.get_element().offsetHeight - scrollArea.offsetHeight) + row.get_element().offsetHeight + 150;
            }
            //if the position of the the selected row is above the viewable grid area  
            else if ((row.get_element().offsetTop - scrollArea.scrollTop) < 0) {
                //scroll the selected row to the top                   
                scrollArea.scrollTop = row.get_element().offsetTop;
            }
        }
    }

But  some row can show right click menu but some can't show. Especially, group dropdown expand/collapse. We have 4 roomtype. Standard roomtype is collapse then Suite roomtype expand. That time rows under suite roomtype are not show right click menu. If we expand 'Standard roomtype' , Suite roomtype rows are show menu. Please help me....

I updated your file. Please look at attachment file. I'm looking forward.....

Thanks and Best Regards

AKL

[Vasko]

Hello Aung,

By default, the grouped rows cannot show the row context menu, because it is for the rows themselves:

Clicking anywhere in the green rectangle will make the context menu appear, but clicking on the grouped row (RoomType: Delux)  will not make it appear. This can be seen in the attached video file, where the behavior is demonstrated on the Grid you sent, as well as a regular Grid. 

Regards,
Author nickname
Progress Telerik

[Aung]

Hello Vasko,

Thanks for your answer, Vasko. I am not mean the grouped row (RoomType: Delux). I mean green rectangle rows under all roomtypes. eg. Two roomtype, delux and standard. First grouped is delux and next grouped is standard. The green rectangle rows are showing menu of standard roomtype if delux grouped dropdown expanded. The green rectangle rows are not showing menu of standard roomtype if delux grouped dropdown collapsed. You can check my attachment (on 25 Jul 2024, 04:14 PM ) project. 

Why the grouped dropdown expand/collapse is effect on grid databind? Please help me.

I'm looking forward.....

Thanks and Best Regards

AKL

[Vasko]

Hi Aung,

After testing the application, it appears that the currentSelectedRowIndex variable is related to the issue, due to the following:

• When clicking on a row from the expanded Suite group, the row index will always be a number bigger than/equal to 60:
• When grouping the Suite items, if only when they are expanded, the following line of code will only retrieve the expanded items: 

  GlobalObjectControls.GridReservation.get_masterTableView().get_dataItems()

  
• Since it retrieves only the expanded items (20 in this case), and you're trying to access item 60+, it will give the error because there isn't such an item in the array.

You can conditionally check if there is an item with the item index in the array and adjust the other variables depending on it:

var item = GlobalObjectControls.GridReservation.get_masterTableView().get_dataItems()[currentSelectedRowIndex];

if (item) {
    var reservationkey = items.getDataKeyValue("ReservationKey");  // this row is showing error "can't read properties of undefined (reading 'getDataKeyValue')
    var status = GlobalObjectControls.GridReservation.get_masterTableView().get_dataItems()[currentSelectedRowIndex].getDataKeyValue("Status");        
    // additonal logic
}

menu.enable();

Regards,
Author nickname
Progress Telerik

[Aung]

Hi Vasko,

Thanks for your explained. Your answers are supported me to right think.

Now, I must do expanded all grouped header at initial state.

 

Thanks and Best Regards

AKL

[Vasko]

Hello Aung,

To point you in the right direction, I suggest taking a look at the following articles, related to the topic: 

• Grouping Overview
• Grouping Demo
• Expand/Collapse All Groups

Regards,
Author nickname
Progress Telerik