I am trying to add a row to a slick grid on my page using javascript. The way I am able to do it now is by using the following code. I was just wondering if there was a better way to do the same.
....
//data is the array which was used to populate the SlickGrid
data.push({name:'Finish scanning the slickgrid js', complete:false});
grid.setData(data);
grid.render();
....
This is the preferred way.
data.push({...});
grid.updateRowCount();
grid.render();
Calling .setData() forced the grid to re-render everything. By calling updateRowCount() you are notifying the grid the number of the rows have changed and that it needs to render what has been added or removed only.
Here is what I've been used for adding new row with Button
function add_new_row(){
item = {"id": (Math.round(Math.random()*-10000))
//you can add another fields to fill default data on Adding new row
};
data_view.insertItem(0, item);
}
Related
v-data-table component has a propery "expanded" that allows to show some additional info for each row.
It works fine and I need to expand all the rows immediately when a page is loaded.
Is there a way to do that?
It is used version 1.5 of Vuetify Framework.
https://v15.vuetifyjs.com/en/components/data-tables
This is fairly easy in the new Version of Vuetify, you just use the property expanded which holds an Array of the items that are currently expanded.
<v-data-table
id="issues-table"
:value="selectedIssues"
:expanded="expandedIssues"
:items="issues"
>
<v-switch #change="(v) => expandAllIssues(items, v)" />
expandAllIssues (items, status) {
if (status) {
this.expandedIssues = items
} else {
this.expandedIssues = []
}
}
In V1.5.xx of Vuetify you don't have that luxury, but when I took a look, Vuetify works with a similar system under the hood. Firstly you should set the expand prop on the table to true, so it can expand multiple rows.
You can define a reference on your data table and then access it via this.$refs.myDataTableRef. You then realise that they store the expanded rows in an Object called expanded. You can set the rows either true by the id/name of the row in this object or you simply set the whole row objects in the vuetify expanded object to true.
I have pasted the Codepen example of their old data table and made a simple expand all button, that you can obviously change to your desires, but it should make the concept clear.
Codepen example
I have these five fields ID, Name, Address, Phone and Fax displaying on the datatable. I am using Column Visibility Feature and by default, I am displaying first four columns. Suppose, I make Fax column Visible and Phone Column Invisible. Now, if I refresh the page, I see the same four columns again. My question is, can we Retain this visibility / invisibility ?
Thanks.
Refresh the page? Do you mean redraw the datatables page? (e.g. by clicking a column header to sort or clicking 'next' in the datatable?)
If so, are you using javascript/jquery to modify the visibility of your elements?
Doing so will work initially - but because datatables doesn't 'know' that jquery has modified the element, when it redraws the table (in a new order, or on a new page or whatever) it will revert your changes to whatever state it understands the table to be in.
To make your changes persist over redraws, you need to use the datatables api - so that datatables knows what you're doing. like this:
var mytable= $('#mytable').DataTable();
mytable.column( 0 ).visible( false );
however IF you want these changes to persist between refreshes of the webpage in the browser, then you need to set up sessions, or store these configurations in a database.
Then every time the page in requested, you check that data, and you can decide dynamically onload how to initialise your datatable:
$(document).ready( function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ userHiddenColumn ] }
] } );
} );
I wrapped my gridview with Pjax widget like this
\yii\widgets\Pjax::begin();
gridview
\yii\widgets\Pjax::end();
in order to make the gridview make ajax request when I click on each pagination.
I also use ['class' => 'yii\grid\CheckboxColumn'], in column as well.
and I find that when I'm on first pagination I checked some rows and then go to second page and check some rows but when I go back to first page what I've checked is gone.
My question is how can I keep all checkedrow for all pagination
With current conditions (Pjax, multiple pages, yii\grid\CheckboxColumn) it's impossible because of the way it works.
When you click on the pagination links all GridView html content is replaced by new one that comes from the AJAX response.
So obviously all selected checkboxes on the previous page are gone.
Few possible ways to solve that:
1) Write custom javascript and server side logic.
As one of the options, you can send AJAX request to server with parameter meaning that user has chosen to select all data for the bulk delete operation (or use separate controller action for bulk deletion). In this case actually we don't need to get the selected data from user, because we can simply get them from database (credits - Seng).
2) Increase number of displayed rows per page.
3) Use infinite scroll extension, for example this.
4) Break desired action in several iterations:
select needed rows on first page, do action (for example, delete).
repeat this again for other pages.
You can get selected rows like that:
$('#your-grid-view').yiiGridView('getSelectedRows');
[infinite scroll] : http://kop.github.io/yii2-scroll-pager/ will work good if you do not have any pjax filters. If you have filters also in play, do not use this plugin as it does not support pjax filters with it. For rest of the applications it is perfect to use.
Update1 : it seems to be straight forward than expected, here is the how I accomplished it
Add following lines to the checkbox column
'checkboxOptions' => function($data){
return ['id' => $data->id, 'onClick' => 'selectedRow(this)'];
}
Now add following JS to the common js file you will have in your project of the page where this datagrid resides
var selectedItems=[]; //global variable
/**
* Store the value of the selected row or delete it if it is unselected
*
* #param {checkbox} ele
*/
function selectedRow(ele){
if($(ele).is(':checked')) {
//push the element
if(!selectedItems.includes($(ele).attr('id'))) {
selectedItems.push($(ele).attr('id'));
}
} else {
//pop the element
if(selectedItems.includes($(ele).attr('id'))) {
selectedItems.pop($(ele).attr('id'));
}
}
}
Above function will store the selected row ids in the global variable array
Now add following lines to pjax:end event handler
$(document).on('pjax:end', function () {
//Select the already selected items on the grid view
if(!empty(selectedItems)){
$.each(selectedItems, function (index,value) {
$("#"+value).attr('checked',true);
});
}
});
Hope it helps.
I just solved this problem and it works properly with Pjax.
You may use my CheckboxColumn. I hope this can help. The checked items are recorded with cookies.
You can read the part with //add by hezll to understand how to fix it, because I didn't provide a complete general one.
Hope it works for you.
https://owncloud.xiwangkt.com/index.php/s/dGH3fezC5MGCx4H
i need to display tooltips for my table cells. Are there any plugins for that purposes?
Thanks in advance!
You should be able to use any table and tooltip plugins you want - you just need to trigger the tooltips correctly depending on how you are initializing and updating the table.
For example, if you use jQuery DataTables (which I assume you are looking at given the tag you gave your question) with the jQuery UI tooltip widget you could simply initialize the tooltips once you've initialized the table. If you have the tooltip data already in the table, it could be as simple as:
$('#mytable').dataTable().tooltip();
If you have a more complex table that gets updated (such as using deferred rendering for a giant dataset), then you'd probably need to tie into the row creation callback to get the tooltips on any new rows by doing something like this in the init options:
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$('.tooltip', nRow).tooltip()
}
I've scoured the dojo documentation, stack overflow, as well as thoroughly explored the EnhancedGrid object itself with firebug, and I'm not finding answers.
I have an enhanced grid that I populate with values for the user to sort on and basically create a selection set (using indirectSelection plugin). They then have a button to zoom to the selected items on a map.
The problem is, when sorting columns, it doesn't change the order of the items in the store itself, where I'm keeping an object inside each item that tells me how to zoom on the map, so I have no way to reconcile the grid.selection.selected array indices with the store._arrayOfAllItems indices.
edit: Note that I'm stuck using Dojo 1.6 as it's baked into the API I'm using.
Have a look at Dojo Object Store Tutorial.
You can set an idProperty to a Store, e.g.:
var employeeStore = new dojo.store.Memory({data:employees, idProperty: "name"});
Then you can operate the store with that id property using the get method like this:
// add a new employee
employeeStore.add({name:"George", department:"accounting"});
// remove Bill
employeeStore.remove("Bill");
// retrieve object with the name "Jim"
var jim = employeeStore.get("Jim");
Instead of using store._arrayOfAllItems. That way your grid.selection object will contain your id's values instead of array indexes (provided that your grid's store property is your store). This is the part that I'm guessing will work because I know for sure that the new dojo's dgrid does it that way, which I encourage you to use it BTW.
Hope it helps,