//tried this in preRender and itemDataBound methods
GridFilteringItem filterItem = (GridFilteringItem)e.Item;
RadComboBox combo = (RadComboBox)filterItem.FindControl("PROB_DATE");
combo.SelectedIndex = 1;
<telerik:GridBoundColumn ForceExtractValue="Always" DataField="PROB_DATE" ReadOnly="True" DataType="System.DateTime"
FilterControlAltText="Filter PROB_DATE column" HeaderText="PROB DATE RESOLVED"
SortExpression="PROB_DATE" UniqueName="PROB_DATE" DataFormatString="{0:MM/dd/yyyy}">
<FilterTemplate>
<telerik:RadComboBox ID="RadComboBoxPROB_DATE" DataSourceID="SqlDataSourceMyDataSource"
DataTextField="PROB_DATE" DataValueField="PROB_DATE" Height="200px" AppendDataBoundItems="true"
SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("PROB_DATE").CurrentFilterValue %>'
runat="server" OnClientSelectedIndexChanged="PROB_DATEIndexChanged" Width="140px">
<Items>
<telerik:RadComboBoxItem Text="ALL" />
</Items>
</telerik:RadComboBox>
<telerik:RadScriptBlock ID="RadScriptBlockPROB_DATE" runat="server">
<script type="text/javascript">
function PROB_DATEIndexChanged(sender, args) {
var value2 = args.get_item().get_value();
if (value2 == 'Show Only Null') {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
tableView.filter("PROB_DATE", args.get_item().get_text(), "IsNull");
}
else {
var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");
tableView.filter("PROB_DATE", args.get_item().get_value(), "NoFilter");
}
//}
</script>
</telerik:RadScriptBlock>
</FilterTemplate>
</telerik:GridBoundColumn>
Hi Experts,
I am building a page divided in two sections. The first section is a table of SellingSubjects and the second a form where the details of the selected SellingSubject are displayed (<div class="divDetails" style="display: none">).
In order to enhance the user experience I wrapped each section in RadPane and use some client script to trigger the upload of the appropriate details when a line in a table is selected.
When the page is first loaded no line in the table is selected and I do not want to show an empty form. Therefore the details are hidden with “display: none”.
With this
configuration I noticed that the RadAjaxLoadingPanel animation is not shown at first
click on the table line in order to show the SellingSubject details. After some
investigation I found out that the cause is in the “display: none” of the
details. Do you have any suggestion to overcome this problem without changing the
main functionality?
My site is a DNN 6.00 module and I am using the embedded Telerik Ajax Controlls.
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SellingSubjectsView.ascx.cs"
Inherits="Vits.Modules.VipCrm.Controls.Admin.SellingSubjectsView" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="dnn" TagName="Label" Src="~/controls/LabelControl.ascx" %>
<%@ Register Src="~/DesktopModules/VipCrm/Controls/Admin/SellingSubjectsBasic.ascx"
TagName="SellingSubjectsBasic" TagPrefix="vits" %>
<
telerik:RadAjaxLoadingPanel
ID
=
"ralPanel"
runat
=
"server"
BackgroundPosition
=
"Center"
Transparency
=
"60"
Skin
=
"Windows7"
>
</
telerik:RadAjaxLoadingPanel
>
<
asp:Button
runat
=
"server"
Text
=
"abc"
ID
=
"btnSaveDetails"
CausesValidation
=
"false"
CssClass
=
"AllTrigger"
OnClick
=
"btnSave_Click"
Style
=
"display: none;"
/>
<
telerik:RadSplitter
ID
=
"RadSplitter"
runat
=
"server"
Width
=
"100%"
Height
=
"855px"
CssClass
=
"MainSplitter"
>
<
telerik:RadPane
ID
=
"rpTable"
runat
=
"server"
>
<
telerik:RadAjaxPanel
ID
=
"raxTable"
runat
=
"server"
LoadingPanelID
=
"ralPanel"
ClientEvents-OnRequestStart
=
"HideDetails"
>
<
asp:Panel
ID
=
"panTable"
runat
=
"server"
>
<
telerik:RadGrid
ID
=
"rgvMain"
runat
=
"server"
OnInit
=
"InitRagGrid"
DataSourceID
=
"gridData"
Height
=
"850px"
OnItemCreated
=
"rgvMain_ItemCreated"
CssClass
=
"MainGrid"
OnItemCommand
=
"rgvMain_ItemCommand"
AllowPaging
=
"True"
PageSize
=
"10"
>
<
MasterTableView
DataKeyNames
=
"Id"
AutoGenerateColumns
=
"false"
AllowFilteringByColumn
=
"True"
AllowSorting
=
"True"
TableLayout
=
"Auto"
CssClass
=
"fSelectable"
OverrideDataSourceControlSorting
=
"true"
CommandItemDisplay
=
"Top"
>
<
CommandItemTemplate
>
<
telerik:RadButton
ID
=
"btnAdd"
runat
=
"server"
AutoPostBack
=
"false"
OnClientClicked
=
"NewSellingSubject"
>
<
Icon
PrimaryIconUrl
=
"~/images/Add.gif"
PrimaryIconLeft
=
"5px"
/>
</
telerik:RadButton
>
<
telerik:RadButton
ID
=
"btnDelete"
runat
=
"server"
CommandName
=
"DeleteCMD"
OnClientClicking
=
"AlertDelete"
>
<
Icon
PrimaryIconUrl
=
"~/images/delete.gif"
PrimaryIconLeft
=
"5px"
/>
</
telerik:RadButton
>
</
CommandItemTemplate
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"Id"
DataType
=
"System.Int32"
ItemStyle-CssClass
=
"fId"
SortExpression
=
"Id"
/>
<
telerik:GridBoundColumn
DataField
=
"Name"
HeaderText
=
"Name"
ItemStyle-CssClass
=
"fName"
SortExpression
=
"Name"
DataType
=
"System.String"
UniqueName
=
"Name"
CurrentFilterFunction
=
"StartsWith"
AutoPostBackOnFilter
=
"true"
FilterDelay
=
"801"
FilterControlWidth
=
"100%"
ShowFilterIcon
=
"false"
/>
</
Columns
>
<
SortExpressions
>
<
telerik:GridSortExpression
FieldName
=
"Id"
SortOrder
=
"Descending"
/>
</
SortExpressions
>
</
MasterTableView
>
<
FilterMenu
EnableImageSprites
=
"False"
/>
<
GroupingSettings
CaseSensitive
=
"false"
/>
<
ClientSettings
AllowRowsDragDrop
=
"True"
AllowColumnsReorder
=
"true"
ReorderColumnsOnClient
=
"true"
>
<
Resizing
AllowColumnResize
=
"true"
/>
<
Selecting
AllowRowSelect
=
"True"
EnableDragToSelectRows
=
"false"
/>
<
Scrolling
AllowScroll
=
"true"
UseStaticHeaders
=
"true"
/>
</
ClientSettings
>
<
PagerStyle
Mode
=
"NextPrevAndNumeric"
AlwaysVisible
=
"true"
></
PagerStyle
>
</
telerik:RadGrid
>
<
asp:ObjectDataSource
ID
=
"gridData"
runat
=
"server"
TypeName
=
"Vits.Modules.VipCrm.Dal.Admin.DaoSellingSubjects"
SelectMethod
=
"GetAll"
/>
</
asp:Panel
>
</
telerik:RadAjaxPanel
>
</
telerik:RadPane
>
<
telerik:RadSplitBar
ID
=
"spliteBar"
runat
=
"server"
CollapseMode
=
"Both"
/>
<
telerik:RadPane
ID
=
"rpDetails"
runat
=
"server"
>
<
telerik:RadAjaxPanel
ID
=
"raxDetails"
runat
=
"server"
LoadingPanelID
=
"ralPanel"
ClientEvents-OnResponseEnd
=
"ShowDetails"
>
<
vits:SellingSubjectsBasic
ID
=
"sellingSubjectsBasic"
runat
=
"server"
Visible
=
"true"
/>
</
telerik:RadAjaxPanel
>
</
telerik:RadPane
>
</
telerik:RadSplitter
>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SellingSubjectsBasic.ascx.cs"
Inherits="Vits.Modules.VipCrm.Controls.Admin.SellingSubjectsBasic" %>
<%@ Register TagPrefix="dnn" TagName="Label" Src="~/controls/LabelControl.ascx" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<
asp:Panel
ID
=
"panDetails"
runat
=
"server"
OnLoad
=
"panDetails_Load"
>
<
div
class
=
"divDetails"
style
=
"display: none"
>
<
a
href
=
"#"
class
=
"selected"
onclick="__doPostBack('<%= panDetails.ClientID %>', '');">
</
a
>
<
asp:HiddenField
ID
=
"hdCmd"
runat
=
"server"
/>
<
asp:HiddenField
ID
=
"hdId"
runat
=
"server"
/>
<
div
class
=
"divDetailsHead NoMenu fDetHead"
>
<
asp:Label
ID
=
"lblItemName"
runat
=
"server"
/>
</
div
>
<
div
class
=
"fEditCommand"
>
<
telerik:RadButton
ID
=
"btnEdit"
runat
=
"server"
AutoPostBack
=
"false"
OnClientClicked
=
"EditDetails"
>
<
Icon
PrimaryIconUrl
=
"~/images/edit_pen.gif"
PrimaryIconLeft
=
"5px"
/>
</
telerik:RadButton
>
</
div
>
<
table
class
=
"VitsDetails"
>
<
tr
>
<
td
>
<
dnn:label
id
=
"lblName"
runat
=
"server"
controlname
=
"lblName"
/>
</
td
>
<
td
>
<
asp:TextBox
ID
=
"txtName"
CssClass
=
"NormalTextBox fEdit fName NotAllowed"
runat
=
"server"
/>
<
asp:RequiredFieldValidator
ID
=
"rfvName"
ControlToValidate
=
"txtName"
Display
=
"Dynamic"
CssClass
=
"dnnFormMessage dnnFormError"
runat
=
"server"
ErrorMessage
=
"*"
></
asp:RequiredFieldValidator
>
</
td
>
</
tr
>
<
tr
>
<
td
>
<
dnn:label
id
=
"lblDescription"
runat
=
"server"
controlname
=
"lblDescription"
/>
</
td
>
<
td
>
<
asp:TextBox
ID
=
"txtDescription"
CssClass
=
"NormalTextBox fEdit Wider NotAllowed"
runat
=
"server"
TextMode
=
"MultiLine"
/>
</
td
>
</
tr
>
</
table
>
<
table
class
=
"fCommand Commands Hidden"
>
<
tr
>
<
td
>
<
telerik:RadButton
ID
=
"btnSave"
runat
=
"server"
AutoPostBack
=
"false"
OnClientClicked
=
"SubmitAll"
>
<
Icon
PrimaryIconUrl
=
"~/images/save.gif"
PrimaryIconLeft
=
"5px"
/>
</
telerik:RadButton
>
</
td
>
<
td
>
<
telerik:RadButton
ID
=
"btnCancel"
runat
=
"server"
CausesValidation
=
"false"
OnClick
=
"btnCancel_Click"
>
<
Icon
PrimaryIconUrl
=
"~/images/cancel.gif"
PrimaryIconLeft
=
"5px"
/>
</
telerik:RadButton
>
</
td
>
</
tr
>
</
table
>
</
div
>
</
asp:Panel
>
Thank you,
Kristijan
using
System;
using
System.Linq;
using
System.Runtime.Serialization;
using
System.Web.Services;
using
System.ServiceModel;
using
System.ServiceModel.Activation;
using
System.ServiceModel.Web;
using
System.Collections.Generic;
using
System.Collections;
using
Telerik.Web.UI;
using
System.Reflection;
namespace
DC
{
[DataContract]
public
class
POCN_hdr
{
[DataMember]
public
int
MfgAssocDocID {
get
;
set
; }
[DataMember]
public
int
? MfgOrderID {
get
;
set
; }
[DataMember]
public
string
ponumber {
get
;
set
; }
[DataMember]
public
string
vendname {
get
;
set
; }
[DataMember]
public
string
vendorid {
get
;
set
; }
[DataMember]
public
string
country {
get
;
set
; }
[DataMember]
public
string
vndclsid {
get
;
set
; }
[DataMember]
public
DateTime? docdate {
get
;
set
; }
[DataMember]
public
string
hold {
get
;
set
; }
[DataMember]
public
string
shipmthd {
get
;
set
; }
}
[DataContract]
public
class
POCN_det
{
[DataMember]
public
string
ponumber {
get
;
set
; }
[DataMember]
public
string
itemnmbr {
get
;
set
; }
[DataMember]
public
decimal
? qtyorder {
get
;
set
; }
[DataMember]
public
string
itemdesc {
get
;
set
; }
[DataMember]
public
string
postatus {
get
;
set
; }
[DataMember]
public
string
shipmthd {
get
;
set
; }
[DataMember]
public
DateTime? released_date {
get
;
set
; }
[DataMember]
public
DateTime? prmdate {
get
;
set
; }
[DataMember]
public
DateTime? reqdate {
get
;
set
; }
}
}
public
class
MyData
{
public
int
Count {
get
;
set
; }
public
IList Data {
get
;
set
; }
}
[ServiceContract]
[ServiceKnownType(
"GetKnownTypes"
)]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public
class
POCNAssocDocService
{
public
static
IEnumerable<Type> GetKnownTypes(ICustomAttributeProvider provider)
{
List<Type> knownTypes =
new
List<System.Type>();
knownTypes.Add(
typeof
(DC.POCN_hdr));
knownTypes.Add(
typeof
(DC.POCN_det));
return
knownTypes;
}
[OperationContract]
public
MyData retrievePOCN_HdrDataAndCount(
int
startRowIndex,
int
maximumRows,
string
sortExpression,
string
filterExpression)
{
maximumRows = 20;
if
(filterExpression !=
""
)
{
filterExpression = filterExpression.Replace(
"\""
,
string
.Empty);
}
else
{
filterExpression =
"MfgOrderID = -1"
;
}
GridBindingData data = RadGrid.GetBindingData(
"AppDataClassesDataContext"
,
"MOAssocDocuments"
, startRowIndex, maximumRows, sortExpression, filterExpression);
MyData result =
new
MyData();
result.Data = data.Data.OfType<MOAssocDocument>().Select(c =>
new
DC.POCN_hdr()
{
MfgAssocDocID = c.MfgAssocDocID,
MfgOrderID = c.MfgOrderID,
ponumber = c.POHdr.ponumber,
vendname = c.POHdr.vendname,
vendorid = c.POHdr.vendorid,
country = c.POHdr.country,
vndclsid = c.POHdr.vndclsid,
docdate = c.POHdr.docdate,
hold = c.POHdr.hold,
shipmthd = c.POHdr.shipmthd
}).ToList();
result.Count = data.Count;
return
result;
}
[OperationContract]
public
MyData retrievePOCN_DetDataAndCount(
int
startRowIndex,
int
maximumRows,
string
sortExpression,
string
filterExpression)
{
// maximumRows = 50;
if
(filterExpression ==
""
)
{
filterExpression =
"qtyorder = -999999"
;
}
else
{
string
sPoNumb = filterExpression.Substring(13, 8);
AppDataClassesDataContext appDB =
new
AppDataClassesDataContext();
var dq = from dqr
in
appDB.PODets where dqr.ponumber == sPoNumb select dqr;
if
(dq.Count() == 0)
{
filterExpression =
"qtyorder = -999999"
;
}
}
GridBindingData data = RadGrid.GetBindingData(
"AppDataClassesDataContext"
,
"PODets"
, startRowIndex, maximumRows, sortExpression, filterExpression);
MyData result =
new
MyData();
result.Data = data.Data.OfType<PODet>().Select(o =>
new
DC.POCN_det()
{
ponumber = o.ponumber,
itemnmbr = o.itemnmbr,
qtyorder = o.qtyorder,
itemdesc = o.itemdesc,
postatus = o.postatus,
shipmthd = o.shipmthd,
released_date = o.released_date,
prmdate = o.prmdate,
reqdate=o.reqdate
}).ToList();
result.Count = data.Count;
return
result;
}
}
<
telerik:RadGrid
ID
=
"rdGridAsgPOHdr"
runat
=
"server"
AllowPaging
=
"false"
AllowSorting
=
"false"
Height
=
"100px"
AllowFilteringByColumn
=
"false"
GridLines
=
"None"
EnableEmbeddedSkins
=
"false"
Skin
=
"WebBlue"
AllowMultiRowSelection
=
"false"
ItemStyle-Font-Names
=
"'segoe ui',arial,sans-serif;"
ItemStyle-Font-Size
=
"9px"
AutoGenerateColumns
=
"false"
AlternatingItemStyle-Font-Names
=
"'segoe ui',arial,sans-serif;"
AlternatingItemStyle-Font-Size
=
"9px"
HeaderStyle-Font-Names
=
"'segoe ui',arial,sans-serif;"
HeaderStyle-Font-Size
=
"9px"
>
<
MasterTableView
ClientDataKeyNames
=
"ponumber"
DataKeyNames
=
"ponumber"
AllowMultiColumnSorting
=
"false"
TableLayout
=
"Fixed"
NoMasterRecordsText="<div
style
=
'width: 705px; font-size: 9px; font-family: '
segoe ui',arial,sans-serif;'>No assigned po details to display.</
div
>">
<
CommandItemStyle
CssClass
=
"commViewCommand"
/>
<
ItemStyle
CssClass
=
"comments"
/>
<
AlternatingItemStyle
CssClass
=
"comments"
/>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"ponumber"
HeaderText
=
"PO#"
UniqueName
=
"ponumber"
ItemStyle-Width
=
"40px"
HeaderStyle-Width
=
"40px"
/>
<
telerik:GridBoundColumn
DataField
=
"vendname"
HeaderText
=
"Vendor"
UniqueName
=
"vendname"
ItemStyle-Width
=
"400px"
HeaderStyle-Width
=
"400px"
/>
<
telerik:GridBoundColumn
DataField
=
"vendorid"
HeaderText
=
"VID"
UniqueName
=
"vendorid"
ItemStyle-Width
=
"40px"
HeaderStyle-Width
=
"40px"
/>
<
telerik:GridBoundColumn
DataField
=
"docdate"
HeaderText
=
"Doc Dt"
UniqueName
=
"docdate"
DataFormatString
=
"{0:MM/dd/yy}"
ItemStyle-Width
=
"35px"
HeaderStyle-Width
=
"35px"
/>
<
telerik:GridBoundColumn
DataField
=
"shipmthd"
HeaderText
=
"Ship Via"
UniqueName
=
"shipmthd"
ItemStyle-Width
=
"105px"
HeaderStyle-Width
=
"105px"
/>
<
telerik:GridBoundColumn
DataField
=
"detCnt"
ItemStyle-Width
=
"1px"
ItemStyle-BackColor
=
"White"
HeaderStyle-Width
=
"1px"
ItemStyle-ForeColor
=
"White"
UniqueName
=
"detCnt"
ItemStyle-CssClass
=
"commViewCommand"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"MfgOrderID"
DataType
=
"System.Int32"
HeaderText
=
"MfgOrderID"
HeaderStyle-Width
=
"1px"
UniqueName
=
"MfgOrderID"
ItemStyle-Width
=
"1px"
ItemStyle-CssClass
=
"commViewCommand"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"MfgAssocDocID"
DataType
=
"System.Int32"
HeaderText
=
"MfgAssocDocID"
HeaderStyle-Width
=
"1px"
UniqueName
=
"MfgAssocDocID"
ItemStyle-Width
=
"1px"
ItemStyle-CssClass
=
"commViewCommand"
>
</
telerik:GridBoundColumn
>
</
Columns
>
</
MasterTableView
>
<
ClientSettings
>
<
DataBinding
Location
=
"../Services/POCNAssocDocService.svc"
FilterParameterType
=
"Linq"
SelectMethod
=
"retrievePOCN_HdrDataAndCount"
SortParameterType
=
"Linq"
>
</
DataBinding
>
<
ClientEvents
OnDataBinding
=
"rdGridAsgPOHdr_DataBinding"
/>
<
Selecting
AllowRowSelect
=
"true"
/>
<
Scrolling
AllowScroll
=
"True"
UseStaticHeaders
=
"True"
SaveScrollPosition
=
"true"
/>
</
ClientSettings
>
</
telerik:RadGrid
>
rdGridPOHdr = $find(
'<%= rlMOView.FindControl("rdGridAsgPOHdr").ClientID %>'
);
var
tableView = rdGridPOHdr.get_masterTableView();
tableView.filter(
"MfgOrderID"
, mfgID,
"EqualTo"
);
tableView.clearSelectedItems();
var
dataItem = tableView.get_dataItems()[0];
dataItem.set_selected(
true
);
var
selectedRows = tableView.get_selectedItems();
for
(
var
i = 0; i < selectedRows.length; i++) {
var
row = selectedRows[i];
var
cell = tableView.getCellByColumnUniqueName(row,
"ponumber"
)
//here cell.innerHTML holds the value of the cell
}
<
telerik:RadChart
ID
=
"radSales"
AutoLayout
=
"true"
runat
=
"Server"
Width
=
"900px"
Skin
=
"Web20"
Style
=
"margin: 0px auto;"
>
<
Legend
Visible
=
"true"
>
<
Appearance
GroupNameFormat
=
"#VALUE"
>
</
Appearance
>
</
Legend
>
<
ChartTitle
TextBlock-Text
=
"Total Sales"
>
<
TextBlock
>
<
Appearance
TextProperties-Font
=
"Verdana, 20px, style=Bold"
TextProperties-Color
=
"#00529B"
>
</
Appearance
>
</
TextBlock
>
</
ChartTitle
>
<
PlotArea
>
<
Appearance
Dimensions-Margins
=
"18%, 22%, 12%, 14%"
>
</
Appearance
>
<
XAxis
DataLabelsColumn
=
"Location"
>
<
Appearance
>
<
TextAppearance
TextProperties-Font
=
"Verdana, 8pt, style=Bold"
>
</
TextAppearance
>
</
Appearance
>
</
XAxis
>
</
PlotArea
>
<
Series
>
<
telerik:ChartSeries
DataXColumn
=
"Location"
DataYColumn
=
"TotalSales"
DefaultLabelValue
=
"#Y{C}"
Type
=
"Pie"
>
<
Appearance
>
<
LabelAppearance
LabelLocation
=
"Auto"
>
</
LabelAppearance
>
<
TextAppearance
TextProperties-Font
=
"Verdana, 11pt, style=Bold"
TextProperties-Color
=
"#00529B"
>
</
TextAppearance
>
</
Appearance
>
</
telerik:ChartSeries
>
</
Series
>
</
telerik:RadChart
>