I am trying to display the count of the field in the footerTemplate.
Follow is the fiddle:
http://jsbin.com/ajoyug/8/edit
However, without the footerTemplate it works fine. But as soon as I add the footerTemplate, it stops working.
Inside the aggregateResult object I am getting the value of count. But then how shall I add it to the footerTemplate?
Kindly help me out.
Thanks!!
The problem is with your approach the grid is rendered twice, the first time on Kendo UI initialization (implicit during the first bind) and the second when you bind the actual data.
The first time the data is still not available and then it fails.
If anyway you want to follow that path you should do:
<div id="myListView" data-role="grid" class="transaction-grid"
data-columns="[
{ field: 'name', title: 'Name', width:'20%' },
{
field: 'age',
title: 'Age' ,
width:'35%',
footerTemplate: 'Total Count: # if (data.age) { # #= age.count # # } #'
}
]"
data-bind="source: dataSource">
</div>
i.e. check if data.age is available and then is when you print it.
Otherwise, I recommend following #UmankantPatil suggestion and do not use data-* but JavaScript for initializing the widgets and binding data.
Check it in the modified version of your JSBin here
I could not explain why it's not working. But I have tried doing your example by other way and it works well.
Here goes the link.
http://jsbin.com/ajoyug/35/edit
Related
Hopefully you can help me with a problem that i have.
I'm using React Table on my site.
I'd like to use the properties filterable and sortable at the same time. I've noticed that when I use filterable, sortable doesn't work anymore. Can be a bug of React Table? Do you know how can I tackle this problem?
const columns = () => [
{
Header: 'Name',
accessor: 'name',
sortable: true,
},
{
Header: 'ID',
accessor: 'id',
width: 80,
sortable: true,
},
{
Header: 'Country',
accessor: 'country',
width: 100,
filterable: true,
Filter: ({ filter, onChange }) => (
// DROPDOWN WITH OPTIONS ...
),
},
]
You definitely can make a table filterable and sortable at the same time with react-table hooks. I created an example to illustrate it:
You don't need to pass sortable or filterable props to your array of columns. If you implemented filtering on your table and want to add sorting all you have to do is to follow next steps:
Import useSortBy hook
Call it inside useTable hook after useFilters hook : useTable(..., useFilters, useSortBy)
Add to your th element some UI which will show a user the order of sorting:
<span>
{column.isSorted ?
column.isSortedDesc
? " 🔽"
: " 🔼"
: ""}
</span>
I forgot to mention that i was using react-table v6. As some of you have said, definitely was possible to use filterable and sortable at the same time. Unfortunately it seems that this need to be done using a different row. If for example you want to filter by a dropdown, this is place underneath the column label.
After debugging a lot, I noticed that my problem came from CSS. The filterable row was on the top of the columns label and therefore, disabling the sortable function. Not sure if you have ever seen an example of how to tackle this. To replace the column label for the the select tag. If so.. i'll really appreciate if you share it.
Thanks a lot for your answers
This is a modification that shows how it can work for you (as your entire solution was not shared).
See: https://github.com/vaclav18/react-table/blob/master/examples/filtering/src/App.js
Live example is here:
https://react-table.tanstack.com/docs/examples/filtering
The live example is for filtering only - so the changes would be at:
line 3
line 277
line 347 The sortable: true is not necessary here
Please refer to /docs/src/pages/docs/api/useSortBy.md for more insight.
I'm trying to implement x-editable into my Rails project and I want to use a list of participants that come from my DB as the source of a 'Select' question.
I've read the documentation and it states that the Source option accepts an array of objects, so I'm formatting this list accordingly. Unfortunately, the 'Select' field appears blank as if the source was not really recognized.
Since I'm using x-editable-rails gem to implement I thought it was a problem on how the gem was rendering the HTML data attributes. However, when I inspected the element in my browser console I don't see what's the problem.
My rendered HTML
<span class="editable editable-click editable-empty" title="Participant" data-type="select" data-model="answer" data-name="participant_id" data-value="" data-placeholder="Participant" data-source="[{"id":1,"username":"Shari","created_at":"2017-08-15T11:23:26.692Z","updated_at":"2017-08-15T11:23:26.692Z"},{"id":2,"username":"Mireya ","created_at":"2017-08-15T11:23:41.760Z","updated_at":"2017-08-15T11:23:41.760Z"},{"id":3,"username":"Edgar ","created_at":"2017-08-15T11:23:53.356Z","updated_at":"2017-08-15T11:23:53.356Z"}]" data-url="/answers/2">Empty</span>
x-editable Documentation advice
[{value: 1, text: "text1"}, {value: 2, text: "text2"}, ...]
Could you advise on a potential solution?
I've found the mistake. I misread the documentation. The keys of the hashes within the array must take the values "value" and "text" literally. So HTML must render:
[{:value=>1, :text=>"Shari"}, {:value=>2, :text=>"Mireya "}, {:value=>3, :text=>"Edgar "}, {:value=>"", :text=>"None"}]
I am trying to link the variables in the first column of my jqgrid to another page. Right now, the variables do not appear link-like OR exclusive (meaning no matter where I click on the row, I am taken to the destination page).
I need to use the custom formatter because the URL in my search bar should not change (I am running this on my local server). But with the custom formatter, I cannot seem to also use 'showlink' (which ultimately seems to make my data appear link-like when I'm not using the custom formatter). I want the finger cursor when hovering over the data in my first column, all I'm getting right now is the "I".
Is there someway I can use both
formatter:'showlink' from the predefined formatter AND formatter: returnHyperLink(name) from the custom formatter? I want to be able to ONLY click the first column's data to be taken to the page, and I want this data to appear link-like ( should not be able to click anywhere on the row).
My relevant jqgrid code is:
colNames:['Name','Status', 'Created On', 'Update By', 'Updated On', 'RetentionDays','ValidityTime','Edit'],
colModel:[
{
name: 'name', width:100,editable: true, edittype:'select',
formatter: returnHyperLink(name),
xmlmap: function (obj) {
return $(obj).attr('name');
}
},
And my function, returnHyperLink appears as:
function returnHyperLink(name){
$(this).click(function() {
$( "#contents" ).load("jsp/consumers.jsp");
console.log(this, "Hello world");
});
};
...okay obviously something is wrong if all of this code isn't even showing up in the code box. I was thinking I could call the javascript function from inside of an href, but I also do not know how to do this.
It seems to me that you misunderstand how the custom formatter works. jqGrid creates the whole body of the grid (<tbody>) as the string. Thus the custom formatter should return the string and no $(this).click inside of the formatter do not what you expect. The <td> element not yet exist during the custom formatter is working.
You don't wrote, which version of jqGrid and from which fork of jqGrid you use. If you would use free jqGrid, then you can use onClick callback option of formatter: "showlink":
formatter: "showlink", formatoptions: {
onClick: function (options) {
// this is DOM of the grid
// options.iCol is the column index
// options.iRow is the row index
// options.rowid is the rowid
// options.cm is the element from colModel
// options.cmName is the column name
// options.cellValue is the text from the <a>
// options.a - DOM element of the clicked <a>
// options.event - Event object of the click event
alert("it's clicked!");
}
}
If you have to use an old version of jqGrid and can't migrate to free jqGrid then you can download jQuery.jqGrid.dynamicLink.js from here and to use formatter: "dynamicLink", which I described in the old answer. See the answer too.
If you would do prefer to use your custom formatter, then you can use beforeSelectRow callback to implement onClick action. See the answer and this one for more details.
I am trying to get a DGrid working using the following properties:
Drag and Drop
Single Selection
Unfortionatly, this doesn't work quite as easily as I was hoping. I am declaring my DGrid like this:
this._grid = new (declare([OnDemandGrid, DijitRegistry, Selection, DnDGrid]))({
store: this.store,
columns: [
{label: "ID", field:"id", sortable: false},
...
],
touchesToScroll: 2, // Required to enable d&d on mobile
dndSourceType: "grid-row",
getObjectDndType: function(item){
return [item.type ? item.type : this.dndSourceType];
},
selectionMode: "single"
}, this.gridDiv);
this._grid.startup();
For the most part this works well. DnD is working. Selection is mostly working. There is just some strange state on occasion. These are the cases:
Shift Select:
If I perform a shift select then I will get multiple items looking as if they are selected. They will have the following css classes attached to them:
.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected { ... }
When listening to the dgrid-select event, it reports the selected elements correctly.
Attempting to drag the selected elements also works correctly -> only one of them is moved.
Edit: I have found a solution to the Shift Select issue. It is posted as answer below. I still haven't been able to figure out the next issue.
Programmatic Deselect:
If I do the following:
Select an item
Programmaticlly deselect all: this._grid.clearSelection();
Programmatically select another item: this._grid.select(row);
Leaves two items looking selected.
The two items have different styles. The incorrect one has:
.claro .dojoDndItemAnchor, .claro .dojoDndItemSelected { ... }
The correct one has:
.dgrid-selected
As before, when listening to the dgrid-select event, it reports the selected elements correctly.
It seems like this is the default dojo DnD moduel that is causing me issues. Looking at the doc it seems like I need to do something with the selector. Selector has a property called singular but I haven't been able to figure out how/where to set this.
Info on singular: https://dojotoolkit.org/reference-guide/1.9/dojo/dnd.html#id2
RE programmatic deselect, I think you've found a legit dgrid bug. I took a quick look at this and issued a pull request. See if that changeset resolves the issue for you.
It is possible to prevent Shift Select the multiple selection issue by using the dndParams field.
Instantiating the grid like this will solve the issue:
this._grid = new (declare([OnDemandGrid, DijitRegistry, Selection, DnDGrid]))({
store: this.store,
columns: [
{label: "ID", field:"id", sortable: false},
...
],
touchesToScroll: 2, // Required to enable d&d on mobile
dndSourceType: "grid-row",
getObjectDndType: function(item){
return [item.type ? item.type : this.dndSourceType];
},
selectionMode: "single",
dndParams:{singular: true} // ADDED THIS.
}, this.gridDiv);
this._grid.startup();
Still haven't figured out how to deal with programmatic changes.
I am using a ExtJs Grid with the CellEditing plugin. It works perfectly except that invalid values are lost when it fails the validation I imposed on it.
For example, if I have a editable textfield in the grid that doesn't allow values over 10 characters, and the user enters "olympicssucks" the validation will fail and a red box will appear around the textfield. When the user clicks out of the field the value "olympicssucks" will be lost.
I want the grid to still save the invalid data, and keep the red box around it.
Another (maybe more clear) example:
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/cell-editing.html
Try editing the first cellvalue: "Adder's-Tongue" and make it empty. Notice the red box and validation message. Now click out of the box. The failed validation will revert the cell back to its original value, Adder's-Tongue.
tl;dr: My question, restated, is that I want to keep the invalid value, and yet still have validation displaying a red box around it. I'm sure its possible, but how is it done?
What I've tried:
I've looked into Ext.Editor and it seems promising because it has a config property called revertInvalid that does exactly what I want. Unfortunately, it seems that the CellEditing plugin does not seem to use Ext.Editor. I've tried providing a Ext.Editor into the Editor field of the grid column, but that produced un-editable text.
I've tried placing revertInvalid everywhere I could but this was always a far-shot.
Code:
var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});
var grid = {
xtype: 'grid', store: dataStore, plugins: [cellEditing],
columns: [
{
text: 'Items', dataIndex: 'items', flex: 1, sortable : false,
editor: {
xtype: 'textfield',
validator: function(value) { //custom validator to return false when value is empty and other conditions}
},
//...
],
tbar: [{
xtype: 'button', text: 'Add ' + type,
handler: function() {
dataStore.insert(0, {items: 'New ' + type});
cellEditing.startEditByPosition({row: 0, column: 0});
}
}]
}
This worked for me (Extjs 4.2):
Ext.override(Ext.Editor, { revertInvalid: false });
It very may well be that Sencha has not yet fully developed the revertInvalid field, and that its simple functionality does not yet work. To those looking for a workaround, you may have to mess with the CSS of the grid cell itself to custom-mark it as invalid.
see http://www.sencha.com/forum/showthread.php?271318-Ext.Editor-revertInvalid-false-what-is-the-expected-behavior&p=994118#post994118
to me it is a bug in ExtJs that you can fix by overriding the completeEdit function of Ext.editor