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"
Related
I have a DataTable (jQuery) that currently allows me to filter my data when I enter a string inside an input field. By default, a label is invisible.
After filtering, I want to be able to make a the label visible if the the dataTable after filtering contains data. Vice versa, if the dataTable is empty after filtering, I want the label to stay invisible.
I am relatively new to web-development so please excuse my lack of knowledge. The filtering of the datatables is client-side so im a but unsure on how to achieve this.
this is how i initialised the datatable
if the filter results in an empty dataTable, no label should appear
if the filter results in a datatable with data, a label should appear
You need to add a change event listener
to your input field. Afterwards just check if the field content meets the required conditions and set the label's display style to style properties like
document.getElementById(labelname).style.display = 'none'
I am building a user search filter where we can specify a number of criteria's, one per each row of a HTML table.
I am building a dynamic table using jquery on the client side, the table starts off with one row(default) on page load with a "+" image on the last <td> which when clicked I am appending a new row to the table, and this can repeat for any number of rows as shown below. Once the search button is clicked, I am bringing back results based on criteria selected. But I also need to preserve the current criteria table after postback(due to search button).
Any ideas on how to do this? I have tried putting all of the HTML for the table in a hiddenfield but I get a RequestValidationError for obvious security reasons. I have the individual selected values in each row saved in hidden variables which I am using in code behind to build the search and bring the results, do I need to rebuild the table on the client side using the values I have? Is that the only option? I also tried converting the HTML for the table into text and putting it in hidden variable, but I am not able to convert it back into HTML after the postback, it is rendering as text inside the table, below is the code for it, any help/input is appreciated.
HTML:
<input type="hidden" runat="server" value="0" id="hdnCriteriaTable" />
jQuery:
on button click, before postback(client side):
jQuery("[id*=hdnCriteriaTable]").val(jQuery("#dynamicCriteriaTable tbody").html().replace(/</g, "<").replace(/>/g, ">"));
on page load after postback(client side):
if (jQuery("[id*=hdnispostback]").val() == "1")
{
//commented out lines below are different ways I tried to make it work.
//the one with hardcoded td's is the one that renders perfectly as HTML inside the table
jQuery("#dynamicCriteriaTable>tbody").empty();
var criteriaTableHTML = jQuery("[id*=hdnCriteriaTable]").val().replace("<", /</g).replace(">", />/g).replace(""", "\"");
jQuery.parseHTML(criteriaTableHTML);
//jQuery("#dynamicCriteriaTable>tbody").append(jQuery("[id*=hdnCriteriaTable]").val().replace("<", /</g).replace(">", />/g).replace(""", "\"").toHtml());
//jQuery("#dynamicCriteriaTable>tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>")
jQuery("#dynamicCriteriaTable>tbody").append(criteriaTableHTML);
//alert(jQuery("#dynamicCriteriaTable").html());
//jQuery("#dynamicCriteriaTable").toHtml();
}
This is how HTML is being rendered inside the table:
If I were you, I would rebuild the table from the values; it's clean, and you can always write a function that automates the build.
However, if you want to pass it in toto as HTML, you'll need to escape your tags somehow. I would start by replacing < and > with < and >, respectively, and if that still give you a requestValidationError, use another pair of delimiters.
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.
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
I'm trying to select rows dynamically on a datagrid using the grid.selection.setSeleted() and grid.selection.getSeleted() methods.
I can select rows that are currently undrawn (i.e you must use the horizontal scroll bar to see them). But when I try to get the row contents using grid.selection.getSeleted(), the array returns nulls instead of the row data.
Is there any way to get the selected row data even if it is not currently drawn? Although it's slower can I force dojo to draw the entire grid, even if some of it is not displayed?
Have al look : http://dojotoolkit.org/reference-guide/1.8/dojox/grid/DataGrid.html#working-with-selections
It's a good example how to use getSelected()
and this is a Post from the dojo Forum. It discribes an error that's maybe familiar to yours.
http://dojo-toolkit.33424.n3.nabble.com/dojox-grid-DataGrid-selection-getSelected-odd-behaivour-td3941395.html
Regards