Hi,
Currently I have a 'add' button on a webform.
When clicked, a RadWindowsManager dialog window is displayed.
Clicking 'save' in that dialog, closes the dialog, adds a record to database table, and uses the client 'RefreshGrid' to update a grid on-screen with that extra record.
This all works fine- thanks to the great Telerik documentation!
However, as the record is added to the bottom of the grid, I would like the client to automatically scroll to the bottom.
I've tried using javascript before and after the '_doPostBack' call in 'refreshGrid', but the browser ignores it.
Do you have any suggestions?
Thanks,
Steve
Currently I have a 'add' button on a webform.
When clicked, a RadWindowsManager dialog window is displayed.
Clicking 'save' in that dialog, closes the dialog, adds a record to database table, and uses the client 'RefreshGrid' to update a grid on-screen with that extra record.
This all works fine- thanks to the great Telerik documentation!
However, as the record is added to the bottom of the grid, I would like the client to automatically scroll to the bottom.
I've tried using javascript before and after the '_doPostBack' call in 'refreshGrid', but the browser ignores it.
Do you have any suggestions?
Thanks,
Steve
3 Answers, 1 is accepted
0

Princy
Top achievements
Rank 2
answered on 04 Jun 2014, 03:59 AM
Hi Steve,
I guess you are having the same code as that of demo and you donot have paging, hence you want to focus to last row. Please take a look at the following code snippet. To identify if a row is inserted, in the EditFormCs page, on the CloseAndRebind function we can pass a variable to main page through window and have the ItemCommand event fired and set focus to last row.
EditFormCS.aspx:
Default.aspx:
Default.CS:
Thanks,
Princy
I guess you are having the same code as that of demo and you donot have paging, hence you want to focus to last row. Please take a look at the following code snippet. To identify if a row is inserted, in the EditFormCs page, on the CloseAndRebind function we can pass a variable to main page through window and have the ItemCommand event fired and set focus to last row.
EditFormCS.aspx:
<script type=
"text/javascript"
>
function
CloseAndRebind(args) {
GetRadWindow().BrowserWindow.refreshGrid(args);
var
oArg =
new
Object();
if
(args !=
"undefined"
) {
//To identify an Insert
oArg.txtValue = 1;
}
//Passing the value to window
GetRadWindow().close(oArg);
}
//Rest of the code
</script>
Default.aspx:
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
//Rest of the code
function OnClientClose(oWnd, args) {
var arg = args.get_argument();
if (arg) {
var grid = $find("<%=RadGrid1.ClientID %>");
var master = grid.get_masterTableView();
master.fireCommand("InsertAlert", arg.txtValue);
}
}
</
script
>
</
telerik:RadCodeBlock
>
<
telerik:RadWindowManager
ID
=
"RadWindowManager1"
runat
=
"server"
EnableShadow
=
"true"
>
<
Windows
>
<
telerik:RadWindow
ID
=
"UserListDialog"
runat
=
"server"
OnClientClose
=
"OnClientClose"
. . .>
</
telerik:RadWindow
>
</
Windows
>
</
telerik:RadWindowManager
>
Default.CS:
protected
void
RadGrid1_ItemCommand(
object
sender, GridCommandEventArgs e)
{
if
(e.CommandName ==
"InsertAlert"
)
{
RadGrid1.Rebind();
int
count=RadGrid1.Items.Count;
//Set focus to last row
RadGrid1.MasterTableView.Items[count-1].Focus();
}
}
Thanks,
Princy
0

