I am using a jqGrid that has allot of columns to it.
I added the view option (when clicking on a row and then on the 'view' button, in the bottom left corner of the grid, it opens a model with all the info for that row.
I see that the model has some css style:
overflow-hidden
Therefor if i have allot of columns to show after a certain height that i gave it when creating the grid, they get hidden.
How can i make that dialog box be:
overflow-auto
If possible i want only the inside div to scroll and leave the header of the dialog and the buttons on bottom there all the time.
How can i do this?
myGrid.jqGrid('navGrid', '#pager',
{ edit: false, add: false, del: false, search: false, view: true }, //option
{}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{},
{ height: 250, jqModal: false, closeOnEscape: true} // view options
);
I tried this:
$('#viewmod'+myGridId).css({overflow: 'auto'});
But it didnt work...
You tried the way described here and here.
Found the answer for this.
When declaring the view options add the dataheight option...
{ dataheight: 250, jqModal: false, closeOnEscape: true} // view options
Related
I am trying to customize the behavior of an editor button in a plugin. On click, it opens a modal where the user can input some text. On confirmation, I want to wrap this text into code tags. But I don't want to take this text as if it comes from a text editor, I want to handle it as visual text. This means, I want to preserve any formatting (whitespaces and linebreaks) but not accept any other tags besides the code tags that I add afterward.
function showDialog() {
var win = ed.windowManager.open({
title: "Insert code",
body: {
type: 'textbox',
name: 'code',
multiline: true,
minWidth: ed.getParam("code_dialog_width", 600),
minHeight: ed.getParam("code_dialog_height", Math.min(tinymce.DOM.getViewPort().h - 200, 500)),
spellcheck: false,
style: 'direction: ltr; text-align: left'
},
onSubmit: function(e) {
ed.focus();
ed.undoManager.transact(function() {
ed.insertContent('<code>' + e.data.code + '</code>');
});
ed.selection.setCursorLocation();
ed.nodeChanged();
}
});
}
First i'd wrap that function in tags and make sure to initiate the function by adding showDialog() at the end of that function so the DOM knows to call the function. and with wordpress's content filter its going to add spaces no matter what unless you disable the content filter from auto populating format. if you go to a site like https://www.willpeavy.com/minifier/ and copy your code into that and minify the spaces you should be able to include it in your text(not Visual) tab in MCE. That being said its really bad practice to run functional code in MCE you're better off making a separate page / Post template for it.
my jgGrid appears correctly, but the icons on the Navigator button are not appearing. There is an outline to the buttons and a tooltip when you hover over them, but no icon on the button, like a "+" or trash bin.
Also, is there a way to hide certain buttons and not others, like remove the add record butoon, but leave the delete record button.
I have followed the instructions relating to the style sheets and language files.
Below is the code that creates a grid:
// create the grid
$(gridName).jqGrid({
// server url and other ajax stuff
url: '/Admin/Blogs',
datatype: 'json',
mtype: 'GET',
height: 'auto',
shrinkToFit: false,
// columns
colNames: colNames,
colModel: columns,
// pagination options
toppager: false,
pager: pagerName,
rowNum: 10,
rowList: [10, 20, 30],
// row number column
rownumbers: true,
rownumWidth: 40,
// default sorting
sortname: 'PostedOn',
sortorder: 'desc',
// display the no. of records message
viewrecords: true,
jsonReader: { repeatitems: false }
});
$(gridName).navGrid(pagerName,
{
// settings
cloneToTop: true,
search: false
},
{}, // add options
{}, // edit options
{} // delete options
);
Make sure your page got jquery-ui.js and jquery.ui.theme.css with icons images in your css/images folger.
About hiding some buttons:
$(gridName).navGrid(pagerName,
{edit:false,search:false,del:true,add:true,view:false,refresh:false,cloneToTop: true},
// navigator options ( where true = show / false = hide )
{}, // add options
{}, // edit options
{} // delete options
);
if you will add custom buttons, just give them id and hide :
$('#buttonId').hide();
By adding jquery.ui.theme.css with the theme images folder everything worked.
I am completely new to jqGrid and simply having a hard time get started as every post seem to be very advanced. I simply have a simple grid setup and now want to add the 'add/edit' icons. I have below code but they still don't show up. What else is missing?
$("#tabPeopleList").jqGrid('navGrid', '#tabPagerBar', {
edit: true, <-- isn't this all there is needed?
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext:"Delete"
});
Everything looks good, just ensure that you have the following elements in your html:
<table id="tabPeopleList" ></table>
<div id="tabPagerBar"></div>
and in your jqGrid ititialization:
pager: $('#tabPagerBar'),
I have a repeater In which I am displaying different values.On click of each row I want to display few values.But in the enyo example the content of the popup is popup.....
This content I want to change.I have tried as below
I have the popup-
{name: "basicPopup", kind: "enyo.Popup", floating: true, centered: true,
style: "background-color: yellow; padding: 10px", onHide: "popupHidden", components: [
{content: "Popup..."}
]
},
the mathod i used on tap of each row is
tapped: function(inSender, inEvent) {
alert(inSender.getContent())
this.$.basicPopup.setValue(inSender.getContent());
this.$.basicPopup.show();
},
But by this the vale of the popup is not changing.I want to change the value.Please help.
What you need to do is setContent() on the component inside the Popup OR destroyClientControls() on the Popup and then createComponents() to add what you want in there.
To do it the first way, you want to provide a name for that component, something like:
{name: "popupContent", content: "Popup..."}
and then use this.$.popupContent.setContent("foo");
I have the following code, which generates a basic layout for my app:
tabpanel = new Ext.TabPanel({
fullscreen: false,
ui : 'dark',
sortable : false,
tabBarDock: 'bottom',
cardSwitchAnimation: 'flip',
items: [{
title: 'Tab 1',
html : '1',
cls : 'card1',
icon : 'tab1'
}]
});
lists.views.Viewport = Ext.extend(Ext.Panel,{
fullscreen: true,
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
dock: "top",
title: 'title'
}],
items: [tabpanel],
initComponent: function() {
this.tabpanel.add(new lists.views.ItemLists());
lists.views.Viewport.superclass.initComponent.apply(this, arguments);
},
});
This doesn't work, probably due to the fact that the TabPanel that is inside the Viewport Panel cannot be pointed to like this. I've searched through the sencha documentation but I can't find how to add the
new lists.views.ItemLists()
to the tabpanel, which in turn is inside the
lists.views.Viewport
Also, there will be other stuff I want to declare before my viewport (or even after it) that I want to add to specific other panels I might add later. What is the best way to achieve this?
Any ideas on how to do this?
Thanks!
If you take the this. off the reference to the tabpanel in the Viewport's initComponent method then it should work because the tabpanel variable is global.
Alternatively, you can access the Viewport's items via the items property, for example,
initComponent: function(){
this.items.get(0).add(new lists.views.ItemLists());
lists.views.Viewport.superclass.initComponent.apply(this, arguments);
}
Hope this helps
Stuart