In order to make my pages containing RadGrids more responsive, I load the page with no data and then retrieve the data in a postback.
This worked great until I tried running it with the latest Telerik UI controls (2016 Q1). Now, the remove_load does not seem to work, so the data is continually reloaded.
Any ideas?
The code on my aspx page is as follows:
<script type=
"text/javascript"
>
function
rebindGrid(clientid) {
var
grid = $find(clientid);
if
(grid ==
null
)
return
;
if
(
typeof
(grid.get_masterTableView) !=
"function"
)
return
;
var
masterTable = grid.get_masterTableView();
if
(masterTable !=
null
)
masterTable.rebind();
}
function
rebindPageGrid() {
Sys.Application.remove_load(rebindPageGrid);
rebindGrid(
"<%= AccountGrid.ClientID %>"
);
}
Sys.Application.add_load(rebindPageGrid);
</script>
The code behind looks like:
protected
void
OnAccountGridNeedDataSource(
object
source, GridNeedDataSourceEventArgs e)
{
if
(Page.IsPostBack)
{
AccountGrid.DataSource = GetAccountList();
AccountGrid.MasterTableView.NoMasterRecordsText =
"No records to display"
;
}
else
{
AccountGrid.DataSource =
new
List<Account>();
AccountGrid.MasterTableView.NoMasterRecordsText =
"Loading Data..."
;
}
}
We are having problems with the way the command bar is displayed on a radgrid. The icons are in the wrong order and not displaying properly. I think this problem started when we updated Telerik to the latest version, but I'm not too sure.
Screenshot_1 shows how it looks on my machine in IE. (This is how it should look).
Screenshot_2 shows how it looks on my colleague's machine (on the same version of IE with same compatibility settings). This is also the way it looks in Chrome.
Radgrid code:
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
AllowSorting
=
"True"
OnBatchEditCommand
=
"RadGrid1_BatchEditCommand"
AutoGenerateColumns
=
"False"
DataSourceID
=
"sqlReviewPlanner"
OnPreRender
=
"RadGrid1_PreRender"
OnDataBound
=
"RadGrid1_DataBound"
>
<
MasterTableView
DataSourceID
=
"sqlReviewPlanner"
DataKeyNames
=
"ID"
CommandItemDisplay
=
"Top"
EditMode
=
"Batch"
AutoGenerateColumns
=
"false"
>
<
BatchEditingSettings
EditType
=
"Row"
OpenEditingEvent
=
"Click"
/>
<
SortExpressions
>
<
telerik:GridSortExpression
FieldName
=
"ReviewNo"
SortOrder
=
"Ascending"
/>
</
SortExpressions
>
<
Columns
>
<
telerik:GridTemplateColumn
DataField
=
"ReviewNo"
HeaderText
=
"No."
UniqueName
=
"ReviewNo"
SortExpression
=
"ReviewNo"
DataType
=
"System.Int32"
>
<
HeaderStyle
Width
=
"60px"
/>
<
ItemTemplate
><%# Eval("ReviewNo") %></
ItemTemplate
>
<
EditItemTemplate
>
<
telerik:RadNumericTextBox
ID
=
"txtReviewNo"
runat
=
"server"
Value='<%# Bind( "ReviewNo") %>' Type="Number"
ShowSpinButtons="true" MinValue="0" MaxValue="50" Width="50px" NumberFormat-DecimalDigits="0">
</
telerik:RadNumericTextBox
>
<
asp:RequiredFieldValidator
ID
=
"valReviewNo"
runat
=
"server"
ErrorMessage
=
"*Required"
ControlToValidate
=
"txtReviewNo"
></
asp:RequiredFieldValidator
>
</
EditItemTemplate
>
</
telerik:GridTemplateColumn
>
<
telerik:GridTemplateColumn
DataField
=
"ReviewDate"
DataType
=
"System.DateTime"
FilterControlAltText
=
"Filter ReviewDate column"
HeaderText
=
"Plan Date"
SortExpression
=
"ReviewDate"
UniqueName
=
"ReviewDate"
>
<
HeaderStyle
Width
=
"125px"
/>
<
EditItemTemplate
>
<
telerik:RadDatePicker
ID
=
"ReviewDateRadDatePicker"
runat
=
"server"
DbSelectedDate='<%# Bind("ReviewDate") %>' Width="110px">
</
telerik:RadDatePicker
>
<
asp:RequiredFieldValidator
ID
=
"valReviewDateRadDatePicker"
runat
=
"server"
ErrorMessage
=
"*Required"
ControlToValidate
=
"ReviewDateRadDatePicker"
></
asp:RequiredFieldValidator
>
</
EditItemTemplate
>
<
ItemTemplate
>
<
asp:Label
ID
=
"ReviewDateLabel"
runat
=
"server"
Text='<%# Eval("ReviewDate","{0:d}") %>'></
asp:Label
>
</
ItemTemplate
>
</
telerik:GridTemplateColumn
>
<
telerik:GridTemplateColumn
HeaderText
=
"Reviewer"
UniqueName
=
"ReviewOwner"
DataField
=
"ReviewOwner"
>
<
ItemTemplate
>
<%# Eval("ReviewOwnerName") %>
</
ItemTemplate
>
<
EditItemTemplate
>
<
telerik:RadComboBox
runat
=
"server"
ID
=
"drpReviewOwner"
DataValueField
=
"staffcode"
DataTextField
=
"staff"
DataSourceID
=
"SqlReviewOwner"
Filter
=
"Contains"
>
</
telerik:RadComboBox
>
<
asp:RequiredFieldValidator
ID
=
"valReviewOwner"
runat
=
"server"
ErrorMessage
=
"*Required"
ControlToValidate
=
"drpReviewOwner"
></
asp:RequiredFieldValidator
>
</
EditItemTemplate
>
</
telerik:GridTemplateColumn
>
<
telerik:GridTemplateColumn
HeaderText
=
"Status"
UniqueName
=
"ReviewStatus"
DataField
=
"ReviewStatus"
>
<
ItemTemplate
>
<%# Eval("ReviewStatusDescription") %>
</
ItemTemplate
>
<
EditItemTemplate
>
<
telerik:RadComboBox
runat
=
"server"
ID
=
"drpReviewStatus"
DataValueField
=
"Id"
DataTextField
=
"Description"
DataSourceID
=
"SqlReviewStatus"
Filter
=
"Contains"
>
</
telerik:RadComboBox
>
<%--<
asp:RequiredFieldValidator
ID
=
"valReviewStatus"
runat
=
"server"
ErrorMessage
=
"*Required"
ControlToValidate
=
"drpReviewStatus"
></
asp:RequiredFieldValidator
>--%>
</
EditItemTemplate
>
</
telerik:GridTemplateColumn
>
<
telerik:GridTemplateColumn
DataField
=
"ReviewStatusDate"
DataType
=
"System.DateTime"
FilterControlAltText
=
"Filter ReviewStatusDate column"
HeaderText
=
"Status Date"
SortExpression
=
"ReviewStatusDate"
UniqueName
=
"ReviewStatusDate"
>
<
HeaderStyle
Width
=
"125px"
/>
<
EditItemTemplate
>
<
telerik:RadDatePicker
ID
=
"ReviewStatusDateRadDatePicker"
runat
=
"server"
DbSelectedDate='<%# Bind("ReviewStatusDate") %>' Width="110px">
</
telerik:RadDatePicker
>
</
EditItemTemplate
>
<
ItemTemplate
>
<
asp:Label
ID
=
"ReviewStatusDateLabel"
runat
=
"server"
Text='<%# Eval("ReviewStatusDate","{0:d}") %>'></
asp:Label
>
</
ItemTemplate
>
</
telerik:GridTemplateColumn
>
<
telerik:GridTemplateColumn
DataField
=
"Comments"
HeaderText
=
"Comments"
>
<
ItemTemplate
><%# Eval("Comments") %></
ItemTemplate
>
<
EditItemTemplate
>
<
telerik:RadTextBox
ID
=
"txtComments"
runat
=
"server"
Text='<%# Bind( "Comments") %>'
Columns="30" Rows="3" TextMode="MultiLine">
</
telerik:RadTextBox
>
</
EditItemTemplate
>
</
telerik:GridTemplateColumn
>
<
telerik:GridButtonColumn
ConfirmText
=
"Delete this Review?"
ConfirmDialogType
=
"RadWindow"
ConfirmTitle
=
"Delete"
HeaderText
=
"Delete"
HeaderStyle-Width
=
"50px"
ButtonType
=
"ImageButton"
CommandName
=
"Delete"
Text
=
"Delete"
UniqueName
=
"DeleteColumn"
>
</
telerik:GridButtonColumn
>
</
Columns
>
<
CommandItemStyle
/>
<
CommandItemSettings
AddNewRecordText
=
"Add New Review"
AddNewRecordImageUrl
=
"../assets/img/plus32.png"
RefreshImageUrl
=
"../assets/img/refresh32.png"
/>
</
MasterTableView
>
</
telerik:RadGrid
>
CSS file for icons:
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl00_InitInsertButton,
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl00_CancelChangesButton,
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl03_ctl01_CancelChangesButton,
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl00_SaveChangesButton,
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl03_ctl01_SaveChangesButton,
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl00_RebindGridButton,
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl03_ctl01_RebindGridButton {
font-size: 12pt;
}
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl00_SaveChangesIcon
{
background-image:url("https://staff.oldham.ac.uk/assets/img/save32.png");
background-position:center;
width:32px;
height:32px;
}
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl03_ctl01_SaveChangesIcon
{
background-image:url("https://staff.oldham.ac.uk/assets/img/save32.png");
background-position:center;
width:32px;
height:32px;
}
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl02_ctl00_CancelChangesIcon
{
background-image:url("https://staff.oldham.ac.uk/assets/img/cancel32.png");
background-position:center;
width:32px;
height:32px;
}
#ctl00_ContentPlaceHolder1_RadGrid1_ctl00_ctl03_ctl01_CancelChangesIcon
{
background-image:url("https://staff.oldham.ac.uk/assets/img/cancel32.png");
background-position:center;
width:32px;
height:32px;
}
Hello!
I'm testing telerik:RadGrid control..
I would like to use picture (if it exists) on server. If file doesn't exists i would like to use "default_image.jpg". I suppose have to use RadGrid1_ItemDataBound but don't know how?
Right now fixing DataImageUrlFields="Artikal_ID" DataImageUrlFormatString="IMG/{0}_tiny.jpg" work without problem, but don't know to test File.Exists and use correct value.
Any advice?
Now have something like this:
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
AutoGenerateColumns
=
"False"
GroupPanelPosition
=
"Top"
PageSize
=
"20"
AllowSorting
=
"True"
AllowPaging
=
"True"
OnItemCommand
=
"RadGrid1_ItemCommand"
OnItemDataBound
=
"RadGrid1_ItemDataBound"
>
<
ExportSettings
>
<
Pdf
PageWidth
=
""
>
</
Pdf
>
</
ExportSettings
>
<
MasterTableView
NoMasterRecordsText
=
"Molimo odaberite kategoriju."
AllowMultiColumnSorting
=
"True"
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"Artikal_ID"
FilterControlAltText
=
"Filter Artikal_ID column"
HeaderText
=
"Å ifra artikla"
ReadOnly
=
"True"
SortExpression
=
"Artikal_ID"
UniqueName
=
"Artikal_ID"
>
<
ColumnValidationSettings
>
<
ModelErrorMessage
Text
=
""
></
ModelErrorMessage
>
</
ColumnValidationSettings
>
</
telerik:GridBoundColumn
>
<
telerik:GridImageColumn
DataImageUrlFields
=
"Artikal_ID"
DataImageUrlFormatString
=
"IMG/{0}_tiny.jpg"
AlternateText
=
""
DataAlternateTextField
=
"Artikal"
ImageAlign
=
"Middle"
ImageWidth
=
"60px"
HeaderText
=
""
HeaderButtonType
=
"None"
>
<
ItemStyle
CssClass
=
"RadGrid"
Height
=
"80px"
HorizontalAlign
=
"Center"
VerticalAlign
=
"Middle"
/>
</
telerik:GridImageColumn
>
I've been trying to get my numeric values to be displayed in the following format: 14.000.000,99 instead of 14,000,000.99.
I have not been able to figure this out for the life of me. I've tried many different methods of masks and column types, but the solution is evading me.
Any help would be appreciated.
Dennis
Hi,
I am trying to apply conditional formatting on my RadGrid row when the value of a column is true for external action. For this I am setting the CssStyle for the GridDataItem in the code behind to new style as below, as shown in the example in this link:
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/appearance-and-styling/conditional-formatting
.aspx
<style type="text/css">
body div.RadGrid_Office2007 .rgFollowUpRow { background-color: red;
}
code-behind:
e.Item.CssClass = "rgFollowUpRow";
But, after this style is applied the row loses its original style and so grid lines disappear, and row losses its padding too, as shown in the attachment. Can anyone please let me know what is that I am missing here in applying this custom style to the grid row?
Thanks in advance,
Lax
Hi,
I have a radgrid in batch edit mode. My grid cells cells make use of column editors and the whole grid is ajaxified
The problem is if a user edits a cell and then clicks the save button (without clicking anywhere else first) the cell is still in edit mode and the save has nothing to save.
Shouldn't clicking the save button cause the currently edited cell to loss focus and come out of edit when clicking on the save button?
Hello Support,
I tried searching forums regarding the itemdatabound event being fired twice for a radgrid. But no solutions proved conclusive. So I have created an example project with a single page.
1 RadScriptManager
1 SQLDataSource
1 RadGrid (Telerik v 2015.2.826.45)
SQLDatasource connecting to a table with 5 rows
id desc percent
1 A 10
2 B 20
3 C 30
4 D 40
5 E 50
ItemDataBound was seen to fire 12 times twice for each row. (+1 for header and +1 for footer)
Please explain how can I restrict this to fire once for each row.
Code for .vb , .aspx are included. The example project is also attached along with screenshots for runtime and database.
.vb
Imports
Telerik.Web.UI
Public
Class
_default
Inherits
System.Web.UI.Page
Protected
Sub
Page_Load(
ByVal
sender
As
Object
,
ByVal
e
As
System.EventArgs)
Handles
Me
.Load
Session(
"ctr"
) = 0
End
Sub
Private
Sub
RadGrid1_ItemDataBound(sender
As
Object
, e
As
GridItemEventArgs)
Handles
RadGrid1.ItemDataBound
Session(
"ctr"
) += 1
Debug.WriteLine(
"ItemDataBound: "
& Session(
"ctr"
))
End
Sub
End
Class
.aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="default.aspx.vb" Inherits="RadGrid_ItemDatabound._default" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
div
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
Runat
=
"server"
>
</
telerik:RadScriptManager
>
<
asp:SqlDataSource
ID
=
"SqlDataSource1"
runat
=
"server"
ConnectionString="<%$ ConnectionStrings:MySQLConnectionString %>" ProviderName="<%$ ConnectionStrings:MySQLConnectionString.ProviderName %>" SelectCommand="Select * from temp"></
asp:SqlDataSource
>
<
telerik:RadGrid
ID
=
"RadGrid1"
runat
=
"server"
CellSpacing
=
"-1"
DataSourceID
=
"SqlDataSource1"
GridLines
=
"Both"
GroupPanelPosition
=
"Top"
>
<
MasterTableView
AutoGenerateColumns
=
"False"
DataSourceID
=
"SqlDataSource1"
>
<
Columns
>
<
telerik:GridBoundColumn
DataField
=
"id"
DataType
=
"System.Int32"
FilterControlAltText
=
"Filter id column"
HeaderText
=
"id"
SortExpression
=
"id"
UniqueName
=
"id"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"desc"
FilterControlAltText
=
"Filter desc column"
HeaderText
=
"desc"
SortExpression
=
"desc"
UniqueName
=
"desc"
>
</
telerik:GridBoundColumn
>
<
telerik:GridBoundColumn
DataField
=
"percent"
DataType
=
"System.Int32"
FilterControlAltText
=
"Filter percent column"
HeaderText
=
"percent"
SortExpression
=
"percent"
UniqueName
=
"percent"
>
</
telerik:GridBoundColumn
>
</
Columns
>
</
MasterTableView
>
</
telerik:RadGrid
>
</
div
>
</
form
>
</
body
>
</
html
>
Debug Output:
ItemDataBound: 1
ItemDataBound: 2
ItemDataBound: 3
ItemDataBound: 4
ItemDataBound: 5
ItemDataBound: 6
ItemDataBound: 7
ItemDataBound: 8
ItemDataBound: 9
ItemDataBound: 10
ItemDataBound: 11
ItemDataBound: 12
I am having trouble trying to implement an ajaxified cascading DropDownList inside a ListView using the RadAjaxManager. I have tried following the example here, but it doesn't seem to work with a ListView. The page doesn't post back when the first DropDownList changes and the SelectedIndexChanged event never fires. Below is some sample code. Any idea what I'm doing wrong?
<
asp:ScriptManager
runat
=
"server"
ID
=
"ScriptManager1"
></
asp:ScriptManager
>
<
telerik:RadAjaxManager
runat
=
"server"
ID
=
"am1"
>
</
telerik:RadAjaxManager
>
<
asp:ListView
runat
=
"server"
ID
=
"ListView1"
InsertItemPosition
=
"FirstItem"
SelectMethod
=
"ListView1_GetData"
OnItemCreated
=
"ListView1_ItemCreated"
>
<
LayoutTemplate
>
<
asp:PlaceHolder
runat
=
"server"
ID
=
"itemPlaceHolder"
></
asp:PlaceHolder
>
</
LayoutTemplate
>
<
InsertItemTemplate
>
<
asp:DropDownList
runat
=
"server"
ID
=
"DropDownList1"
AutoPostBack
=
"true"
OnSelectedIndexChanged
=
"DropDownList1_SelectedIndexChanged"
>
<
asp:ListItem
Text
=
""
Value
=
""
></
asp:ListItem
>
<
asp:ListItem
Text
=
"1"
Value
=
"1"
></
asp:ListItem
>
<
asp:ListItem
Text
=
"2"
Value
=
"2"
></
asp:ListItem
>
<
asp:ListItem
Text
=
"3"
Value
=
"3"
></
asp:ListItem
>
</
asp:DropDownList
>
<
asp:DropDownList
runat
=
"server"
ID
=
"DropDownList2"
OnDataBinding
=
"DropDownList2_DataBinding"
></
asp:DropDownList
>
</
InsertItemTemplate
>
</
asp:ListView
>
protected
void
DropDownList1_SelectedIndexChanged(
object
sender, EventArgs e)
{
((DropDownList)ListView1.InsertItem.FindControl(
"DropDownList2"
)).DataBind();
}
public
IQueryable ListView1_GetData()
{
return
null
;
}
protected
void
DropDownList2_DataBinding(
object
sender, EventArgs e)
{
((DropDownList)sender).Items.Clear();
if
(((DropDownList)ListView1.InsertItem.FindControl(
"DropDownList1"
)).SelectedValue !=
""
)
{
((DropDownList)sender).Items.Add(((DropDownList)ListView1.InsertItem.FindControl(
"DropDownList1"
)).SelectedValue);
((DropDownList)sender).Items.Add(((DropDownList)ListView1.InsertItem.FindControl(
"DropDownList1"
)).SelectedValue);
}
}
protected
void
ListView1_ItemCreated(
object
sender, ListViewItemEventArgs e)
{
if
(e.Item.ItemType == ListViewItemType.InsertItem)
e.Item.PreRender +=
new
System.EventHandler(ListView1_ItemPreRender);
}
protected
void
ListView1_ItemPreRender(
object
sender, System.EventArgs e)
{
am1.AjaxSettings.AddAjaxSetting(((DropDownList)(((Control)(sender)).FindControl(
"DropDownList1"
))), ((DropDownList)(((Control)(sender)).FindControl(
"DropDownList2"
))));
}