Hi,
We have a rad grid with bound columns. Now we have a check box in the same grid as item-template field.
One particular column will be edited on clicking the particular cell in the grid.We have already done this,but we want the checkboxes to remain as checked after editing which is not happening in our case.
Please provide us with a solution. We are providing you with the source code for better understanding.
.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<br />
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
<!--
var hasChanges, inputs, dropdowns, editedRow;
function RowClick(sender, eventArgs)
{
var cellIndex = eventArgs.get_domEvent().target.cellIndex;
editedRow = eventArgs.get_itemIndexHierarchical();
var myArgs=new Array();
//args assigning placed here before
myArgs[2]="notPerformUpdate";
if(editedRow && hasChanges)
{
hasChanges = false;
if(confirm("Update changes?"))
{
myArgs[2]="PerformUpdate";
myArgs[3]=old_rowId;
myArgs[4]=old_uniqueName;
}
old_rowId=editedRow;
old_uniqueName=eventArgs.get_tableView().get_columns()[cellIndex].get_uniqueName();
}
else
{
old_rowId=editedRow;
old_uniqueName=eventArgs.get_tableView().get_columns()[cellIndex].get_uniqueName();
}
myArgs[0]=eventArgs.get_tableView().get_columns()[cellIndex].get_uniqueName();
myArgs[1]=editedRow;
callAjax(myArgs);
}
function callAjax(arg)
{
ajaxManager.ajaxRequest(arg);
}
function GridCommand(sender, args)
{
if (args.get_commandName() != "Edit")
{
editedRow = null;
}
}
function GridCreated(sender, eventArgs)
{
var gridElement = sender.get_element();
var elementsToUse = [];
inputs = gridElement.getElementsByTagName("input");
for (var i = 0; i < inputs.length;i++)
{
var lowerType = inputs[i].type.toLowerCase();
if(lowerType == "hidden" || lowerType == "button")
{
continue;
}
Array.add(elementsToUse, inputs[i]);
inputs[i].onchange = TrackChanges;
}
dropdowns = gridElement.getElementsByTagName("select");
for (var i = 0; i < dropdowns.length;i++)
{
dropdowns[i].onchange = TrackChanges;
}
setTimeout(function(){if(elementsToUse[0])elementsToUse[0].focus();},100);
}
function TrackChanges(e)
{
hasChanges = true;
}
var old_uniqueName, old_rowId;
var ajaxManager;
function pageLoad()
{
ajaxManager= $find("<%= RadAjaxManager1.ClientID %>");
}
-->
</script>
</telerik:RadCodeBlock>
<br />
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" GridLines="None" OnItemUpdated="RadGrid1_ItemUpdated" OnDataBound="RadGrid1_DataBound" Skin="WebBlue">
<HeaderContextMenu Skin="Outlook">
<CollapseAnimation Duration="200" Type="OutQuint" />
</HeaderContextMenu>
<MasterTableView AutoGenerateColumns="False" EditMode="InPlace" DataKeyNames="code" DataSourceID="SqlDataSource1">
<Columns>
<telerik:GridTemplateColumn>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="code" ReadOnly="True" HeaderText="code4" SortExpression="code"
UniqueName="code">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="name" HeaderText="doctor" SortExpression="name"
UniqueName="name">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings>
<ClientEvents OnRowClick="RowClick" OnGridCreated="GridCreated" OnCommand="GridCommand" />
</ClientSettings>
<FilterMenu Skin="Outlook">
<CollapseAnimation Duration="200" Type="OutQuint" />
</FilterMenu>
</telerik:RadGrid><asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT top 10 [code], [name] FROM [doctor]">
</asp:SqlDataSource>
<br />
<br />
<asp:ScriptManager id="ScriptManager1" runat="server">
</asp:ScriptManager></div>
<br />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" onajaxrequest="RadAjaxManager1_AjaxRequest1" >
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
</form>
</body>
</html>
aspx.cs:-
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using Telerik.Web.UI;
public partial class _Default : System.Web.UI.Page
{
string colname;
int x;
protected void Page_Load(object sender, EventArgs e)
{
}
protected void RadAjaxManager1_AjaxRequest1(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
string ConnectionString = ConfigurationSettings.AppSettings["ConnectionString"].ToString();
SqlConnection Con = new SqlConnection(ConnectionString);
string value = null, PK = null;
if ((e.Argument.ToString().Split(',')[2]) == "PerformUpdate")
{
string index = (e.Argument.ToString().Split(',')[3]).ToString();
string un = (e.Argument.ToString().Split(',')[4]).ToString();
GridDataItem item = (GridDataItem)RadGrid1.MasterTableView.Items[index];
GridEditableItem editItem = (GridEditableItem)RadGrid1.EditItems[index];
if (editItem.IsInEditMode )
{
TextBox txt = (TextBox)item[un].Controls[0];
value = txt.Text;
TextBox txt1 = (TextBox)item["code"].Controls[0];
PK = txt1.Text;
string strtxt = item["code"].Text.ToString();
}
Con.Open();
SqlCommand cmd = new SqlCommand();
cmd.Connection = Con;
cmd.CommandText = "UPDATE doctor SET " + un + " = '" + value + "' WHERE code= '" + PK + "'";
cmd.ExecuteNonQuery();
Con.Close();
}
string index1 = (e.Argument.ToString().Split(',')[1]).ToString();
ViewState["index"] = index1;
foreach (GridColumn column in RadGrid1.MasterTableView.RenderColumns)
{
if (column.ColumnType == "GridBoundColumn")
{
if (column.UniqueName == (e.Argument.ToString().Split(',')[0]) )
{
if ((e.Argument.ToString().Split(',')[0]) != "code")
{
colname = (e.Argument.ToString().Split(',')[0]);
GridBoundColumn col = (GridBoundColumn)column;
col.ReadOnly = false;
}
}
else
{
GridBoundColumn col = (GridBoundColumn)column;
col.ReadOnly = true;
}
}
}
foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
{
if (item.RowIndex == Convert.ToInt32((e.Argument.ToString().Split(',')[1])) + 2 )
{
item.Edit = true;
}
}
RadGrid1.MasterTableView.SortExpressions.Clear();
RadGrid1.MasterTableView.GroupByExpressions.Clear();
RadGrid1.Rebind();
//GridDataItem it = (GridDataItem)RadGrid1.MasterTableView.Items[Convert.ToString(ViewState["index"])];
//CheckBox Chk1 = (CheckBox)item.FindControl("CheckBox1");
//for (int x = 0; x < Int32.Parse(Convert.ToString(ViewState["index"])); x++)
//{
// if (x == Int32.Parse(Convert.ToString(ViewState["index"])))
// {
// Chk1.Checked = true;
// break;
// }
//}
foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
{
CheckBox chk = (CheckBox)item.FindControl("CheckBox1");
if (x == Int32.Parse(Convert.ToString(ViewState["index"])))
{
chk.Checked = true;
break;
}
x++;
}
}
protected void RadGrid1_ItemUpdated(object source, Telerik.Web.UI.GridUpdatedEventArgs e)
{
}
protected void RadGrid1_DataBound(object sender, EventArgs e)
{
}
}
Thanks & Regards
Purojit
We have a rad grid with bound columns. Now we have a check box in the same grid as item-template field.
One particular column will be edited on clicking the particular cell in the grid.We have already done this,but we want the checkboxes to remain as checked after editing which is not happening in our case.
Please provide us with a solution. We are providing you with the source code for better understanding.
.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<br />
<br />
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
<!--
var hasChanges, inputs, dropdowns, editedRow;
function RowClick(sender, eventArgs)
{
var cellIndex = eventArgs.get_domEvent().target.cellIndex;
editedRow = eventArgs.get_itemIndexHierarchical();
var myArgs=new Array();
//args assigning placed here before
myArgs[2]="notPerformUpdate";
if(editedRow && hasChanges)
{
hasChanges = false;
if(confirm("Update changes?"))
{
myArgs[2]="PerformUpdate";
myArgs[3]=old_rowId;
myArgs[4]=old_uniqueName;
}
old_rowId=editedRow;
old_uniqueName=eventArgs.get_tableView().get_columns()[cellIndex].get_uniqueName();
}
else
{
old_rowId=editedRow;
old_uniqueName=eventArgs.get_tableView().get_columns()[cellIndex].get_uniqueName();
}
myArgs[0]=eventArgs.get_tableView().get_columns()[cellIndex].get_uniqueName();
myArgs[1]=editedRow;
callAjax(myArgs);
}
function callAjax(arg)
{
ajaxManager.ajaxRequest(arg);
}
function GridCommand(sender, args)
{
if (args.get_commandName() != "Edit")
{
editedRow = null;
}
}
function GridCreated(sender, eventArgs)
{
var gridElement = sender.get_element();
var elementsToUse = [];
inputs = gridElement.getElementsByTagName("input");
for (var i = 0; i < inputs.length;i++)
{
var lowerType = inputs[i].type.toLowerCase();
if(lowerType == "hidden" || lowerType == "button")
{
continue;
}
Array.add(elementsToUse, inputs[i]);
inputs[i].onchange = TrackChanges;
}
dropdowns = gridElement.getElementsByTagName("select");
for (var i = 0; i < dropdowns.length;i++)
{
dropdowns[i].onchange = TrackChanges;
}
setTimeout(function(){if(elementsToUse[0])elementsToUse[0].focus();},100);
}
function TrackChanges(e)
{
hasChanges = true;
}
var old_uniqueName, old_rowId;
var ajaxManager;
function pageLoad()
{
ajaxManager= $find("<%= RadAjaxManager1.ClientID %>");
}
-->
</script>
</telerik:RadCodeBlock>
<br />
<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSource1" GridLines="None" OnItemUpdated="RadGrid1_ItemUpdated" OnDataBound="RadGrid1_DataBound" Skin="WebBlue">
<HeaderContextMenu Skin="Outlook">
<CollapseAnimation Duration="200" Type="OutQuint" />
</HeaderContextMenu>
<MasterTableView AutoGenerateColumns="False" EditMode="InPlace" DataKeyNames="code" DataSourceID="SqlDataSource1">
<Columns>
<telerik:GridTemplateColumn>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="code" ReadOnly="True" HeaderText="code4" SortExpression="code"
UniqueName="code">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="name" HeaderText="doctor" SortExpression="name"
UniqueName="name">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings>
<ClientEvents OnRowClick="RowClick" OnGridCreated="GridCreated" OnCommand="GridCommand" />
</ClientSettings>
<FilterMenu Skin="Outlook">
<CollapseAnimation Duration="200" Type="OutQuint" />
</FilterMenu>
</telerik:RadGrid><asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT top 10 [code], [name] FROM [doctor]">
</asp:SqlDataSource>
<br />
<br />
<asp:ScriptManager id="ScriptManager1" runat="server">
</asp:ScriptManager></div>
<br />
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" onajaxrequest="RadAjaxManager1_AjaxRequest1" >
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
</UpdatedControls>
</telerik:AjaxSetting>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
</form>
</body>
</html>
aspx.cs:-
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using Telerik.Web.UI;
public partial class _Default : System.Web.UI.Page
{
string colname;
int x;
protected void Page_Load(object sender, EventArgs e)
{
}
protected void RadAjaxManager1_AjaxRequest1(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
{
string ConnectionString = ConfigurationSettings.AppSettings["ConnectionString"].ToString();
SqlConnection Con = new SqlConnection(ConnectionString);
string value = null, PK = null;
if ((e.Argument.ToString().Split(',')[2]) == "PerformUpdate")
{
string index = (e.Argument.ToString().Split(',')[3]).ToString();
string un = (e.Argument.ToString().Split(',')[4]).ToString();
GridDataItem item = (GridDataItem)RadGrid1.MasterTableView.Items[index];
GridEditableItem editItem = (GridEditableItem)RadGrid1.EditItems[index];
if (editItem.IsInEditMode )
{
TextBox txt = (TextBox)item[un].Controls[0];
value = txt.Text;
TextBox txt1 = (TextBox)item["code"].Controls[0];
PK = txt1.Text;
string strtxt = item["code"].Text.ToString();
}
Con.Open();
SqlCommand cmd = new SqlCommand();
cmd.Connection = Con;
cmd.CommandText = "UPDATE doctor SET " + un + " = '" + value + "' WHERE code= '" + PK + "'";
cmd.ExecuteNonQuery();
Con.Close();
}
string index1 = (e.Argument.ToString().Split(',')[1]).ToString();
ViewState["index"] = index1;
foreach (GridColumn column in RadGrid1.MasterTableView.RenderColumns)
{
if (column.ColumnType == "GridBoundColumn")
{
if (column.UniqueName == (e.Argument.ToString().Split(',')[0]) )
{
if ((e.Argument.ToString().Split(',')[0]) != "code")
{
colname = (e.Argument.ToString().Split(',')[0]);
GridBoundColumn col = (GridBoundColumn)column;
col.ReadOnly = false;
}
}
else
{
GridBoundColumn col = (GridBoundColumn)column;
col.ReadOnly = true;
}
}
}
foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
{
if (item.RowIndex == Convert.ToInt32((e.Argument.ToString().Split(',')[1])) + 2 )
{
item.Edit = true;
}
}
RadGrid1.MasterTableView.SortExpressions.Clear();
RadGrid1.MasterTableView.GroupByExpressions.Clear();
RadGrid1.Rebind();
//GridDataItem it = (GridDataItem)RadGrid1.MasterTableView.Items[Convert.ToString(ViewState["index"])];
//CheckBox Chk1 = (CheckBox)item.FindControl("CheckBox1");
//for (int x = 0; x < Int32.Parse(Convert.ToString(ViewState["index"])); x++)
//{
// if (x == Int32.Parse(Convert.ToString(ViewState["index"])))
// {
// Chk1.Checked = true;
// break;
// }
//}
foreach (GridDataItem item in RadGrid1.MasterTableView.Items)
{
CheckBox chk = (CheckBox)item.FindControl("CheckBox1");
if (x == Int32.Parse(Convert.ToString(ViewState["index"])))
{
chk.Checked = true;
break;
}
x++;
}
}
protected void RadGrid1_ItemUpdated(object source, Telerik.Web.UI.GridUpdatedEventArgs e)
{
}
protected void RadGrid1_DataBound(object sender, EventArgs e)
{
}
}
Thanks & Regards
Purojit
2 Answers, 1 is accepted
0
Purojit
Top achievements
Rank 1
Rank 1
answered on 18 Jun 2013, 07:17 AM
Hi,
For better understanding, we are attaching our requirement in screenshot.
Thanks
Purojit
For better understanding, we are attaching our requirement in screenshot.
Thanks
Purojit
0
Hi,
Most probably the checkbox lose its checked state because of the Rebind() you are performing in order to put the Grid in edit mode. You will need to preserve its checked state on Rebind(). You could check this help topic for more information on how to achieve your goal.
Regards,
Andrey
Telerik
Most probably the checkbox lose its checked state because of the Rebind() you are performing in order to put the Grid in edit mode. You will need to preserve its checked state on Rebind(). You could check this help topic for more information on how to achieve your goal.
Regards,
Andrey
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.