Click event to open a calendar component - ajax

I have the following code:
<p:calendar id="initialDate"
styleClass="calendar"
value="#{dashboardMB.initialDate}"
converter="localDateConverter" />
<p:graphicImage style="position: relative;
left: 25px;
top: 4px;
width: 18px;
height: 18px;"
library="img"
name="ui-icon-calendar.png"
width="24"
height="24" />
How it would be possible for an onclick event on this p:graphicImage open the p:calendar component?

if you want to trigger it from an other element:
<p:calendar showOn="both" widgetVar="myWidget" styleClass="mycal">
</p:calendar>
<a onclick="PF('myWidget').jqEl.datetimepicker('show');return false;" href="#">open calendar</a>

Related

Primefaces/JSF/Ajax dblclick event

I want to use the dblclick event on the commandlink component of the PrimeFaces framework.
I have the following error:
javax.faces.view.fletters.TagException: /templateNote.xhtml # 22.60 Event: dblclick is not supported.
Thanks for your help.
Here is my code:
<p:commandLink>
<p:ajax event="dblclick"
listener="#{noteManagerBean.noteSelection(note)}"
oncomplete="PF('widgetNoteDialog').show()"
update="idNoteDialog"/>
<p:graphicImage value="images/PostIt#{note.couleur}.png" style="position: absolute; top: 0; left: 0"/>
you can try this:
<p:commandLink value="click me" ondblclick="noteSelection()" onclick="return false;"/>
<p:remoteCommand name="noteSelection" actionListener="#{testBean.doit}" />
primefaces will generate javascript method "noteSelection", you can call it anytime

Primefaces issue - need to keep the row expanded after an ajax update, but it keeps collapsing

I have a problem with JSF. I try to keep the row expansion open after an update, but it keeps collapsing.
I want to change the panel content in the expanded row and reply button is pressed and also keep the row in the dataTable expanded.
If I can resolve this issue it will be nice. I also used partiallySubmit property to update only some components with ajax, not all.
I provide the code here:
<p:dataTable id="topicDataTable" value="#{index.topics}" var="topic"
rowIndexVar="row" rowKey="#{topic.id}" style="border:none;"
onExpandStart="getExpandedRow()">
<!-- expandedRow="#{true}" -->
<p:column style="border-style:none;">
<p style="padding-left: 50px; font-size: 8px;">
<br />
</p>
<p style="font-size: 18px;">#{topic.title}</p>
<p style="font-size: 8px;">#{topic.displayedCreatedOn}</p>
</p:column>
<p:column style="width:2%; border-style:none;">
<p:rowToggler />
</p:column>
<p:rowExpansion style="border:none;">
<p style="font-size: 16px;">
<br />
</p>
<div style="padding-left: 30px;">
<h:form id="replyForm" style="width:100%">
<p:panel id="repeatPanel">
<p:scrollPanel id="scrollPanel"
style="padding-left:50px;max-height:300px; overflow-y: auto;"
mode="native">
<p:repeat id="repeatComponent" value="#{topic.messages}"
var="reply">
<!-- rowIndexVar="row" -->
<div style="padding-left: 30px; font-size: 14px;">
<p style="font-size: 14px; color: black;">#{reply.createdBy}</p>
<p style="font-size: 8px; line-height: 12px">
#{reply.displayedCreatedOn}</p>
<p style="font-size: 4px;">
<br />
</p>
<p
style="color: rgba(0, 0, 0, .5); white-space: pre-wrap; font-size: 14px;">#{reply.text}</p>
</div>
<p style="padding-left: 50px; font-size: 16px;">
<br />
</p>
</p:repeat>
</p:scrollPanel>
<!-- <h:form id="replyForm" style="width:100%"> -->
<p>
<p:inputTextarea id="replyArea" binding="#{replyInput}"
required="true" requiredMessage="The reply should not be empty"
style="vertical-align: middle; width:99.3%; " />
</p>
<p>
<p:message for="replyArea" style="color:red; font-size: 14px; " />
</p>
<p style="font-size: 8px;">
<br />
</p>
<p>
<p:commandButton value="Reply"
style="font-size: 12px; float:right; vertical-align:right;"
partialSubmit="true" actionListener="#{index.updateMessages}"
process="#form" update="replyForm:repeatPanel"
onstart="saveScrollPos()" oncomplete="getScrollPos()">
<!-- process="#form topicaDataTable:#{row}:repeatPanel"" -->
<f:attribute name="rowId" value="#{row}" />
</p:commandButton>
</p>
<p style="padding-left: 50px; font-size: 8px;">
<br />
</p>
<!-- </h:form> -->
</p:panel>
</h:form>
</div>
<p style="padding-left: 50px; font-size: 16px;">
<br />
</p>
</p:rowExpansion>
</p:dataTable>

