I have a PrimeNG table
<p-table [value]="products" dataKey="name" (onEditInit)="onEditInit($event)" (onEditComplete)="onEditComplete($event)" (onEditCancel)="onEditCancel($event)"
>
and I am using the CellEdiding Function
<tr>
<td
[pEditableColumn]="product.name"
[pEditableColumnField]="product.comment"
[pEditableColumnRowIndex]="product.id"
>
I can exit from the editing mode by typing "enter" or "escape" on the keyboard.
Is there any way to do it by clicking on a button ?
Exemple available here
Related
I'm having the two types of check-boxes one is for selectAll check-box in the data table header, and another type selecting the check-box for each row.
I'm doing a operation, So I need to show the confirmation message, How do I get the count of the selected check-boxes from the Managed Bean.
My code was written in JSF 1.2.
I can able to do select all records, select records, ManagedBean is working fine, But I need to get how many of them got selected for deletion.
Here is the JSF code,
<i:commandLink id="delete"
onclick="if (!confirm('#{managedBean.deleteSelectedCount}')) return false;"
action="#{managedBean.deleteRecords}"
title="Delete records"
immediate="true">
<i:graphicImage url="images/icons/delete.gif" alt="Delete records" />
</i:commandLink>
;
;//Some coding
;
//Data table code starts
<i:dataTable id="caseDataTable"
<h:column>
<f:facet name="header">
<i:selectBooleanCheckbox id="selectAllRecords" title="select All records"
value="#{managedBean.selectAll}">
<a4j:support event="onclick" reRender="caseDataTable,globalMessages" action="#{managedBean.actionSelectAllRecordss}" onsubmit="showBusyIndicator();" oncomplete="hideBusyIndicator();" />
</i:selectBooleanCheckbox>
</f:facet>
<h:outputLabel for="selectCheckbox" value="selectCheckbox"/>
<i:selectBooleanCheckbox id="selectCheckbox"
title="select a record" value="#{managedBean.selected}" >
<a4j:support event="onclick" reRender="selectAllRecords, globalMessages" action="#{managedBean.actionSelectionChange}"
onsubmit="showBusyIndicator();" oncomplete="hideBusyIndicator();"/>
</i:selectBooleanCheckbox>
</h:column>
Possible solution is to use h:inputHidden component (I think it exists in JSF 1.2. If not, you can find some alternative).
For example
Add h:inputHidden to the page
<h:inputHidden id="selectedCountHidden" value="#{managedBean.deleteSelectedCount}"/>
Each time you click on header check box or any of row check boxes, calculate deleteSelectedCount value and re-render h:inputHidden. Something like
<i:selectBooleanCheckbox id="selectCheckbox" title="select a record" value="#{managedBean.selected}" >
<a4j:support event="onclick" reRender="...,selectedCountHidden,..."
And now, since h:inputHidden will always hold deleteSeletedCount value, you can read its value via java script so there is no need for re-loading the page when you click on commandLink
<i:commandLink id="delete"
onclick="if(!confirm(document.getElementById('form:selectedCountHidden').value))return false;"..../>
Note that if you have form with id defined, you will need to call
document.getElementById('form:selectedCountHidden').value
Otherwise just call
document.getElementById('selectedCountHidden').value
In any case, inspect page source and you will find the exact id of p:inputHidden.
I m automating a web application and need help at one point.
When even i login to the web app. it ask for the user name(manager id) and then that manager id keep on flashing on home page. Manager id changes with different login credentials.
So i need to keep checking that Manager id.
<tr>
<td>
<center>
<table width="100%" align="center">
<tbody>
<tr/>
<!--comments: To link all the screens-->
<tr>
<tr class="heading3" align="center">
<td style="color: green">Manger Id : mngr8499</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
The manager ID as you can see in DOM is displayed as Manager Id: XXXX
So please help me how to locate these "XXXX" only, out of Manager id: XXXX
To my understanding after using getText() you get Manger Id : mngr8499 but you do not want every time Manager ID with the text and only ID. My Implementation would be to first copy the text in the any String variable and then using String.replaceAll() Method i can get the required text.
Below is the implementation of the same, Please let me know in-case if i am understanding the question wrong.
WebElement mngrid = driver.findElement(By.xpath("//tr[#class='heading3']/td"));
String actual_text = mngrid.getText();
actual_text= actual_text.replace("Manger Id :"," ");
System.out.println(actual_text);
From what I understand, I would use the .getText() method to get the 4 characters within the td using:
driver.findElement(By.cssSelector(".heading3 > td")).getText().substring(17);
If your concern is the refreshing of the html, consider using:
WebDriverWait wait = new WebDriverWait(driver, 10)
wait.until(ExpectedConditions.stalenessOf(By.cssSelector(".heading3 > td"));
When the previous value drops out of the DOM, you can use the new selector to get the refreshed value.
Using page-object and watir-webdriver how can I click a link in a table, based on the row text as below:
The table contains 3 rows which have names in the first column, and a corresponding Details link in columns to the right:
DASHBOARD .... Details
EXAMPLE .... Details
and so on.
<div class="basicGridHeader">
<table class="basicGridTable">ALL THE DETAILS:
....soon
</table>
</div>
<div class="basicGridWrapper">
<table class="basicGridTable">
<tbody id="bicFac9" class="ide043">
<tr id="id056">
<td class="bicRowFac10">
<span>
<label class="bicDeco5">
<b>DASHBOARD:</b> ---> Based on this text
</label>
</span>
</td>
<td class="bicRowFac11">
....some element
</td>
<td class="bicRowFac12">
<span>
<a class="bicFacDet5">Details</a> ---> I should able click this link
</span>
</td>
</tr>
</tbody>
</table>
</div>
You could locate a cell that contains the specified text, go to the parent row and then find the details link in that row.
Assuming that there might be other detail links you would want to click, I would define a view_details method that accepts the text of the row you want to locate:
class MyPage
include PageObject
table(:grid){ div_element(:class => 'basicGridWrapper')
.table_element(:class => 'basicGridTable') }
def view_details(label)
grid_element.cell_element(:text => /#{label}/)
.parent
.link_element(:text => 'Details')
.click
end
end
You can then click the link with:
page.view_details('DASHBOARD')
Table elements include the Enumerable module, and I find it very useful in cases like these. http://ruby-doc.org/core-2.0.0/Enumerable.html. You could use the find method to locate and return the row that matches the criteria you are looking for. For example:
class MyPage
include PageObject
table(:grid_table, :class => 'basicGridTable')
def click_link_by_row_text(text_value)
matched_row = locate_row_by_text(text_value)
matched_row.link_element.click
#if you want to make sure you click on the link under the 3rd column you can also do this...
#matched_row[2].link_element.click
end
def locate_row_by_text(text_value)
#find the row that matches the text you are looking for
matched_row = grid_table_element.find { |row| row.text.include? text_value }
fail "Could not locate the row with value #{text_value}" if matched_row.nil?
matched_row
end
end
Here, locate_row_by_text will look for the row that includes the text you are looking for, and will throw an exception if it doesnt find it. Then, once you find the row, you can drill down to the link, and click on it as shown in the click_link_by_row_text method.
Just for posterity, I would like to give an updated answer. It is now possible to traverse through a table using table_element[row_index][column_index].
A little bit more verbose:
row_index could also be the text in a row to be matched - in your case - table_element['DASHBOARD']
Then find the corresponding cell/td element using either the index(zero based) or the header of that column
table_element['DASHBOARD'][2] - Selecting the third element in the
selected row.
Since you do not have a header row (<th> element) you can filter the cell element using the link's class attribute. Something like this
table_element['DASHBOARD'].link_element(:class => 'bicRowFac10').click
So the code would look something like this:
class MyPage
include PageObject
def click_link_by_row_text(text_value)
table_element[text_value].link_element(:class => 'bicRowFac10').click
end
end
Let me know if you need more explanation. Happy to help :)
i have table view like below
<table>
<tr><th>Username</th>
<th>Departemen</th><th>Created By</th><th>Created Date</th><th>Last Update By</th><th>Last Update Date</th><th>Aksi</th></tr>
<?php
$sql = "SELECT TOP 20 * FROM tblMstUser where CompanyDeptID ='11' or CompanyDeptID ='12' order by LoginID";
$tampil = mssql_query($sql) ;
while($r=mssql_fetch_array($tampil)){
echo "<tr><td>$r[LoginID]</td>
<td>$r[LoginName]</td>
<td>$r[CreatedBy]</td>
<td>$r[CreatedDate]</td>
<td>$r[LastUpdatedBy]</td>
<td>$r[LastUpdatedDate]</td>
<td>
<button id='edit' onclick=\"popup_window_show('#sample', { pos : 'tag-right-down', parent : this});\"'><image src='images/Edit.png'/>Edit</button> |
<button id='delete'><image src='images/delete.png'/>Hapus</button>
</td>
</tr>";
$no++;
}
?>
</table>
my purpose when user click "edit" all of field in popup will filled by related data using LoginID as parameter in my sql. i use ms sql 2008 as mya database server.
my problem how i can get a single data from array "$r[LoginID]" using Jquery for each row.
pass LoginID to the function as parameter along with button onClick, eg.
<button id='edit' onclick=\"popup_window_show('#sample', '$r[LoginID]' ,{ pos : 'tag-right-down', parent : this});\"'>
and fire ajax call with jQuery to a page, the page returns data related to LoginID and fill all editable fileds in the edit form.
i have a jsp page where i have a input type file and i m allowing the user to browse files. i have one such input on jsp and the rest i m generating dynamically by javascript.
this is my jsp code:
<div id="labelContainer" style="display:inline">
<table align="center">
<tr>
<td align="left"><input type="text" id="label0" name="label0" size="15"></td>
<td align="center"><input type="file" id="filePath0" name="browsetrainset0"></td>
<td id="addlabel" ><img src="../images/add.png" title="Add Label" onclick="addLabel()"></td>
<td id="removelabel"><img src="../images/remove.png" title="Remove Label" onclick="removeLabel('labelDiv0')"></td>
</tr>
</table>
</div>
and this is my javacsritp code:
function addLabel(){
var text="";
lCount++;
text+=("<table id='labelDiv"+lCount+"' align='center'>");
text+=("<tr>");
text+=("<td align='left' style='display:none'><input type='checkbox' checked='true' name='labelchkbox'/></td>");
text+=("<td align='left' id='label'><input type='text' id='label"+lCount+"' name='label"+lCount+"' size='15'></td>");
text+=("<td align='center'id='filePath' ><input type='file' id='filePath"+lCount+"'name='browsetrainset"+lCoun t+"'></td>");
text+=("<td id='addlabel' ><img src='../images/add.png' title='Add Label' onclick='addLabel()'></td>");
text+=("<td id='removelabel'><img src='../images/remove.png' title='Remove Label' onclick=\"removeLabel('labelDiv"+lCount+"')\"></td>");
text+=("</tr>");
text+=("</table>");
document.getElementById("labelContainer").innerHTM L+=text;
}
but i m not able to retain the value of the file path i browse, on the jsp page once i click the add label and generate another input type file.
I am using IE7. Please tell me how to reatin the value of the browsed files so that i can use them further.
document.getElementById("labelContainer").innerHTM L+=text;
Never, ever use += on innerHTML. It does not do what you think.
Instead, it laboriously serialises the entire contents of the div into HTML, adds your string onto the HTML code, and then parses the whole lot back into objects.
This is slow, and loses all information that cannot be remembered in an HTML string, such as JavaScript references, event handlers (all your onclicks will stop working) and form field contents (including file uploads).
You could add all the new HTML content to a temporary container instead, then move that using DOM methods to the destination:
var div= document.createElement('div');
div.innerHTML= text;
while (div.firstChild)
document.getElementById("labelContainer").appendChild(div.firstChild);
Or you can use DOM methods to create and add the nodes directly. In your case since the new nodes are so similar to the old ones, you could clone them:
function addLabel() {
var container= document.getElementById('labelContainer');
var tables= container.getElementsByTagName('table');
var n= tables.length;
var table= tables[0].cloneNode(true);
table.id= 'labelDiv'+n;
var inputs= table.getElementsByTagName('input');
inputs[0].id=inputs[0].name= 'label'+n;
inputs[1].id=inputs[1].name= 'browsetrainset'+n;
container.appendChild(table);
}
(Care: IE has some issues with changing field names with things like radio buttons though.)
If you want to be accessible without JavaScript (generally a good idea), the usual approach is to include the maximum number of entries you might, and use script to hide the ones that aren't in use.
If I remember correctly, it is not possible to programmatically set the filepsec associated with an <input type="file"> element, as this would constitute a security risk, by allowing malicious scripts to upload files that had not been specifically chosen by the user.
The only way to set the filespec is to browse to it from the web browser.