So this is a very specific question for SlickGrid, but I was wondering if anyone has ever tried to change the way the rows look when grouped? I was thinking that it would be cool to add a border around the grouped rows to show that they are part of that heading.
The way that SlickGrid works doesn't give any indication the rows are grouped in the DOM, they just appear under the header. I have tried to do something like this:
dataView.getItemMetadata = function(index) {
return {cssClasses: "myRowCssClass"};
}
but unfortunately, this broke other things in terms of the grouping. There is some stuff in the native getItemMetadata function that the groupBy function needs to process. I could copy that stuff into this function and add a condition for this, but that doesn't seem right. Does anyone who has some experience with SlickGrid know how to achieve this effect?
I know this is an old question. But I have done something similar to what you are asking about.
In my data, I have information about assets at several sites within an organization. So for each group of records, the name of the site will be the same. As I am reading my data (obtained via an $.ajax call), whenever the site name changes, I insert a 'parent' row in the data array.
I wanted to display these parent rows in bold. I accomplished this by defining a CSS class for the parent rows and using getItemMetadata() to apply the class.
dataView.getItemMetadata = function(row) {
if (row is a parent) {
return { 'cssClasses' : 'my-parent-row-class' };
}
};
In my application, I also made use of Slickgrid filters and a 'toggle' class (applied in a click handler) to implement a drill-down feature where you can click on a parent row and collapse/expand the rows grouped under that parent row.
I hope this helps.
Tim
Related
I am using Xcrud Version 1.7
https://www.xcrud.net/
And would like use a button to search/filter for a predefined keyword and column. In the Xcrud Documentation I found buttons with tasks like edit and modal but nothing with search.
the idea is something like this
<button onclick="Xcrud.request('.xcrud-ajax',Xcrud.list_data('.xcrud-ajax',{task:'search',field:keyword}))">Filter Keyword</button>
The documentation has some button functions but I cant get something work with search.
https://www.xcrud.net/demos/index.php?page=js_tricks&theme=default
I need somehow a solution to filter the table data without reloading the entire page and their for use the js function from xcrud instead of loading the entire page again. Maybe somebody worked with xcrud already and has an idea.
thank you in advance
I solved it myself with my own little function. It might not be the slickest solution but it works well and like this you can have direct any buttons or menu entries with automatic search in specific columns or all column for phrases.
You then connect your button/link with a simple onclick or like this:
search_xcrud('phrase','colname');
Here the function:
function search_xcrud(phrase, col=''){
console.log('Xcrud Search Started: ' + phrase+ ' Col: ' + col);
$('input[name ="phrase"]').val(phrase);
$('select[name ="column"]').val(col);
$( '.search-go' ).trigger( "click" );
}
You can use the function without "col" and than the function searches in all columns.
If you search for a specific column you need to enter the name of the table with the exact label as used in $xcrud->columns!
Example:
If you use for example table "clients" with the columns id,name,age.
$xcrud->table('Clients');
$xcrud->columns('id, name, age');
You would call the function like this:
search_xcrud('myphrase','Clients.name'); // incl. tablename and colname!
If you have doubts about the right column check your source code and look for the select box with the name "column" for all your options in this situation. This depends on the use of relations etc. and might change in this cases.
I hope this helps others since I was looking since quite some time for a easy solution without somehow touching the original Xcrud code. PS: Xcrud is fantastic!
if you have any questions let me know.
I've started a deep dive in to HTML + CSS + JS for the past couple of days and I'm curious to know is it possible to expand and collapse rest of the table data if I click my first table data on my table row.
I've tried myself using multiple combinations but couldn't succeed so I wanted to understand is it really possible or I have to improve further :)
Thanks!
https://jsfiddle.net/p9mtqhm7/553/
If I click on say - AUSDe451 or AUSDe441, rest of the corresponding columns should be either expand or collapse[i.e LAMP 6.93817139 & 51_REGALIA 456.352] should expand/collapse if I click - AUSDe451]
Your click handler is a bit wrong!
When you're handling clicks on the .server-name element, $(this) inside the function refers to the item that has been clicked, in this case the .server-name table row.
When you run $(this).find(...), you're looking for child elements of the table row, which do not exist. So rather than use $(this).find(...), you should probably be looking elsewhere in the DOM.
Also, you seem to be searching for span elements, which don't exist anywhere in your HTML markup, so that part of the function will never return anything anyway.
So what I'm trying to do is make it so that the user can choose which columns of a table to display after it has already been generated. I already have functionality that does this, after the user changes their options it destroys the current table and then reinitializes it with different visibility settings for certain columns. While this works, it's sorta slow and doesn't look as pretty as say, the columns just disappearing. I think if I put the columns in uniquely id'd divs and then edited their css to say display: none; using jquery when the user deselects them it would work quicker and more attractively, but I haven't been able to find a way to put the columns in divs.
You shouldn't need to put the columns in divs.
myFunction = function(){
$('.first').css('display','none')
}
codepen
May be a better solution but you could use the CSS nth-child (https://www.w3schools.com/cssref/sel_nth-child.asp) property and jQuery's .index()to identify the column you wish to remove and remove the column from each table row.
Something like this might work (assuming you have a header row containing <th> elements):
$('table th').on("click", function() {
var index = $(this).index() + 1;
$.each('table tr', function() {
$(this).find('td:nth-child(' + index + ')').hide();
});
});
Answering my own question because I managed to find a function called column().visible that can target columns by index and change their visibility. It works perfectly, and I wasn't able to implement the solutions that others posted.
Also for anyone that comes in later to figure out if you can put the columns in divs, as far as I can tell you cannot, but you might not need to for whatever it is you're doing.
I'm trying to create tables with multiple levels of nesting which can be expanded/collapsed. So the main table has rows which can be expanded to show the child rows in the middle of the table, who themselves can be expanded.
Each table needs to have their own headers and preferably the columns would all line up but have the start of the child tables be slightly indented as I try to show below.
For example:
ColHeader1 ColHeader2 // main table headers only shown at the top
record1 ...
ChildHeader1 ChildHeader2 // child headers shown for each table
childrec1 ...
SubChildHeader1 SubChildHeader2 // child headers shown for each table
subchildrec1 ...
childrec2 ...
record2 ...
ChildHeader1 ChildHeader2 // child headers shown for each table
childrec5 ...
record3 ...
I've tried to create the code by expanding a sample I found, but it doesn't work for expanding the inner most table. The code can be found here: http://jsfiddle.net/afsz5brg/
The end product will be in a ASP.Net MVC app, but for now I'm just trying to get it working in javascript/JQuery so that hopefully I can just change the data being sent to it.
I'm happy to consider alternative ways for doing it or be told if any of the code is doing something bad/deprecated.
There are a couple of bugs I have discovered in your code. I would list them one by one.
1) Your assumption of registering a callback on $('#detailsTable tbody td').on('click', ...); and that being called on every new instance of that table that gets created is wrong.
If jQuery Data Table was internally cloning the #detailsTable element, then your code would work. But that isn't the case as you are retrieving the HTML markup of #detailsTable and returning it to fnOpen like so: oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details'); so the callback never gets called.
You need to register a callback to the newly created details table. Check out this JsFiddle to see how.
2) I think I also spotted another bug while reading your code. I haven't fixed it as I was not sure if I was right or not. In the callback for your #detailsTable, you call fnFormatDetails() instead of fnFormatSubDetails() like so oInnerTable.fnOpen(nTr, fnFormatDetails(iSubTableCounter, subDetailsTableHtml), 'subdetails'); No one is calling fnFormatSubDetails() at the moment. Please check if this is a bug or not.
I'm trying to reload a jqGrid with new rows, colNames and colModel. The row data seems to load fine but the columns don't seem to be refreshed. I've tried using GridUnload and GridDestroy but I end up losing the jQuery DOM instance entirely and no longer loads any data as well.
var grid = $('#my-grid');
if(grid[0].grid == undefined) {
grid.jqGrid(options);
} else {
grid.setGridParam(options);
grid.trigger('reloadGrid');
}
The grid instance is important because it will be passed to other objects as a param. These objects may attach listeners or trigger events.
I'm using version 4.4.2
reloadGrid reload only the body of the grid and not changes the column headers which will be created when the grid was created.
If you need to change number of columns or to use colNames and colModel on place of old grid you have or recreate grid. You can use GridUnload method first and then create new grid (call grid.jqGrid(data) in your case). It's important that if you cached jQuery selector to grid in a variable like grid in your code you have to assign grid one more time after call of GridUnload, so you should do something like grid = $("#grid"); directly after call of GridUnload.
See the answer for more details and the code example.
It seems that jqGrid removes the initial <table></table> from the DOM and replaces it or forgets the reference (I haven't looked that hard into it).
So you have to reselect the new table everytime you want to create a new grid ie. $('table#my-grid'). This makes it tricky if you want to pass a reference of the grid's table about to other parts of your app as a parameter.
My work around involves deleting the grid reference and replacing the grid's wrapped div with the original table. then creating a jqGrid in the normal way with the new colModel and colNames.
grid.empty();
delete grid[0].grid;
$('#gbox_my-grid').replaceWith(grid);
grid.jqGrid(options);
It isn't the tidiest of solutions but it does allow me to keep a permanent reference to the original <table>. I'm uncertain how other jqGrid plugins will be affect by this though.
Edit
it turns out jQuery DataTables is better suited for customisation and we have adopted this instead of using jqGrid.
I have combined both answers and made some modification in order to have it to work.
var grid = $('#tableID');
if(grid[0].grid == undefined) {
grid.jqGrid(options);
} else {
delete grid;
$('#tableID').GridUnload('#tableID');
$('#tableID').jqGrid(options);
}