JqGrid set column width not working

JqGrid set column width not working - javascript

I am trying to implement an grid with JqGrid.
I am not able to align the column width with the header width As the column data is too big to accommodate there. Is it possible to hide the column value if it exceeded the Header width. Below is my code snippet.
$("#tblscheduleScan").jqGrid({
data: data,
datatype: 'local',
width: 1025,
colNames: ['Chosen Repo', 'Protex Project Name', 'Next Scheduled Scan', 'Recurrence Pattern', 'Modify'],
colModel: [{
name: 'scannedPath',
shrinkToFit: false
}, {
name: 'projectName',
shrinkToFit: false
}, {
name: 'nextScanDate',
shrinkToFit: false
}, {
name: 'scheduleType',
shrinkToFit: false
}, {
name: 'Modify',
align: 'center',
classes: 'clickGridLink',
shrinkToFit: false
}],
sortname: 'projectName',
viewrecords: true,
sortorder: "asc",
caption: '<h3>Scan Schedules</h3>',
height: 'auto',
gridview: true,
autoencode: true,
onCellSelect: function(rowid, iRow, iCol, e) {
//var rowData = $(this).jqGrid("getRowData", rowid);
if (iCol === 'Edit') {
modifyScheduleScan(data[rowid - 1]);
}
}
});
If I try to set the width Manually it is not working in google chrome browser but works fine in Firefox.
colModel: [
{name: 'scannedPath', width: 50, shrinkToFit: false},
{name: 'projectName', width: 95, shrinkToFit: false},
{name: 'nextScanDate', width: 30, shrinkToFit: false},
{name: 'scheduleType', width: 27, shrinkToFit: false},
{name: 'Modify', align: 'center', classes: 'clickGridLink', width: 10, shrinkToFit: false}
]

Related

Drag Jqgrid one column value to another like in excel

How to drag the column value of jqgrid to another like dragging in excel?
Can it be resolved?
Below is my jgrid code :
$(document).ready(function () {
$('#form_table').jqGrid('setCell', 2, 'column Name', '', {color: 'red'});
jQuery("#form_table").jqGrid({
datatype: "local",
mtype: "POST",
url: '',
colNames: ['Id', 'तालीममा सहभागीको नाम थर', 'जिल्ला', 'गा.वि.स', 'वडा नं', 'जातजाती', 'लिङ्ग', 'उमेर'],
colModel: [
{name: 'id', index: 'id', jsonmap: "id", hidden: true, },
{name: 'name', index: 'name', jsonmap: "name", width: 250, editable: true},
{name: 'district', index: 'district', jsonmap: "district", width: 100, editable: true, align: 'center', edittype: 'select', editoptions: {
value: {"":"",<?php
foreach ($districts as $district) {
echo "'" . $district->dis_nepali . "': '" . $district->dis_nepali . "', ";
}
?>
}, defaultValue: ''}, formatter: 'select'},
{name: 'vdc', index: 'vdc', jsonmap: "vdc", width: 100, editable: true},
{name: 'ward_no', index: 'ward_no', jsonmap: "ward_no", width: 80, editable: true},
{name: 'caste', index: 'caste', jsonmap: "caste", width: 100, editable: true, align: "center", edittype: 'select', editoptions: {value: {"दलीत": "दलीत","आ/जनजाती": "आ/जनजाती", "बा छ्य": "बा छ्य", "मधेसी": "मधेसी", "अन्य": "अन्य","":""}, defaultValue: ''}, formatter: "select"},
{name: 'gender', index: 'gender', jsonmap: "gender", width: 100, editable: true, align: "center", edittype: 'select', editoptions: {value: {"महिला": "महिला", "पूरूष": "पूरूष","":""}}, formatter: "select"},
{name: 'age_group', index: 'age_group', jsonmap: "age_group", width: 100, editable: true,}
],
loadComplete: function (data) {
var grid = jQuery("#form_table"),
pageSize = parseInt(grid.jqGrid("getGridParam", "rowNum")),
emptyRows = pageSize - data.rows.length;
if (data.rows.length == 0) {
for (var j = 1; j <= emptyRows; j++)
// Send rowId as undefined to force jqGrid to generate random rowId
grid.jqGrid('addRowData', undefined, {});
}
if (emptyRows > 0) {
for (var i = 1; i <= emptyRows; i++)
// Send rowId as undefined to force jqGrid to generate random rowId
grid.jqGrid('addRowData', undefined, {});
}
},
jsonreader: {repeatitems: false, id: 'id', root: 'root'},
pager: '#form_pager',
rowNum: 10,
toppager: true, //for pager on top
height: "auto",
rowList: [10, 20, 50, 100],
// sortname: 'id',
viewrecords: true,
gridview: true,
resizable: true,
rownumbers: true,
loadonce: true,
//shrinkToFit:false,
loadtext: 'Loading...',
cellEdit: true,
contentType: "application/json",
cellsubmit: 'clientArray',
cellurl: ""
});
jQuery("#form_table").jqGrid('navGrid', '#form_pager', {
cloneToTop: true,
edit: false,
add: false,
del: false
});
jQuery("#form_table").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
{startColumnName: 'district', numberOfColumns: 3, titleText: 'ठेगाना'}
]
});
}):
Now i want the column 2 name of row 1 to be dragged to the column 2 name upto row 15 is there any solution?
Any help would be highly appreciated. Thank You

