I need to display row index for Ag-grid table.
My problem is that it numerates first item on the top of grid as Nr 1.
But i need ag grid to numerate first item with larges number and item at the bottom oldest one with Nr 1.
I was looking a lot on documentation, but havent found any smart solution.
I could write my own cell renderer here but i think it would be wrong and complicated way of doing so.
Does anyone knows is it possible to do something with value getter to make it count in opposite direction?
<AgGridColumn
headerName={'Nr'}
field="i"
width={50}
lockPosition={true}
valueGetter='node.rowIndex+1'
/>
Try this:
HTML:
<AgGridColumn
headerName={'Nr'}
field="i"
width={50}
lockPosition={true}
valueGetter={inverseRowCount}
/>
JS:
const inverseRowCount = (params) => {
return params.api.getDisplayedRowCount() - params.node.rowIndex;
};
Demo.
Related
I have Vue Draggable working like a Kanban board with multiple columns, and I have made each column at least the height of the viewport so that each item can easily be dragged into the column next to it (for cases where one column is much longer than the next, for example).
I also have a button in the footer slot to add new cards to the column. This works well in that it is generally always at the bottom of the list, is not draggable, etc.
The issue arises when I drag an item from another list in below the footer (but still within the height of the draggable element). When I do this, the footer does not stay below the new item, which looks odd.
Once I drop the element, it snaps into place and the footer is one again at the bottom - it is only when the new card is being moved that it appears below the footer.
Is there any way to make sure that even during the move event and a new card being added to a list that the footer stays as the last element?
This issue seems to be captured in this comment on Github issues - https://github.com/SortableJS/Vue.Draggable/issues/673#issuecomment-554149705 - but no solution is provided in that thread.
Any help greatly appreciated.
So for anyone having the same issue I solved this by doing the following:
Hooking into the onMove event using the :move prop to run a function each time an item is moved... e.g. :move="fixFooter"
Creating a function that checks if the moved item would be the last in the new list (thus by default it would sit below the footer without this fix), and if so on the $nextTick append the footer to the Draggable container so it gets moved below the item coming in to the list... (just learnt that .appendChild will move an existing element to the end)
It then checks if the from/to list is the same to account for the item being dragged back into the list it's coming from during the same drag event (otherwise you get the same undesirable footer behaviour as before if you drag an item out of a list and back below the footer without dropping it).
fixFooter(e) {
if(e.relatedContext.list.length === e.draggedContext.futureIndex) {
var newListDom = e.relatedContext.component.$el;
var newListFooter = e.relatedContext.component.$slots.footer[0].elm;
this.$nextTick(() => {
newListDom.appendChild(newListFooter);
});
} else if(e.from === e.to && (e.from.children.length - 1) === e.draggedContext.futureIndex) {
var currentListDom = e.from;
var currentListFooter = e.from.lastChild;
this.$nextTick(() => {
currentListDom.appendChild(currentListFooter);
});
}
}
Seems like for vue draggable next this is enough:
fixFooter(e) {
if (e.relatedContext.list.length === e.draggedContext.futureIndex) {
var newListDom = e.to
var newListFooter = e.to.lastChild
this.$nextTick(() => {
newListDom.appendChild(newListFooter);
});
}
}
this one should be simple for tabulator experts (but not for me)...
i have a tabulator table. I've made one column, "edit" clickable as shown below. it works fine and returns the value of the cell i clicked. HOWEVER, that's not what i need. I need to get the value of ANOTHER cell in the same row (column "transactionID"). I know how you would do it in other languages, just use x and y values to move over 3 columns and get the value. but how is it done in tabulator? by the cloumn name? I can't find any example code on how to accomplish this.
This is the snippet from my tabulator init :
{title:"edit" , name:"edit", formatter:myformatter, cellClick:function(e, cell){alert("cell clicked - " + cell.getValue())}},
i just need to make it return value for "transactionID" instead of "edit"
and before anyone asks, no, i can't just make "transactionID" clickable. I need the clickable cell to be separate.
thanks for your help!
ok so since i got no answers to this question, i slogged thru and figured it out myself eventually. To save others time who run into this in the future, i am posting how i solved it. code with comments below :
// this goes in your tabulator column definitions. In my example, "edit" is a column
with an image button that on clicking, redirects to another page depending on what cell was clicked
{title:"" , name:"edit", formatter:openIcon, headerSort:false, cellClick:function(e, cell){
var re = cell.getRow(cell); // get the row of the cell that was clicked
var thenum = re.getData().id; // gets the value of column "id" in the same row
var theurl = "editTransaction.php?trans="+thenum; // creates my url
console.log(theurl); // perform whatever action you need to do. replace this.
}},
If you are using react-tabulator and you want to access some column data to perform a specific action ,here is the snippet for your help.
import { reactFormatter } from "react-tabulator";
// your React Component to use in a cell
function CustomFormatter(props: any) {
const rowData = props.cell._cell.row.data;
return <a onClick={() => alert(rowData.customField)}{cellData.customField }</a>;
}
const columns = [{ title: 'Custom', field: 'custom', align: 'center', formatter: reactFormatter(<CustomFormatter />) },
]
I've got some code on the Sales Prices (AR202000) that updates values. Right now, it works that it only changes the records in the grid based on the header search. If I, for example, quick search on the grid to limit to "starts with '24'" I still get all the records. I'd like the select in the code to limit to the user defined grid filters as well (I'm probably not calling those the right thing, picture below).
Code to cycle through looks like this:
foreach (ARSalesPrice price in Base.Records.Select()) // I assume this needs to apply the grid filter
{
//Do Stuff
}
I'm pretty sure this is possible with the filters, I just can't work out the details.
Thanks in advance.
The answer using the link in the comment...
foreach (ARSalesPrice price in Base.Records.View.Select(null, null, PXView.Searches, Base.Records.View.GetExternalSorts(), Base.Records.View.GetExternalDescendings(), Base.Records.View.GetExternalFilters() ?? new PXFilterRow[0], ref min, 0, ref totalRows)) //Base.Records.Select())
{
// Do Some stuff
}
I was using Telerik MVC Grid in my project. I just wanted to change the dropdown value orders a bit. I googled for the requirement and found the filter dropdown options are handled by **telerik.grid.min.js file. But, I dont know how can i change the order from
Options by Default
Is Equal to
Is not equal to
Starts with
Contains
Does not contain
Ends with
Change to the below format
Contains
Does not contain
Starts with
Ends with
Is Equal to
Is not equal to
Can anybody tell me the possibilities that i can change the order of filter dropdown box ..
Thanks,
You can do it by JQuery simply by some codes like this :
$('#GRIDID').find(".t-filter").click(function () {
setTimeout(function () {
$(".t-filter-operator").html('<option value="substringof">Contains</option><option value="notsubstringof">Does not contain</option>');
});
});
NOTE : the above code is a sample, you should do a process to check what operators you have and then repopulate the items in desired order. You can find all allowed "option" tags by inspecting the rendered grid.
The easy way (if you're using MVC razor syntax)
#Html.Kendo().Grid<Model>().Columns(columns =>
{
columns.Bound(x => x.variableName);
})
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains").DoesNotContain("DoesNotContain").WhateverYouNeed)
.ForEnums( dat => dat.Clear()
.IsEqualTo("Is Equal To"))
))
Here, the Clear() empties the options in the filter and then you can add the ones you want or even create your own custom ones there, simply place them there in the order that you want.
Have fun!
I have fixed row numbers to 10 for my subgrids, but if reccount is less than 10 I would want to adjust height subgrid to "auto" or "100%".
So here is my code for this subgrid :
// SUBGRID FOURTH LEVEL
var subgrid_table_id = subgrid_id+"_d",
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).append("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
$("#"+subgrid_table_id).jqGrid({
url:"sg31b.php?id="+row_id+"&clt="+clt,
datatype: "json",
idPrefix:"sgd_",
colNames: ['Id','Article','Désignation','Marque','Equivalence'],
colModel: [
{name:'e.id',index:'e.id',hidden:true},
{name:'a.code',index:'a.code', width:100},
{name:'a.descr',index:'a.descr', width:450},
{name:'k.code',index:'k.code', width:80},
{name:'e.equiv',index:'e.equiv',width:100}
],
pager: pager_id,
sortname: 'a.code',
hiddengrid:true,
scroll:true,
height:230,
rowNum:10,
autowidth:true,
caption:'4 - EQUIVALENCE ARTICLES',
gridComplete:function(){
sortDataCol(this);
if($("#"+subgrid_id+"_d").jqGrid('getGridParam','records') < $("#"+subgrid_id+"_d").jqGrid('getGridParam','rowNum')){
$("#"+subgrid_id+"_d").jqGrid('setGridHeight','100%');
}else{
$("#"+subgrid_id+"_d").jqGrid('setGridParam',[{npage:1}]).jqGrid('setGridHeight',230);
}
}
});
$("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{search:false,add:false,edit:false,del:false});
$("#"+subgrid_table_id).jqGrid('filterToolbar',{stringResult: true,searchOnEnter : false});
fullInputCss();
and the snapshot of result for less than 10 filtered rows :
Now if I press Backspace in search field to obtain more rows, it seems that search doesn't fire because Firebug doesn't show any trace of request :
If I delete added 'setGridHeight' lines in gridcomplete, all runs fine !
I think that one more time I'm wrong in my coding and understanding how jqGrid runs.
Please could someone give me some way to solve this trouble ?
Many thanks in advance. Have a nice day. JiheL
I suppose that the origin of the problem could be id duplicates on your page. Just now I wrote the answer on another your question where I described the problem detailed.
Current implementation of jqGrid (version 4.4.5) has problem in the code of filterToolbar which constructs id for input fields of the filter toolbar based on the following rule:
id="gs_" + cm.name
(see the line of code). It means that the id of the input field for the column a.code will be gs_a.code for every subgrid which you use. So you can have id duplicates.
So I recommend you redesign the naming concept in your code. You can use for example
name: row_id + "a_code", index: "a.code"
In the way the value like "a.code" will be still send during sorting of the grid, but you will have no id duplicates. In some scenarios (is you use repeatitems: false in jsonReader) you could need to use additional jsonmap attribute, but you don't need it in you current code.