I am using dojo EnganceGrid which have 5 columns and the fifth column is image hyperlink. I want to replace hyperlink with text particular row of column. For example, I am clicking on 2nd row of fifth column. When I will click on image and My image hyperlink replace with some text. Can any one help to fix this issue?
For example
<th field="mobileNumber" noresize="true" formatter="formatMobileNumber" width="10" cellClasses="alignTextCenter">Mobile Number</th>
<span style="display:none" id="defaultFormatMobileNumber_${ns}">
<a href="javascript:void(0);" onClick="showMobileNumber(event,valueToChange)">
<img src='/images/mobile.png' />
</a>
</span>
function formatMobileNumber(data, rowId){
var link = dojo.byId('defaultFormatMobileNumber').innerHTML;
link = link.replace("valueToChange",rowId);
return link
}
function showMobileNumber_<p:namespace/>(e,rowIdx){
//here I want to replace my link with some text
}
The text that you want to show should be returned by the formatter. You could have showMobileNumber set some variable, say clickedRow, to the clicked row number and adapt formatMobileNumber to take that variable into account:
clickedRow = -1;
function formatMobileNumber(data, rowId){
if (clickedRow != rowId) {
var link = dojo.byId('defaultFormatMobileNumber').innerHTML;
link = link.replace("valueToChange",rowId);
return link;
}
else {
return "some text";
}
}
function showMobileNumber_<p:namespace/>(e,rowIdx){
clickedRow = rowIdx;
// now the grid should probably be refreshed so that the formatter is
// re-applied. If variable 'grid' holds the grid:
// grid._refresh();
}
Related
There is a search bar with a button to filter. Clicking on the same submenu (dropdown) is displayed. The HTML looks like :
<ul >
<li data-value"svalue1">
<svg>.... </svg>
<p> Value1 </p>
</li>
<li data-value"svalue2">
<svg> ....</svg>
<p> Value2 </p>
</li>
<li data-value"svalue3">
<svg> </svg>
<p> Value3 </p>
</li>
I need to retrieve the values of options as an array and compare.
I am able to assert a single value but unable to store it in an array to compare all together.
var tab = Selector('ul');
-
-
.expect(tab.child('li').nth(3).innerText)
.eql('Value3', 'The value is not correct');
But this doesn't work
for (let i = 0; i < 6; i++) {
myArray.push(tab.child('li').nth(i).innerText);
console.log("value:" + tab.child('li').nth(i).innerText);
}
Prints: value:[object Object]
Any idea?
You need to add the 'await' keyword. For instance:
for (let i = 0; i < 6; i++) {
console.log("value:" + await tab.child('li').nth(i).innerText);
}
Refer to the 'Access Page Element Properties' topic to find this note:
Note that selector's property getters and client functions are asynchronous. If you need their resulting value in your code, use the await keyword. However, you can omit await when you pass a selector property or a client function value into an assertion.
Please see the code
<div v-for="msg in leftMsg">
div v-if="msg.last_sender" #click.prevent="loadMsg(msg)">
<tr :class="['active',{ 'seens' : !msg.seen, 'selected':msg.isActive}]">
// some html
</tr>
</div>
</div>
loadMsg(obj){
obj.isActive = !obj.isActive;
}
The problem is, it is adding selected class properly but when I click another item it adds selected but doesn't remove the old one. How can I keep only the most recent clicked item selected?
Thank you.
Add a data property outside of the msg objects and use that to track the active message.
data(){
return {
activeMessage: null,
...
}
}
Then in your template, set the activeMessage.
<div v-for="msg in leftMsg">
<div v-if="msg.last_sender" #click.prevent="activeMessage = msg">
<tr :class="['active',{ 'seens' : !msg.seen, 'selected': msg === activeMessage}]">
// some html
</tr>
</div>
</div>
The key parts I changed here are #click.prevent="activeMessage = msg" and 'selected': msg === activeMessage. This will set activeMessage to the clicked message, and then the selected class will be applied to the activeMessage and will only apply to the activeMessage.
I would also note that it's strange that you have a tr element nested inside div. I assume it was just because of your example, but that's not technically valid HTML.
I have solved this issue using a for loop. I thought it may help some other.
In order to remove the all other previous active classes all you need to run a for loop and make them false and then assign active=true to the newest one.
Here is the code that may help
// make all other selected class false first
for(let i=0; i<this.leftMsg.length; i++){
this.leftMsg[i].isActive=false;
}
/*now making the newest one active*/
obj.isActive = true;
iam use editor froala when insert text then show text iam see tag html in text
plese see text
<B><p class="fr-tag">test
testttt good<br></p></B>
iam use this code for show and remove tag
<dd>
#{
#Html.DisplayFor(model => model.FTxtnews)
}
</dd>
var val = $('textarea').val();
val = val.replace("</p><p class="fr-tag">", '<p class="clear">');
edit:
iam sloved this problem with use #Html.Raw
try assigning your HTML string to an element and get text of it by removing all child elements like this,
var dummyString = '<B><p class="fr-tag">test testttt good<br></p></B>';
$('#dummyDiv').html(dummyString);
var val = $("#dummyDiv")
.clone() //clone the element
.children() //select all the children
.remove() //remove all the children
.end() //again go back to selected element
.text();
Have a DIV in your page (possibly hide it) with id 'dummyDiv'.
Hope it works. Thank you.
I have a DefaultDataTable that gets its columns programmatically.
The markup is simple:
<table wicket:id="dataTable" border="0" cellpadding="1" cellspacing="1" width="90%" />
All of the columns are dynamically generated from a passed in LinkedHashMap of labels and attributes:
for (Entry<String, String> entry : entrySet) {
final String label = entry.getKey();
final String attribute = entry.getValue();
columns.add(new PsPropertyColumn(label, attribute) {
#Override
public void populateItem(Item cellItem, String componentId, IModel model)
{
final Object modelObject = model.getObject();
final Object value = PropertyResolver.getValue(attribute, modelObject);
// Add an edit link
BookmarkablePageLink link = new ...;
...
cellItem.add(link);
}
}
}
DefaultDataTable table = new DefaultDataTable("dataTable", columns, dataProvider, MAX_ROWS) {
...
}
add(table);
As many posts have mentioned, this is rendered as a cell with an onclick handler rather than an anchor (<a href="..." />) tag. I want the anchor tag for a couple of reasons, one if which is that I want to add my own onclick handler without having an existing onclick handler in the way.
I have seen the generally accepted solution that says to put an anchor tag inside a panel in the HTML markup, and to add the link inside of a Panel subclass. However, that doesn't give the entire html markup (inside the table), and I think the column () tags must be a part of this markup, which I don't think works with my strategy of dynamically generating the columns (I don't even know or care how many will be asked for). Is there a way to render my dynamically generated columns as anchor tags without specifying in the markup how many there?
Thank you for any help.
I have used nested ListView components to be able to have more control over the layout as below:
html:
<table wicket:id="listViewContainer">
<tr>
<th wicket:id="columnHeaderListView">
<span wicket:id="columnHeaderLabel">Header Label</span>
</th>
</tr>
<tr wicket:id="rowListView">
<td wicket:id="rowColumnListView">
<a href="#" wicket:id="link">
<span wicket:id="linkLabel">Link Label</span>
</a>
</td>
</tr>
</table>
Java:
WebMarkupContainer listViewContainer = new WebMarkupContainer("listViewContainer");
listViewContainer.setOutputMarkupId(true);
add(listViewContainer);
ListView columnHeaderListView = new ListView("columnHeaderListView", columnHeaderList) {
#Override
protected void populateItem(ListItem listItem) {
ColumnHeader ch = (ColumnHeader) listItem.getModelObject();
listItem.add(new Label("columnHeaderLabel", new Model(ch.getLabel())));
}
};
listViewContainer.add(columnHeaderListView);
ListView rowListView = new ListView("rowListView", rowList) {
#Override
protected void populateItem(ListItem listItem) {
Row row = (Row) listItem.getModelObject();
listItem.add(new ListView("rowColumnListView", getRowColumnList(row)){
#Override
protected void populateItem(ListItem li) {
RowColumn rowColumn = (RowColumn) li.getModelObject();
Link link = new BookmarkablePageLink("link",...
li.add(link);
link.add(new Label("linkLabel", new Model(rowColumn.getLabel())));
}
});
}
}
listViewContainer.add(rowListView);
I am trying to pass the value in a text box as a query parameter in a dojo data grid and would like to get clarified on two questions listed below. The dojo grid initiates a call to the server with the query params to initiate a search and bring back results (that is diplayed on the data grid)
Is it possible to reload the gird based on the value in the text by invoking refresh (dijit.byId("mygrid").refresh
If yes, how can I pass the value of the text box as a query parameter to the data grid.
Listed below is my relevant code
function reload(){
dijit.byId("mygrid").refresh;
}
<div class="test">
<input id="searchParam" >
<button dojoType="dijit.form.Button" type="submit" onclick=reload()>
Search
</button>
</div>
<div dojoType="dojox.grid.DataGrid"
id="mygrid"
jsid="mygrid"
store="dojox.data.JsonRestStore"
target="<c:url value='members' />">
query="{
searchCriteria: ? TODO How to pass value of text box here?,
}"
rowsPerPage="1000"
autoWidth="true"
autoHeight="true"
selectionMode="single"
selectable="true"
errorMessage="Error loading data"
noDataMessage="<span class='dojoxGridNoData'>No members found.</span>">
</div>
You should be able do something like the following:
function reload() {
var val = dojo.byId('searchParam').attr('value');
dijit.byId("mygrid").setQuery({ propName: val });
}
You will need to properly build the query { propName: val }.