GridView with a row hover menu

Originally Posted 13 February 2015, 9:48 am EST

  • Originally Posted 13 February 2015, 9:48 am EST

    Is it possible to have a hover menu that opens when moving over a row or when selecting a row. I find it awkward having a small Edit button on the row for selecting it instead of having the whole row for selecting.
  • Reply

    Hello,

    Kindly refer to the attached sample which depicts how you can display a menu when the mouse hovered over a row in C1GridView. You may customize it as per your requirements. Hope it helps.

    Thanks,
    Manpreet Kaur
    2015/02/RowHover_Menu.zip
  • Reply

    Could not get your sample to work and could not get your sample code to work in my project.
  • Reply

    Hello,

    The sample is working correctly at my end. Could you please let me know what issues are you exactly facing while running the sample. The sample attached above does not have any Wijmo references, so please make sure that you add the required dll's before executing the project.

    Hope it helps. In case the issue still persists, I would request you to share a sample application depicting your issue so that I can replicate the issue at my end and guide you ahead with the same. Please let me know if you are facing this issue with any specific browser.

    Thanks,
    Manpreet Kaur
  • Reply

    could not load type 'RowHover_Menu.WebForm1' have not had time to look into this
  • Reply

    Hello,

    The sample provided to you is working correctly at my end. The issue described by you seems to be a generic issue. Here are a few links which discuss the similar issue, you may refer to the same:

    http://stackoverflow.com/questions/11344954/asp-net-parser-error-only-on-local-machine
    http://stackoverflow.com/questions/8165668/parser-error-could-not-load-type-after-changing-output-dir-in-asp-net-web-app
    http://stackoverflow.com/questions/17451544/asp-net-4-0-visual-studio-express-parse-error

    In case you are still not able to get the application working, you can append the following code to the source page of your WebForm that contains C1GridView:

    Code to create the menu:

    <div id="myMenu" class="contextMenu">
    <table style='width: 100%;'>
    <tr>
    <td onclick="fnView();">View Product</td>
    </tr>
    <tr>
    <td onclick="fnDelete();">Delete Product</td>
    </tr>
    </table>
    </div>


    Code to hide and display the div as a menu:

      $(document).ready(function () {
    $("#myMenu").hide();
    $("table[id$='C1GridView1'] > tbody > tr").bind('mouseover', function (e) {
    $("#myMenu").hide();
    e.preventDefault();
    rowid = $(this).children(':first-child').text();
    if (!isNaN(rowid)) {
    //call context menu here
    $("#myMenu").css({
    top: e.pageY + "px",
    left: e.pageX + "px",
    position: 'absolute'
    });
    $("#myMenu").show();
    }
    });
    });

    //Handle the click events of the menu items.
    function fnView() {
    alert("View menu item clicked");
    }

    function fnDelete() {
    alert("Delete menu item clicked");
    }

    //Code to hide context menu when user clicks anywhere on the grid
    $(document).bind('click', function (e) {
    $("#myMenu").hide();
    });



    Hope it helps. In case you still face any issues, I would request you to share a sample application depicting your issue, so that I can assist you further with this issue.

    Thanks,
    Manpreet Kaur
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels