tabalinas / jsgrid Goto Github PK
View Code? Open in Web Editor NEWLightweight Grid jQuery Plugin
Home Page: http://js-grid.com
License: MIT License
Lightweight Grid jQuery Plugin
Home Page: http://js-grid.com
License: MIT License
I don't know how to display itemCount on pager , if can support like {itemCount} parameter for manipulating pagerFormat ?
Thanks very much !
i want to make this.items can't update in updateItem or after some event?
Thank!
Hi. Is there any way to disable "Delete" option ?
load ajax data every change page ?
Couple of questions:
Thanks,
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.
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.
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.
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
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 ?
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 ?
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
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
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)
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!
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.
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.
I misread the documentation regarding loadData; Issue resolved, user error
First off, very cool project.
Are you planning to add drag / drop row re-ordering?
Is it possible to support resizable columns in the future?
That you can edit the column width by dragging a handle.
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:
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 :
With this solution you avoid a complex implementation with messages.
filtring of numeric fields should have a feature to filter using range slider
why sorting & filtering not working in loading by page?
any solution?
Is it possible to implement column re-ordering? Would be nice if its by drag and drop!
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.
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.
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
I don't know if can do this with the docs and examples, is there a way to do this?
Thanks very much!
{
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 )
}
},
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.
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");
};
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.
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.
Hi, there is a method to retrieving all rows, including custom fields, from the jsgrid?
deleteItem : function ( item ) {
..
..
..
//code stop loadData ??
//code loadData current page Not loadData first page
}
After deleteitem it loadData first page every time T-T
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.
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?
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?
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?
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.
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.
Hello , I need your help to solve the problem. failed to show data from a ajax
So basically two types of filtering and two types of json extraction is what i have in mind.
Any help is appreciated.
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!
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.