Using a Angular Material table. How would be possible to apply a different background color to the column that is being sorted?
If you only want the <th> to change color on sort, assign a template ref, and reach into the reference to check if sort is active and sort value is present.
<th mat-header-cell #header *matHeaderCellDef mat-sort-header
[style.background-color]="
(header['_sort'].active == 'id' && header['_sort'].direction) ?'red':''"> ID </th>
StackBlitz
https://stackblitz.com/edit/angular-5fzkja?embed=1&file=app/table-overview-example.html
I hate to say it but I know a partial solution for your problem, My solution works if and only if the sort is being done by the user i.e. it doesn't highlight the column in initial sorting on first render however I post it here it might give you a direction to what to look at.
In order to capture the sort event you should add an event listener (matSortChange)="onSortEvent($event)" to your DOM file as following:
<table (matSortChange)="onSortEvent($event)" mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
then in your .ts file you can capture the name of the clicked column using the following and store it in a local variable:
activeColumn: string;
onSortEvent(eventData){
this.activeColumn= eventData['active'];
}
This will populate the name of the active column in a local variable which can be in turn used to activate a specific class for your headers like following:
in your css file you can have something like:
.highlight {
background-color: lightgray;
}
and in your DOM file:
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef mat-sort-header [className]="activeColumn === 'position'?'highlight':'default'"> No. </th>
<td mat-cell *matCellDef="let element"> {{}} </td>
</ng-container>
I hope it solves a little bit of your issues.
I have the following for a responsive project:
<table>
<tr>
<td>Besteldatum</td>
<td itemprop="description">
24-2-2014
</td>
</tr>
<tr>
<td>Losse editie</td>
<td itemprop="description">
2014-02
</td>
</tr>
</table>
Strangely enough the ipad places a link in the first as if it were a telephone, check the image:
If I inspect in the ipad I see that the HTML is converted into the following:
<table>
<tbody><tr>
<td>Besteldatum</td>
<td itemprop="description">
24-2-2014
</td>
</tr>
<tr>
<td>Losse editie</td>
<td itemprop="description">
2014-02
</td>
</tr>
</table>
I think the ipad is detecting this date as a telephone number and placing this link automatically. I have other links with the tel link so I would like a solution that does not cancel the other tel links.
Never seen this, can anybody help?
This is default behaviour in iOS. It means that users can simply click a phone number on a web page to make a phone call. Unfortunately it does pick up some non-phone numbers sometimes depending on the formatting.
You have a few options. Here are a couple. Either disable iOS phone number detection by adding this meta tag:
<meta name="format-detection" content="telephone=no">
This maybe a bad idea because it will remove the phone number detection for the entire page making real phone numbers non-clickable.
or override the styles that are being applied with something like...
a[href^=tel] {
color: #your_color;
text-decoration: none;
pointer-events: none;
}
If you have some genuine phone numbers on the page, you may wish to add a class to the non-phone parent in order to differentiate:
.date a[href^=tel] {
color: #your_color;
text-decoration: none;
pointer-events: none;
}
I am trying to write a quick application to view my electric bills programatically. For that I need to be able to log into the website programmatically before I can move ahead with anything else.
I know that one has to use curl in some way for that. But, I am not sure how I can leverage curl to log into the website through terminal. Here is the website: Seattle Utilitiy Bills Website
Looking at the corresponding source for the login form, it look like this:
<tr>
<td nowrap class="form-style-text">User ID:</td>
<td class="form-style-label"><input type="text" autocomplete="off" size="17" name="loginid" maxlength="32"></td>
</tr>
<script type="text/javascript">document.wizForm.loginid.focus()</script>
<tr>
<td class="form-style-text">Password:</td>
<td class="form-style-label"><input type="password" autocomplete="off" name="password" size="17" maxlength="16"></td>
</tr>
<tr>
<td class="form-style-text"> </td>
<td align="left">
<input name="login" type="submit" class="actionbutton" onClick="doLogin()" value="Log in"/>
</td>
</tr>
I know I need to use curl in some way to be able to log in, but I am not sure how. Specially because the login logic is being done by the 'doLogin()' function, and I am not sure how I can call that function from the terminal using curl. Here is the definition of the 'doLogin()' function:
function doLogin() {
var wform = document.wizForm;
wform.type.value='LoginMenu';
}
Any clues how I can log into this page using terminal/curl?
You missed the form tag. <form class="extform" action="/csg/inetSrv" method="post" name="wizForm">
Most likely you need to save a session cookie after you logged in.
What you need to do is use curl to post the form-data to /csg/inetSrv. use the parameter --cookie-jar <file> to save the cookie. Then you can use curl again to make requests with the cookie file and you are logged in.
It might be easier to check the cookie in a browser first to understand how it is used. You can then try using curl with the browsers session cookie to test before you use curl to log in.
I am using MVC3, C#, Razor, EF4.1
I have implemented grids in their most simple form ie Razor Tables. At present I have implemented editing of record fields off page ie Click "Edit" and the edit page appears, one then fills in data then save which returns user to main grid page.
I need an inline solution where only 1 or 2 fields need updating. Typically the user would either click on the row or on "edit" link and the row would change to "edit mode". One would then edit the data. One would then click on "Save" and the row would resort to read only, or the grid would refresh. Can you recommend a simple and robust solution for this. At present I am not thinking about 3rd party component solutions such as Telerik Kendo UI Grids , although in the near future I will no doubt upgrade to something like this. At present I want to keep it really simple.
Thoughts, wisdom, recommendations appreciated.
Many thanks.
EDIT:
Thanks all. I am going to give these suggestions a try.
Here is simplest way of doing it, see fiddle.
Save all your data using JSON web service. You'll end up having either array of cells or array of array of cells. (Alternatively you can put JSON in a hidden input box)
Use $.data api and put all information needed for server to save in data attributes.
You'll endup having something simple as
var f=$('#myform')
, t = $('table')
, inputs = t.find('input')
, b1 = $('button.save1')
, b2 = $('button.save2')
, ta = $('#save')
// update data-val attribute when value changed
t.on('change', 'input', (e) => $(e.target).data('val', e.target.value))
// store everything in $.data/data-* attributes
b1.on('click', () => {
var data = []
inputs.each((i,inp) => data.push($(inp).data()) )
ta.text(JSON.stringify(data))
})
// use $.serialize
b2.on('click', () => {
var data = f.serializeArray()
ta.text(JSON.stringify(data))
})
input {border : 1px solid #fff;margin:0; font-size:20px; }
input:focus { outline: 1px solid #eee; background-color:#eee; }
table { border : 1px solid #999; border-collapse:collapse;border-spacing:0; }
table td { padding:0; margin:0;border:1px solid #999; }
table th { background-color: #aaa; min-width:20px;border:1px solid #999; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='myform' id='myform'>
<table>
<tr>
<th></th>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
<tr data-row="0">
<th>1</th>
<td><input type="text" data-row="0" data-col="0" data-val="a" value="a" name='data[0][0]'/></td>
<td><input type="text" data-row="0" data-col="1" data-val="b" value="b" name='data[0][1]'/></td>
<td><input type="text" data-row="0" data-col="2" data-val="c" value="c" name='data[0][2]'/></td>
</tr>
<tr data-row="1">
<th>2</th>
<td><input type="text" data-row="1" data-col="0" data-val="d" value="d" name='data[1][0]'/></td>
<td><input type="text" data-row="1" data-col="1" data-val="e" value="e" name='data[1][1]'/></td>
<td><input type="text" data-row="1" data-col="2" data-val="f" value="f" name='data[1][2]'/></td>
</tr>
<tr data-row="2">
<th>3</th>
<td><input type="text" data-row="2" data-col="0" data-val="g" value="g" name='data[2][0]' /></td>
<td><input type="text" data-row="2" data-col="1" data-val="h" value="h" name='data[2][1]' /></td>
<td><input type="text" data-row="2" data-col="2" data-val="i" value="i" name='data[2][2]' /></td>
</tr>
</table>
</form>
<div name="data" id="save" cols="30" rows="10"></div>
<button class='save1'>Save 1</button>
<button class='save2'>Save 2</button>
Given that you generate your table in Razor view and don't need to load data into table. So you "loading" data on the server and saving changes with tiny JS snippet above.
You can also style your input cells in the table so they would look different when with focus and not, making it look like Excel spreadsheet (without fancy Excel features though, just look).
Well in that case I will suggest you to add a div with a unique id with each grid row.
and on the click of edit button insert a row having text boxes with value using java script.
Using knockout.js is my preferred approach, and in my opinion, is simple to get started with but flexible enough to keep up with project demands.
Here are examples:
http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html
http://knockoutjs.com/examples/gridEditor.html
If you think this is for you then take an hour or two and go through the tutorials, it's well worth the time:
http://learn.knockoutjs.com/
I have implemented exactly what you are asking for, but I cannot assure you that it is robust. It definitely is not simple. Based on the article Get the Most out of WebGrid in ASP.NET MVC by Stuart Leeks I have created an MVC project which I have heavily modified with my own javascript. In the end I have come up with a solution that works but could be vastly improved. Took me at least a week to implement.
I write tutorial for implementing inline editable grid using mvc, knockoutjs with source code:
http://www.anhbui.net/blog?id=kojs-1
I'm working on a Plone site that has JQuery mobile and I have an issue with the medias.
JQuery mobiles creates a neat menu in the web page's home page that links to the differents views of the plone site. The problem is that the medias (like the images) are linked with a weird URL that doesn't exists.
What I mean is the following:
I have an image whose path would be: url/competitions-en/red-bull-monte-descend/horaire/red-bull-monte-descend/vignette_normal
But in the src param of the img tag what I see it's url / nameOfView competitions-en/red-bull-monte-descend/horaire/red-bull-monte-descend/vignette_normal
I have no idea why JQuery mobile adds the name of the view to the path of the image, tough I do know that if I load the view client side (so instead of going: main menu>view, I load the view in a new tab) there's no problem. JQuery mobile adds the name of the view to the path of the image only when I access the view trough the main page.
Any ideas on how to fix it?
Additional information:
This would be the block in the plone template with the first TD generating the img
<tr tal:repeat="el python: une_date[1]['horaires']">
<td tal:attributes="class string:categorie ${el/categorie/cls}">
<img tal:attributes="src el/horaire/vignette; alt el/horaire/title_short;" />
</td>
<td tal:attributes="class string:competition">
<a tal:content="el/competition/title" tal:attributes="href el/competition/url"></a>
</td>
<td class="emplacement">
<span tal:content="el/horaire/emplacement"></span>
</td>
<td class="debut_fin">
<span tal:content="el/horaire/debut">debut</span> - <span tal:content="el/horaire/fin">fin</span>
</td>
<td class="title" tal:content="el/horaire/title">un titre</td>
</tr>
Ty,
Axel