hihi~~
i want to change backgroud color when i selected row or header column for sort..i use the latest flexigrid.js (with datacol attribute)
thank you for your help...

I think it may be more appropriate to use GET instead of POST for retrieval of items when using the JSON service. Getting a list is idempotent, and JSON REST services usually use POST for adding new items.

I've downloaded the latest version (the suggested version) but I do no longer see images for the buttons on the toolbar. I see that the code has changed and we're supposed to use bimage property to set buttons. Can I see some samples for that, please? Can we have default buttons' images defined?

Also, this code I have
function bindDblClick()
{
$('#flexClients tr').dblclick(function () {
edit('Edit');
});
}

and

$("#flexClients").flexigrid({
url: '/Client/Client/',
dataType: 'json',
colModel: [
{ display: 'Client Id', name: 'Id', width: 100, sortable: true, align: 'center', hide: true },
{ display: 'Client #', name: 'Number', width: 100, sortable: true, align: 'center' },
{ display: 'Name', name: 'Name', width: 350, sortable: true, align: 'center' },
{ display: 'Contact 1', name: 'Contact1', width: 350, sortable: true, align: 'center' },
],
buttons: [
{ name: 'Add', bclass: 'add', bimage: '~/Images/add.png', tooltip: 'Add new client', onpress: add },
{ name: 'Edit', bclass: 'edit', tooltip: 'Edit selected client', onpress: edit },
{ name: 'Delete', bclass: 'delete', tooltip: 'Delete selected client', onpress: del },
{ separator: true }
],
searchitems: [
{ display: 'Client Name', name: 'Name' }
],
sortname: "Name",
sortorder: "asc",
usepager: true,
title: 'Clients',
useRp: true,
rp: 15,
rpOptions: [5, 10, 15, 20, 25, 40],
showTableToggleBtn: true,
width: 900,
onSuccess: bindDblClick, // HERE is the code
onSubmit: addFormData,
hideOnSubmit: false,
height: 'auto',
singleSelect: true
});

No longer works. What should I do now to make double click on the selected row invoke Edit functionality?

Hello,

I would like a new feature.
I don't know how to persist the selection ( multi or single selection ), after the refresh navigator button or the back button was pressed. Since the page is completely refresh, I think cookie is a good way to do this. I would like your opinion.

Grégory

since i wanna add the flexigrid to cdnjs, and the owner need a tag on the source repo

cdnjs/cdnjs#1062 (comment)

Hi

When I Drag the tablehead it cause an error as :"TypeError: p.colModel is undefined". in flexigrid.js 230 rows.

Is that a problem,please?

Hi, when I zoom in or zoom out the page which contains flexigrid, some columns on the righthandsize of the flexigrid will be hided. This also occurs when I resize the browser.

Can Flexigrid auto resize the column' width without reloading data(send a new request to the server) when the browser or page resizes?

Thanks a lot!

I need organize one file i the backend of virtuemart 1.19, exactly, product.product_list. I need your help to do it. where i must put the call to the flexigrid.js? i must another change?

(Is there a mailing list?)

I have fixed a couple bugs today and found the jquery code to be inefficient. The code to generate a single row seems to be repeating a lot of work for each row. A better approach, I think, would be to generate a single row as a template, and clone it for each row.

Is there a reason not to give that a try?

Data cells and column header cells drifts by 1 pixels , even I checked they have same width and same padding , this issue only comes in Mozilla , in Chrome its absolutely fine , any suggestions please ,I am generating columns dynamically

Hy,
I want to add custom button caption.

Example:

buttons : [
    {display: 'Hozzáad', name: 'Add', bclass: 'Icon IconAdd', onpress : doCommand},
    {display: 'Módosít', name: 'Edit', bclass: 'Icon IconModify', onpress : doCommand},
    {display: 'Töröl', name: 'Delete', bclass: 'Icon IconDelete', onpress : doCommand},
    {separator: true}
],

I suggest you modify your code

Line 882:
btnDiv.innerHTML = ("<div><span>") + (btn.hidename ? "&nbsp;" : btn.name) + ("</span></div>");

to

btnDiv.innerHTML = "<div><span>" + (btn.display ? btn.display : (btn.hidename ? "&nbsp;" : btn.name)) + "</span></div>";

Bye,
Balázs

When I sent down the row data in an ajax response, I add a couple extra fields which are ignored when building the table, but are extremely useful to help me respond to clicks, and the like. For example, if I want to edit the object that is represented by that row, it's nice if I can generate the URL to edit it in my web app rather than hacking it in the web page.