How to locate a control within a child control

<asp:ListView ID="lvSharingList" runat="server" OnItemDataBound="lvSharingList_ItemDataBound">
<LayoutTemplate>
<table id="tblList" runat="server" style="width: 100%;">
<tr runat="server" id="itemPlaceHolder" style="border: 1px solid rgb(208, 208, 208);"></tr>
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server" id="tableRow" class="trShareItem" style="border: 1px solid rgb(208, 208, 208);">
<td runat="server" id="tableCell">
<div style="width: 10%; float: left; padding: 5px 5px; margin: 5px 5px; border: 1px solid rgb(208, 208, 208);">
<asp:Label Visible="false" ID="lblGroupId" Text='<%# Eval("GroupId") %>' runat="server"></asp:Label>
<asp:Label Visible="false" ID="lblShareId" Text='<%# Eval("ShareId") %>' runat="server"></asp:Label>
<asp:Image ID="imageForFriend" runat="server" CssClass="fromUsername" AlternateText='<%# Eval("Username") %>' />
<br />
<a href="#" id="aUsername2" runat="server" title='<%# Eval("Username") %>'></a>
</div>
<div style="width: 45%; float: left; padding: 5px 5px; margin: 5px 5px; border: 1px solid rgb(208, 208, 208);">
<asp:Label ID="lblPost" Text='<%# Eval("Post")%>' runat="server" CssClass="sharedPost"></asp:Label><br />
<abbr id="abbrId" class="timeago" title='<%# DataBinder.Eval(Container.DataItem, "PostedDate", "{0:M/d/yyyy hh:mm:ss tt}") %>' runat="server"></abbr>
<asp:Label runat="server" ID="lblImgFlag" Text='<%# Eval("imgFlag") %>' Visible="false"></asp:Label>
<asp:Image ID="imagePhoto" runat="server" CssClass="sharePhotoFile" />
<asp:Literal ID="literal" runat="server" Text='<%# Eval("video") %>'></asp:Literal>
</div>
<div style="width: 38%; float: left; height: 100%;">
<div>
<fieldset>
<legend>Comments</legend>
<asp:UpdatePanel ID="UpdatePanelToResetComment" runat="server">
<ContentTemplate>
<asp:TextBox ID="txtShareComment" runat="server" CssClass="txtShareCommentClass"></asp:TextBox>
<asp:Button ID="btnComment" UseSubmitBehavior="false" runat="server" Text="Comment" CssClass="btn btn-small btn-primary" OnClick="btnComment_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:ListView ID="listViewShareComments" runat="server">
<LayoutTemplate>
<ul id="itemPlaceHolder" runat="server">
</ul>
</LayoutTemplate>
<ItemTemplate>
<asp:Label ID="lblUsernameID" runat="server" Text='<%# Eval("Username") %>' CssClass="txtShareCommentClass"></asp:Label> :
<asp:Label ID="txtShareCommentID" runat="server" Text='<%# Eval("Comment") %>' CssClass="txtShareCommentClass"></asp:Label>
</ItemTemplate>
<ItemSeparatorTemplate>
<br />
</ItemSeparatorTemplate>
</asp:ListView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnComment" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</fieldset>
</div>
</div>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
I have the above example and I would like to know the best approach to locate a control within a child control. In the above example I have a ListView control that has a tableRow followed by tableCell. I have a listview within the tableCell. Why cant I locate the child listview directly from the page control? Why do I have to locate each runat=server control and then find the child control?
The following way works fine! I would like to know is there a better way to locate the child listview control?
HtmlTableCell tCell = (HtmlTableCell)lblShaId.Parent;
UpdatePanel updatePanel1 = (UpdatePanel)tCell.FindControl("UpdatePanel1");
ListView listViewShareComments1 = (ListView)updatePanel1.FindControl("listViewShareComments");
listViewShareComments1.DataSource = userMethods.GetAdminGroupShareComments(Convert.ToInt32(lblShaId.Text));
listViewShareComments1.DataBind();
It's just the way FindControl was implemented in ASP.Net - c.f. Better way to find control in ASP.NET for a more detailed discussion on some of the likely reasons it was implemented this way as well as some techniques on how to search for a control in a recursive manner.

