Questions on UI for ASP.NET AJAX Forum

3 answers

698 views

Hi,

I need some help on date formatting in the Filter box for GridDateTimeColumn. I have 4 date columns in Telerik Grid. Because of space constriants
I don't want to show Datepicker to user, so that the user can enter date he chooses. The problem is when user enter date in
MMM/dd/yyyy format in filter box and press tab, the date is changing to format of MM/dd/yyyy.

i.e., Enter Dec/23/2011 in Posting Date filter field and press tab, then the the box shows 12/23/2011, but user wants to see same date format he entered.

Development code:

1. DataFormatString property is set programatically in Init event

RadGrid grd = (RadGrid)source;

foreach (GridColumn col in grd.Columns)
{
if (col is GridDateTimeColumn)
{
((GridDateTimeColumn)col).DataFormatString = "{0:MMM/dd/yyyy"}";
}
}

2. ItemCreated event is used to set format of date

protected void grdRequests_ItemCreated(object sender, GridItemEventArgs e)
{
if (e.Item is GridFilteringItem)
{
RadDatePicker radPicker = ((GridFilteringItem)e.Item)["Posting Date"].Controls[0] as RadDatePicker;
if(radPicker != null)
{
radPicker.DateInput.DisplayDateFormat = "{0:MMM/dd/yyyy"}";
radPicker.DateInput.DateFormat = "{0:MMM/dd/yyyy"}";
}
}
}

3. UI properties of Posting Date column
<telerik:GridDateTimeColumn HeaderText="Posting Date" HeaderButtonType="TextButton"
ItemStyle-HorizontalAlign="Left" ItemStyle-VerticalAlign="Top" DataField="Posting Date"
UniqueName="Posting Date" SortExpression="Order Date"
AllowFiltering="true" ShowFilterIcon="true" DataType="System.DateTime"
PickerType="None" AutoPostBackOnFilter="false" FilterControlWidth="35px">
<HeaderStyle Width="60px"/>
<ItemStyle Wrap="false" />
</telerik:GridDateTimeColumn>

Note: This issue doesn't arise when I use PickerType="DatePicker". In this case even the filter text box looses focus
the date format is not changing and still dispalys as Dec/23/2011.

Please provide your suggestion

Grid

answered on 08 Feb 2012

3 answers

149 views

Disable ClientEvents OnRowDblClick on Filter Row

How do you disable the ClientsEvents OnRowDblClick on the Filter Row?
I tried;

if (e.Item is GridFilteringItem)

{

RadGrid1.ClientSettings.ClientEvents.OnRowDblClick = "";

}

Grid

answered on 08 Feb 2012

3 answers

118 views

UseStaticHeaders="True"

When I add UseStaticHeaders="True" to my page I lose my first three GridTemplateColumn columns the bound columns are fine but the others just disappear. If I remove it then they show up again.

Thanks,
Bill

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Publications.ascx.vb" Inherits="Publications" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<style type="text/css">

.style1

{

width: 100%;

}

.GridItemDropIndicator_Default

{

border-top:2px solid blue !important;

}

</style>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

//<![CDATA[

function openWin(url) {

var oWnd = $find("<%=RadWindow1.ClientID%>");

var authorNames = document.getElementById('<%=HiddenField1.ClientID%>').value;

oWnd.setUrl(url + "?AuthoringNames=" + authorNames);

oWnd.show();

}

function openWin2(url) {

var oWnd = $find("<%=RadWindow2.ClientID%>");

var authorNames = document.getElementById('<%=HiddenField1.ClientID%>').value;

oWnd.setUrl(url + "?AuthoringNames=" + authorNames + "&ListID=import");

oWnd.show();

}

function OnClientClose(oWnd, args) {

//get the transferred arguments

var mgr = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("rebind");

}

function refreshGrid() {

location.reload()

var mgr = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("rebind");

}

function ShowInsertForm() {

window.radopen("/portals/0/NewGrant.aspx?RecID=0", "UserListDialog");

return false;

}