Pass Id to Subgrid of Jqgrid

In here i'm going to expand subgrid using InvoiceId but i have no idea how to get InvoiceId and pass it to the subgrid url.my main grid has InvoiceId.This is JqGrid.When i hardcode the Invoice ID to the subgrid url then it's working.
<script type="text/javascript">
$(function () {
$('#jqgrid').jqGrid({
url: 'Sales/GetAllSalesOrders/',
datatype: 'json',
mtype: 'GET',
//columns names
colNames: ['InvoiceId', 'CustomerId', 'SubTotal', 'TotalDiscount', 'VAT', 'NBT', 'Amount', 'Balance'],
//columns model
colModel: [
{ name: 'InvoiceId', index: 'InvoiceId' },
{ name: 'CustomerId', index: 'CustomerId',align:'center' },
{ name: 'SubTotal', index: 'SubTotal', align: 'right' },
{ name: 'FullDiscount', index: 'FullDiscount', align: 'right' },
{ name: 'Vat', index: 'Vat', align: 'right' },
{ name: 'Nbt', index: 'Nbt', align: 'right' },
//{ name: 'Total', index: 'Total', align: 'left' },
{ name: 'NetAmount', index: 'NetAmount', align: 'right' },
{ name: 'Balance', index: 'Balance', align: 'right' }
],
pager: '#jqgrid',
rowNum: 10,
sortname: 'InvoiceId',
sortorder: 'asc',
viewrecords: true,
width: 'auto',
height: 'auto',
gridview: true,
rowNum: 50,
rowTotal: 200,
rowList: [20, 30, 50, 100],
rownumbers: false,
rownumWidth: 40,
loadonce: true,
subGrid: true,
subgridtype: "json",
//subrid model
subGridModel: [{
//subgrid columns names
// name: ['InvoiceItemId', 'Quantity', 'Rate', 'DiscountAmount', 'Amount'],
name: ['InvoiceItemId', 'Quantity','Amount'],
width: [100, 100,100],
align: ['left', 'right','right'],
//postData: { id: 22 }
}],
//url from which subgrid data should be requested
subGridUrl: '/Sales/GetSalesItemsByInvoiceId/'
});
My Controller accept Id,
[HttpGet]
public JsonResult GetSalesItemsByInvoiceId(int InvoiceId)
{
//Some code here
}

You can use subGridBeforeExpand to set new value of subGridUrl: $(this).jqGrid("setGridParam", {subGridUrl: newValue});.
Alternatively you can consider to use subGridRowExpanded to implement grid as subgrid. Grid as subgrid allows you maximal control over content of subgrid. jqGrid just create empty <div> for the right part of the additional row added under expended one. One need place empty <table> inside for the subgrid and optionally <div> for the pager. After that one just create new grid. The url of the grdi is the URL for subgrid. I see that you use loadonce: true in the main grid. Probably you can download full subgrid for every grid directly during loading of the main grid. The answer provides an example of such implementation.

In jqGrid, the default querystring parameter for subgrid url is id. You can change that using below code:
...
prmNames: {
subgridid: "InvoiceId",
}
...
Therefore, your subgrid url will be
/Sales/GetSalesItemsByInvoiceId?InvoiceId=
instead of
/Sales/GetSalesItemsByInvoiceId?id=
Also you can change unique id of row using below code, you can give any one of the names specified in "colModel" (in this case it will be "InvoiceId"):
...
jsonReader: {
id: 'InvoiceId'
}
...
So your final code will be like this:
<script type="text/javascript">
$(function () {
$('#jqgrid').jqGrid({
url: 'Sales/GetAllSalesOrders/',
datatype: 'json',
mtype: 'GET',
//columns names
colNames: ['InvoiceId', 'CustomerId', 'SubTotal', 'TotalDiscount', 'VAT', 'NBT', 'Amount', 'Balance'],
//columns model
colModel: [
{ name: 'InvoiceId', index: 'InvoiceId' },
{ name: 'CustomerId', index: 'CustomerId',align:'center' },
{ name: 'SubTotal', index: 'SubTotal', align: 'right' },
{ name: 'FullDiscount', index: 'FullDiscount', align: 'right' },
{ name: 'Vat', index: 'Vat', align: 'right' },
{ name: 'Nbt', index: 'Nbt', align: 'right' },
//{ name: 'Total', index: 'Total', align: 'left' },
{ name: 'NetAmount', index: 'NetAmount', align: 'right' },
{ name: 'Balance', index: 'Balance', align: 'right' }
],
pager: '#jqgrid',
rowNum: 10,
sortname: 'InvoiceId',
sortorder: 'asc',
viewrecords: true,
width: 'auto',
height: 'auto',
gridview: true,
rowNum: 50,
rowTotal: 200,
rowList: [20, 30, 50, 100],
rownumbers: false,
rownumWidth: 40,
loadonce: true,
subGrid: true,
subgridtype: "json",
//subrid model
subGridModel: [{
//subgrid columns names
// name: ['InvoiceItemId', 'Quantity', 'Rate', 'DiscountAmount', 'Amount'],
name: ['InvoiceItemId', 'Quantity','Amount'],
width: [100, 100,100],
align: ['left', 'right','right'],
//postData: { id: 22 }
}],
//url from which subgrid data should be requested
subGridUrl: '/Sales/GetSalesItemsByInvoiceId/',
prmNames: {
subgridid: "InvoiceId",
},
jsonReader: {
id: 'InvoiceId'
}
});

How to mantain filter row when sortable option is set to true in jqgrid?

Im using JQgrid with sortable option set to true and filter toolbar. The problem is that when i change a column order, the filter toolbar maintains the original position.
Example:
I have 2 columns: ID, Name
I change the place and y got Name, ID.
When i filter by name, the e parameter has ID="john"
im using jqgrid 4.4.0.
I change the column order with the mouse from the UI.
Jqgrid code:
grilla.jqGrid({
datatype: function (e) {
dataTypeGrillaEnServerConSort(grilla, actualizarDatos, e, getDatos, !primeraCarga);
},
rowNum: Math.max,
colNames: ['id', 'Apellido Y Nombre', 'Mail', 'Documento', 'Edad', 'Foto'],
colModel: [
{ name: 'id', index: 'id', align: 'right', hidden: true },
{ name: 'nombre', index: 'nombre', width: 60, align: 'left', sorttype: 'text' },
{ name: 'mail', index: 'mail', width: 60, align: 'left', sorttype: 'text' },
{ name: 'documento', index: 'documento', width: 10, align: 'left', sorttype: 'text' },
{ name: 'edad', index: 'edad', width: 10, align: 'right', sorttype: 'number' },
{ name: 'foto', index: 'foto', width: 30, align: 'left', sorttype: 'number', formatter: eliminarFormatter }
],
sortname: 'nombre',
sortorder: "asc",
sortable: true,
caption: "Personas",
emptyrecords: "No hay ninguna persona cargada.",
loadtext: "Cargando...",
autowidth: false,
height: 300,
cellsubmit: 'clientArray',
width: 1200,
pager: "#pager",
rowNum: CANTIDADDEFILASPORPAGINA,
viewrecords: true,
gridComplete: function () {
//mostrar la barra de filtros
grilla.filterToolbar();
grilla.find("img").error(function () {
$(this).attr('src', pathFotoNoEncontrada);
});
}
});

class in column jqgrid doesnt working

Hi I use custom formatter in jqGrid which will add link and class to column.
the name of class I will call is 'iframe' which will set my own dialog box using jquery colorbox.
I have seen in firebug that class of column name was set 'iframe' but when I was clicked that, the dialog didnt working. am I did wrong?
<script type="text/javascript" language="javascript">
jQuery(document).ready(function() {
$(".iframe").colorbox({ iframe: true, width: "40%", height: "80%", onClosed:function(){ location.reload(true); } });
jQuery("#MyDynamicGrid").jqGrid({
url: '/RepositoryRole/DynamicGridData/',
mtype: 'POST',
datatype: 'json',
colModel: [
{ name: 'Name', index: 'Name', width: 0, align: 'left', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, formatter: returnMyLink, editable: true, editrules: { required: true, edithidden: true }, hidden: false },
{ name: 'Description', index: 'Description', width: 80, align: 'left', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, },
],
colNames: ['Name', 'Description'],
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 20, 30],
sortname: 'Name',
sortorder: 'Desc',
viewrecords: true,
imgpath: '/Content/JqGridThemes/steel/images',
autowidth: true,
editurl: '/User/EditGrid/'
});
function returnMyLink(cellValue, options, rowdata, action) {
return '' + cellValue + ' ';
}});
Thanks

I think the colorbox is not being attached to element which are loaded from jqgrid. you can use gridComplete for reattaching the colorbox
jQuery("#MyDynamicGrid").jqGrid({
url: '/RepositoryRole/DynamicGridData/',
mtype: 'POST',
datatype: 'json',
colModel: [
{ name: 'Name', index: 'Name', width: 0, align: 'left', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, formatter: returnMyLink, editable: true, editrules: { required: true, edithidden: true }, hidden: false },
{ name: 'Description', index: 'Description', width: 80, align: 'left', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, },
],
colNames: ['Name', 'Description'],
pager: jQuery('#pager'),
rowNum: 5,
rowList: [5, 10, 20, 30],
sortname: 'Name',
sortorder: 'Desc',
viewrecords: true,
imgpath: '/Content/JqGridThemes/steel/images',
autowidth: true,
editurl: '/User/EditGrid/',
gridComplete: function(){
$(".iframe").colorbox({ iframe: true, width: "40%", height: "80%", onClosed:function(){ location.reload(true); } }
}
});

FlexiGrid - set width of Grid in code

I'm trying out Flexigrid for a new app - I'm really impressed with it but I can't find a way to set the width in code.
The main reason for this is to get the GRID (not the columns inside the grid) to align fully to the size of the window. I know, it makes a mockery of the horizontal resizer, but that's what I have to do!
FYI my set up is the following:
$(document).ready(function() {
$("#flex1").flexigrid
(
{
url: '<%= ResolveUrl("~/Data.ashx") %>?filter=none',
dataType: 'json',
colModel: [
{ display: '', name: 'view', width: 20, sortable: true, align: 'center' },
{ display: 'Street', name: 'Street', width: 260, sortable: true, align: 'left' },
{ display: 'Town', name: 'Town', width: 200, sortable: true, align: 'left' },
{ display: '', name:'Actions', width:30, sortable: false, align: 'center' }
],
sortname: "Street",
sortorder: "asc",
usepager: true,
title: 'Streets',
useRp: true,
rp: 15,
showTableToggleBtn: false,
width: 800,
height: 200
}
);
});
but the following function doesn't work:
function ResizeGrid() {
$('#flex1').flexOptions({ width:1000 }).flexReload();
}
It causes the grid to refresh, but nothing more.

Despite having NO LUCK on google for about 20 minutes before posting this, Murphy's law meant that I tried another quick search just afterwards and found the answer.
Turns out that "width" should be set to 'auto' (note the quotes are vital).
$("#flex1").flexigrid
(
{
url: '<%= ResolveUrl("~/Data.ashx") %>?filter=none',
dataType: 'json',
colModel: [
{ display: '', name: 'view', width: 20, sortable: true, align: 'center' },
{ display: 'Street', name: 'Street', width: 260, sortable: true, align: 'left' },
{ display: 'Town', name: 'Town', width: 200, sortable: true, align: 'left' },
{ display: '', name:'Actions', width:30, sortable: false, align: 'center' }
],
sortname: "Street",
sortorder: "asc",
usepager: true,
title: 'Streets',
useRp: true,
rp: 15,
showTableToggleBtn: false,
width: 'auto',
height: 200
}
);
I'll leave this post for anyone else who has this problem.

Develop Reference

JavaScript is the programming language of the Web.

JqGrid set column width not working - javascript

Related

Drag Jqgrid one column value to another like in excel

Pass Id to Subgrid of Jqgrid

How to mantain filter row when sortable option is set to true in jqgrid?

class in column jqgrid doesnt working

FlexiGrid - set width of Grid in code

Categories

Resources