When you use the flag 'showColumnMenu' with true value.
the ng-grid is rendered with button on the right end top panel.
Using this button we can hide/show the column on the grid.
In my Case I don't want to make it possible for some column to be visible on the grid - Meaning I want the the column menu box will be rendered with out some column.
Iv'e created plunker which demonstrated my problem
> http://plnkr.co/edit/VXOzBIRfyY3FoCTct9PI?p=preview
In that plnkr - I set column 'Id' to be invisible using (visible: false)
But if the user click on the column menu on the right end panel
he will be able to set it visible..
EDIT
Another scenario that I need to cover is case where there is some other
column say 'name' that I don't want the let the user configure it (by setting it as invisible) inside the column menu - meaning that column 'name' must always be on the grid!
and the user does not need to see it in the column menu..
So, if only i could hide those columns (id,name) inside the column menu
my problem will be solved..
Thanks!
You can do that editing a bit menuTemplate.html in ng-grid source file
Find line starting from :$templateCache.put('menuTemplate.html',
and line
<label><input ng-disabled=\"col.pinned\" type=\"checkbox\" class=\"ngColListCheckbox\" ng-model=\"col.visible\"/>{{col.displayName}}</label>\r" +
change to
<label ng-hide=\"col.colDef.alwaysVisible\"><input ng-disabled=\"col.pinned\" type=\"checkbox\" class=\"ngColListCheckbox\" ng-model=\"col.visible\"/>{{col.displayName}}</label>\r" +
now you can add
alwaysVisible:true
to columnDefs and it's done
Please see here working demo http://plnkr.co/edit/qmoILJ5LTMSlH7Uv9Rw8?p=preview
Why not just turn off the column menu? It sounds like you basically don't want to use it anyway. Is it important for your users to be able to hide the age column, when they can't control any other?
For hiding ID, I'd recommend not putting in the list of columns in the first place. Even if you don't include it in the grid, it will still be present in the data and accessible by your code. The grid is just a place to display information to the user, so don't put info in there that you don't want to display.
Edit: Check out UI-Grid, the updated version of the Ng-Grid project: http://ui-grid.info/
It has a new ColumnDef property, "EnableHiding" for exactly this case.
Here's their documentation for upgrading from ng-grid: http://ui-grid.info/docs/#/tutorial/099_upgrading_from_2
Related
I am using columnClass property to assign different rendering (and event processing) to cells belonging to different columns.
When the table fits within the screen every element gets the class as specified by the columnClass property of its column and I can easily hook some rendering/processing functions to the elements.
However, when some of the columns don't fit within the page and I expand the row (by clicking the '+' button) the cells are renedered with no reference to the class of the column. I reviewed the custom renderer for the cells of the expanded columns and also see no way finding out what the column class of a cell is.
Ideally, I would like to use the same custom field renderer as defined in the table. Is there a way I can do it?
Example:
Let's say I have 3 columns: name, dob, salary.
I defined 3 classes for the columns: name_class, dob_class, salary_class.
For each class I use a jquery selector and assign diffrerent rendering/behavior for each cell of that column.
Now, I resize the table so that dob and salary get overflown and click on the '+' button to expand the row of interest.
I would expect to get the dob cell with the dob_class attribute and salary cell with the salary_class attribute, so I am able to link the same cell renderer to them.
However, ****the class attribute is no assigned (not retained) and I cannot link with jquery using the class attribute. ****
**Could you please suggest an solution that would allow me to retain the column class on the cells of the expanded row? **
Sorry, no, that's not currently possible. It has been raised against the code already, see https://github.com/DataTables/Responsive/issues/93, so it is on the todo list. I'm not sure why the OP has been voted down, seems a bit unfair to me, as it is a valid question.
In our project we are creating tables using JavaScript and displaying data in that table using xsl. we are getting data from backend through copybook.
Based on one value we are displaying, we have one column header in the table. If that value is yes then that column will come. While displaying data in that column we did not check any condition, just we are using style="display:none". If that column comes then data is visible otherwise data is hidden. But when data is vible and when we click on one of the column names columns are shifting to left and data was hiding because of style="display:none".
Is there anything that works similarly to style="display:none" such that when a column comes then it shows the data otherwise it hides the data?
I have tried with 'style="visible:hidden", it does not work. Whether the column came or not it is consuming space beacuse of that columns are shifing to right.
**style="display:none" is working properly means when column comes then only it is showing data otherwise it is hiding the data **. where as visibility:hidden is conusimg space.
Use visibility instead:
style="visibility:hidden"
I have a dgrid with a permanently hidden column that needs to be there, because I need to filter the table on its values. I am using ColumnHider in order to hide it and it works fine.
However, using ColumnHider also shows the small "+" button in the table corner that is used to hide/show columns, and I really don't want that button to show (hiding/showing columns is not a functionality we need to offer). I know I can use the unhideable property on the column, but this simply removes them from the menu. Even if I set all columns as unhideable, the button is still there with an empty menu.
Apart from hiding it with CSS, which I did, is there a way to tell ColumnHider not to show that menu at all?
Thanks, regards.
There's no programmatic way to completely hide the ColumnHider menu. The simplest way is with CSS, e.g.:
.dgrid .dgrid-column-hider-toggle {
display: none;
}
It's also possible to just suppress a column from ColumnHider's list by adding unhidable: true to the column's definition.
However, it's not fully clear to me whether you even need the ColumnHider extension. Regardless of what's in your actual data, if you don't want a particular field to be displayed in the grid, just don't define a column for it in columns (or whichever property you're using, e.g. subRows or columnSets). You'll still have the full data item available to you e.g. for renderCell functions and if you extend renderRow.
I got a minor problem. I am displaying data from a database table in a .aspx page in the form of a grid view.
The first column is check boxes for each individual row and a header check box to implement the check all and uncheck all functionality which I already did using javascriptC. The purpose is general purpose...i.e. each check box represents the row which it is present in.
The problem is as I check the check boxes- either some or all or none....the sum of the values in the selected rows should be displayed dynamically in a text box in the same page below.
Please tell me how to implement this functionality. Just a basic hint or syntax is sufficient. I will do the details myself.
Please tell me the functionality for a simple grid view with two columns- one check box and the other being some values. so I want to display the sum of selected values into a text box in the same page below. This is the problem in simple words.
Thanks in advance for the help.
Concept
Calculate method
create first a method that will iterate over all the items in the grid view, and it will verify if the column is checked, if the column is checked then you add the value to the result variable. At the end of the iteration you update the value of the textbox/label or whatever will display the calculated value
Event
then you will have to use the onCheckChange of the checkboxes or on click to call the "calculate method"
Code
to loop in the grid: Looping through GridView rows and Checking Checkbox Control
Some quick searching only turns up adding a new row to a jQGrid via a modal popup with the editable fields.
Can anyone point me to a sample or show me some code that allows you to add a new empty row into the grid itself, at the top?
I have an action column at the rightmost end of the grid in which onRowSelect() I have a save button appear and I can make that button do the save and refresh the grid I think..
I can't figure out how to click on a 'Add Row' button and add an empty row inside the grid at the top.
One option that I can see is to style the current add row modal to look like a horizontal row and place it to appear like its a row at the top of the grid.
jQGrid Documentation: http://www.trirand.com/jqgridwiki/
If you use datatype:'local' then you can use addRowData method to insert the row with position parameter set to 'first'. See some examples under http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#array_data.
This answer is courtesy of Oleg in my previous question here:
use $("#grid").addRowData(rowid,data, position, srcrowid);
Inserts a new row with id = rowid
containing the data in data (an
object) at the position specified
(first in the table, last in the table
or before or after the row specified
in srcrowid). The syntax of the data
object is: {name1:value1,name2:
value2…} where name is the name of the
column as described in the colModel
and the value is the value. This
method can insert multiple rows at
once. In this case the data parameter
should be array defined as
[{name1:value1,name2: value2…},
{name1:value1,name2: value2…} ] and
the first option rowid should contain
the name from data object which should
act as id of the row. It is not
necessary that the name of the rowid
in this case should be a part from
colModel.
P.S. Have a look at my profile for a number of jqgrid questions and answers.