I cannot see a way to do this today but would like one. If nobody knows of a way to do it I will implement it myself using jquery.data(...) function on each row.

I see that the latest version of main flexigrid.js is 1 month old, but the packed version is 3 months old. Can someone please keep them in sync?

Thanks a lot in advance.

If you are using Chrome, this error might appear if you set the usepager property to true.

I have solved this by removing the & nbsp; codes on line 1183 and 1213

How do i Add href tag or linkbutton so that it could redirect to another page with some querystring in FlexiGrid using JQuery dynamically?

Thanks!!

Hi, I want hide the ToggleBtn's title , is "hide/show colums" that one.

Because if I write this code "$( document ).tooltip();", the ToggleBtn's title is very big and when I move my mouse on the selection , it always hide with the ToggleBtn's title.

so I just want hide the ToggleBtn's title and I don't want modify the code which is "$( document ).tooltip();"

and I think this title is unnecessary,is it?

so ,pls help me ,thanks a lot!

Is it possible to add cell formatter in colmodel like this:

if (typeof row.cell[idx] != "undefined") {
var data = (row.cell[idx] != null) ? row.cell[idx] : '';
var fmt = p.colModel[idx].formatter;
td.innerHTML = fmt ? fmt(data, row) : data;
} else {...

I want to reload colmodel with different column names. Is it possible ?

$.cookie is not a function
[Break On This Error]

if( $.cookie(cookie_width) != undefined ) {

flexigrid.js (line 810)

I used flexigrid to show the record. There i use the add button which i want to show/hide on the basis of condition can we do this? If yes then how?

Here's my code.

/*
iso = mcode
name = mdescrip
printable_name = mtype
iso3 = mcolor
numcode = uom
*/
        $("#flex1").flexigrid({
    url: 'post-json.php',
    dataType: 'json',
    colModel : [
        {display: 'Code', name : 'mcode', width : 40, sortable : true, align: 'center'},
        {display: 'Description', name : 'mdescrip', width : 180, sortable : true, align: 'left'},
        {display: 'Type', name : 'mtype', width : 120, sortable : true, align: 'left'},
        {display: 'Color', name : 'mcolor', width : 130, sortable : true, align: 'left', hide: true},
        {display: 'UOM', name : 'uom', width : 80, sortable : true, align: 'right'}
        ],
    buttons : [
        {name: 'Add', bclass: 'add', onpress : test},
        {name: 'Delete', bclass: 'delete', onpress : test},
        {separator: true}
        ],
    searchitems : [
        {display: 'Code', name : 'mcode'},
        {display: 'Description', name : 'mdescrip', isdefault: true}
        ],
    sortname: "mcode",
    sortorder: "asc",
    usepager: true,
    title: 'Raw Materials',
    useRp: true,
    rp: 15,
    showTableToggleBtn: true,
    width: 700,
    height: 200
});   

        function test(com, grid) {
            if (com == 'Delete') {
                confirm('Delete ' + $('.trSelected', grid).length + ' items?')
            } else if (com == 'Add') {
                alert('Add New Item');
            }
        }

Below is the output of my post-json.php

{"page":1,"total":"284","rows":[[{"mcode":"Z","mdescrip":"Z","mtype":"Z","mcolor":"Z","uom":"Z"}],[{"mcode":"Z","mdescrip":"Z","mtype":"Z","mcolor":"Z","uom":"Z"}],[{"mcode":"P","mdescrip":"P","mtype":"P","mcolor":"P","uom":"P"}],[{"mcode":"P","mdescrip":"P","mtype":"P","mcolor":"P","uom":"P"}],[{"mcode":"Z","mdescrip":"Z","mtype":"Z","mcolor":"Z","uom":"Z"}],[{"mcode":"Z","mdescrip":"Z","mtype":"Z","mcolor":"Z","uom":"Z"}],[{"mcode":"B","mdescrip":"B","mtype":"B","mcolor":"B","uom":"B"}],[{"mcode":"B","mdescrip":"B","mtype":"B","mcolor":"B","uom":"B"}],[{"mcode":"r","mdescrip":"r","mtype":"r","mcolor":"r","uom":"r"}],[{"mcode":"r","mdescrip":"r","mtype":"r","mcolor":"r","uom":"r"}],[{"mcode":"0","mdescrip":"0","mtype":"0","mcolor":"0","uom":"0"}],[{"mcode":"0","mdescrip":"0","mtype":"0","mcolor":"0","uom":"0"}]]}

$(document).mousemove(function (e) {
g.dragMove(e);
}).mouseup(function (e) {
g.dragEnd();
}).hover(function () { alert(1); }, function () {
g.dragEnd();
});

change to

$(".hDiv").mousemove(function (e) {
g.dragMove(e);
}).mouseup(function (e) {
g.dragEnd();
}).hover(function () { }, function () {
g.dragEnd();
});

The textbox for the page number is not based on 'numeric only' textbox and allows to type any garbage. I think it should only allow numbers within the range of the total number of pages (e.g. from 1 to the total number)

Also, this textbox is too wide and also the height of it is not matching the rest.

Another issue is the selector. Once I selected a row, I can also select more and more rows. I think we want only one row to be selected at a time.

I also not sure why I can not make Edit to display the currently selected values. I tried to follow this sample where it works fine
http://mvc4beginner.com/Sample-Code/Insert-Update-Delete/Asp-.Net-MVC-Ajax-Insert-Update-Delete-Using-Flexigrid.html

but in my code the form displays empty values instead :(

Also, I have some questions for implementing flexgrid and separate views for Add/Edit and also have other questions.

I am using flex-grid in my application. Basically I am building my application in Visual studio 2008 and using C# 3.5.
My question is How can we add Data in flex-grid in my application!!!
I have a data-table and it has the same 5 columns as one in the demo!!!

I'm not sure if this a bug in Flexigrid or in my web service code somewhere.

I have a grid that is not auto populated, by is populated on a reload call at a later time. The initial reload works. When I then use a button that opens another dialog to edit a selected row, the save from the dialog works and saves the data. I then call the reload again, and the AJAX block just skips happily by with no going to my web service a second time.

I've stepped thru the variables and everything is as it should be but it just refuses the second reload.

Any ideas? Things I should be looking for?

-John

The test for $.cookies was added to avoid errors using the cookie plugin to remember column positions. Unfortunately the cookie plugin is accessed at $.cookie, not $.cookies (plural).

So I think the whole thing to remember column widths is broken.

It needs to call the fix height function after the data has been loaded, otherwise if the grid is empty, it's getting a height of 0px.

Also, if the fixHeight function is multiple times, it seems to switch between an auto height and a fixed height so half the time it isn't visible because of the overflow hidden.

Hi, I found a bug but I don't know how to solve it.
I use Flexigrid in my edited CSS layout template.
When I put Flexigrid in a DIV and set that padding and margin.
In Chome/IE8/Safari , this situation works fine but Firefox.
It has a problem when you hover the Toggle column button [.nBtn] and column resize [.cDrag div].
It shown the wrong place [css left attribute is wrong].

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  <title>Untitled Document</title>
 <link rel="stylesheet" type="text/css" href="images/flexigrid.pack.css" />

  <style type="text/css">

  .flexigrid div.fbutton .add {

  background: url(images/add.png) no-repeat center left;

  }
.flexigrid div.fbutton .delete {

  background: url(images/close.png) no-repeat center left;

  }
.textbox{

  margin: 100px;

  padding: 100px;

  }

  </style>

  

  <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>

  <script type="text/javascript" src="js/jquery.cookie.js"></script>

  <script type="text/javascript" src="js/flexigrid.js"></script>
</head>
<body>

  <div class="textbox">

  <table class="flexme3"></table>

  </div>

  <script type="text/javascript">

  $(".flexme3").flexigrid({

  url : 'post-json.php',

  dataType : 'json',

  colModel : [ {

  display : 'ISO',

  name : 'iso',

  width : 40,

  sortable : true,

  align : 'center'

  }, {

  display : 'Name',

  name : 'name',

  width : 180,

  sortable : true,

  align : 'left'

  }, {

  display : 'Printable Name',

  name : 'printable_name',

  width : 300,

  sortable : true,

  align : 'left',

  }],

  

  sortname : "iso",

  sortorder : "asc",

  usepager : true,

  title : 'Countries',

  useRp : true,

  rp : 15,

  width :  'auto',

  height : 'auto',

  });

  </script>
</body>

  </html>

hi,
as we know flexigrid allows resizing in horizontal and vertical directions. does anyone have an idea or a fix as to how to disable horizontal resizing while keeping the vertical resizing intact?

TIA

Hello i new for use this script...

i have question about onDragCol property why if default set false but on result can drag and drop column?

but if i set it true on html file, it cause result column of table which have drag no have header again and if i click on table one by one column disappeared.

the second one can i have footer with the summary of column data ?

thanks before for attention for all

Hi
My flexigrid table has 5 pages. If i am in page 3 and try to goto page 5 by entering 5 in goto textbox in flexigrid, it goto page 1.
Similarly when i enter a page number and hit enter from page 1 the number suddenly changed to 1. No ajax call (call to server side) initiated.
I don't know why this happening. Pls help.

I don't want the columns to be resizable how can I do that?

This is because the mouseup event handler in function addRowProp is missing its argument.

Currently it is
}).mouseup(function () {

and should be
}).mouseup(function (e) {

When I disable paging the footer disappears. I still want to be able to search, view status, etc. I can't find any parameters that would fix this.

The dragEnd function uses the columns current index in the table as displayed for all operations. A columns colresize.n value can differ.

However, the cookie part uses the p.colModel to look up the column's name, which never changes. This potentially stores the new column width for the wrong column.

The issue can be resolved by replacing line 231
var name = p.colModel[n].name;
with
var name = $('th', g.hDiv).eq(n).attr('abbr');

I'm not sure this is the best way to do it...

TypeError: $.cookie is not a function
flexigrid.js (line 815) (current version from github, with jQuery v1.8.0)

if( $.cookie(cookie_width) != undefined ) {

Dear sir,
I have update your flexigrid and add some functionality like add,edit, delete etc. Here is the url have a look.
http://flexidemo.ranjitjena.com/

Hello, I am using Flexigrid for jQuery - v1.1 I noticed that while in singleSelect mode that no rows ever get selected.

I modified addRowProp line 691 from

if (p.singleSelect && ! g.multisel ) {
$(this).siblings().removeClass('trSelected');
$(this).toggleClass('trSelected');
}

to

if (p.singleSelect && ! g.multisel ) {
$(this).siblings().removeClass('trSelected');
$(this).addClass('trSelected');
}

this seemed to resolve the problem.

Hi i want to hide the specific column.
how to do that.
thanks.

Suppose if a have column a,b and c, the user will shuffle the column as per his requirement lets say b,c,a this value should save in database which i have almost completed. :) Now I want the data to be pulled by ajax call and should be displayed as per the respective users setting. Also I am using .Net 3.5 framework not MVC :)

Help would be really appreciated. Thanks

i got a code from net and want the data to be sorted in descending order so i changed the sort order to 'desc' in .aspx file but it only sort the current page ie) showing result as10 to1 20 to 11 30 to 21 etc i need it to sort fully as 50 to 1 can u guide me the way

Hi,
In the flexigrid.js, bDiv is the name of the div used to populate the json data by creating html table,tr,td . I want to modify this bDiv class that is need to populate the json data in forum kind of format..

Eg: like in (statck overflow site)

Hello, paulopmx
Component flexgrid is very convenient. We are very grateful about it.
We found a problem while using the component, if you don’t mind; we want to seek your advice about it.
We want to set the grid only one line can be selected.
In the component, in default, multi-line can be selected, and the selection of single line can be achieved through the set of the property of singleSelect.
However after setting the property of singleSelect to be true, no line can be selected.
So we analyzed the source code of the component.
Below is the process of component (v1.1).

1. Click a certain line, and have the background colored.
   L689:$(this).toggleClass('trSelected');
2. If only one line can be selected, clear the background color of other lines on the same level.
   L691:$(this).siblings().removeClass('trSelected');
3. Execute the toggleClass method again, the function of the method is: If there is a class, delete it. If there is not one, add one..
   L692:$(this).toggleClass('trSelected');
4. The operation in step 3 result in the deletion of the line’s background color.
   So, we want to know whether the process of L692 is unnecessary.
   Looking forward to your answer.

Is there a method to filter for attributes not defined in the data of the cell.

For example, I have a table set up with events/courses. However, outside of the table I'd like to filter bye beginner, intermediate and advanced courses. These attributes don't exist in the table data.

Is there a method to filter those type of attributes? or make hidden cell data to filter by?

Hi,
As we know the nowrap:false wraps the text in the body of the table.

Is there any way in which we can wrap the text in the header too?

TIA

When I show more 30 colum, The heads from colum, Not align.

Hi, i am trying to adjust columns width in percentage but it does not work. it only works with pixel value please check this issue

Current code base does not work with jQuery 1.9 due to removal of browser object in latest version of jQuery. Might be other issues too, but that's the first thing it errors on.
Not sure what approach to take to fix the issue, so I'm just filing the issue for now.

When I navigate through the grid and select a row with a click, I am able to select more rows by highlight which is confusing. Only one row should always be visible selected.

I wonder if it is possible legend rows in the first column (onmouseover)