I'd like to create a PropertyGrid alike using dgrid (and dojo). As far as I can see, a single column may only contain a single editor type. Is there any workaround to have different editor controls for different cells in the same row?
The Editor mixin seems to create a single cached editor control per row, but maybe there is something I have missed.
Thanks a lot!
There is no mixin available to achieve the functionality that you have described. But, you could do one of the two things.
1) Instead of using editor, you could use the renderCell function in the columns to return different inputs/widgets depending on the column value/row data. In this case you would need handle the events and update the store.
2) If you still want to use editor, there is a workaround. by using dojo/aspect. You would need to listen to the insertRow method of the grid. And update the cell with appropriate widgets for the cell element. Below is the snippet for the same.
aspect.after(grid, "insertRow", lang.hitch(this, 'updateRowWidgets'));
function updateRowWidgets(rowElement){
var cell = grid.cell(rowElement, <columnid>);
var rowdata = cell.row.data;
var rowWidget = .... //Create your widget according to row data.
cell.element.widget = rowWidget;
return rowElement; // remember to return this.
}
Hope this was helpful.
UPDATE: The second option would work only with editOn, as the widget will be shown/added to grid after the editOn event, and you would be able to switch the widget before that happens. Otherwise the widgets would be added to the grid before insertRow is completed.
Related
I am trying to essentially make row expansion work in an already full-fledged Grid component. Basically when we click a cell in row index 0, it should inject a new div under that "row" with more information about that specific "row".
("row" = collection of cells)
From reading the docs I understand that cellRangeRenderer is called when we are rendering a bunch of cells together. I tried implementing my own range renderer where I would have a div parent wrap the cells in a row and possibly add more UI elements into that div based off of a prop, but it seems to render the content as more of an overlay.
Does anyone have any insight into how I can inject a new "row" under the currently clicked "row"?
If you need more info, I would be happy to give it. Just didn't know how much info would be too much info. Let me know if anyone has an idea of how to go about this!!
The documentation in react-virtualized is not clear on how row selection is handled. I need to:
track selected row
highlight selected row
query which row is selected (I care for getting to its data)
It appears that there is a way to handle row click events and change style class on per row basis. I assume I have to roll my own selection tracking based on these parameters. I hope I am wrong and there is a better way.
Than you
The concept of a selected row or per-row styling is not specific to windowing. It's part of application code and should be tracked there- using React's built-in setState probably.
react-virtualized doesn't have anything built-in for this because it's orthogonal to the purpose of the library and I wouldn't want to add bloat (in terms of byte size or maintenance efforts) for features that aren't core to windowing.
I've created examples of doing similar types of things online that you might find useful to look at. For example this slide (source code here) shows click-to-select styling.
I have used React-Virtualized Table in my app, and there are library provided functions for row style and row data.
version: react-virtualized: ^9.19.1,
Link: https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md
checkout function onRowClick for picking rowdata,
and getRowStyle for giving styling to row.
I have a list box where I am trying to get the datafrom the people view in names.nsf.
The first column of the people view is computed and shows Last Name , First Name.
The code below works fine for my list box values but it does not take into consideration the value in the Filter By Column Value. Basiclly the code below acts like the Filter By Column value property does not exist. I know the Filter by Column value property is working because I replaced a repeat control on the page with a computed field and the repeat control is displaying the value excepected but the list box is displaying values from the first document in the view.
Thoughts I had to fix this are:
Use getAllDocumentsByKey to just search the people view but when I do that I lose the column values and I would need to recompute the value, something that I would like to avoid if possible incase the column formula changes.
Use FTSearch but what I really need to do is search that first column only and I am not aware of search operator that searchs a column only. Is there such a thing?
Another thought would be to somehow use the values of a repeat control, as the values for my list box, but I am guessing that this is not possible. I sort of thinking something with a scope varibale but I have not worked that out yet.
A repeat control works. How can I get my code to loop through the doeuments the same way a repeat control does?
And as a side question, is there anyway to tie a pager to a datasource as oppsed to a repeat control.
BTW What I currently do is to build a list box using a few computed fields and a repeat control but what I really want to do is to use a regular xpages list box control.
Here is the code:
var doc:NotesDocument = view1.getFirstDocument();
while (doc != null && count<10)
{
var tmpDoc:NotesDocument = view1.getNextDocument(doc)
ret.push(doc.getColumnValues()[1]);
doc.recycle();
count++;
doc = tmpDoc;
}
Try to use getAllEntriesByKey. This will give You access to column values (through ColumnValue property of view entry).
I am making a list using LinearLayout and would like to add several "person"-objects to my "list"
I need to be able to click on an object in this list an pull out the person object or at least the personId to be able to find the specific person in my database.
How do I go about doing this?
I have tried using a TextView but it is too simple to contain all of the desired values.
I have also tried using a ListView but I have several LinearLayout next to each other. The ListView scroll individually and therefore I can't use them
Here is an image:
As you can see I am trying to make a grid of sorts each column is a linearview and at the moment so are each row.
I realize there is a grid but I need to be able to fit objects in where I want them and I am too inexperienced to write my own adapter for the gridview
You can achieve this using a ListView with a custom ArrayAdapter.
Check out this example.
Instead of the Weather class, use your own Person object and make the necessary modifications.
Edit:
After reading your edit, I can see that you have some kind of Grid. So my best guess would be to use a GridView with a custom adapter.
Since you are getting your data from a database, you might as well use a custom CursorAdapter.
But I still haven't figured out what you're trying to do.
It seems that you want all the cells to be visible. That would only mean you have a small/finite amount of cells, and in that case a GridView wouldn't be any better than a for loop that adds views to a layout.
It seems there have been a few questions here regarding this subject, and they have some great answers, but it seems that my case is a little different. I need to filter the records displayed in a jqGrid, but entirely client-side.
For a number of reasons, the best way for me to populate my grid is with an array that's emitted directly into the JavaScript on the page. The grid itself doesn't interact with the server at all. I have some custom AJAX happening in various grid events, but that's it. (Basically, I'm integrating this with an existing set of available services which can't change significantly.)
What I'm looking to do is filter the grid based on a simple text input and button. My page has the text input, the button, and a table (which becomes the grid on document ready). I'd like to bind to the click event of the button (normal jQuery event binding, nothing special) and use the value from the text input as a display filter on the jqGrid.
By "filter" I mean to display only the records which contain a match (in any field) for the text in the input. Then, to display all records, just empty the input and click the button again. Additionally, the grid is multi-select and the selections need to persist through filtering. I just need to be able to hide the rows which don't match what's in the input.
Is this possible?
To filter local grid you should only fill filters property of the postData parameter of jqGrid and set additionally search:true.
To save selection of the grid you can use reloadGrid with additional parameter [{page:1,current:true}] (see here).
The corresponding code can be the following
$("#search").click(function() {
var searchFiler = $("#filter").val(), grid = $("#list"), f;
if (searchFiler.length === 0) {
grid[0].p.search = false;
$.extend(grid[0].p.postData,{filters:""});
}
f = {groupOp:"OR",rules:[]};
f.rules.push({field:"name",op:"cn",data:searchFiler});
f.rules.push({field:"note",op:"cn",data:searchFiler});
grid[0].p.search = true;
$.extend(grid[0].p.postData,{filters:JSON.stringify(f)});
grid.trigger("reloadGrid",[{page:1,current:true}]);
});
I made the demo for you which filter for two columns 'Client' ('name') and 'Notes' ('note') you can extend the code to search in all columns which you need.
Depend on what you exactly mean with the saving row selection you can need to save the current selection from the selarrrow in a variable and restore the selected rows with respect of setSelection method.