This is a migrated thread and some comments may be shown as answers.

Insert ,Update,delete in Radgrid with External textbox value and external button click

1 Answer 288 Views

Grid

This is a migrated thread and some comments may be shown as answers.

ALEX asked on 23 Nov 2012, 09:29 AM

Hi Friends,
I need to perform insert,update,delete operation in radgrid by passing values from external textboxes and external button click event in SQL DB statement.
Examples given in radgrid demo is on client side and also external form template mode.so its not useful,pls dont post me as refer this link in telerik demo.

In this code,I created radgrid.And an External textbox and external radbuttons .On row select i pass the radgrid selected row values to external textboxes using javascript.Now i need is when i click update ,insert,delete button ,based on textbox value,radgrid needs to binded,

I fir

Pls anyone help on this matter ,here my code

<head runat="server">

<title>Sales Dashboard</title>

<link rel="shortcut icon" href="favicon.ico" />

<link href="styles.css" rel="stylesheet" type="text/css" />

<link href="Skins/TreeView.SalesBlack.css" rel="stylesheet" type="text/css" />

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function RowSelected(sender, args) {

document.getElementById("<%= tag_name.ClientID %>").innerHTML =

"Resource Name";

document.getElementById("<%= tag_mobile.ClientID %>").innerHTML =

"Mobile No";

document.getElementById("<%= tag_email.ClientID %>").innerHTML =

"E-Mail";

document.getElementById("<%= tag_primary.ClientID %>").innerHTML =

"Primary Skill";

document.getElementById("<%= tag_createdby.ClientID %>").innerHTML =

"Created By";

document.getElementById("<%= lbl_name.ClientID %>").innerHTML =

args.getDataKeyValue("ResourceName");

document.getElementById("<%= lbl_mobile.ClientID %>").innerHTML =

args.getDataKeyValue("MobileNo");

document.getElementById("<%= lbl_email.ClientID %>").innerHTML =

args.getDataKeyValue("EMail");

document.getElementById("<%= lbl_primary.ClientID %>").innerHTML =

args.getDataKeyValue("PrimarySkill");

document.getElementById("<%= lbl_createdby.ClientID %>").innerHTML =

args.getDataKeyValue("CreatedBy");

var txt_name = $find("txt_name");

txt_name.set_value(args.getDataKeyValue("ResourceName"));

var txt_mobile = $find("txt_mobile");

txt_mobile.set_value(args.getDataKeyValue("MobileNo"));

var txt_email = $find("txt_email");

txt_email.set_value(args.getDataKeyValue("EMail"));

var txt_primary = $find("txt_primary");

txt_primary.set_value(args.getDataKeyValue("PrimarySkill"));

var txt_createdby = $find("txt_createdby");

txt_createdby.set_value(args.getDataKeyValue("CreatedBy"));

var textbox = $find("txt_name");

textbox.set_visible(false);

var textbox1 = $find("txt_mobile");

textbox1.set_visible(false);

var textbox2 = $find("txt_email");

textbox2.set_visible(false);

var textbox4 = $find("txt_primary");

textbox4.set_visible(false);

var textbox3 = $find("txt_createdby");

textbox3.set_visible(false);

document.getElementById("<%= lbl_name.ClientID %>").style.display = 'block';

document.getElementById("<%= lbl_mobile.ClientID %>").style.display = 'block';

document.getElementById("<%= lbl_email.ClientID %>").style.display = 'block';

document.getElementById("<%= lbl_primary.ClientID %>").style.display = 'block';

document.getElementById("<%= lbl_createdby.ClientID %>").style.display = 'block';

document.getElementById("<%= edit.ClientID %>").style.display = "block";

}

</script>

<script type="text/javascript">

function edit(button, args) {

debugger;

var textbox = $find("txt_name");

textbox.set_visible(true);

var textbox1 = $find("txt_mobile");

textbox1.set_visible(true);

var textbox2 = $find("txt_email");

textbox2.set_visible(true);

var textbox4 = $find("txt_primary");

textbox4.set_visible(true);

var textbox3 = $find("txt_createdby");

textbox3.set_visible(true);

document.getElementById("<%= lbl_name.ClientID %>").style.display = 'none';

document.getElementById("<%= lbl_mobile.ClientID %>").style.display = 'none';

document.getElementById("<%= lbl_email.ClientID %>").style.display = 'none';

document.getElementById("<%= lbl_primary.ClientID %>").style.display = 'none';

document.getElementById("<%= lbl_createdby.ClientID %>").style.display = 'none';

var btn = $find("edit");

btn.set_value = ("Update");

button.set_autoPostBack(false);

// var textbox = $find("txt_name");

// textbox.set_visible(true);

// var txtDate = $find("txt_name");

// txtDate.set_value(args.getDataKeyValue("ResourceName"));

}

