1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Grid Control (edit, delete, add) not working -- stuck on waiting popup

Grid Control (edit, delete, add) not working -- stuck on waiting popup

Hi,

I'm testing the Grid control --- Grid is displayed, connection to database is working too, but the control for edit, delete and add does not work. i.e. it does not update in the database and the waiting popup keeps running.

Thanks in advance.


Here is the aspx :


<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ManipulateData.aspx.cs" Inherits="ARID.Tests.ManipulateData" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<script src="../Scripts/jquery.validate.min.js" type="text/javascript"></script>
<hr>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<ej:Grid ID="Grid1" runat='server' AllowPaging="True" AllowSorting="True" OnServerEditRow="EditEvents_ServerEditRow" OnServerAddRow="EditEvents_ServerAddRow" OnServerDeleteRow="EditEvents_ServerDeleteRow">
<ClientSideEvents ActionComplete="complete" EndAdd="endAdd" EndDelete="endDelete" EndEdit="endEdit"
RecordDoubleClick="doubleClick" />
<Columns>
<ej:Column Field="TestID" DataType="number" AllowEditing="False" IsIdentity="True"></ej:Column>
<ej:Column Field="TestName" DataType="string"></ej:Column>
</Columns>
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings>
</ej:Grid>
<asp:SqlDataSource runat="server" ID="SqlData" ConnectionString='<%$ ConnectionStrings:DefaultConnection %>' SelectCommand="SELECT * FROM [Test]"></asp:SqlDataSource>
</ContentTemplate>
</asp:UpdatePanel>
<hr />
<script type="text/javascript">
function endAdd(args) {
$('#<%= Grid1.ClientID %>').ejWaitingPopup("show");
}
function endDelete(args) {
$('#<%= Grid1.ClientID %>').ejWaitingPopup("show");
}
function endEdit(args) {
$('#<%= Grid1.ClientID %>').ejWaitingPopup("show");
}
function complete(args) {
if (args.requestType == "refresh") {
$('#<%= Grid1.ClientID %>').ejWaitingPopup("hide");
}
}
</script>
</asp:Content>

Here is the Code Behind:


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using Syncfusion.JavaScript.Web;
namespace ARID.Tests
{
public partial class ManipulateData : System.Web.UI.Page
{
DataTable dt = new DataTable("Test");
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["DefaultConnection"].ToString());
dt = new DataTable("Test");
SqlCommand cmd = new SqlCommand();
cmd.Connection = myConnection;
cmd.CommandText = "select * from Test";
cmd.CommandType = CommandType.Text;
SqlDataAdapter da = new SqlDataAdapter();
da.SelectCommand = cmd;
if (myConnection.State == ConnectionState.Closed)
{
myConnection.Open();
}
da.Fill(dt);
Session["SqlDataSource"] = dt;
dataBind();
}
}
protected void dataBind()
{
Grid1.DataSource = (DataTable)Session["SqlDataSource"];
Grid1.DataBind();
}
protected void EditEvents_ServerEditRow(object sender, GridEventArgs e)
{
EditAction(e.EventType, e.Arguments["data"]);
}
protected void EditEvents_ServerAddRow(object sender, GridEventArgs e)
{
EditAction(e.EventType, e.Arguments["data"]);
}
protected void EditEvents_ServerDeleteRow(object sender, GridEventArgs e)
{
EditAction(e.EventType, e.Arguments["data"]);
}
protected void EditAction(string eventType, object record)
{
SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["DefaultConnection"].ToString());
dt = Session["SqlDataSource"] as DataTable;
Dictionary<string, object> KeyVal = record as Dictionary<string, object>;
if (eventType == "endEdit")
{
var Test = KeyVal.Values.ToArray();
foreach (DataRow dr in dt.Rows)
{
if (Convert.ToInt32(dr["TestID"]) == Convert.ToInt32(Test[0]))
{
dr["TestName"] = Test[1];
dr.AcceptChanges();
}
}
}
else if (eventType == "endAdd")
{
var Test = KeyVal.Values.ToArray();
DataRow dr = dt.NewRow();
dr["TestID"] = Test[0];
dr["TestName"] = Test[1];
dt.Rows.Add(dr);
}
else if (eventType == "endDelete")
{
var Test = KeyVal.Values.ToArray();
if (Session["SqlDataSource"] != null)
{
DataRow[] rows = dt.Select("TestID = " + Test[0]);
foreach (DataRow row in rows)
dt.Rows.Remove(row);
}
}
Session["SqlDataSource"] = dt;
dataBind();
}
}
}




1 Reply
VN Vignesh Natarajan Syncfusion Team October 25, 2017 02:58 PM UTC

Hi Doorgesh, 

Thanks for using Syncfusion products. 

We have analyzed your query and we are able to reproduce the reported issue. From the code snippet you shared, we have found that you have not enabled isPrimaryKey property. While editing at least one column must be primary key column and they should have unique values.  

We have prepared a knowledge base documentation regarding the primary Key. please refer the below documentation for knowledgebase document 


Please refer the below code snippet  

    <Columns> 
                    <ej:Column Field="OrderID" DataType="number" AllowEditing="False" IsPrimaryKey="true" IsIdentity="True"></ej:Column> 
 
                    <ej:Column Field="CustomerID" DataType="string"></ej:Column> 
                </Columns> 

You have set isidentity property to TestID column. When we set isIdentity property to TestID column, that column will be disabled state while  editing or Adding. So, we have modified the server side code to add record. 

Please refer the server side code 

protected void EditAction(string eventType, object record) 
        { 
            . . . . .  
            if (eventType == "endEdit") 
            { 
                var Order = KeyVal.Values.ToArray(); 
                foreach (DataRow dr in dt.Rows) 
                { 
                    if (Convert.ToInt32(dr["OrderID"]) == Convert.ToInt32(Order[0])) 
                    { 
                        dr["CustomerID"] = Order[1]; 
                        dr.AcceptChanges(); 
                    } 
 
                } 
            } 
 
            else if (eventType == "endAdd") 
            { 
                var Order = KeyVal.Values.ToArray();  
                DataRow dr = dt.NewRow(); 
                Random ran = new Random(); // to generate random value  
                dr["OrderID"] = ran.Next(); // assign random value to orderID column 
                dr["CustomerID"] = Order[0]; 
                dt.Rows.Add(dr); 
            } 
            else if (eventType == "endDelete") 
            { 
                . . . .  
            } 
            Session["SqlDataSource"] = dt; 
            dataBind(); 
        } 
 
    } 
} 


For your convenience we have modified your code and prepared sample which can be downloaded from below link 

Refer our online documentation for your reference 



if you still face the issue, kindly get back to us with following details 

  1. Share the screenshot of the script error / exception error thrown(if any)
  2. Screenshot of the error in the network tab.
  3. If possible kindly reproduce the error in provided sample.
 
Regards, 
Vignesh Natarajan 



Loader.
Up arrow icon