I wanted to know if I its possible to create a right click context menu which is activated on jqGrid's header row and has ability to add column to right or left or the column in question or hide the current column (without using ui-multiselect).
Any code in this respect would greatly be appreciated.
I suggest that you use contextmenu plugin which you would find in the plugins/jquery.contextmenu.js of jqGrid. In the answer and in this one for example are described how it could be used inside of jqGrid body. With the following code you can use it in the column header too:
var cm = $grid.jqGrid("getGridParam", "colModel");
$("th.ui-th-column").contextMenu('myMenu1', {
bindings: {
columns: function(trigger) {
var $th = $(trigger).closest("th");
if ($th.length > 0) {
alert("the header of the column '" + cm[$th[0].cellIndex].name +
"' was clicked");
}
}
},
// next settings
menuStyle: {
backgroundColor: '#fcfdfd',
border: '1px solid #a6c9e2',
maxWidth: '600px', // to be sure
width: '100%' // to have good width of the menu
},
itemHoverStyle: {
border: '1px solid #79b7e7',
color: '#1d5987',
backgroundColor: '#d0e5f5'
}
});
where menu myMenu1 are defined as
<div class="contextMenu" id="myMenu1" style="display:none">
<ul style="width: 200px">
<li id="columns">
<span class="ui-icon ui-icon-calculator" style="float:left"></span>
<span style="font-size:11px; font-family:Verdana">Choose columns</span>
</li>
</ul>
</div>
The demo demonstrate how it could be used:
Related
What`s wrong with this code? After render div element scroll has to be in the bottom of div element. scrollTop not saving the value after func
<main>
<div v-if="messages">
<ul ref="messagesContainer">
<li v-for="message in messages" :key="`${message.text}.${message.username}`">
<Message :message="message" :username="username" />
</li>
</ul>
</div>
</main>
mounted() {
this.scrollToEnd();
},
methods: {
scrollToEnd() {
const height = this.$refs.messagesContainer.scrollHeight;
this.$refs.messagesContainer.scrollTo(0,height)
// doesnt work
// this.$refs.messagesContainer.scrollTop = height
}
}
main {
background-color: #fff;
height: 56vh;
ul {
height: 100%;
overflow: auto;
flex: auto;
}
}
you can get the y position of the element via the offsetHeight property like this:
var offsetTop = this.$refs.messagesContainer.offsetHeight;
You can find more information regarding offsetHeight, clientHeight and scrollHeight properties here
Note you need to call the scrollTo method on the window element:
example:
methods: {
scrollToEnd() {
var scrollHeight = this.$refs.messagesContainer.offsetHeight;
this.$refs.messagesContainer.scrollTop = scrollHeight;
}
}
Hope this helps :)
<main>
<ul v-if="messages" id="messagesContainer">
<li v-for="message in messages" :key="`${message.text}.${message.username}`">
<Message :message="message" :username="username" />
</li>
</ul>
</main>
scrollToEnd() {
const element = document.getElementById('messagesContainer')
element.scrollTop = element.offsetHeight + element.scrollHeight
}
This seems to work on Nuxt. This also provides a smooth scrolling as well.
const element = this.$refs.messagesContainer;
element.scrollIntoView({ behavior: "smooth", block: "start" });
In this StackBliz I have a Kendo for Angular dropdown list. When you open the dropdown, the popup shows seven items. I just want to show three items. So I set the height in popupSettings to 30, but Kendo is ignoring it. How to change the popup height?
#Component({
selector: 'my-app',
template: `
<kendo-dropdownlist
[data]="listItems"
[popupSettings]="{
width: 100,
height: 30 }">
</kendo-dropdownlist>
`
})
export class AppComponent {
public listItems: Array<string> = [];
ngOnInit(){
for(var i=1;i<=100;i++)
this.listItems.push('Item ' + i);
}
}
I found the answer here. You have to set the listHeight property.
<kendo-dropdownlist
[data]="listItems"
[popupSettings]="{
width: 100,
height: 30 }"
[listHeight]="500">
</kendo-dropdownlist>
You will see Kendo generate a div for the dropdown if you can inspect the elements on your browser.
<div unselectable="on" class="k-list-scroller" style="max-height: 200px;">
Change the max-height for class k-list-scroller
jqGrid is created in web page. If page width is decreased, rightmost columns are no more accessible.
How to add horizontal scrollbar to jqGrid so that if page width is small, jqGrid can scrolled
horizontally to allow access to all columns ?
grid.jqGrid({
url: '<%= ResolveUrl("~/Grid/GetData?_entity=Strings")%>',
datatype: "json",
mtype: 'POST',
scroll: 1,
autoencode: true,
height: 350,
autowidth: true,
You can try a similar approach but in this case you'll make use of the grid's scrollbars instead of the div overflow.
The idea is to resize the grid itself causing it to show scrollbars if its bouderies are smaller than its content. For this to work correctly the columns must have the option fixed:true otherwise they will resize themselfs to fit the grid's width.
Declare the DOM as follows:
<div id="grid1container" style="width: 100%;">
<table id="grid1"></table>
<div id="grid1pager"></div>
</div>
Then add the javascrip code to the page:
$(window).resize(function () { ResizeGrid1() });
function ResizeGrid1() {
$('#grid1container').height($(window).height() - 55);
$('#grid1').jqGrid()
.setGridWidth($('#grid1container').width() - 2)
.setGridHeight($('#grid1container').height());
}
Here I'm manipulating the grid's height too, if you don't want it just remove the setGridHeight line.
I've found this solution but its not perfec as in FF4 the window stops reporting width resize bellow 535px... couldn't figure out why.
My idea was to wrap the grid inside a DIV and set it to overflow: auto; width: 100%
<div id="grid1container" style="width: 100%; overflow: auto;">
<table id="grid1"></table>
<div id="grid1pager"></div>
</div>
I have two questions reagarding context menu for jqGrid:
I have an empty grid, and I want a context menu to appear when I click on the grid itself, or on the columns header, currently the context menu is only when I have rows inside the grid. So how can I do this?
I have another grid inside a dialog window:
$('#company_grid').contextMenu('grid_contextmenu', {
bindings: {
'add_row': function(t)
{
},
'delete_row': function(t)
{
}
});
$(function()
{
$( "#company" ).dialog(
{
autoOpen: false,
height: 500,
width: 900,
modal: true,
resizable: false,
open: function(event, ui)
{
$("#company").setGridWidth($(this).width()-2 );
$("#company").setGridHeight($(this).height()-100);
}
});
});
<div id="company">
<table id="company_grid"></table>
</div>
<div class="contextMenu" id="grid_contextmenu">
<ul>
<li id="add_row"> Add Row </li>
<li id="delete_row"> Delete Row </li>
</ul>
</div>
When the dialog is opened, I can't see the context menu. I realized that it appears behind the dialog. So what am I doing wrong? How can I add a context menu to the dialog grids?
I'm guessing that all the dialog boxes in jQuery are controlled by CSS.
Maybe you could try changing the z-index value of your context menu to make it pop-over your dialog ?
According the the jqGrid documentation, I should be able to place the pager above or below the jqGrid by moving the pager div. Unfortunately, the pager always renders below the grid.
<div id="pager"></div>
<table id="list">
<tr>
<td />
</tr>
</table>
The jqGrid configuration (related to the pager) looks like:
pager: '#pager',
pginput: false,
pgbuttons: false,
Any suggestions?
You should use toppager:true jqGrid option instead. You don't need define <div id="pager"></div> and use pager: '#pager' parameter. The id of the pager from the top of jqGrid will be "list_toppager" (id of the table element appended with "_toppager").
If you want to add navigator you can use
$("#list").jqGrid('navGrid','#list_toppager');
If you use define <div id="pager"></div> and use pager: '#pager' parameter you will have two pager: one with id="list_toppager" on top of the grid and anothe with id="pager" on the bottom. If you want use both top and bottom pager you can use
$("#list").jqGrid('navGrid','#pager',{cloneToTop:true});
and then move or remove (see another answer for more details and the demo example). You can also very easy move buttons from one toolbar to the other using jQuery.insertAfter function (see here).
use a $ append. the html above table is like this
<div id="export"></div>
add the id and use a promise().done(): "exportButton"
$(grid).jqGrid('navButtonAdd', self.options.pagerSelector, { id: "exportButton", caption: "Export to CSV", buttonicon: "ui-icon-newwin", onClickButton: function() { self._exportToCSV(self, grid); }, position: "last", title: "Export to CSV", cursor: "pointer" })
.promise().done(function() {
//reposition export button
$("#export").append($("#exportButton"));
$("#exportButton").addClass("pull-right").show();
});