Hello,
i want exactly the same feature as shown in this demo but using code behind approach.
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandwindow/defaultcs.aspx?product=window
i have two pages one for grid and one for editing same as in above demo, on both pages i am binding and updating the data pragmatically from code behind. below is both pages aspx and cs code snippet by following this demo, everything is working fine except below three issues which i am not getting where i am doing wrong. please your kind support is appreciated.
1. the gridloading panel is not shown when i click on the update button. actually what i want to do, if the updation is successful i want to display the loading panel, close the edit window and update the grid. i used below code on update button click event but not working.
2. second if the updation is not successful i want to display message in the edit window, show the loading panel and not close the window.
3. Third the skin is not working although i have skin.dll in my project.
Grid page .aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPages/TasksMaster.Master" AutoEventWireup="true" CodeBehind="ExistingEmployeesSIMInfo.aspx.cs" Inherits="AbanaPortal.SIMManagement.ExistingEmployeesSIMInfo" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function ShowEditForm(id, rowIndex) {
var grid = $find("<%= SIMInfoRadGrid.ClientID %>");
var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
grid.get_masterTableView().selectItem(rowControl, true);
window.radopen("UpdateSIMDetails.aspx?EmployeeID=" + id, "UserListDialog");
return false;
}
function refreshGrid(arg) {
if (!arg) {
$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
}
else {
$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("RebindAndNavigate");
}
}
</script>
</telerik:RadCodeBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="SIMInfoRadGrid" LoadingPanelID="gridLoadingPanel"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="SIMInfoRadGrid">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="SIMInfoRadGrid" LoadingPanelID="gridLoadingPanel"></telerik:AjaxUpdatedControl>
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel runat="server" ID="gridLoadingPanel"></telerik:RadAjaxLoadingPanel>
<div>
<asp:ImageButton ID="ExportImageButton" runat="server" ImageUrl="~/images/Excel.png" OnClick="ExportImageButton_Click" AlternateText="Xlsx" />
</div>
<telerik:RadGrid RenderMode="Lightweight" OnItemCreated="SIMInfoRadGrid_ItemCreated" ID="SIMInfoRadGrid" runat="server"
AllowSorting="true" AllowFilteringByColumn="true" Width="100%" GridLines="Horizontal">
<ItemStyle Wrap="true"></ItemStyle>
<MasterTableView AutoGenerateColumns="False" DataKeyNames="Employee_Code" ClientDataKeyNames="Employee_Code" Width="100%" >
<Columns>
<telerik:GridBoundColumn DataField="Employee_Code" HeaderText="Employee ID" ReadOnly="True"
SortExpression="Employee_Code" UniqueName="Employee_Code">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Employee_Name_1_English" HeaderText="Name" SortExpression="Employee_Name_1_English"
UniqueName="Employee_Name_1_English">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Department_1_English" HeaderText="Department" SortExpression="Department_1_English"
UniqueName="Department_1_English">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Position_2_English" HeaderText="Position" SortExpression="Position_2_English"
UniqueName="Position_2_English">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Hiring_Date" HeaderText="Joining Date" DataFormatString="{0:dd-MMM-yyyy}" SortExpression="Hiring_Date"
UniqueName="Hiring_Date">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn UniqueName="TemplateEditColumn" HeaderText="SIM Issued?" FilterControlWidth="40px">
<ItemTemplate>
<asp:HyperLink ID="EditLink" ForeColor="Blue" Font-Underline="true" runat="server" Text='<%#Eval("SIMIssued") %>'></asp:HyperLink>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="MobileNo" HeaderText="Mobile No" SortExpression="MobileNo"
UniqueName="MobileNo">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="LimitAmount" HeaderText="Limit Amount" SortExpression="LimitAmount"
UniqueName="LimitAmount" FilterControlWidth="40px" ItemStyle-HorizontalAlign="Center">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ServiceAmount" HeaderText="Service Amount" SortExpression="ServiceAmount"
UniqueName="ServiceAmount" FilterControlWidth="40px" ItemStyle-HorizontalAlign="Center">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Remarks" HeaderText="Remarks" SortExpression="Remarks"
UniqueName="Remarks">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings>
<Selecting AllowRowSelect="true"></Selecting>
</ClientSettings>
</telerik:RadGrid>
<telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" runat="server" EnableShadow="true">
<Windows>
<telerik:RadWindow RenderMode="Lightweight" ID="UserListDialog" runat="server" Title="Update SIM Info" Height="600px"
Width="400px" Left="150px" ReloadOnShow="true" ShowContentDuringLoad="false" Modal="true">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
</asp:Content>
Grid page .cs
EmployeeClass empObj = new EmployeeClass();
protected void Page_Load(object sender, EventArgs e)
{
GetEmployeesSIMInfo();
}
private void GetEmployeesSIMInfo()
{
DataTable dTable = empObj.GetEmployeesSIMInfo();
if (dTable.Rows.Count != 0)
{
SIMInfoRadGrid.DataSource = dTable;
SIMInfoRadGrid.DataBind();
}
}
protected void SIMInfoRadGrid_ItemCreated(object sender, GridItemEventArgs e)
{
if (e.Item is GridDataItem)
{
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]["Employee_Code"], e.Item.ItemIndex);
}
}
protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
if (e.Argument == "Rebind")
{
SIMInfoRadGrid.MasterTableView.SortExpressions.Clear();
SIMInfoRadGrid.MasterTableView.GroupByExpressions.Clear();
SIMInfoRadGrid.Rebind();
}
else if (e.Argument == "RebindAndNavigate")
{
SIMInfoRadGrid.MasterTableView.SortExpressions.Clear();
SIMInfoRadGrid.MasterTableView.GroupByExpressions.Clear();
SIMInfoRadGrid.MasterTableView.CurrentPageIndex = SIMInfoRadGrid.MasterTableView.PageCount - 1;
SIMInfoRadGrid.Rebind();
}
}
protected void ExportImageButton_Click(object sender, ImageClickEventArgs e)
{
string alternateText = (sender as ImageButton).AlternateText;
if (alternateText == "Xlsx")
{
SIMInfoRadGrid.MasterTableView.GetColumn("Employee_Code").HeaderStyle.BackColor = Color.LightGray;
SIMInfoRadGrid.MasterTableView.GetColumn("Employee_Code").ItemStyle.BackColor = Color.LightGray;
}
SIMInfoRadGrid.ExportSettings.ExportOnlyData = true;
SIMInfoRadGrid.ExportSettings.OpenInNewWindow = true;
SIMInfoRadGrid.MasterTableView.ExportToExcel();
}
edit page .aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdateSIMDetails.aspx.cs" Inherits="AbanaPortal.SIMManagement.UpdateSIMDetails" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Update SIM Info</title>
<link href="../Styles/bootstrap.css" rel="stylesheet" />
<link href="../Styles/bootstrap-theme.css" rel="stylesheet" />
<link href="../Styles/Site.css" rel="stylesheet" />
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet" />
<script src="../Scripts/jquery-2.2.1.js"></script>
<script src="../Scripts/jquery-1.12.2.js"></script>
<script src="../Scripts/bootstrap.js"></script>
<script src="../Scripts/Site.js"></script>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function CloseAndRebind(args) {
GetRadWindow().BrowserWindow.refreshGrid(args);
GetRadWindow().close();
}
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>
<div class="container-fluid">
<div class="panel panel-default">
<div class="panel-body">
<div class="row inputDivMargin">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<span class="text-muted">
<b>Employee ID:</b>
</span>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<asp:TextBox ID="EmployeeIDTextBox" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox>
</div>
</div>
<div class="row inputDivMargin">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<span class="text-muted">
<b>Employee Name:</b>
</span>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<asp:TextBox ID="EmployeeNameTextBox" runat="server" CssClass="form-control" Enabled="false"></asp:TextBox>
</div>
</div>
<div class="row inputDivMargin" title="MobileInfo">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<span class="text-muted">
<b>Mobile No:</b>
</span>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<asp:TextBox ID="MobileNoTextBox" runat="server" CssClass="form-control" TextMode="Number" MaxLength="10"></asp:TextBox>
<span id="MobileValidityStatus"></span>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="MobileNoTextBox"
Text="*" Display="Dynamic" ValidationGroup="UpdateValidation" ForeColor="Red">
</asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
ControlToValidate="MobileNoTextBox" Display="Dynamic"
ErrorMessage="Must be 10 digits mobile no." ForeColor="Red" SetFocusOnError="True"
ValidationExpression="^\d{10}$" ValidationGroup="UpdateValidation">
</asp:RegularExpressionValidator>
</div>
</div>
<div class="row inputDivMargin" title="MobileInfo">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<span class=" text-muted">
<b>Limit Amount:</b>
</span>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<asp:TextBox ID="LimitAmountTextBox" runat="server" CssClass="form-control" TextMode="Number"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="LimitAmountTextBox"
Text="*" Display="Dynamic" ValidationGroup="UpdateValidation" ForeColor="Red">
</asp:RequiredFieldValidator>
</div>
</div>
<div class="row inputDivMargin" title="MobileInfo">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<span class="text-muted">
<b>Service Amount:</b>
</span>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<asp:TextBox ID="ServiceAmountTextBox" runat="server" CssClass="form-control" TextMode="Number"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="ServiceAmountTextBox"
Text="*" Display="Dynamic" ValidationGroup="UpdateValidation" ForeColor="Red">
</asp:RequiredFieldValidator>
</div>
</div>
<div class="row inputDivMargin" title="MobileInfo">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<span class="text-muted">
<b>Is Closed?</b>
</span>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<asp:RadioButtonList ID="IsClosedRadioButtonList" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Value="Yes" Text="Yes"></asp:ListItem>
<asp:ListItem Value="No" Text="No"></asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
<div class="row inputDivMargin">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
<span class=" text-muted">
<b>Remarks:</b>
</span>
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<asp:TextBox ID="RemarksTextBox" runat="server" CssClass="form-control" TextMode="MultiLine"></asp:TextBox>
</div>
</div>
<div class="row inputDivMargin">
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
</div>
<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12">
<asp:Button runat="server" CssClass="btn btn-sm btn-success" ID="UpdateButton" Text="Update"
OnClick="UpdateButton_Click" ValidationGroup="UpdateValidation">
</asp:Button>
<asp:Button runat="server" CssClass="btn btn-sm btn-success" ID="CancelButton" Text="Cancel" OnClientClick="CancelEdit();" />
<asp:Label ID="MessageLabel" runat="server" Text="" Visible="false"></asp:Label>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
edit page .cs
EmployeeClass empObj = new EmployeeClass();
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (Request.QueryString["EmployeeID"] != null)
{
string employeeID = Request.QueryString["EmployeeID"].ToString();
EmployeeIDTextBox.Text = employeeID;
DataTable dTable = empObj.GetEmployeeSIMDetails(employeeID);
if (dTable.Rows.Count != 0)
{
EmployeeNameTextBox.Text = dTable.Rows[0]["EmpName"].ToString();
MobileNoTextBox.Text = dTable.Rows[0]["MobileNo"].ToString();
LimitAmountTextBox.Text = dTable.Rows[0]["LimitAmount"].ToString();
ServiceAmountTextBox.Text = dTable.Rows[0]["ServiceAmount"].ToString();
RemarksTextBox.Text = dTable.Rows[0]["Remarks"].ToString();
string isClosed = dTable.Rows[0]["IsClosed"].ToString();
if (isClosed == "Yes")
{
IsClosedRadioButtonList.Items[0].Selected = true;
IsClosedRadioButtonList.Items[1].Selected = false;
}
else
{
IsClosedRadioButtonList.Items[0].Selected = false;
IsClosedRadioButtonList.Items[1].Selected = true;
}
}
}
}
}
protected void UpdateButton_Click(object sender, EventArgs e)
{
string employeeId = Request.QueryString["EmployeeID"].ToString();
string mobileNo = MobileNoTextBox.Text.Trim();
int limitAmount = Int32.Parse(LimitAmountTextBox.Text.Trim());
int serviceAmount = Int32.Parse(ServiceAmountTextBox.Text.Trim());
bool isClosed;
if (IsClosedRadioButtonList.SelectedItem == null || IsClosedRadioButtonList.SelectedItem.Value == "No")
{
isClosed = false;
}
else
{
isClosed = true;
}
string remarks = RemarksTextBox.Text.Trim();
empObj.EmployeeId = employeeId;
empObj.MobileNo = mobileNo;
empObj.LimitAmount = limitAmount;
empObj.ServiceAmount = serviceAmount;
empObj.IsClosed = isClosed;
empObj.Remarks = remarks;
int result = 0;
try
{
result = empObj.UpdateEmployeeSIMInfo();
if (result> 0)
{
ClientScript.RegisterStartupScript(UpdateButton.GetType(), "mykey", "CloseAndRebind();", true);
}
else
{
MessageLabel.Text = "SIM already issued";
MessageLabel.Visible = true;
MessageLabel.ForeColor = System.Drawing.Color.Red;
return;
}
}
catch (Exception ex)
{
MessageLabel.Text = ex.Message;
MessageLabel.Visible = true;
MessageLabel.ForeColor = System.Drawing.Color.Red;
}
}
1 Answer, 1 is accepted
1. Try setting Skin for the RadAjaxLoadignPanel and see how it goes.
2. See the forum thread below for possible approach:
http://www.telerik.com/forums/radgrid-how-to-keep-in-edit-mode-and-display-error
3.Can you pleas elaborate what do you mean by "not working"? The skin does not apply or you are receiving any errors on the page when try to set different than the "Default" skin"?
Regards,
Maria Ilieva
Telerik