This is a migrated thread and some comments may be shown as answers.

Please help: When I Right click on grid without selecting a row, I should be able to see my context menu

1 Answer 291 Views
Grid
This is a migrated thread and some comments may be shown as answers.
మాధవ్
Top achievements
Rank 1
మాధవ్ asked on 18 Apr 2013, 05:19 AM
Hello

When I right click on telerik grid without selecting a row, I should be able to see my own context menu.

Which event supports this? I used Onload in the following way.

My Grid is defined in the following way:

@{Html.Telerik().Grid(Model)
    .Name("AccountVisitStatusGrid") 
    .DataKeys(keys => keys.Add("AccountStatusID"))
    .DataBinding(dataBinding => dataBinding.Ajax().Select("_GetAccountVisitStatusCodes", "AccountVisitStatus"))
    .ClientEvents(events => events
                         .OnRowDataBound("Grid_onRowDataBound")
                         .OnDataBound("AcctVisitStatusGridBound")
                         .OnRowSelected("AcctVisitStatusGridRowSelected")
                         .OnError("AcctVisitStatusGridErrored")
.OnLoad("onload")
                         )                
    .Columns(columns =>
    {
        columns.Bound(o => o.Code).Title("Code").Width(100);
        columns.Bound(o => o.Name).Title("Name").Width(150);
        columns.Bound(o => o.Description).Title("Description").Width(150);
        columns.Bound(o => o.PASAccountStatus).Title("PAS Status").Width(150);
        columns.Bound(o => o.IsActive).ReadOnly().Title("Active").ClientTemplate("<input type='checkbox' name='ckActive' <#= IsActive? checked='checked' : '' #> onclick='return false'  />").Width(60);
        columns.Bound(o => o.IsAccount).ReadOnly().Title("Account Status").ClientTemplate("<input type='checkbox' name='ckAccount'  <#= IsAccount? checked='checked' : '' #> onclick='return false' />").Width(120);
        columns.Bound(o => o.IsVisit).ReadOnly().Title("Visit Status").ClientTemplate("<input type='checkbox' name='ckVisit' <#= IsVisit? checked='checked' : '' #> onclick='return false' />");
    })
    .Selectable()
    .Scrollable(c => c.Height("450px"))
    //.Pageable(paging => paging.PageSize(20).Style(GridPagerStyles.NextPreviousAndNumeric).Position(GridPagerPosition.Bottom))
    .Sortable()
    .Filterable()
    .Groupable()
    .Resizable(resizing => resizing.Columns(true))
    .Render();
}

Before, Context menu was only displayed when selected and do right click:
code:

function AcctVisitStatusGridRowSelected(e) {
       // debugger;
        if (!IsEditingDisabled('#btnEditAcctVisitStatus', 'btnEditDisabled')) {
            hideContextMenu(lastAcctVisitStatusDataContextMenu);
            lastAcctVisitStatusDataContextMenu = $(e.row).contextMenu('AcctVisitStatusDataContextMenu',
        {
            menuStyle:
                        {
                            width: 'auto'
                        },
            bindings:
                        {
                            'MenuNewAcctVisitStatus': function (t) {
                                 //debugger;
                                openDialog('N');
                            },
                            'MenuEditAcctVisitStatus': function (t) {
                                // debugger;
                                openDialog('E');
                            }
                        }
        });
        }
    }

Now to enable it just by , right click on grid, how to show up the context menu?????

I used this:


    function onLoad() {
         //debugger;
        $('tr', this).live('contextmenu', function (e) {
       // prevent the browser context menu from showing
       e.preventDefault();
       var $tr = $(this);
      if (!IsEditingDisabled('#btnEditAcctVisitStatus', 'btnEditDisabled')) {
            hideContextMenu(lastAcctVisitStatusDataContextMenu);
      lastAcctVisitStatusDataContextMenu = $(tr).contextMenu('AcctVisitStatusDataContextMenu',
        {
            menuStyle:
                        {
                            width: 'auto'
                        },
            bindings:
                        {
                            'MenuNewAcctVisitStatus': function (t) {
                              // debugger;
                                openDialog('N');
                            },
                            'MenuEditAcctVisitStatus': function (t) {
                                 //debugger;
                                openDialog('E');
                            }
                        }
        });
        }
   });
    }
}

I am not able to display the context menu?? How to solve this? 
For the above case where i just want to display context menu on right click on grid.

1 Answer, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 19 Apr 2013, 12:38 PM
Hello,

The approach seems correct(using on instead of live would be an improvement). The parameter name for the row used to initialize the contextmenu seems to be incorrect(tr instead of $tr). Could you check if the contextmenu is shown when using the correct name:

$('tr', this).live('contextmenu', function (e) {
   // prevent the browser context menu from showing
   e.preventDefault();
   var $tr = $(this);
  if (!IsEditingDisabled('#btnEditAcctVisitStatus', 'btnEditDisabled')) {
        hideContextMenu(lastAcctVisitStatusDataContextMenu);
    lastAcctVisitStatusDataContextMenu = $tr.contextMenu('AcctVisitStatusDataContextMenu',


Regards,
Daniel
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
మాధవ్
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Share this question
or