Steve
Top achievements
Rank 1
answered on 04 Jun 2014, 04:43 PM
Princy, Hi,
Thanks for that.
I moved the code across- the only change I had to make was to use 'oArg=1' (as it didn't like txtValue) and then 'master.fireCommand("InsertAlert", arg);'.
I can prove it gets to, and runs, the '.Focus();' instruction, but the browser window is still displaying the top of the web-page, not the bottom.
Before I go and send the relevant code across, is there anything obvious that I need to double-check?
Cheers, Steve
Thanks for that.
I moved the code across- the only change I had to make was to use 'oArg=1' (as it didn't like txtValue) and then 'master.fireCommand("InsertAlert", arg);'.
I can prove it gets to, and runs, the '.Focus();' instruction, but the browser window is still displaying the top of the web-page, not the bottom.
Before I go and send the relevant code across, is there anything obvious that I need to double-check?
Cheers, Steve
0

Princy
Top achievements
Rank 2
answered on 05 Jun 2014, 05:32 AM
Hi Steve,
Please try the below sample code snippet, it works as expected at my end.
Default.ASPX:
Default.CS:
EditFormCS.aspx:
EditFormCS.cs:
Thanks,
Princy
Please try the below sample code snippet, it works as expected at my end.
Default.ASPX:
<
telerik:RadCodeBlock
ID
=
"RadCodeBlock1"
runat
=
"server"
>
<
script
type
=
"text/javascript"
>
function ShowEditForm(id, rowIndex) {
var grid = $find("<%= RadGrid1.ClientID %>");
var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
grid.get_masterTableView().selectItem(rowControl, true);
window.radopen("EditFormCS.aspx?EmployeeID=" + id, "UserListDialog");
return false;
}
function ShowInsertForm() {
window.radopen("EditFormCS.aspx", "UserListDialog");
return false;
}
function refreshGrid(arg) {
if (!arg) {
$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
}
else {
$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RebindAndNavigate");
}
}
function RowDblClick(sender, eventArgs) {
window.radopen("EditFormCS.aspx?EmployeeID=" + eventArgs.getDataKeyValue("EmployeeID"), "UserListDialog");
}
function OnClientClose(oWnd, args) {
var arg = args.get_argument();
var grid = $find("<%=RadGrid1.ClientID %>");
var master = grid.get_masterTableView();
if (arg.txtValue == 1) {
master.fireCommand("InsertAlert", arg.txtValue);
}
else {
arg.txtValue = 0;
master.fireCommand("UpdateAlert", arg.txtValue);
}
}
</
script
>
</
telerik:RadCodeBlock
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
OnAjaxRequest
=
"RadAjaxManager1_AjaxRequest"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadAjaxManager1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadGrid1"
LoadingPanelID
=
"gridLoadingPanel"
>
</
telerik:AjaxUpdatedControl
>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
<
telerik:AjaxSetting
AjaxControlID
=
"RadGrid1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"RadGrid1"
LoadingPanelID
=
"gridLoadingPanel"
>
</
telerik:AjaxUpdatedControl
>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadAjaxLoadingPanel
runat
=
"server"
ID
=
"gridLoadingPanel"
>
</
telerik:RadAjaxLoadingPanel
>
<
telerik:RadGrid
OnItemCreated
=
"RadGrid1_ItemCreated"
ID
=
"RadGrid1"
runat
=
"server"
DataSourceID
=
"SqlDataSource1"
OnItemCommand
=
"RadGrid1_ItemCommand"
>
<
MasterTableView
AutoGenerateColumns
=
"False"
DataKeyNames
=
"EmployeeID"
ClientDataKeyNames
=
"EmployeeID"
CommandItemDisplay
=
"Top"
>
<
Columns
>
. . . .
<
telerik:GridTemplateColumn
UniqueName
=
"TemplateEditColumn"
>
<
ItemTemplate
>
<
asp:HyperLink
ID
=
"EditLink"
runat
=
"server"
Text
=
"Edit"
>
</
asp:HyperLink
>
</
ItemTemplate
>
</
telerik:GridTemplateColumn
>
</
Columns
>
<
CommandItemTemplate
>
<
a
href
=
"#"
onclick
=
"return ShowInsertForm();"
>Add New Record</
a
>
</
CommandItemTemplate
>
</
MasterTableView
>
<
ClientSettings
>
<
Selecting
AllowRowSelect
=
"true"
></
Selecting
>
<
ClientEvents
OnRowDblClick
=
"RowDblClick"
></
ClientEvents
>
</
ClientSettings
>
</
telerik:RadGrid
>
<
telerik:RadWindowManager
ID
=
"RadWindowManager1"
runat
=
"server"
EnableShadow
=
"true"
>
<
Windows
>
<
telerik:RadWindow
ID
=
"UserListDialog"
runat
=
"server"
Title
=
"Editing record"
Height
=
"320px"
Width
=
"310px"
Left
=
"150px"
ReloadOnShow
=
"true"
ShowContentDuringLoad
=
"false"
OnClientClose
=
"OnClientClose"
Modal
=
"true"
>
</
telerik:RadWindow
>
</
Windows
>
</
telerik:RadWindowManager
>
<
asp:SqlDataSource
ID
=
"SqlDataSource1"
runat
=
"server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title] FROM [Employees]">
</
asp:SqlDataSource
>
Default.CS:
protected
void
RadGrid1_ItemCreated(
object
sender, GridItemEventArgs e)
{
if
(e.Item
is
GridDataItem)
{
GridDataItem dataItem = (GridDataItem)e.Item;
HyperLink editLink = (HyperLink)e.Item.FindControl(
"EditLink"
);
editLink.Attributes[
"href"
] =
"javascript:void(0);"
;
editLink.Attributes[
"onclick"
] = String.Format(
"return ShowEditForm('{0}','{1}');"
, e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex][
"EmployeeID"
], e.Item.ItemIndex);
}
}
protected
void
RadAjaxManager1_AjaxRequest(
object
sender, AjaxRequestEventArgs e)
{
if
(e.Argument ==
"Rebind"
)
{
RadGrid1.MasterTableView.SortExpressions.Clear();
RadGrid1.MasterTableView.GroupByExpressions.Clear();
RadGrid1.Rebind();
}
else
if
(e.Argument ==
"RebindAndNavigate"
)
{
RadGrid1.MasterTableView.SortExpressions.Clear();
RadGrid1.MasterTableView.GroupByExpressions.Clear();
RadGrid1.MasterTableView.CurrentPageIndex = RadGrid1.MasterTableView.PageCount - 1;
RadGrid1.Rebind();
}
}
protected
void
RadGrid1_ItemCommand(
object
sender, GridCommandEventArgs e)
{
if
(e.CommandName ==
"InsertAlert"
)
{
RadGrid1.Rebind();
int
count = RadGrid1.Items.Count;
RadGrid1.MasterTableView.Items[count - 1].Focus();
}
if
(e.CommandName ==
"UpdateAlert"
)
{
RadGrid1.Rebind();
}
}
EditFormCS.aspx:
<
script
type
=
"text/javascript"
>
function CloseAndRebind(args) {
var oArg = new Object();
if (args == undefined)
oArg.txtValue = 0;
else
oArg.txtValue = 1;
GetRadWindow().BrowserWindow.refreshGrid(args);
GetRadWindow().close(oArg);
}
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
//Will work in Moz in all cases, including clasic dialog
else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)
return oWindow;
}
function CancelEdit() { GetRadWindow().close(); }
</
script
>
<
asp:ScriptManager
ID
=
"ScriptManager2"
runat
=
"server"
/>
<
telerik:RadFormDecorator
ID
=
"RadFormDecorator1"
runat
=
"server"
Skin
=
"Vista"
DecoratedControls
=
"All"
/>
<
asp:DetailsView
ID
=
"DetailsView1"
DataKeyNames
=
"EmployeeID"
runat
=
"server"
AutoGenerateRows
=
"False"
DataSourceID
=
"SqlDataSource1"
Height
=
"50px"
Width
=
"125px"
OnItemCommand
=
"DetailsView1_ItemCommand"
BorderWidth
=
"0"
CellPadding
=
"0"
CellSpacing
=
"7"
GridLines
=
"None"
OnItemUpdating
=
"DetailsView1_ItemUpdating"
>
<
Fields
>
<
asp:BoundField
DataField
=
"FirstName"
HeaderText
=
"FirstName"
SortExpression
=
"FirstName"
/>
<
asp:BoundField
DataField
=
"LastName"
HeaderText
=
"LastName"
SortExpression
=
"LastName"
/>
<
asp:BoundField
DataField
=
"Title"
HeaderText
=
"Title"
SortExpression
=
"Title"
/>
<
asp:CommandField
ShowEditButton
=
"True"
ButtonType
=
"Button"
/>
<
asp:CommandField
ShowInsertButton
=
"True"
ButtonType
=
"Button"
/>
</
Fields
>
</
asp:DetailsView
>
<
asp:SqlDataSource
ID
=
"SqlDataSource1"
runat
=
"server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
InsertCommand="INSERT INTO [Employees] ([LastName], [FirstName], [Title]) VALUES (@LastName, @FirstName, @Title)"
SelectCommand="SELECT [EmployeeID], [FirstName], [LastName], [Title] FROM [Employees] WHERE ([EmployeeID] = @EmployeeID)"
UpdateCommand="UPDATE [Employees] SET [LastName] = @LastName, [FirstName] = @FirstName, [Title] = @Title WHERE [EmployeeID] = @EmployeeID">
<
InsertParameters
>
<
asp:Parameter
Name
=
"LastName"
Type
=
"String"
DefaultValue
=
""
ConvertEmptyStringToNull
=
"false"
/>
<
asp:Parameter
Name
=
"FirstName"
Type
=
"String"
DefaultValue
=
""
ConvertEmptyStringToNull
=
"false"
/>
<
asp:Parameter
Name
=
"Title"
Type
=
"String"
/>
</
InsertParameters
>
<
UpdateParameters
>
<
asp:Parameter
Name
=
"LastName"
Type
=
"String"
DefaultValue
=
""
ConvertEmptyStringToNull
=
"false"
/>
<
asp:Parameter
Name
=
"FirstName"
Type
=
"String"
DefaultValue
=
""
ConvertEmptyStringToNull
=
"false"
/>
<
asp:Parameter
Name
=
"Title"
Type
=
"String"
/>
<
asp:Parameter
Name
=
"EmployeeID"
Type
=
"Int32"
/>
</
UpdateParameters
>
<
SelectParameters
>
<
asp:QueryStringParameter
Name
=
"EmployeeID"
QueryStringField
=
"EmployeeID"
Type
=
"Int32"
/>
</
SelectParameters
>
</
asp:SqlDataSource
>
EditFormCS.cs:
protected
override
void
OnInit(EventArgs e)
{
base
.OnInit(e);
if
(Request.QueryString[
"employeeid"
] ==
null
)
{
DetailsView1.DefaultMode = DetailsViewMode.Insert;
}
else
{
DetailsView1.DefaultMode = DetailsViewMode.Edit;
}
this
.Page.Title =
"Editing record"
;
}
protected
void
DetailsView1_ItemCommand(
object
sender, DetailsViewCommandEventArgs e)
{
if
(e.CommandName ==
"Update"
)
{
ClientScript.RegisterStartupScript(Page.GetType(),
"mykey"
,
"CloseAndRebind();"
,
true
);
}
else
if
(e.CommandName ==
"Insert"
)
{
ClientScript.RegisterStartupScript(Page.GetType(),
"mykey"
,
"CloseAndRebind('navigateToInserted');"
,
true
);
}
else
{
ClientScript.RegisterStartupScript(Page.GetType(),
"mykey"
,
"CancelEdit();"
,
true
);
}
}
protected
void
DetailsView1_ItemUpdating(
object
sender, DetailsViewUpdateEventArgs e)
{
//logic to truncate long string to prevent SQL error
for
(
int
i = 1; i < 4; i++)
{
string
val = e.NewValues[i - 1].ToString();
int
maxLength = i * 10;
if
(val.Length > maxLength) e.NewValues[i - 1] = val.Substring(0, maxLength);
}
}
Thanks,
Princy