I've got a WebDataGrid, and I've set up an editing template for it. In the editing template, I want to put a calendar next to date fields. I've used this before in other projects that do NOT have any Infragistics controls, so I know the calendar works. If anyone could help, I'd appreciate it.
Here's a scaled down version of what I have:
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="True" CodeBehind="frmViewLoadHistory.aspx.cs" Inherits="PBR.ViewLoadHistory" %>
<%@ Register Assembly="Infragistics4.Web.v12.2, Version=12.2.20122.1007, Culture=neutral, PublicKeyToken=**I think I should hide this... **" Namespace="Infragistics.Web.UI.GridControls" TagPrefix="ig" %><asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> <link rel="stylesheet" href="../Styles/ui.all.css" type="text/css" media="screen" /> <script type="text/javascript" src="../Scripts/jquery.min.js"></script> <script type="text/javascript" src="../Scripts/jquery-ui.min.js"></script><%-- This is the script for the calendar. It requires the above jquery scripts and css file, as well as the image referenced below --%> <script type="text/javascript"> $(function () { $('input').filter('.datepicker').datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: '../Images/Calendar2.png', changeMonth: true, changeYear: true }); }); </script>
<style type="text/css"> .style1 { margin-right: 308px; } </style></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Export" Width="72px" /> <br /> <div id="divGrid" style='position:absolute; width:920px; height:400px; overflow:auto'> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ig:WebDataGrid ID="DataGrid_Roster" runat="server" Height="347px" Width="920px" AutoGenerateColumns="False" CssClass="style1" DataSourceID="tblRoster" DefaultColumnWidth="42px"> <Columns> <ig:BoundDataField DataFieldName="EE_Name" Key="EE_Name" Width="160px"> <Header Text="EE_Name" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="EEID" Key="EEID" Width="60px"> <Header Text="EEID" /> </ig:BoundDataField> <ig:BoundDataField DataFieldName="Mgr_Name" Key="Mgr_Name" Width="160px"> <Header Text="Mgr Name" /> </ig:BoundDataField> </Columns> <EditorProviders> <ig:TextBoxProvider ID="DataGrid_Roster_TextBoxProvider1"> <EditorControl ClientIDMode="Predictable"></EditorControl> </ig:TextBoxProvider> <ig:DropDownProvider ID="DataGrid_Roster_DropDownProvider1"> <EditorControl ClientIDMode="Predictable" DropDownContainerMaxHeight="200px" EnableAnimations="False" EnableDropDownAsChild="False"> </EditorControl> </ig:DropDownProvider> <ig:BoundDataField DataFieldName="Time_Stamp" Key="Time_Stamp" Width="110px"> <Header Text="Time Stamp" /> </ig:BoundDataField> </EditorProviders> <Behaviors> <ig:ColumnFixing> </ig:ColumnFixing> <ig:Paging PageSize="10"> </ig:Paging> <ig:EditingCore> <Behaviors> <ig:RowEditingTemplate CancelButton="buttonCancel" OKButton="buttonOK"> <ClientBindings> <ig:RowEditingClientBinding ColumnKey="EE_Name" ControlID="control_EE_Name" GetValueJavaScript="$get({ClientID}).value" SetValueJavaScript="$get({ClientID}).value={value} == null ? '' : {value}" /> <ig:RowEditingClientBinding ColumnKey="EEID" ControlID="control_EEID" GetValueJavaScript="$get({ClientID}).value" SetValueJavaScript="$get({ClientID}).value={value} == null ? '' : {value}" /> <ig:RowEditingClientBinding ColumnKey="Mgr_Name" ControlID="control_Mgr_Name" GetValueJavaScript="$get({ClientID}).value" SetValueJavaScript="$get({ClientID}).value={value} == null ? '' : {value}" /> <ig:RowEditingClientBinding ColumnKey="Time_Stamp" ControlID="control_Time_Stamp" GetValueJavaScript="$get({ClientID}).value" SetValueJavaScript="$get({ClientID}).value={value} == null ? '' : {value}" /> </ClientBindings> <Template> <div style="background-color:white;border:1px solid black;width:800"> EE_Name: <asp:TextBox ID="control_EE_Name" runat="server" Width="190px"></asp:TextBox> EEID: <asp:TextBox ID="control_EEID" runat="server" Width="60px"></asp:TextBox> Mgr_Name: <asp:TextBox ID="control_Mgr_Name" runat="server" Width="190px"></asp:TextBox> Time_Stamp: <input type="text" id="control_Time_Stamp" class="datepicker" name="control_Time_Stamp" style="height: 14px; width: 70px" /> <br/> <asp:Button ID="buttonOK" runat="server" OnClientClick="return" Text="OK" UseSubmitBehavior="False" /> <asp:Button ID="buttonCancel" runat="server" CausesValidation="False" OnClientClick="return" Text="Cancel" UseSubmitBehavior="False" /> </div> </Template> </ig:RowEditingTemplate> </Behaviors> </ig:EditingCore> <ig:RowSelectors> </ig:RowSelectors> <ig:Filtering> </ig:Filtering> <ig:Sorting> </ig:Sorting> </Behaviors> </ig:WebDataGrid>
<asp:SqlDataSource ID="tblRoster" runat="server" ConnectionString="Data Source=CIWSQLXP0017;Initial Catalog=SOBI_TOOL_TRACKING;Integrated Security=True" ProviderName="System.Data.SqlClient" SelectCommand="SELECT TOP 20 [EE Name] AS EE_Name, [EEID], [Mgr Name] AS Mgr_Name, [Adjustment trained] AS Adjustment_trained, [Appeal trained] AS Appeal_trained, [ARGUS], [Auto Reversal] AS Auto_Reversal, [CBH D G] AS CBH_D_G, [CBH Proclaim] AS CBH_Proclaim, [CCE Tool Access] AS CCE_Tool_Access, [CCP], [CCR], [Checks Rework] AS Checks_Rework, [Chiro Occ Phys Home] AS Chiro_Occ_Phys_Home, [RA], [RDE], [Puerto Rico] AS Puerto_Rico, [Speech Vision Therapy] AS Speech_Vision_Therapy, [Stop Loss Calc] AS Stop_Loss_Calc, [Surg Anes] AS Surg_Anes, [Transplant], [Non Standard Contracts] AS Non_Standard_Contracts, [One View] AS One_View, [Pharmacy], [PMHS], [Post Pricing] AS Post_Pricing, [Pre D] AS Pre_D, [Proclaim], [Lifesource], [Maternity], [Medicare Hospital] AS Medicare_Hospital, [Medicaid], [Medicare Physician] AS Medicare_Physician, [MSP], [Negative Balance] AS Negative_Balance, [Foreign Claim] AS Foreign_Claim, [Hospital Standard] AS Hospital_Standard, [iCare], [ILWU], [iSave], [iView], [iTrack], [Correspondence trained] AS Correspondence_trained, [Defined Care] AS Defined_Care, [Dental Dentacom] AS Dental_Dentacom, [Dental Webster] AS Dental_Webster, [Dialysis], [ECPP], [Virgin Islands] AS Virgin_Islands, [Facets], [cFunds], [SAR], [Alliance], [MERPS], [Proclaim Green Screens] AS Proclaim_Green_Screens, [tblclaimRoster_Status], [Skill 1] AS Skill_1, [Skill 2] AS Skill_2, [Medicom], [CIGNA Claims] AS CIGNA_Claims, [Effective date in current role] AS Effective_date_in_current_role, [Time Stamp] AS Time_Stamp, [MSDRG], [ALI], [Call Trained] AS Call_Trained, [Dedicated Acct Taft Hartley] AS Dedicated_Acct_Taft_Hartley, [Dedicated Acct SOI] AS Dedicated_Acct_SOI, [SANP], [Dedicated Acct J J] AS Dedicated_Acct_J_J, [Xprtr], [VOB], [Hospital Non Standard] AS Hospital_Non_Standard FROM [tblclaimRoster]"> </asp:SqlDataSource>
</div> <asp:Content>
I forgot to add this part to the <columns> section when I was scaling it down for this example:
<ig:BoundDataField DataFieldName="Time_Stamp" Key="Time_Stamp" Width="110px"><Header Text="Time Stamp" /></ig:BoundDataField>
Hi John,
This is an initial update that I have received your inquiry and will begin looking into this for you. I will follow-up on or before Friday with an update on the status of my research.
Thanks,
I put together a sample you can reference and have attached the sample to this thread for your reference. As you review the sample, I want to highlight the following:
handle the RowEditing_TemplateOpening event
This needs to be done to find the datepicker at the point the template is opening and use 'that' jquery datepicker:
function WebDataGrid1_RowEditing_TemplateOpening(sender, eventArgs)
{ var datePicker = $("#control_vintageYear").datepicker(); $('#control_vintageYear').datepicker("setDate", d);}
Now, at this stage the jQuery datepicker is being recognized and when clicking the calendar you will find that it is there.
There is a next step that needs to get handled, which is not reflected in this sample. It will require some custome coding with the jQuery datepicker. That is, you need to now take the value of the datepicker, and set it in the grid cell. With the server side controls the row edit template SetValueJavaScript client bindings do this for you. However here since we are now pointing to the jQuery datepicker, you don't get this for free. I believe because the control's ClientID has since changed. So, you will need to set the value (for the grid) in the datepicker controls value changed event. For example, with the Infragistics jQuery control (igDatePicker) it would be the ValueChanged event and you would pass the value back to the grid.
John, my example is attached for your reference. Please note that I omitted the style sheets due to file size constraints. For proper styling of the grid you will need to bring the ig_res folder back into the project. You can do this by opening the project in the designer and select 'OK' when prompted to accept the sytle sheets.
Please let me know if you need any additional assistance regarding this matter.
Please let me know if you need any aditional assistance regarding this inquiry.
Thanks!
As for SetValueJavaScript method, I am not sure how to set this value to empty string instead of current date. In Chrome Developer Tool, I placed a breakpoint on the default value that was current date as always when I click on a new row button.
Do you have any idea how to set this value to empty string?