After showing / hiding a JSF element with AJAX how to hide the triggering element?

I followed the intructions given by BalusC in [this answer][1]
[1]: JSF and f:ajax for hiding/showing div and it worked. But I want to hide the element when the command button is pressed and the element with the id="incorrectQuestion" is shown. I did it almost like in the example. I have tried a lot of combinations but I couldn't hide the command button.
<h:panelGroup rendered="#{not answerResultBean.showIncorrectQuestions}">
<div id="loginDiv" style="width: 400px; text-align: left;">
<center>
<f:ajax render="incorrectQuestions">
<br />
<h:commandButton value="#{strings.failedQuestions}"
action="#{answerResultBean.setShowIncorrectQuestions(true)}" />
<br />
<br />
</f:ajax>
</center>
</div>
</h:panelGroup>
<h:panelGroup id="incorrectQuestions">
<h:panelGroup rendered="#{answerResultBean.showIncorrectQuestions}">
<div id="loginDiv" style="width: 400px; text-align: left;">
...
Just put the <h:panelGroup> containing the button inside <h:panelGroup id="incorrectQuestions"> as well. This way it will also be updated on ajax request and the rendered condition would cause it to be hidden.
By the way, try to keep your code DRY. You've there quite some code duplication.
<h:panelGroup layout="block" id="loginDiv" style="width: 400px; text-align: left;">
<h:commandButton value="#{strings.failedQuestions}"
action="#{answerResultBean.setShowIncorrectQuestions(true)}"
style="text-align: center; margin: 10px;"
rendered="#{not answerResultBean.showIncorrectQuestions}">
<f:ajax render="loginDiv">
</h:commandButton>
<h:panelGroup rendered="#{answerResultBean.showIncorrectQuestions}">
...
</h:panelGroup>
</h:panelGroup>
Note that a <h:panelGroup layout="block"> generates a <div>. This way there's no need for a <h:panelGroup><div>.

Requesting guidance on slickgrid implementation for ASP.Net 3.5 web forms app

