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.
Related
For example i wanted to do this,
{
title: 'Configurations',
dataIndex: 'configurations',
key: 'configurations',
render: (configurations) =>(
},{
title: 'TitleID',
dataIndex: 'configurations',
key: 'titleId',
render: (configurations,source) =>()}
I wanted to use the configurations as the data source for two different columns but it kept crashing me. I'm not sure If I am doing something wrong or is it not allowed. I tried searching the antD table docs but it doesn't seem to say anything about this.
https://ant.design/components/table/
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'm using UI-Grid 3.0 unstable on an angular page that is loading data via Restangular. So far most of it seems to be ok. I am using the selection module along with it and I'm having difficulty with pages that are loading the {enableFiltering: true} gridOptions in that most of the pages are not showing the input box on the grid.
I invoke the ui-grid on the html page using:
<div class="gridStyle" ui-grid="gridOptions" ui-grid-selection></div>
and my gridOptions in my controller looks like this.
$scope.gridOptions = {
enableFiltering: true,
data: 'data',
columnDefs: [
{field: 'name', displayName: 'Name'},
{field: 'date', displayName: 'Date', cellFilter: 'date:\'MM-dd-yyyy\''}
],
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
I honestly can't figure out why its not appearing on the page.
I don't understand 100% the problem, but I could go around it by overriding some css. The height in css were 100% and I changed them to auto.
.ui-grid-header-cell{
height:auto;
}
.ui-grid-cell-contents {
height: auto;
}
I hope this would be helpful.
This an awful hack, but I always use the filters, so I just tracked the container that was the wrong height. I had lost hours to this trying to find the cause and using all the suggested fixes.
The container turned out to have the class "ui-grid-header-canvas", so I just set the height to 54px after the grid had sized itself.(after I set the data)
$(".ui-grid-header-canvas").css("height","54px")
Sorry, but it works and I have a deadline..
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");
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.