</script>

</telerik:RadCodeBlock>

<style type="text/css">

.align

{

text-align: right;

}

</style>

<style type="text/css">

.edit

{

display:none;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager runat="server" ID="RadScriptManager1">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

</Scripts>

</telerik:RadScriptManager>

<telerik:RadStyleSheetManager runat="server" ID="RadStyleSheetManager1" />

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Scrollbars" />

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<div style="width: 60%; height: 100%; float: left;">

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" ShowFooter="True"

Style="outline: 0" GroupingEnabled="true" ShowGroupPanel="true" AutoGenerateColumns="False"

AllowSorting="True" PageSize="15" Width="90%" GridLines="None" CellPadding="0"

OnNeedDataSource="RadGrid1_NeedDataSource" Skin="Black"

>

<MasterTableView ClientDataKeyNames="ResourceName,MobileNo ,EMail ,CreatedBy ,PrimarySkill"

AutoGenerateColumns="false" ShowFooter="true" AllowFilteringByColumn="true" PagerStyle-Mode="NextPrevAndNumeric"

TableLayout="Fixed">

<Columns>

<telerik:GridBoundColumn DataField="ResourceName" HeaderText="Resource Name" UniqueName ="ResourceName" CurrentFilterFunction="equalto"

FilterDelay="1000" ShowFilterIcon="false" HeaderStyle-Width="120px" FilterControlWidth="105px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="MobileNo" HeaderStyle-Width="110px" HeaderText="Mobile"

FilterControlWidth="70px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="EMail" UniqueName ="email" HeaderStyle-Width="190px" HeaderText="E-Mail"

FilterControlWidth="120px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="CreatedBy" HeaderText="Created By" CurrentFilterFunction="equalto"

FilterDelay="1000" ShowFilterIcon="false" FilterControlWidth="70px">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="PrimarySkill" UniqueName ="CurrentDesign" HeaderStyle-Width="190px" HeaderText="Primary Skill"

FilterControlWidth="0px">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" AllowDragToGroup="true"

AllowColumnsReorder="true" ReorderColumnsOnClient="true" ColumnsReorderMethod="Reorder">

<Selecting AllowRowSelect ="true" />

<ClientEvents OnRowSelected="RowSelected"></ClientEvents>

<Animation AllowColumnReorderAnimation="true" AllowColumnRevertAnimation="true">

</Animation>

<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" />

</ClientSettings>

</telerik:RadGrid>

</div>

<div style="width: 40%; height: 80%; float: right;">

>

<table style="margin: 50% auto auto 1px">

<tr>

<td>

<asp:Panel ID="panel1" runat="server">

<table>

<tr>

<td>

<asp:Label ID="tag_name" Font-Bold="True" ForeColor="#B5B5B5" Font-Size="Small" runat="server"></asp:Label>

</td>

<td>

<asp:Label ID="lbl_name" runat="server" ForeColor="WhiteSmoke" Font-Bold="True" Font-Size="Large"></asp:Label>

<telerik:RadTextBox ID="txt_name" runat="server" ForeColor="WhiteSmoke" Skin="Black" Font-Size="Large">

</telerik:RadTextBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID="tag_mobile" ForeColor="#B5B5B5" runat="server" Font-Bold="True" Font-Size="Small"></asp:Label>

</td>

<td>

<asp:Label ID="lbl_mobile" ForeColor="WhiteSmoke" Font-Size="Large" runat="server"></asp:Label>

<telerik:RadTextBox ID="txt_mobile" runat ="server" ForeColor ="WhiteSmoke" Font-Size="Large" Skin ="Black" ></telerik:RadTextBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID="tag_email" ForeColor="#B5B5B5" runat="server" Font-Bold="True" Font-Size="Small"></asp:Label>

</td>

<td>

<asp:Label ID="lbl_email" ForeColor="WhiteSmoke" Font-Size="Large" runat="server"></asp:Label>

<telerik:RadTextBox ID="txt_email" runat ="server" ForeColor ="WhiteSmoke" Font-Size="Large" Skin ="Black" ></telerik:RadTextBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID="tag_primary" ForeColor="#B5B5B5" runat="server" Font-Bold="True"

Font-Size="Small"></asp:Label>

</td>

<td>

<asp:Label ID="lbl_primary" ForeColor="WhiteSmoke" Font-Size="Large" runat="server"></asp:Label>

<telerik:RadTextBox ID="txt_primary" runat ="server"

ForeColor ="WhiteSmoke" Font-Size="Large" Skin="Black"

></telerik:RadTextBox>

</td>

</tr>

<tr>

<td>

<asp:Label ID="tag_createdby" ForeColor="#B5B5B5" runat="server" Font-Bold="True"

Font-Size="Small"></asp:Label>

</td>

<td>

<asp:Label ID="lbl_createdby" ForeColor="WhiteSmoke" Font-Size="Large" runat="server"></asp:Label>

<telerik:RadTextBox ID="txt_createdby" runat ="server" ForeColor ="WhiteSmoke" Font-Size="Large" Skin="Black" ></telerik:RadTextBox>

</td>

</tr>

<tr>

<td>

<telerik:RadButton ID="edit" Width="35px" Text="Edit" style="display :none;" OnClientClicked="edit"

runat ="server" Skin="Forest"

>

</telerik:RadButton>

</td>

</tr>

</table>

</asp:Panel>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

My cs code is :

public partial class DMSdashboard : System.Web.UI.Page

{

SqlConnection conn = null;

SqlDataReader reader = null;

protected void Page_Load(object sender, EventArgs e)

{

}

private SqlDataReader ReadRecords(string query)

{

String con = @"Data Source=CHN374\SQLEXPRESS;Initial Catalog=Telerik;Integrated Security=true";

conn = new SqlConnection(con);

conn.Open();

SqlCommand cmd = new SqlCommand(query, conn);

reader = cmd.ExecuteReader();

return reader;

}

protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

RadGrid1.DataSource = GetDataTable("select RecId, ResourceName ,MobileNo ,ContactNo ,EMail ,CreatedBy ,PrimarySkill,SecondarySkill from ResourceDocket");

}

public DataTable GetDataTable(string query)

{

String constring = @"Data Source=CHN374\SQLEXPRESS;

Initial Catalog=MyDB;

Integrated Security=True";

SqlDataAdapter adapter = new SqlDataAdapter();

DataTable myDataTable = new DataTable();

using (SqlConnection con = new SqlConnection(constring))

{

adapter.SelectCommand = new SqlCommand(query, con);

adapter.Fill(myDataTable);

}

return myDataTable;

}

protected void update_button_Click(object sender, EventArgs e)

{

}

protected void insert_button_Click(object sender, EventArgs e)

{

}

protected void delete_button_Click(object sender, EventArgs e)

{

}

I need how to perform insert,update,delete on this external button click from values of textbox1,textbox2 etc.. and pass it onto radgrid

I search it in many places proper solution is not found on website,Pls anyone help on this issue immediately,I posted two days before,still i never get any reply.If its not possible tell me its not possible.I wasted my time with this,

1 Answer, 1 is accepted

answered on 28 Nov 2012, 08:12 AM

Hello,

In order to achieve your goal you need to make a postback to the server with the button click and on the server to collect the text from the TextBox controls and initiate a CRUD operation to the datasource:

protected void UpdateButton(object sender, EventArgs e)

{

//Get the primary key value using the DataKeyValue.

string EmployeeID = editedItem.OwnerTableView.DataKeyValues[editedItem.ItemIndex]["EmployeeID"].ToString();

//Access the textbox from the edit form template and store the values in string variables.

string LastName = txt_name.Text;

string textbox1 = txt_mobile.Text;

string textbox2 = txt_email.Text;

string textbox3 = txt_primary.Text;

string textbox4 = txt_createdby.Text;

try

{

//Open the SqlConnection

SqlConnection.Open();

//Update Query to update the Datatable

string updateQuery = "Your update statement goes here!";

SqlCommand.CommandText = updateQuery;

SqlCommand.Connection = SqlConnection;

SqlCommand.ExecuteNonQuery();

//Close the SqlConnection

SqlConnection.Close();

}

catch (Exception ex)

{

e.Canceled = true;

}

All the best,
Andrey
the Telerik team

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 their blog feed now.