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.
Related
I have an AngularJS ui-grid for displaying a few fields including a date. The date comes from the server with the following format: 2018-01-31.
On the column definitions I have something similar to:
.columnDefs = [
...
{ name: 'startDate', displayName: 'Start Date', width: 170, enableHiding: false, cellTemplate: dateCellTemplate},
];
I've already added type: 'date' and cellFilter: 'date:\'yyyy-MM-dd\'', none of them have worked.
The template has just a date input like this:
const dateCellTemplate = '<div><input type="date" ng-model="MODEL_COL_FIELD" ng-change="grid.appScope.saveEdit(row)"></div>'
And whenever I receive the server response, my js console shows me the following error.
Error: [ngModel:datefmt] http://errors.angularjs.org/1.4.8/ngModel/datefmt?p0=2018-01-24
You need to convert the model to a Date object before using it. Use
new Date(your date here);
This is because you're using the input type Date and angular expects a date type rather than string.
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
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'm using jqGrid with cell editing and a datepicker. All works well, except that due to some strange event handling, there is a risk of user data loss. When a cell is selected and its date set, the text is placed back in the editable cell, but it is not transmitted back to the server unless some navigation happens, or an enter key pressed with the date set. This means if a user is simply entering data, and they don't do this additional stuff (about which there is no feedback) the edited value is held in limbo.
The obvious solution is to use an onClose on the datepicker. This gets called, but there seems to be no way to get the data written to a server. I've tried using saveCell, but this leaves the cell text editor open after the data is written, so that if the data fails to write properly, the impression will be given that all is well. I've also tried editCell, but that appears to recurse infinitely, or create some kind of looping. I've also tried faking a keydown as follows:
colModel :[
...
{name:'date', index:'date', width:100, editable: true,
editoptions: {
size: 10, maxlength: 10,
dataInit: function(elem){
setTimeout(function(){
$(elem).datepicker({
onClose: function(dateText, inst) {
var e = jQuery.Event("keydown");
e.which = 13;
$(elem).trigger(e);
}
...
I'm still getting to grips with jquery and jqgrid, so any advice will be very welcome.
Probably you should set focus before trigger the "Enter" key? Like
setTimeout(function(){
$(elem).focus().trigger({ type: 'keypress', charCode: 13 });
},100);
Could you test it?
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.