function onRowDropping(sender, args) {

if (sender.get_id() == "<%=RadGrid1.ClientID %>") {

var node = args.get_destinationHtmlElement();

if (!isChildOf('<%=RadGrid1.ClientID %>', node) && !isChildOf('<%=RadGrid1.ClientID %>', node)) {

args.set_cancel(true);

}

function isChildOf(parentId, element) {

while (element) {

if (element.id && element.id.indexOf(parentId) > -1) {

return true;

}

element = element.parentNode;

}

return false;

}

function RowDblClick(sender, eventArgs) {

var oWnd = $find("<%=RadWindow1.ClientID%>");

var authorNames = document.getElementById('<%=HiddenField1.ClientID%>').value;

oWnd.setUrl(url + "?AuthoringNames=" + authorNames);

oWnd.show();

}

function clicked_chkIsSelected(chkbox, index) {

var grid = $find("<%=RadGrid1.ClientID %>");

var MasterTable = grid.get_masterTableView();

var row = MasterTable.get_dataItems()[index];

var chkMost = chkbox;

var chkMost = row.findElement("IsMostSelected");

chkMost.checked = false;

}

function clicked_chkIsMostSelected(chkbox, index) {

alert(index);

var grid = $find("<%=RadGrid1.ClientID %>");

var MasterTable = grid.get_masterTableView();

var row = MasterTable.get_dataItems()[index];

var chkSelected = chkbox;

var chkSelected = row.findElement("IsSelected");

chkSelected.checked = false;

}

</script>

</telerik:RadCodeBlock>

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="HyperLink1" >

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadWindowManager ID="RadWindowManager1" ShowContentDuringLoad="false" VisibleStatusbar="false" Modal="True"

runat="server" EnableShadow="true">

<Windows>

<telerik:RadWindow ID="RadWindow1" runat="server" Modal="true" Width="750" Height="600" OnClientClose="OnClientClose" Behaviors="Close,Move"

ReloadOnShow="true" >

</telerik:RadWindow>

<telerik:RadWindow ID="RadWindow2" runat="server" Modal="true" Width="550" Height="750" OnClientClose="OnClientClose" Behaviors="Close,Move"

ReloadOnShow="true" >

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime = "1000"

Skin="Default" />

<p>

</p>

<table class="style1">

<tr>

<td>

<asp:Literal ID="LiteralHeader" runat="server"></asp:Literal>

</td>

</tr>

<tr>

<td>

<asp:HiddenField ID="HiddenField1" runat="server" />

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

<telerik:RadGrid ID="RadGrid1" runat="server" Width="100%" Height="675px" OnItemCommand="RadGrid1_ItemCommand"

ShowGroupPanel="False" LoadingPanelID="RadAjaxLoadingPanel1" OnRowDrop="RadGrid1_RowDrop" AllowSorting="true"

GridLines="None" AutoGenerateColumns = "false"

Style="border: 1; outline:none;" BorderStyle="Solid"

BorderWidth="1px">

<MasterTableView AllowMultiColumnSorting= "false" DataKeyNames="RecID" AutoGenerateColumns="false" CommandItemDisplay="Top">

<Columns>

<telerik:GridTemplateColumn >

<ItemTemplate>

<asp:HyperLink ID="HyperLink1" runat="server" Width="15px">Edit</asp:HyperLink>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="MostTemplateColumn" Groupable ="false" ItemStyle-HorizontalAlign = "Center" HeaderText="Most</br>Relevant" HeaderStyle-HorizontalAlign = "Center" >

<ItemTemplate>

<asp:CheckBox id="IsMostSelected" OnCheckedChanged="CheckedChanged" AutoPostBack="True" runat="server" Width="100px" ></asp:CheckBox>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

<ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn" Groupable ="false" ItemStyle-HorizontalAlign = "Center" HeaderText="Additional</br>Recent" HeaderStyle-HorizontalAlign = "Center">

<ItemTemplate>

<asp:CheckBox id="IsSelected" OnCheckedChanged="CheckedChanged" AutoPostBack="True" runat="server" Width="25px" ></asp:CheckBox>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

<ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="RecID" SortExpression="RecID" HeaderText="RecID" Visible="false"

DataField="RecID" ItemStyle-HorizontalAlign = "Center" HeaderStyle-HorizontalAlign = "Center" Groupable="False">

<HeaderStyle Width="5%"></HeaderStyle><ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SortOrder" SortExpression="SortOrder" HeaderText="SortOrder" Visible="false"

DataField="SortOrder" ItemStyle-HorizontalAlign = "Center" HeaderStyle-HorizontalAlign = "Center" Groupable="False">

<HeaderStyle Width="3%"></HeaderStyle><ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="MemberID" SortExpression="MemberID" HeaderText="MemberID" Visible="false"

DataField="MemberID" ItemStyle-HorizontalAlign = "Center" HeaderStyle-HorizontalAlign = "Center" Groupable="False">

<HeaderStyle Width="3%"></HeaderStyle><ItemStyle HorizontalAlign= "Left"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="DateAdded" SortExpression="DateAdded" HeaderText="Date</br>Added" Visible="true" DataFormatString="{0:d}</br>{0:T}"

DataField="DateAdded" ItemStyle-HorizontalAlign = "Center" HeaderStyle-HorizontalAlign = "Center" Groupable="False">

<HeaderStyle Width="10%"></HeaderStyle><ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="DateModified" SortExpression="DateModified" HeaderText="Date</br>Modified" Visible="true" DataFormatString="{0:d}</br>{0:T}"

DataField="DateModified" ItemStyle-HorizontalAlign = "Center"  HeaderStyle-HorizontalAlign = "Center" Groupable="False">

<HeaderStyle Width="15%"></HeaderStyle><ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="PMID" SortExpression="PMID" HeaderText="PMID" Visible="true"

DataField="PMID" ItemStyle-HorizontalAlign = "Center" HeaderStyle-HorizontalAlign = "Center" Groupable="False">

<HeaderStyle Width="10%"></HeaderStyle><ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Year" SortExpression="Year" HeaderText="Year" Visible="true"

DataField="Year" ItemStyle-HorizontalAlign = "Center" HeaderStyle-HorizontalAlign = "Center" Groupable="False">

<HeaderStyle Width="10%"></HeaderStyle><ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Summary" SortExpression="Summary" HeaderText="Publication Summary" Visible="true" AllowSorting="false"

DataField="Summary" ItemStyle-HorizontalAlign = "Left" HeaderStyle-HorizontalAlign = "Center" Groupable="False">

<HeaderStyle Width="65%"></HeaderStyle><ItemStyle HorizontalAlign="Left"></ItemStyle>

</telerik:GridBoundColumn>

</Columns>

<CommandItemTemplate>

<table width="100%">

<tr class="customFont">

<td align="left">

<asp:LinkButton ID="LinkButton2" runat="server" OnClientClick="openWin('/portals/0/NewPub.aspx'); return false;" >

<img style="border:0px;vertical-align:middle;" alt="" src="/portals/0/Images/add-icon.png" />Add new record</asp:LinkButton>

<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="openWin2('/portals/0/NewPubImport.aspx'); return false;" >

<img style="border:0px;vertical-align:middle;" alt="" src="/portals/0/Images/add-icon.png" />Import List</asp:LinkButton>

<td align="left">

<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Horizontal" RepeatColumns="0" AutoPostBack="true" OnSelectedIndexChanged="CheckBoxList_IndexChanged" CellSpacing="5">

</asp:CheckBoxList>

</td>

<td align="right">

<asp:LinkButton ID="LinkButton4" runat="server" OnClientClick="refreshGrid(); return false;" >

<img style="border:0px;vertical-align:middle;" alt="" src="/portals/0/Images/Refresh.png" /> Refresh</asp:LinkButton>

</td>

</tr>

</table>

</CommandItemTemplate>

</MasterTableView>

<ClientSettings AllowRowsDragDrop="False">

<Selecting AllowRowSelect="True" EnableDragToSelectRows="False"/>

<Scrolling AllowScroll="True" SaveScrollPosition="True" ScrollHeight="700px"></Scrolling>

</ClientSettings>

</telerik:RadGrid>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

<td>

</td>

</tr>

</table>

Code behind

Imports System.Data

Imports Telerik.Web.UI

Imports System.Data.SqlClient

Imports System.IO

Partial Class Publications

Inherits System.Web.UI.UserControl

Private dt As DataTable = New DataTable("Members")

Private userInfo As DotNetNuke.Entities.Users.UserInfo = DotNetNuke.Entities.Users.UserController.GetCurrentUserInfo()

Private ConnectionString As String = ConfigurationManager.AppSettings("SiteSqlServer")

Private MemberID As Integer

Private cbIndex As Integer

Private AuthoringNames As String

Protected Sub Load_Data()

Dim myConnection As SqlConnection = Nothing

Dim myReader As SqlDataReader = Nothing

Dim sql As SqlCommand = Nothing

Dim dt As DataTable

myConnection = New SqlConnection(ConnectionString)

sql = New SqlCommand("bio_SelectPublicationRecords", myConnection)

sql.CommandType = CommandType.StoredProcedure

sql.Parameters.AddWithValue("@MemberID", CInt(MemberID))

sql.Parameters.AddWithValue("@Index", CInt(cbIndex))

myConnection.Open()

myReader = sql.ExecuteReader

dt = New System.Data.DataTable

dt.Clear()

If Not myReader Is Nothing Then

dt.Load(myReader, System.Data.LoadOption.OverwriteChanges)

RadGrid1.DataSource = dt

End If

myReader.Read()

If myReader.HasRows Then

LiteralHeader.Text = myReader("LastName").ToString + "<br><b>" + myReader("OrganizationName").ToString + "</b>"

AuthoringNames = myReader("AuthoringNames").ToString

HiddenField1.Value = AuthoringNames

End If

myReader.Close()

myConnection.Close()

' RadGrid1.ClientSettings.Scrolling.UseStaticHeaders = "True"

End Sub

Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemCreated

If TypeOf e.Item Is GridDataItem Then

Dim item As GridDataItem = CType(e.Item, GridDataItem)

Dim editLink As HyperLink = CType(e.Item.FindControl("HyperLink1"), HyperLink)

editLink.Attributes("href") = "#"

editLink.Attributes("onclick") = "return openWin('/portals/0/NewPub.aspx?RecID=" + item.GetDataKeyValue("RecID").ToString() + "&AuthoringNames=" + AuthoringNames + "'); return false;"

Dim chkIsSelected As CheckBox = CType(item.FindControl("IsSelected"), CheckBox)

Dim chkIsMostSelected As CheckBox = CType(item.FindControl("IsMostSelected"), CheckBox)

chkIsSelected.Attributes.Add("onclick", "clicked_chkIsSelected(this ,'" & item.ItemIndex.ToString & "')")

chkIsMostSelected.Attributes.Add("onclick", "clicked_chkIsMostSelected(this,'" + item.ItemIndex.ToString + "')")

ElseIf TypeOf e.Item Is GridCommandItem Then

Dim cb As CheckBoxList = CType(e.Item.FindControl("CheckBoxList1"), CheckBoxList)

Dim cbitem As New ListItem("Show Affiliation")

cb.Items.Add(cbitem)

cbitem = New ListItem("Show Abstract")

cb.Items.Add(cbitem)

If cbIndex = 3 Then

cb.Items(0).Selected = True

cb.Items(1).Selected = True

ElseIf cbIndex = 0 Then

cb.Items(0).Selected = False

cb.Items(1).Selected = False

ElseIf cbIndex = 1 Then

cb.Items(0).Selected = True

cb.Items(1).Selected = False

ElseIf cbIndex = 2 Then

cb.Items(0).Selected = False

cb.Items(1).Selected = True

End If

End Sub

Protected Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource

Load_Data()

End Sub

Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init

If DotNetNuke.Framework.AJAX.IsInstalled Then

DotNetNuke.Framework.AJAX.RegisterScriptManager()

End If

End Sub

Protected Sub CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)

Try

Dim chk As CheckBox = TryCast(sender, CheckBox)

If chk.Checked = True Then

Dim Item As GridDataItem = DirectCast(chk.NamingContainer, GridDataItem)

Dim RecID As Integer = CInt(Item.GetDataKeyValue("RecID"))

If chk.ID = "IsSelected" Then

Update_IsSelected(RecID, chk.Checked, False)

For Each dataItem As GridDataItem In RadGrid1.MasterTableView.Items

If CInt(RecID) = CInt(dataItem.GetDataKeyValue("RecID")) Then

CType(dataItem.FindControl("IsMostSelected"), CheckBox).Checked = False

dataItem.Selected = False

End If

Next

ElseIf chk.ID = "IsMostSelected" Then

Update_IsSelected(RecID, False, chk.Checked)

For Each dataItem As GridDataItem In RadGrid1.MasterTableView.Items

If CInt(RecID) = CInt(dataItem.GetDataKeyValue("RecID")) Then

CType(dataItem.FindControl("IsSelected"), CheckBox).Checked = False

dataItem.Selected = False

End If

Next

End If

Catch ex As Exception

Dim StreamWriter1 As System.IO.StreamWriter = New System.IO.StreamWriter(Server.MapPath(Path.Combine("Files", "_errortmpName.xml")), True)

StreamWriter1.WriteLine("Grants ToggleRowSelection")

StreamWriter1.WriteLine(ex.Message)

StreamWriter1.Close()

End Try

End Sub

Protected Sub Update_IsSelected(ByVal RecID As Integer, ByVal IsSelected As Boolean, IsMostSelected As Boolean)

Try

userInfo = DotNetNuke.Entities.Users.UserController.GetCurrentUserInfo()

Dim myConnection As SqlConnection = Nothing

Dim myReader As SqlDataReader = Nothing

Dim sql As SqlCommand = Nothing

myConnection = New SqlConnection(ConnectionString)

sql = New SqlCommand("bio_IsSelectedPublication", myConnection)

sql.CommandType = CommandType.StoredProcedure

sql.Parameters.AddWithValue("@RecID", RecID)

sql.Parameters.AddWithValue("@MemberID", MemberID)

sql.Parameters.AddWithValue("@IsSelected", IsSelected)

sql.Parameters.AddWithValue("@IsMostSelected", IsMostSelected)

myConnection.Open()

sql.ExecuteNonQuery()

myConnection.Close()

Catch ex As Exception

Finally

End Try

End Sub

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

cbIndex = 0

End If

If Not DotNetNuke.Services.Personalization.Personalization.GetProfile(userInfo.PortalID, "MemberID") Is Nothing Then

MemberID = CInt(CType(DotNetNuke.Services.Personalization.Personalization.GetProfile(userInfo.PortalID, "MemberID"), String))

End If

Dim manager As RadAjaxManager = RadAjaxManager.GetCurrent(Page)

If manager Is Nothing Then

manager = New RadAjaxManager()

manager.ID = "RadAjaxManager1"

Me.Controls.Add(manager)

Me.Page.Items.Add(GetType(RadAjaxManager), manager)

manager.ClientEvents.OnRequestStart = "onRequestStart"

manager.ClientEvents.OnResponseEnd = "onResponseEnd"

RemoveHandler manager.AjaxRequest, AddressOf manager_AjaxRequest

AddHandler manager.AjaxRequest, AddressOf manager_AjaxRequest

manager.AjaxSettings.AddAjaxSetting(manager, RadGrid1)

End If

End Sub

Protected Sub manager_AjaxRequest(ByVal sender As Object, ByVal e As Telerik.Web.UI.AjaxRequestEventArgs)

If e.Argument = "rebind" Then

RadGrid1.MasterTableView.SortExpressions.Clear()

RadGrid1.MasterTableView.GroupByExpressions.Clear()

RadGrid1.Rebind()

End If

End Sub

Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender

Dim manager As RadAjaxManager = RadAjaxManager.GetCurrent(Page)

' Response.Write(manager.ID.ToString)

End Sub

Protected Sub RadGrid1_RowDrop(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridDragDropEventArgs) Handles RadGrid1.RowDrop

Dim StreamWriter1 As System.IO.StreamWriter = New System.IO.StreamWriter(Server.MapPath("_Error.xml"), True)

Try

Dim SortOrder As Double

Dim RecID As Integer = 0

Dim item As GridDataItem = CType(e.DestDataItem, GridDataItem)

SortOrder = CDbl(item("SortOrder").Text)

Dim iRow As Integer = item.ItemIndex

StreamWriter1.WriteLine(iRow.ToString)

If (e.DropPosition = GridItemDropPosition.Above) Then

StreamWriter1.WriteLine("Above")

If iRow = 0 Then

SortOrder = (CDbl(item("SortOrder").Text) - 0.01)

Else

If iRow > 2 Then

item = RadGrid1.MasterTableView.Items(iRow - 1)