tabalinas/jsgrid

Lightweight Grid jQuery Plugin

jsgrid's Issues

header above scrollbar and border-right property

In Chrome, the right border is not displaying on a scrollable grid.

Here's the code in question.

And here's how it looks after modifying inline and external css in chrome dev tools.

How to change the ajax request url to render another datas?

I don't know if can do this with the docs and examples, is there a way to do this?
Thanks very much!

Select field: is it possible to load data via ajax ?

Hi,

Is it possible to load the data for a select column via ajax ?

I tried: items: { loadData: function() { ... } but it's not working.

Thanks.

Defining cellRenderer functions in Fields Causes Maximum call stack size exceeded

Looking through the source code of jsgrid.js, I noticed the following conditional checks inside of the _createCell function of the Grid

            if($.isFunction(field.cellRenderer)) {
                $result = $(this.cellRenderer(fieldValue, item));
            } else {
                $result = $("<td>").append(field.itemTemplate ? field.itemTemplate(fieldValue, item) : fieldValue);
            }

When the first condition is met, "this" points to the Grid object and not to the Field object which is where the cellRenderer function is defined. I believe this is what's causing the error. When I change the line to:
$result = $(field.cellRenderer(fieldValue, item));
everything works well.

Client side filtering when using controller as source

1. I am unable to enable client side filtering when using rest as data source. Is this the intended behavior? i would like to know if we can have both client filtering as well as controller post filtering the case being use the search button for controller post filtering and the keypress up/down event as client side filtering.
2. Is is possible to extract the filtered json after filtering not the full json considering filtering can be enabled client side. I can see there is onDataLoaded event which can be used but it will work with full post.

So basically two types of filtering and two types of json extraction is what i have in mind.

Any help is appreciated.

How to refresh grid on row update?

First I would like to thank you for your great product and support.

I was wondering if there is an easy way to refresh the grid on update? Currently it just displays whatever value I have entered to the field on update. However, I am modifying the data that it entered before placing it in the database. I would like to have the grid refresh, so that it pulls the final updated dat that I am putting in the database.

I thought that I could add this.refresh() to the _finishUpdate, but that is not doing anything.

Different location for Add button

Is there anything currently built in to allow the add button to be placed in a different location? It currently gets put on the page using the headerTemplate. I did not see anything in the documentation that generates anything for a footer.

How to stop deleteItem event

How can i stop the deleteItem events when occurs an error at server side?

  deleteItem: function (item) {
     alert("inizio");
     $.ajax({
        type: "POST",
        url: "http://localhost/jsGrid.aspx/DeletePdv",
        contentType: "application/json; charset=utf-8",
        data: '{ id:' + item.id + '}'            
     });
  }

thanks

Is it possible to support external pager template?

Hi there,
I found external pager will auto hide prev-page and last-page when I at first page and last page, and it also hidden if total page is only one.
Is it possible to support external pager template in the future?
Thanks!

change page load ajax ?

load ajax data every change page ?

Row Reorder (drag & drop)

First off, very cool project.

Are you planning to add drag / drop row re-ordering?

Support resizable columns

Is it possible to support resizable columns in the future?
That you can edit the column width by dragging a handle.

Problem with filtering: false and switchbutton: true

Hi,

There is a wrong behavior when you set filtering to false for your grid but add a control column with switchbutton to true.
If you click on the plus sign the line appear it's ok but you can't remove the line after that.
If you click on the magnifying glass icon you display the filtering line.
Maybe you could implement this kind of behavior:

• When you click on the plus sign icon in the header the insert line appears and the plus sign disappears.
• Add a cross sign icon in the control column to allow the user to cancel the insertion. It should be always there: it's not clear enough how to cancel the insertion.
• When the user clicks on the plus sign icon (to add the line) or on the cross sign icon (to cancel) the line disappears and the plus sign icon on the header reappears. Of course if filtering is enabled when you click on the cross sign icon the filtering line is displayed.

Only first on every page is displayed.

First of I am very much impressed by this plugin and it's very good.

I have been trying to use it for some data to be displayed on a simple web page for testing it.

This is my js configuration 👍
$(function() {

$("#jsGrid").jsGrid({
    height : "100%",
    width : "100%",
    filtering : false,
    editing : true,
    sorting : true,
    paging : true,
    inserting : true,
    autoload : true,
    pageSize : 10,
    fields : [ {
        name : "userId",
        title: "User Id",
        type : "number",
        width : 50
    }, {
        name : "url",
        type : "text",
        title: "Url",
        width : 500
    }, {
        name : "enable",
        type: "checkbox", 
        title: "Is Enabled"
    }, {
        name : "timestamp",
        type : "text",
        title: "Last Updated On",
        width : 200
    }, {
        type : "control",
        editButton : true,
        deleteButton : true
    } ],

//data :[{"userId":47,"url":"http://127.0.0.1:8080/MyProject/testservelte","enable":1,"timestamp":"Apr 10, 2015 1:39:52 PM"},{"userId":89,"url":"","enable":1,"timestamp":"Jan 20, 2015 12:00:50 PM"},{"userId":506,"url":"","enable":1,"timestamp":"Mar 2, 2015 5:14:33 PM"},{"userId":2348,"url":"","enable":1,"timestamp":"Jan 20, 2015 3:50:33 PM"},{"userId":2353,"url":"","enable":1,"timestamp":"Feb 13, 2015 4:18:00 PM"},{"userId":2448,"url":"","enable":1,"timestamp":"Feb 24, 2015 4:00:53 PM"},{"userId":2457,"url":"","enable":1,"timestamp":"Feb 26, 2015 3:51:28 PM"},{"userId":2468,"url":"","enable":1,"timestamp":"Feb 26, 2015 3:51:28 PM"},{"userId":2477,"url":"","enable":1,"timestamp":"Mar 16, 2015 7:11:44 PM"},{"userId":2479,"url":"","enable":1,"timestamp":"Mar 16, 2015 7:11:44 PM"},{"userId":2481,"url":"","enable":1,"timestamp":"Mar 24, 2015 3:30:04 PM"},{"userId":2508,"url":"","enable":1,"timestamp":"Apr 1, 2015 5:23:54 PM"},{"userId":2509,"url":"","enable":1,"timestamp":"Apr 2, 2015 10:01:13 AM"},{"userId":2521,"url":"","enable":1,"timestamp":"Apr 20, 2015 11:11:52 AM"},{"userId":2524,"url":"","enable":1,"timestamp":"Apr 9, 2015 4:57:40 PM"},{"userId":2527,"url":"","enable":1,"timestamp":"Apr 10, 2015 4:50:24 PM"},{"userId":2531,"url":"","enable":1,"timestamp":"Apr 14, 2015 4:58:17 PM"},{"userId":2535,"url":"","enable":1,"timestamp":"Apr 17, 2015 1:38:58 PM"},{"userId":2536,"url":"","enable":1,"timestamp":"Apr 20, 2015 4:17:47 PM"},{"userId":2537,"url":"","enable":1,"timestamp":"Apr 20, 2015 4:59:57 PM"},{"userId":2538,"url":"","enable":1,"timestamp":"Mar 16, 2015 7:11:44 PM"},{"userId":2545,"url":"","enable":1,"timestamp":"Apr 28, 2015 1:31:20 PM"},{"userId":2546,"url":"","enable":1,"timestamp":"Apr 20, 2015 4:59:57 PM"},{"userId":2559,"url":"","enable":1,"timestamp":"May 12, 2015 10:49:07 AM"},{"userId":2560,"url":"","enable":1,"timestamp":"May 12, 2015 10:49:07 AM"},{"userId":2561,"url":"","enable":1,"timestamp":"May 8, 2015 11:39:05 AM"},{"userId":2565,"url":"","enable":1,"timestamp":"May 8, 2015 11:39:05 AM"},{"userId":2566,"url":"","enable":1,"timestamp":"May 20, 2015 11:28:43 AM"},{"userId":2569,"url":"","enable":1,"timestamp":"May 22, 2015 11:24:55 AM"},{"userId":2577,"url":"","enable":1,"timestamp":"May 26, 2015 6:22:36 PM"},{"userId":2578,"url":"","enable":1,"timestamp":"May 27, 2015 1:28:08 PM"}],

    controller : {
        loadData : function(filter) {
            filter["operation"] = "loadUrls";
            return $.ajax({
                type : "GET",
                url : "ruleenginehandler",
                data : filter,
                dataType : "json"
            });
        },

        insertItem : function(item) {
            item["operation"] = "insert";
            return $.ajax({
                type : "POST",
                url : "ruleenginehandler",
                data : item,
                dataType : "json"
            });
        },

        updateItem : function(item) {
            item["operation"] = "update";
            $.ajax({
                type : "POST",
                url : "ruleenginehandler",
                data : item,
                dataType : "json"
            }).done(function(data) {
                if (console && console.log) {
                    console.log("Sample of data:", data);
                }
            }).fail(function(data) {
                if (console && console.log) {
                    console.log("Failed", data);
                }
            });
        },

        deleteItem : function(item) {
            item["operation"] = "delete";
            return $.ajax({
                type : "POST",
                url : "ruleenginehandler",
                data : item,
                dataType : "json"
            });
        }
    }

});

});

I have commented out "data" for loading information from my database.

It creates 4 page as there are 31 records, but it only displays first entry on each page and not other entries.

When I provide data statically in "data", it renders everything correctly.

Please help me out in solving this.

When having more columns than there is space, a horizontal scrollbar is needed

I'm trying to make a grid with quite some columns, but when it doesn't fit in the grid, it just hides the columns which doesn't fit. It is a simple overflow.
When selecting text and dragging to the right it scrolls to the columns but actually a scrollbar is needed. Also the header should horizontally scroll along with the horizontal scrolling of the contents.

How to define default options

Hi,

I would like to define defaults option for all jsgrid I'm using on my website.
How can I do that ? Is it possible without change the options in jsgrid.js directly ?

Thanks for your work.

Column Re-Ordering

Is it possible to implement column re-ordering? Would be nice if its by drag and drop!

Support Nested fields in Json Data

Could we please get support for something like:

            fields: [
                { name: "name", type: "text", title: 'Report Name' },
                { name: "client.name", type: "text", title: 'Client' },
            ]

Also in the documentation, it should be mentioned that name: "name" is case sensitive so name: "Name" won't work

select field issue with String ID

I'm having an issue with using a String for the valueField in a select. When I select a new item from the select the cell goes blank.

    $("#jsGrid").jsGrid({
        editing: true,
        data: db.apps,
        fields: [
    {name: "source", title:"Source", type: "select", items: db.sources, valueField: "Id", textField: "Name"}
    ...
    db.sources = [
        { Name: "Label1", Id: "LABEL1" },
        { Name: "Label2", Id: "LABEL2" }
    ];

See: http://jsbin.com/repexoyuqi/ (click a row, change the select value, click the first button on the control cell)

Problem with jquery-ui dialog to add/modify

Hi,

I need to have a modal window for editing/inserting data.
I used your example and adapt it with my needs (I need to validate data before the save).
I created a mix between the jquery website example and yours to use also the buttons options of the dialog for a better integration.
If I modify a line it's ok the first time but I have an error when I try to modify a line again after.
The problem is the item is null in updateItem. I don't understand why because the object is correct just before the call to updateItem.
Here the code, have you an idea ?

Thanks.

var dialog = $( "#dialog-form" ).dialog({
    autoOpen: false,
    width: 850,
    modal: true,
    closeOnEscape: true,
    buttons: {
        Save: function() {
         $("#categoryForm").submit();
         },
         Cancel: function() {
         $(this).dialog("close");
      }
        },
        close: function() {
         dialog.find("form")[0].reset();
        }
});

var showDetailsDialog = function(dialogType, category) {
    $("#code_cat").val(category.code_cat);
    $("#descr_fra").val(category.descr_fra);
    $("#descr_eng").val(category.descr_eng);
    $("#descr_deu").val(category.descr_deu);

     dialog.find("form").submit(function() {
         if($("#categoryForm").valid()) {
         event.preventDefault();
         saveClient(category, dialogType === "Add");
     }
     });

     dialog.dialog("option", "title", dialogType + " category").dialog("open");
 };

var saveClient = function(category, isNew) {
      $.extend(category, {
           code_cat: $("#code_cat").val(),
       descr_fra: $("#descr_fra").val(),
       descr_eng: $("#descr_eng").val(),
       descr_deu: $("#descr_deu").val()
      });
      console.dir(category);
      $("#jsGrid").jsGrid(isNew ? "insertItem" : "updateItem", category);

       dialog.dialog("close");
};

How to show item count on pager ?

I don't know how to display itemCount on pager , if can support like {itemCount} parameter for manipulating pagerFormat ?

Thanks very much !

table is compressed

I use the bootstap Tab component and in the first call of the site i get what is shown in the thumbnail below.
When i reload the page the table works fine.

problems loading the grid with ajax

Hello , I need your help to solve the problem. failed to show data from a ajax

retrieving all rows

Hi, there is a method to retrieving all rows, including custom fields, from the jsgrid?

Ajax issue [resolved]

I misread the documentation regarding loadData; Issue resolved, user error

Deleting rows from table

Hi,

Congrats on an excellent project. I've started to use it, but I've hit a roadblock. For some reason, I can't get a row to be deleted from the table. I'm passing the item to be deleted, but nothing seems to happen. For example:

$(element).jsGrid("deleteItem", {"Host Name": "seattle"});

Any ideas of what might be going on, or any examples that you can link to?

Is there currently built in functionality to hide a column

Is there currently built in functionality to hide a column or does this need to be implemented with custom field? I am trying to have an item on the page, but not have it displayed to the user.

Disabled fields which have options inserting and/or editing to false

Hi,

It could be great if you could disabled fields which have option editing and/or inserting set to false.
Currently if you set this options to false the fields are not saved it's ok but you can still modify it on the screen. It's confusing.

How should data in promise be formatted?

I am trying to use loadData with a promise. However, it does not load theater. I return 1 record for testing and the grid ends up showing 12 pages of blank data. Perhaps I am formatting the data incorrectly? The format that I am returning in the promise is:

{ data: [{"AccountName":"MyAccount","ContactNumber":"111-111-7890","AccountNumber":"123456789","UserName":"JaneDoe"}], itemsCount: [1] }

Is this not correct?

range slider for numeric fields

filtring of numeric fields should have a feature to filter using range slider

issue when checkbox query is set to false

If you have boolean value which we show by checkbox type, then we want to search by all false values, the query isn't set. It only works to query by true values.

Disable "Delete" option

Hi. Is there any way to disable "Delete" option ?

Required field for edit/insert mode

Hi,

Is it possible to add a new option for the fields: required.
Or maybe there is a way I didn't see ?

A simple possible behavior could be :

• Add a visual element to distinct required fields ('*' for example).
• Add a visual element for empty required fields (red border for example).
• Remove the red border if the user set a field.
• Until all required fields are set disabled the check mark icon or the plus sign icon.

With this solution you avoid a complex implementation with messages.

Provide previous value in onItemUpdating

In some cases you may want to do something with the old value before updating the item with the new values. It would be useful to have both in onItemUpdating

problems loading the grid with ajax again

the code that I hast sent did not work quite right I send two screenshots

return default in function Template

{
    name         : "testtttt",
    title        : "testtttt",
    type         : "select",
    items        : [........],
    valueField   : "Id",
    textField    : "Name",
    css          : "",
    itemTemplate : function ( value ) {
        if (value <= 1) {
            this.editing = false;
        } else {
            this.editing = true;
        }
        return ..... ????? (default select template )
    }
},

Get fields from json

First of all, great plugin! I would like to ask if it's possible as well to get the fields and it's config from json? Thanks.

I would like to have an animation on deleteItem like fade

Get filterValue on headerTemplate

Hi,

It's me again :)

Is it possible to get the filterValue() of a given column in the headerTemplate function of control column ?

I use a dialog to insert/update item. I would like to initialize a value with the one in the filter if the user add a new item.
I'm able to get this value in the rowClick function, used for the update like this:

this.fields.filter(function(item) { return item.name === 'id_ref_comp_cat'; })[0].filterValue()

Is it possible to get this value in the headerTemplate ?

headerTemplate: function() {
              return $("<button>").attr("type", "button").attr("title", "Add").addClass("jsgrid-button").addClass("jsgrid-mode-button").addClass("jsgrid-insert-mode-button")
                .on("click", function () {
                 console.dir(this.fields.filter(function(item) { return item.name === 'id_ref_comp_cat'; })[0].filterValue());
                  showDetailsDialog("Add", {});
                });
            }

Or maybe in the function showDetailsDialog directly ?

Textarea not working

Hi,
It seems that the textarea type is not working. I opened the basic.html page, changed the Name field type from text to textarea and nothing is rendered, neither in filter, editing or inserting.
Can you check this issue please ?

Backslash for old ie causing problems with cleancss

Running cleancss against theme.css

.jsgrid-load-panel {
    padding-top: 1.5em \ ;
}
.jsgrid-load-panel:before {
    display: none \ ;
}

gets converted into (note removed ; at the end of each block)
.jsgrid-load-panel{padding-top:1.5em \}.jsgrid-load-panel:before{display:none \}

What browsers does \ target? Is \9 the intended hack?

Change filterTemplate fields any after selected item in filter ?

fields :[
     {
        name           : "Test1",
        type           : "select",
        filterValue    : function () {
            //code ...
            //call function filterTemplate in fields name=Test2 ???

            return this.lotteryKey;
        }
    }
    , {
        name           : "Test2",
        type           : "select",
        filterTemplate : function () {
            this.filterControl = $('<select>');
            //code...
            return this.filterControl;
        },
        filterValue    : function () {
            return this.filterControl.val();
        }
    }
]

For pick provinces, cities and districts.

I have problems loading the grid

Hi , I'm new to the grids and jsGrid thought was very good but I'm having problems when trying to load my data using ajax , I hope you can help me for one of my classes at the university

sorting & filtering not working in loading by page

why sorting & filtering not working in loading by page?
any solution?

"done is not a function" after render method

Hi,

I have a problem with the render method.
When I want to execute something after that with a done method like your example I have this error message : Uncaught TypeError: $(...).jsGrid(...).done is not a function

Any ideas ?

Thanks.

After deleteItem() stop loadData or loadData current page

deleteItem : function ( item ) {
     ..
     ..
     ..
     //code stop loadData  ??
     //code loadData  current page  Not loadData first page
}

After deleteitem it loadData first page every time T-T

multiple header grid

It would be nice to have a way to declare a multiple level header for a table grid in which the last level in the deaders determines the column type, and other options.

Thank you for your work!

how to make this.items can't update in updateItem

i want to make this.items can't update in updateItem or after some event?
Thank!

qplace

Couple of questions:

1. rowClick: how to call default event after processing the code in rowClick?
2. how to find selected row? I have a "select" button outside of grid. Upon clicking on it I want to know which row in the grid is currently selected.

Thanks,

jsgrid not showing results when being wrapped in a div tag

Is there a way to wrap the grid in a div without losing the data? I am trying to implement a slide out menu which would require wrapping everything in a div tag. However, when doing this the grid does not show any data.