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.
Related
I am using jqgrid for basic CRUD functionality on an asp.net mvc page. My requirement is that I want to show a dropdown on edit popup that will only contain static values e.g New and Existing. All the examples I find use editoptions with dataurl and buildselect method. Is there a way that I can build select list using static values when grid opens?
Thanks
It's very simple. You need just use value property of editoptions. Something like
{ name: "myColName", width: 100, editable: true, edittype: "select",
editoptions: { value: "New:New;Existing:Existing", defaultValue: "New" }}
or if you use toolbar searching additionally then
{ name: "myColName", width: 100, editable: true, edittype: "select", stype: 'select',
editoptions: { value: "New:New;Existing:Existing", defaultValue: "New" },
searchoptions: { sopt: ['eq', 'ne'], value: ':Any;New:New;Existing:Existing' }}
I am working with ASP.NET MVC 3. I have the following configuration for the grid:
grid.jqGrid({
data: pages,
datatype: 'json',
emptyrecords: 'No hay proyectos cargados',
colNames: ["Código", "Descripción", "Rev", "Cliente", "Tipo"],
colModel: [
{ name: 'Codigo', index: 'Codigo', width: 100 },
{ name: 'Descripcion', index: 'Descripcion asc, Descripcion', width: 200 },
{ name: 'Rev', index: 'Rev', width: 100, align: "right" },
{ name: 'Cliente', index: 'Cliente', width: 200, align: "right" },
{ name: 'Tipo', index: 'Tipo', width: 200, align: "right" }
],
rowNum: 10,
pager: '#dPager',
sortname: 'Codigo',
viewrecords: true,
sortorder: "desc",
beforeRequest: function() {
if (pages.length === 0) {
grid[0].p.page = 0;
}
},
height: 'auto',
});
The column names "Código" and "Descripción" display a weird symbol (a black diamond with a white question mark inside of it) instead of the "ó" characters.
For your information:
There are other "ó" characters in the View that are rendered, which makes me believe it has nothing to do with the page's encoding (FYI, the DOCTYPE tag is the standard that appears in the _Layout.cshtml).
jqGrid itself does render the special "ó" character in other controls, so long they appear in grid.locale-es.js. So, for instance, the literal for "Page X of Y" is "Página X de Y", and if I change it for "óóóóóóóóó X de Y" it renders it properly.
The same problem happens if I change, for instance, the emptyrecords entry with "óóóóóó".
Any ideas why does this happen?
This could happen because you have placed this script in a javascript file which doesn't have the correct encoding to match with your site.
So for example if your site is UTF-8, make sure that you have saved the .js file with UTF-8 with BOM.
Open the .js file in Visual Studio and choose File->Save As
Click on the down arrow next to the Save button
Select Save with Encoding ...
From the drop down list select Unicode (UTF-8 with signature) - Codepage 65001:
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
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
Anyone know how to attach a renderer to a grid grouping header in ExtJS4? In ExtJS3 I have the following working code, which returns 'Past' if an event has been completed ('Y'), or 'Upcoming' if not completed:
function fmt_group_heading(groupVal) {
if (groupVal === 'Y') {
return 'Past';
} else {
return 'Upcoming';
}
}
// create the Grid
var fitGrid = new Ext.grid.GridPanel({
store: fitGroupingStore,
columns: [
{header: "ID", dataIndex: 'id', hidden: true },
{header: 'Event', width:320, dataIndex: 'event',
renderer:fmt_event_description},
{header: 'Events', dataIndex: 'completed', hidden: true,
renderer: fmt_group_heading }
],
stripeRows: true,
// config options for stateful behavior
stateful: true,
stateId: 'grid',
hideHeaders: true,
view: new Ext.grid.GroupingView({
groupRenderer: 'completed',
forceFit: true
})
});
ExtJS4 provides grid grouping but I'm not understanding how to change the output of the group text. The 'groupHeaderTpl' attribute of Ext.grid.feature.Grouping seems to only take the raw field value as read from the store.
this.groupingFeature = Ext.create('Ext.grid.feature.Grouping', {
groupHeaderTpl: 'Group: {completed}'
});
// create the Grid
this.fitnessGrid = new Ext.grid.Panel({
store: this.fitnessEventStore,
features: [this.groupingFeature],
// etc.......
try smth like this:
groupHeaderTpl:
'{[fmt_group_heading(values.name)]}
({rows.length}
Item{[values.rows.length > 1 ? "s" :
""]})'
The groupHeaderTpl requires you to use {name} when composing the template. It will only use the value provided by the groupField.
See the Docs.
Try this:
groupHeaderTpl: '{[values.rows[0].completed]}'