I'm looking for some guidance on how to implement the slickgrid in an ASP.net web application. The application queries a sql server 2005 database and currently uses gridviews to display the data. My goal is to eliminate the use of gridviews and replace them with the slickgrid. My code is below and I'm not sure how or where to start.
In my Dashboard.aspx.cs file (below) you will see that I bind my data to gridviews. How do I replace the databinding to utilize the slickgrid?
Thanks in advance for any help.
Dashboard.aspx page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 100%; table-layout: auto; border-top-style: none; border-right-style: none; border-left-style: none; border-collapse: collapse; border-bottom-style: none;">
<tr>
<td rowspan="8" align="center" valign="top">
<asp:Button ID="btnRefresh" runat="server" OnClick="btnRefresh_Click" Text="Refresh"
Width="100px" />
<br />
<asp:Button ID="Button2" runat="server" PostBackUrl="~/InterfaceListing.aspx" Text="Interface List"
Width="100px" />
</td>
<td style="color: #990000; font-family: Tahoma; height: 1px; text-align: left; width: 124px;">
</td>
<td style="width: 19px; height: 1px">
</td>
<td style="height: 1px; width: 216px;">
</td>
<td style="width: 20%; height: 19px">
</td>
</tr>
<tr>
<td style="color: #990000; font-family: Tahoma; height: 1px; text-align: left; width: 124px;">
<span style="font-size: 11pt; vertical-align: top;">
<asp:Label ID="Label2" runat="server" Text="Last 10 Jobs Executed" Width="307px"></asp:Label></span></td>
<td style="width: 19px; height: 1px">
</td>
<td style="height: 1px; width: 216px;">
<span style="font-size: 11pt; color: #990000; font-family: Tahoma">
<asp:Label ID="Label3" runat="server" Text="Interface Summary" Width="185px"></asp:Label></span></td>
<td style="width: 20%; height: 19px">
</td>
</tr>
<tr>
<td style="width: 124px; text-align: left; vertical-align: top;">
<asp:GridView ID="gvLast10" runat="server" AutoGenerateColumns="False" CellPadding="4"
Font-Names="Tahoma" Font-Size="8pt" ForeColor="#333333"
GridLines="None" Width="800px" >
<RowStyle BackColor="#FFFBD6" BorderStyle="Solid" BorderWidth="1px" ForeColor="#333333" />
<Columns>
<asp:BoundField DataField="InterfaceName" HeaderText="Name" SortExpression="InterfaceName">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="TotalTransactionCount" HeaderText="Transaction Count" SortExpression="TotalTransactionCount">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="ErrorsOccured" HeaderText="Status" SortExpression="ErrorsOccured">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="RunTime" HeaderText="Duration" ReadOnly="True" SortExpression="RunTime">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="Started" HeaderText="Started" SortExpression="DateBegan">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
</Columns>
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<HeaderStyle BackColor="#990000" BorderColor="#990000" BorderStyle="Solid" BorderWidth="1px"
Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
</td>
<td style="vertical-align: top; width: 19px; text-align: left">
</td>
<td style="width: 216px; vertical-align: top; text-align: left;">
<asp:GridView ID="gvPackageCount" runat="server" AutoGenerateColumns="False" CellPadding="4"
ForeColor="#333333" GridLines="None" Width="195px" Font-Names="Tahoma" Font-Size="8pt">
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" BorderStyle="Solid" BorderWidth="1px" />
<Columns>
<asp:BoundField DataField="Status" HeaderText="Status" ReadOnly="True" SortExpression="Status"
Visible="False" />
<asp:BoundField DataField="Description" HeaderText="Description" ReadOnly="True"
SortExpression="Description">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="Count" HeaderText="Count" ReadOnly="True"
SortExpression="Count">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
</Columns>
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" BorderColor="#990000" BorderStyle="Solid" BorderWidth="1px" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
</td>
<td style="width: 20%; height: 19px">
</td>
</tr>
<tr>
<td style="width: 124px; color: #990000; background-color: white; height: 19px;">
<span style="font-size: 11pt; font-family: Tahoma">
<br />
<asp:Label ID="Label1" runat="server" Text="Next 10 Jobs Scheduled" Width="236px"></asp:Label></span></td>
<td style="width: 19px; height: 19px">
</td>
<td style="width: 216px; height: 19px;">
<span style="font-size: 11pt; font-family: Tahoma"></span>
</td>
<td style="width: 20%; height: 19px">
</td>
</tr>
<tr>
<td style="width: 124px; vertical-align: top; height: 147px;">
<asp:GridView ID="gvNext10" runat="server" AutoGenerateColumns="False" CellPadding="4"
Font-Names="Tahoma" Font-Size="8pt" ForeColor="#333333"
GridLines="None" Width="800px">
<RowStyle BackColor="#FFFBD6" BorderStyle="Solid" BorderWidth="1px" ForeColor="#333333" />
<Columns>
<asp:BoundField DataField="Interfacename" HeaderText="Name" SortExpression="Interfacename">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="Next Run" HeaderText="Next Run" ReadOnly="True" SortExpression="Next Run">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
</Columns>
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<HeaderStyle BackColor="#990000" BorderColor="#990000" BorderWidth="1px" Font-Bold="True"
ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
</td>
<td style="width: 19px; height: 147px">
</td>
<td style="width: 216px; height: 147px; vertical-align: bottom; text-align: center;">
</td>
<td style="width: 20%; height: 19px">
</td>
</tr>
<tr>
<td style="vertical-align: top; width: 124px">
</td>
<td style="width: 19px">
</td>
<td style="width: 216px">
</td>
<td style="width: 20%; height: 19px">
</td>
</tr>
<tr>
<td style="color: #990000; font-family: Tahoma; height: 1px; text-align: left; width: 124px;">
<span style="font-size: 11pt; vertical-align: top;">
<asp:Label ID="Label4" runat="server" Text="Jobs In Process"
Width="307px"></asp:Label></span></td>
<td style="width: 19px; height: 1px">
</td>
<td style="height: 1px; width: 216px;">
</td>
<td style="width: 20%; height: 19px">
</td>
</tr>
<tr>
<td style="color: #990000; font-family: Tahoma; height: 1px; text-align: left; width: 124px;">
<asp:GridView ID="gvInProcess" runat="server" AutoGenerateColumns="False" CellPadding="4"
Font-Names="Tahoma" Font-Size="8pt" ForeColor="#333333"
GridLines="None" Width="800px" >
<RowStyle BackColor="#FFFBD6" BorderStyle="Solid" BorderWidth="1px" ForeColor="#333333" />
<Columns>
<asp:BoundField DataField="InterfaceName" HeaderText="Name" SortExpression="InterfaceName">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="Started" HeaderText="Started" SortExpression="DateBegan">
<HeaderStyle HorizontalAlign="Left" />
<ItemStyle HorizontalAlign="Left" />
</asp:BoundField>
<asp:BoundField DataField="RunTime" HeaderText="Duration"
SortExpression="RunTime" ReadOnly="True">
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
</Columns>
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<HeaderStyle BackColor="#990000" BorderColor="#990000" BorderStyle="Solid" BorderWidth="1px"
Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
</td>
<td style="width: 19px; height: 1px">
</td>
<td style="height: 1px; width: 216px;">
</td>
<td style="width: 20%; height: 19px">
</td>
</tr>
</table>
<br />
<br />
</div>
</form>
</body>
</html>
Dashboard.aspx.cs
using System;
using System.Data;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace IntegrationSupport
{
public partial class Dashboard : System.Web.UI.Page
{
ClassData cd = new ClassData();
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt1 = cd.Dashboard("Summary");
gvPackageCount.DataSource = dt1;
gvPackageCount.DataBind();
DataTable dt2 = cd.Dashboard("Last10");
gvLast10.DataSource = dt2;
gvLast10.DataBind();
DataTable dt3 = cd.Dashboard("Next10");
gvNext10.DataSource = dt3;
gvNext10.DataBind();
DataTable dt4 = cd.Dashboard("InProcess");
gvInProcess.DataSource = dt4;
gvInProcess.DataBind();
}
protected void btnRefresh_Click(object sender, EventArgs e)
{
Response.Redirect("~/Dashboard.aspx");
}
}
}
ClassData.cs:
public DataTable Dashboard(string Section)
{
//Get Dashboard Sections...
string sStoredProc = string.Empty;
switch (Section)
{
case "Summary":
sStoredProc = "InterfaceListing_DashboardDataset";
break;
case "Last10":
sStoredProc = "InterfaceListing_Dashboard_6Last10Jobs";
break;
case "Next10":
sStoredProc = "InterfaceListing_Dashboard_7Next10Jobs";
break;
case "InProcess":
sStoredProc = "InterfaceListing_Dashboard_JobsInProcess";
break;
default:
sStoredProc = "";
break;
}
SqlCommand cmd = new SqlCommand();
Open();
cmd.Connection = con;
cmd.CommandText = sStoredProc;
cmd.CommandType = CommandType.StoredProcedure;
Ada = new SqlDataAdapter(cmd);
DataTable dtInterface = new DataTable();
Ada.Fill(dtInterface);
return dtInterface;
}
I'm looking for some guidance on how to implement the slickgrid in an ASP.net web >application. The application queries a sql server 2005 database and currently uses gridviews >to display the data. My goal is to eliminate the use of gridviews and replace them with the >slickgrid. My code is below and I'm not sure how or where to start.
this will help u:
http://www.codeproject.com/Articles/183301/Real-Time-Stock-Quotes-Stock-Alerts-Indicators-Usi

Resources