How to hide a column in the Webgrid in aspasp.net MVC? - html

I am new to MVC and I use Webgrid to display some customer values.
I need to hide columns together with their headers. How do i do this?
CSS: gridhide { visibility:hidden }
Code: grid.Column("Id", "ID", style: "gridhide"),

I hide particular column:
Please Try This:
WEBGRID
grid.Column(null,null, format: #<input type="hidden" name="IDHidden" value="#item.IDHidden"/>),

I ended up using jQuery to hide the column on the client side. Not ideal but easy to implement. Eg to hide the second column:
$('td:nth-child(2),th:nth-child(2)').hide();
Another option would be to simply not add the column to the grid in the first place like so, as seen here: https://forums.asp.net/post/5850519.aspx
var books = db.Query(sql);
var columns = new List<WebGridColumn>();
columns.Add(new WebGridColumn(){ColumnName = "BookId", Header = "Book Id" });
if(books.Any(b =>b.Price != null)){
columns.Add(new WebGridColumn(){ColumnName = "Price", Header = "Price" });
}
var grid = new WebGrid(books);

gridhide is a class, define class instead of style in grid.column

Related

Dynamic apply the costom css to tabulator table cell

Dynamic apply the costom css to tabulator table cell
I need to change the style of "ID" column depands on dynamic number. It was done as you can see the tail of my codes but use SPAN tag to make it works.
Of coz i want to use CSS style sheet to make it look nice and i tried somethings like:
<div class="myclass">ID</div>
<font class="myclass">ID</font>
to make it work but fail.
How can i add costom CSS to tabulator table cell?
Or any better suggestion for my case?(Dynamic apply the costom css to tabulator table cell)
var table = new Tabulator("#table_1", {
height:"100%",
rowHeight:40,
layout:"fitColumns",
movablecolumns:true,
vertAlign:"middle",
columns:[
{title:"name", width:25,hozAlign:"center"},
{title:"age", width:80, hozAlign:"left" },
{title:"sex", width:25,hozAlign:"center",headerSort:false, headerVertical:true},
{title:"ID", width:25, hozAlign:"center", headerVertical:true,
formatter:function(cell, formatterParams){
var value = cell.getValue();
if(value <= 3){
return "<span style='width:20px;height:20px;background-color:blue;color:white;'>" + value + "</span>"
}else{
return "<span style='width:20px;height:20px;background-color:red;color:white;'>" + value + "</span>"}
}
},]})

Apply customized width to a prime-ng p-column in html template in angular

I want to apply a different width to each column of my columns using [style] as shown in the example, I tried [style]="{'width.px':'column.length + 10'}" but column.length isn't working on the template, below an example of my template
<p-column *ngFor="let column of columns"
[field]="column"
[header]="label[column] ? label[column] : column"
[style]="{'width.px':'column.length + 10'}"></p-column>
thanks in advance.
try:
[style]="{'width': column.length + 'px'}"
I think it is generally not a good idea to put a lot of evaluations in the template :
In your component you can map your columns and do your calculations there, assuming columns is and array of objects . You map and add a new property columnWidth where you do your do your evaluations.
//assuming you have an array of objects.
var columns = [
{
id : 1},
{id: 2},
{id :3}
];
var columnWithExtraProperty = columns.map( (column : any) => {
return{
...column,
columnWidth : column.length + 10 + 'px'
}
});
// console.log(columnWithExtraProperty);
Then try this in the template :
<p-column *ngFor="let column of columnWithExtraProperty"
[field]="column"
[header]="label[column] ? label[column] : column"
[style]="{'width.px':column.columnWidth}"></p-column>
I found this solution which isn't perfect, but for me, it answers to the problem:
[style]="{'width.px': +(column.length)+20}"
The '+' sign is there to convert value to a number (I tried putting Number(column) which didn't work here) - it is weird. I think this is happening, because column.length suppose to be a number, and I added 20 px for margin the text.

Varying the string in an HTML label or text control

Looking for an elegant and quick way to vary/rotate (rotate as in change value, not change orientation) the contents of an html Label (or textbox).
For example, on our website we would like a caption to sometimes say "Our Database Products are Great", other times have it populate with "Helping Small Businesses since 2004" etc. The chosen string can be randomly selected from a set list, but should vary every time the web page is reloaded (ok if the same one comes up more than once in a row).
What would be an easy way to accomplish this? Is there a quick way to do it without Java?
Java is the easy way.
add a div and then update it with text every few seconds.
var text = ["My text 1", "My text 2", "My text 3"];
var value = 0;
var elem = document.getElementById("div id");
setInterval(change, 1000);
function change() {
elem.innerHTML = text[counter];
value++;
if(value >= text.length) { value = 0; }
}
You can simply use JavaScript (if you can rely on your users having JavaScript). Add an id to the HTML element which will store the message, and add the following JavaScript code (replacing randommessage with you id) and adding any other messages to the messages array.
messages = ["Our Database Products are Great", "Helping Small Businesses since 2004", "Some other message"];
document.getElementById("randommessage").innerHTML = messages[Math.floor(Math.random()*messages.length)]
Live JSFiddle example
<html>
<head>
<script>
function myFunction() {
var cars = ["Saab", "Volvo", "BMW"];
var randomCar = cars[Math.floor(Math.random() * cars.length)];
alert(randomCar);
document.getElementById('randomName').innerHTML = randomCar;
}
</script>
</head>
<body onload="myFunction()">
<label id="randomName"></label>
</body>
</html>

Vaadin combobox.select() does not work no matter what I do

I am writing a basic CRUD app using Hibernate MySQL.
Adding new records is fine but I'm having some trouble getting an existing record's value to appear as the selected item by default when editing an existing record.
Here is the relevant code:
Criteria criteriaz = session.createCriteria(Organisation.class);
final List<Organisation> orgList = criteriaz.list();
BeanItemContainer<Organisation> srcOrgs = new BeanItemContainer<Organisation>(Organisation.class);
srcOrgs.addAll(orgList);
organisationId.setInvalidAllowed(false);
organisationId.setNullSelectionAllowed(false);
organisationId.setContainerDataSource(srcOrgs);
organisationId.setItemCaptionMode(ItemCaptionMode.PROPERTY);
organisationId.setItemCaptionPropertyId("name");
for (Organisation mOrg : orgList) {
if (mOrg.getRowid().equals(activity.getOrganisationId()))
mOrgID = mOrg.getName();
}
organisationId.select(mOrgID);
What am I doing wrong here?
Use just:
for (Organisation mOrg : orgList) {
if (mOrg.getRowid().equals(activity.getOrganisationId()))
organisationId.select(mOrg);
break;
}
BeanItemContainer contains beans as IDs, so you always work with beans only.
Although you set the caption property id to name it does not change the identifier ID for the items. So you can use the following on conjunction with BeanItemContainer:
organisationId.select(orgList.get(mOrgID));
and change this
mOrgID = mOrg.getName();
to
mOrgID = mOrg;
To make #Morfic happy:
organisationId.select(orgList.get(orgList.indexOf(mOrgID)));

Displaying more than one content in a cell in asp.net

I have a cell and want to display 'hello' in the middle and if some condition is true then display 'world' at the right bottom of that cell.
Here, Only hello and world is getting displayed but 'world' not at the right bottom.
tc.InnerHtml = "Hello";
if(some condition)
{
Label lblBundle = new Label();
lblBundle.Style.Add("font-size", "5px");
lblBundle.Style.Add("float", "right");
lblBundle.Style.Add("float", "bottom");
lblBundle.Text = "world";
tc.Controls.Add(lblBundle);
}
Can anyone please help me out. I am displaying the label control dynamically.
if you want to append just word to existing content than why you need to add label. try following:
tc.InnerHtml = tc.InnerHtml + " world"