Handling context menu client side

3 posts, 0 answers
  1. david
    david avatar
    242 posts
    Member since:
    May 2007

    Posted 19 Sep 2015 Link to this post

    in the OnClientItemClicked event the clickedMenuItem is null and the hidden form field which is set in the RowContextMenu is null? Am i using the right event?

    in RowContextMenu "hiddenClientID" is correctly set to the ClientID key field

    // process content menu
       function RowContextMenu(sender, eventArgs) {
     
           var colIndex = eventArgs.get_domEvent().target.cellIndex;
           var rowIndex = eventArgs.get_itemIndexHierarchical();
           var masterTable = sender.get_masterTableView();
     
           cell = masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[rowIndex], "ClientID");
           var ClientID = cell.innerHTML; // 
           document.getElementById("hiddenClientID").value = ClientID; 
           var radGridClickedRowIndex = document.getElementById("hiddenClientID").value;
           var menu = $find("<%=RadContextMenu1.ClientID %>");
               var evt = eventArgs.get_domEvent();
               if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
                   return;
               }
               var index = eventArgs.get_itemIndexHierarchical();
               sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);
               menu.show(evt);
     
               evt.cancelBubble = true;
               evt.returnValue = false;
     
               if (evt.stopPropagation) {
                   evt.stopPropagation();
                   evt.preventDefault();
               }
           }
       function contextMenuItemClicked(sender, args) {
           var clickedMenuItem = args.get_item().get_value();
           var radGridClickedRowIndex = document.getElementById("hiddenClientID").value;
           var grid = $find('<%= RadGrid1.ClientID %>');
           var masterTableView = grid.MasterTableView;
           var row = masterTableView.get_dataItems()[radGridClickedRowIndex];
           var cell = masterTableView.getCellByColumnUniqueName(row, "ClientID");
     
           if (clickedMenuItem == "Edit") {
               editClient();
           }
           if (clickedMenuItem == "Calendar") {
               AddAppoint(cell.innerHTML);
           }

     

    <telerik:RadContextMenu ID="RadContextMenu1" runat="server" OnClientItemClicked="contextMenuItemClicked"             EnableRoundedCorners="true" EnableShadows="true" Skin="Metro">           
      <Items>                 <telerik:RadMenuItem Text="Select"    />                 <telerik:RadMenuItem Text="Calendar"    />                 <telerik:RadMenuItem Text="Contact" />                 <telerik:RadMenuItem Text="Edit" />                 <telerik:RadMenuItem Text="Payment" />                                 <telerik:RadMenuItem Text="Archive" />             </Items>         </telerik:RadContextMenu>

      // process content menu     function RowContextMenu(sender, eventArgs) {         var colIndex = eventArgs.get_domEvent().target.cellIndex;         var rowIndex = eventArgs.get_itemIndexHierarchical();         var masterTable = sender.get_masterTableView();         cell = masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[rowIndex], "ClientID");         var ClientID = cell.innerHTML; // get the lecturesID so it can be processed in the code behind         document.getElementById("hiddenClientID").value = ClientID; // stuff it in a form variable so we can get inthe code behind         var radGridClickedRowIndex = document.getElementById("hiddenClientID").value;         var menu = $find("<%=RadContextMenu1.ClientID %>");             var evt = eventArgs.get_domEvent();             if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {                 return;             }             var index = eventArgs.get_itemIndexHierarchical();             sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);             menu.show(evt);             evt.cancelBubble = true;             evt.returnValue = false;             if (evt.stopPropagation) {                 evt.stopPropagation();                 evt.preventDefault();             }         }     function contextMenuItemClicked(sender, args) {         var clickedMenuItem = args.get_item().get_value();         var radGridClickedRowIndex = document.getElementById("hiddenClientID").value;         var grid = $find('<%= RadGrid1.ClientID %>');         var masterTableView = grid.MasterTableView;         var row = masterTableView.get_dataItems()[radGridClickedRowIndex];         var cell = masterTableView.getCellByColumnUniqueName(row, "ClientID");         alert(clickedMenuItem);             alert(cell);         if (clickedMenuItem == "Edit") {             editClient();         }         if (clickedMenuItem == "Calendar") {             AddAppoint(cell.innerHTML);         }           }
      // process content menu     function RowContextMenu(sender, eventArgs) {         var colIndex = eventArgs.get_domEvent().target.cellIndex;         var rowIndex = eventArgs.get_itemIndexHierarchical();         var masterTable = sender.get_masterTableView();         cell = masterTable.getCellByColumnUniqueName(masterTable.get_dataItems()[rowIndex], "ClientID");         var ClientID = cell.innerHTML; // get the lecturesID so it can be processed in the code behind         document.getElementById("hiddenClientID").value = ClientID; // stuff it in a form variable so we can get inthe code behind         var radGridClickedRowIndex = document.getElementById("hiddenClientID").value;         var menu = $find("<%=RadContextMenu1.ClientID %>");             var evt = eventArgs.get_domEvent();             if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {                 return;             }             var index = eventArgs.get_itemIndexHierarchical();             sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);             menu.show(evt);             evt.cancelBubble = true;             evt.returnValue = false;             if (evt.stopPropagation) {                 evt.stopPropagation();                 evt.preventDefault();             }         }     function contextMenuItemClicked(sender, args) {         var clickedMenuItem = args.get_item().get_value();         var radGridClickedRowIndex = document.getElementById("hiddenClientID").value;         var grid = $find('<%= RadGrid1.ClientID %>');         var masterTableView = grid.MasterTableView;         var row = masterTableView.get_dataItems()[radGridClickedRowIndex];         var cell = masterTableView.getCellByColumnUniqueName(row, "ClientID");         alert(clickedMenuItem);             alert(cell);         if (clickedMenuItem == "Edit") {             editClient();         }         if (clickedMenuItem == "Calendar") {             AddAppoint(cell.innerHTML);         }           }
  2. david
    david avatar
    242 posts
    Member since:
    May 2007

    Posted 20 Sep 2015 in reply to david Link to this post

    duh, operator error. I did not sent a value="" in the context menu

    also, since the hidden form field had the ClientID Key, all I needed to do was this:

     

    function contextMenuItemClicked(sender, args) {
     
        var clickedMenuItem = args.get_item().get_value();
        var radGridClickedRowIndex = document.getElementById("hiddenClientID").value;
     
        if (clickedMenuItem == "Edit") {
            editClient(radGridClickedRowIndex);
        }
        if (clickedMenuItem == "Calendar") {
            AddAppoint(radGridClickedRowIndex);
        }
      
    }

  3. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2469 posts

    Posted 23 Sep 2015 Link to this post

    Hi David,

    I am glad that the issue was resolved. Thank you for sharing the solution with the community.

    Regards,
    Viktor Tachev
    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
Back to Top