I have an MVC project, and am working on a page using JQGrid. I have a flyout menu with lots of checkboxes (one for each column of the grid), and I am trying to attach a script to hide/show a column on click.
I've read lots of solutions, and tried using the hide/show methods from the wiki.
$("ShippingListGrid").hideCol("Open");
"Open" is the name of the column in the colModel
{ name: 'Open', index: 'Open', width: 120, align: 'left', editable: true,sortable: true,hidden: false,Key: false, edittype: 'text', editoptions: { size: 20, maxlength: 30}},
This doesn't seem to work though, when I call the function my grid does not change. I've tried reloading my grid and using the column id instead of the name, and the columns still don't change. I've got the latest download. Does anyone know why the function might not be working?
Check your selector, if your grid is a table ID, you will need the # symbol. Maybe try: $("#ShippingListGrid").hideCol("Open");
Related
Fairly new to ExtJS 6, how do I align the tree panel to the center or right of the panel. Been trying to do this for weeks. Please assist
This is what API Docs say:
By default a TreePanel contains a single column which uses the text Field of the store's nodes.
You might declare the tree column with the text dataIndex and the specify the align:
Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 200,
store: store,
rootVisible: false,
renderTo: Ext.getBody(),
columns: [{
xtype: 'treecolumn',
dataIndex: 'text',
flex: 1,
align: 'end'
}]
});
Here is the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/22tu.
Not sure if you are trying to align only certain components or all of them. If the latter is the case, you might want to take a look at Sencha's "Right-to-Left Support in Ext JS" guide.
I am getting null value in check box column while onload jqxgrid first time.
Column properties:
{ text: ”, type: ‘bool’,datafield: ‘available’, columntype: ‘checkbox’,checked:false, width: 70},
jqxgrid properties:
width: ’100%’,
source: transAdapter,
autoheight: true,
pageable: true,
altrows:true,
editable: true,
selectionmode: ‘multiplecellsextended’,
Here I am not using threestatecheckbox property also but still I am getting null value in that column.can you help me how to fix these issue?
you want pass value for that datafield(available field) through json or array as input.
If you pass False as input it will uncheck the checkbox in onload.
If you pass True as input it will check the checkbox in onload.
This is the way you can fix the issue.
I have a trouble about hiding columns in a Grid at runtime.
In a project I use a function that returns the configuration of a column in a Grid.
For take the list of my columns in the Grid I use this piece of code:
var cmV = cmpGrid.getView();
var cmH = cmV.getHeaderCt();
var cm = cmH.getGridColumns();
The variable "cm" returns an array with the configured columns in the grid.
When I manually hide a column with the "column" option in the header Grid with ExtJS version 3.4.1 I can get the property
hidden:true
for the configured column.
But with ExtJS 6 the configured column doesn't include this property.
How I can resolve this issue?
Thanks at all in advance,
Lorenzo.
**
UPDATE
**
I have discovered this about my previous question.
With
var cm = cmH.getGridColumns();
I can get the array of the columns in the grid.
Analyzing this array with Firebug I had found the subarray "config" that contains the properties required by the columns for the configuration.
However now this array doesn't reflect more the changed configuration of a column but the default configuration applied.
My first question is if this new behavior is a bug or not.
Because I have found this new behavior I have changed my code to get the properties of a column not from the subarray config but from the radix. However now the possible configurations are so much.
Now my second question is if there is a way to reduce or to have only the principal properties for type of columns in a grid.
Why not just use grid.columns[index].setHidden(true) ?
Or if you want to take the list of columns, how about reconfigure columns.
var tempColumns = [];
// "cm" returns an array with the configured columns in the grid
cm.forEach(function(e) {
if (some conditions) {
tempColumns.push({
xtype: e.xtype,
text: e.text,
dataIndex: e.dataIndex,
hidden: true,
width: e.width,
align: e.align,
format: e.format
});
}
else{
tempColumns.push({
xtype: e.xtype,
text: e.text,
dataIndex: e.dataIndex,
hidden: e.hidden,
width: e.width,
align: e.align,
format: e.format
});
}
});
grid.reconfigre(null, tempColumns);
https://fiddle.sencha.com/#fiddle/17lq
So, in my ASP.NET MVC 3 app, I've got pages with jqGrids on them. I've customized the search operations on a per-column basis like so:
colModel: [
{ name: 'IceCreamName', index: 'IceCreamName', align: 'left',
searchoptions: {sopt: ['eq', 'ne', 'cn']} },
.
.
.
{ name: 'InitialDate', index: 'InitialDate', align: 'left',
searchoptions: {sopt: ['eq', 'ne', 'gt', 'lt', 'ge', 'le']} },
{ name: 'Volume', index: 'Volume', align: 'left',
searchoptions: {sopt: ['eq', 'ne', 'gt', 'lt', 'ge', 'le']} }
]
And that'll give me, for this example, Equal, NotEqual, Contains on the name, and Equal, NotEqual, GreaterThan, LessThan, GreaterThanOrEqual and LessThanOrEqual on the date and volume columns. Wonderful. That customization is great.
What I'd particularly like to do though is customize the strings displayed in the search operation dropdown for those columns. For instance, for the InitalDate column, I'd like the 'gt' to display "after" instead of "greater" (makes more sense to the user) and something like "on or before" instead of "less or equal".
I see that I can modify those globally in the grid.locale-en.js (or whatever locale is correct) but that is at a global level. I'd like the date and volume columns to have strings that are specific to those columns.
Any way to do that? Perhaps I missed something in the documentation on how to accomplish that.
You don't wrote which version of jqGrid you use, so I suppose that you use the last 4.0.0 version of jqGrid.
There are no jqGrid option of couse which can make searching dialog like you as want. I find your question very interesting, so I extended the code of my this and this old answers so that it do wat you need.
The demo uses jqGrid where 'invdate' column ('Date' column) has as the searchoptions the following:
searchoptions:{sopt: ['eq', 'ne', 'gt', 'lt', 'ge', 'le'],
optDescriptions: {eq:'my eq', gt:'after', le:'on or before'}}
The optDescriptions is my extension. I use onInitializeSearch method of the searching dialog where I overwrite reDraw and onchange method of the filter dialog so that the new optDescriptions property will be used. Additionally in the demo like in the previous demos I don't permit to remove the first searching rule and set the focus on the last input field.
I recommend you to place new feature request in the trirand forum to make the feature are implemented in jqGrid per default.
I hope you have a good morning.
I'd like to use jqGrid in my Asp.Net app. So far, I've been producing an html table and converting it to a grid, but I'd like to try a better approach: loading the data via an AJAX call as it's supposed with the grid. I found out how to fetch data, but I'd like to have the "Edit" and "Delete" columns in addition to the data columns. How do I achieve it?
I'd rather not craft the html for the buttons in my controller. The ideal solution would be to send just the data, and have jqGrid add the required columns based on some client-side templates and the id values. I can't do it manually since I can't add columns to the existing grid. So, what do I do?
Update. I don't need just to achieve edit/delete functionality. What I need is to add a column with HTML based on some template and the "id" value, like [More details]
Sending pure data back from the server is the correct way if you use jqGrid.
To implement Row editing like you want look at the jqGrid Demo and choose on the left part "Row Editing" and then "Custom Edit". I personally prefer to use so named "inline editing" (choose on the same demo "Input types" under "Row Editing"). You implement switching in editing mode by double-click instead of selecting the row (see jqGrid - edit only certain rows for an editable column as an example). To delete the rows you can use additionally "Delete" button from the "form editing". To use it you should add Navigator with respect of navGrid method and choose with the corresponding parameters the buttons in the toolbar which you need. To see this on the demo choose "Live Data Manipulation" and then "Navigator".
UPDATED: In the jqGrid Demo, see "Row Editing" and then "Custom Edit" you can see how you can use setRowData inside of gridComplete or loadComplete handle to set ANY HTML code fragment. Why do you don't like the method? You can also use predefined showlink formatter to display a link or use custom formatter and custom unformatter to display any HTML contain in a jqGrid cell.
You probably figured it out by now, but for whatever is worth here is my answer using a custom formatter. The Action column is rendered using a custom formatter that shows a button that calls a simple javascript function.
$(document).ready(function () {
$("#all-errors-list").jqGrid({
url: '/Error/AllErrors/',
datatype: 'json',
mtype: 'GET',
colNames: ['Id', 'Error','Actions'],
colModel: [
{ name: 'Id', index: 'Id', width: 100, align: 'left', editable: true},
{ name: 'ErrorDetails', index: 'ErrorDetails', width: 350, align: 'left' },
{ name: 'ActionId', width:400, formatter: actionFormatter}
],
pager: '#all-errors-pager',
rowNum: 10,
rowList: [10, 20, 50],
sortname: 'Id',
sortorder: 'asc',
viewrecords: true,
imgpath: '<%=Html.ImagePath()%>',
caption: 'Open Errors',
height: "100%",
width: "100%",
gridComplete: function () { $("button").button(); }
})
function actionFormatter(cellvalue, options, rowObject) {
return "<button onclick=\"alert('" + cellvalue + "')\">Details</button>" ;
}
I hope that helps.