We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

'add,edit,delete,update,cancel' All greyed out on Toolbar.

Hi,

I am having some trouble with the 'add,edit,delete,update,cancel' buttons in a 'grid'. The export to Excel button works fine, and the grid is displaying the correct data, it's just I can't get these buttons not to be greyed out. In my code behind I am using an IEnumerable for databinding.

Hope you can help.

Thanks,

Alex

6 Replies

VN Vignesh Natarajan Syncfusion Team March 15, 2019 06:25 AM UTC

Hi Alex, 
 
Thanks for using Syncfusion products. 
 
Query: “ it's just I can't get these buttons not to be greyed out” 
 
From your query, we understand that you are facing issue with the Grid toolbar items (all the edit related icons are grayed out). By default toolbar Items will enabled only when EditSettings is defined in the Grid.   
 
Refer the below code example 
 
<ej:Grid ID="FlatGrid" runat="server" AllowPaging="true"> 
           <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"></EditSettings> 
           <ToolbarSettings ShowToolbar="true" ToolbarItems="add,edit,delete,update,cancel"></ToolbarSettings> 
           <Columns> 
                <ej:Column Field="OrderID" IsPrimaryKey="true"/> 
                <ej:Column Field="CustomerID" /> 
                <ej:Column Field="EmployeeID"/> 
                <ej:Column Field="ShipCity"/> 
                <ej:Column Field="ShipCountry"/> 
           </Columns>  
           </ej:Grid> 
 
Please refer our help documentation for your reference 
 
 
If you still facing the issue, please get back to us with more details (grid rendering code). 
 
Regards, 
Vignesh Natarajan. 



AJ Alex Jermy March 15, 2019 09:26 AM UTC

Hi Vigresh,

I have added the code you highlighted in yellow, and now the buttons on the toolbar are no longer greyed out, and also clickable. However, they are not performing as I would have expected?

When no record is highlighted, the edit button gives a 'no records selected for edit operation' which I would expect, but when a record is highlighted - nothing happens. Also the 'add' button is clickable but it doesn't seem to fire an event? The delete button is similar, it can be clicked but it doesn't perform the expected action.

The code is below:

<ej:Grid AllowSearching="true" AllowSorting="true" DataSourceCachingMode="ViewState" ID="Grid" AllowFiltering="true" AllowGrouping="true" AllowPaging="true" IsResponsive="true" runat="server" OnServerExcelExporting="Grid_ServerExcelExporting">

<EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"></EditSettings>

<FilterSettings FilterType="Excel"></FilterSettings>

<ToolbarSettings ShowToolbar="true" ToolbarItems="excelExport,add,edit,delete,update,cancel"></ToolbarSettings>

<Columns>

<ej:Column Field="Boat_ID" Visible="true" IsPrimaryKey="true" />

<ej:Column Field="Name" HeaderText="Name" />

<ej:Column Field="Notes" HeaderText="Notes" />

<ej:Column Field="Estimated_Total_Hours" HeaderText="Estimated Hours" />

<ej:Column Field="project_ID" HeaderText="ProjectID" />

</Columns>

</ej:Grid>



VN Vignesh Natarajan Syncfusion Team March 18, 2019 05:53 AM UTC

Hi Alex, 
 
Thanks for the update. 
 
Query: “Also the 'add' button is clickable but it doesn't seem to fire an event? The delete button is similar, it can be clicked but it doesn't perform the expected action. 
 
From your query, we understand that you are facing issue while performing CRUD action in ejGrid. We have prepared a sample using your code and we are not able to reproduce the reported issue at our end. Kindly download the sample from below link 
 
 
Please share the following details which will help us to validate the reported issue at our end. 
 
1.      Share the Grid rendering code.  
2.      Share the screenshot of script error in console window with full stack trace. 
3.      Share the exact scenario of reported issue. (i.e) are you facing the reported issue after performing certain actions. Etc 
4.      Are you saying that actions performed locally not in server? 
5.      Share the essential studio version (xx.x.x.xx) 
 
Regards, 
Vignesh Natarajan. 
 



AJ Alex Jermy April 2, 2019 01:17 PM UTC

Hi,



I have managed to get the icons to appear without being greyed out, and they seem to be doing the right things on the client side, but I am having difficulty getting them to perform CRUD operations on a SQL database. I have followed some tutorials I have found but am still having trouble getting the data to persist. Perhaps you can help with a better way for performing this operation? I need to have the grid rows update to a SQL database. 



Thanks for the reply. I will copy and paste and also attach the relevant files.








using System;

using Dapper;

using System.Web;

using System.Collections;

using System.Collections.Generic;

using System.Linq;

using Syncfusion.XlsIO;

using Syncfusion.EJ.Export;

using Models;

using Syncfusion.JavaScript.Web;

using System.Data.SqlClient;

using System.Configuration;

using System.Data;

public partial class Yacht_Event_History : BandPage

{

 

 #region Sql

 private readonly string GetYachtEventHistory = @"

select top 50

y.Ext_Yacht_Event_Type_ID, y.Boat_ID, y.Varchar_Value, y.Decimal_Value, y.Date_Value, y.Created_Date, y.Notes, y.EXT_Yacht_Event_ID,

u.Project_ID, EXT_Boat_ID, u.Estimated_Total_Hours,

p.Project_ID, p.Name

FROM EXT_Yacht_Event y

INNER JOIN Project_UDF u on y.Boat_ID = u.EXT_Boat_ID

INNER JOIN Project p on p.Project_ID = u.Project_ID

where

p.Project_ID=@Entity

 order by y.Created_Date desc";

 #endregion Sql

 #region Sql

 //private readonly string SaveYachtEvent = @"
 
 // DECLARE @entityID varchar(50)

 // INSERT INTO EXT_Yacht_Event_History WHERE Project_ID = @projectid

 // (EXT_Yacht_Event_Type_ID, Boat_ID, Approval_Action, Varchar_Value, Decimal_Value, Date_Value, Created_Date, notes, EXT_Yacht_Event_ID)

 // VALUES(3,@boat_id,44,44,GETDATE(),GETDATE(),@notes,@newid)";
 
 //#endregion
 
 

 

 

 public IEnumerable<YachtEvents> GetYachtEventHistoryDetails()

{

 using (var connection = ConnectionService.CreateConnection())

{

 var eventHistory = connection.Query<YachtEvents>(GetYachtEventHistory, new { Entity = Entity.EntityID });

 

eventHistory = eventHistory.ToList();

 

 return eventHistory;

}

}

 

 

 protected void Grid_ServerExcelExporting(object sender, Syncfusion.JavaScript.Web.GridEventArgs e)

{

BindGrid();

 new ExcelExport().Export(Grid.Model, Grid.DataSource, "Export.xlsx", ExcelVersion.Excel2010, false, false, ExportTheme.BootstrapTheme);

}

 private void Save(string YachtEvent)

{

 using (var connection = ConnectionService.CreateConnection())

{

 connection.Execute(SaveYachtEvent, new { user = UserID.Value, YachtEvent = YachtEvent });

}

}

 protected void Page_Load(object sender, EventArgs e)

{

BindGrid();

}

 private void BindGrid()

{

Grid.DataSource = GetYachtEventHistoryDetails();

Grid.DataBind();

}

 protected void EditEvents_ServerEditRow(object sender, GridEventArgs e)

{

 EditAction(e.EventType, e.Arguments["data"]);

}

 //Server side add record
 
 protected void EditEvents_ServerAddRow(object sender, GridEventArgs e)

{

 EditAction(e.EventType, e.Arguments["data"]);

}

 

 //Server side delete record
 
 protected void EditEvents_ServerDeleteRow(object sender, GridEventArgs e)

{

 // EditAction(e.EventType, e.Arguments["data"]);
 
}

 

 

 protected void EditAction(string eventType, object record)

{

 Dictionary<string, object> KeyVal = record as Dictionary<string, object>;

 if (eventType == "endEdit")

{

 //------- 
 
 //-------
 
}

 

 

 else if (eventType == "endAdd")

{

 //--------
 
 //--------
 
}

 

 

 else if (eventType == "endDelete")

{

 //-------
 
 //-------
 
}

 this.Grid.DataBind();

}

}


Attachment: Yacht_Event_History.aspx.cs_f31139c8.zip


AJ Alex Jermy April 2, 2019 01:18 PM UTC

Also this:

Attachment: Yacht_Event_History_2957cb6d.zip


VN Vignesh Natarajan Syncfusion Team April 3, 2019 11:58 AM UTC

Hi Alex, 
 
Query:- Perhaps you can help with a better way for performing this operation?I need to have the grid rows update to a SQL database.  
 
From your query, we understand that you need to perform CRUD operation in server side while using SQL dataSource. We have prepared a sample as per your requirement. Kindly refer the sample link 
 
 
Refer to the code example:- 
 
<ej:Grid ID="OrdersGrid" 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="OrderID" HeaderText=" Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75"> 
                </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 ID="SqlData" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>" 
            SelectCommand="SELECT * FROM [Orders]"></asp:SqlDataSource> 
 
                 </ContentTemplate> 
        </asp:UpdatePanel> 
Serverside:- 
 
      protected void Page_Load(object sender, EventArgs e) 
        { 
            if (!IsPostBack) 
            { 
                SqlConnection myConnection = new SqlConnection(ConfigurationManager.ConnectionStrings["NORTHWNDConnectionString"].ToString()); 
                dt = new DataTable("Order"); 
                SqlCommand cmd = new SqlCommand(); 
                cmd.Connection = myConnection; 
                cmd.CommandText = "select * from Orders"; 
                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() 
        { 
 
            OrdersGrid.DataSource = (DataTable)Session["SqlDataSource"]; 
            OrdersGrid.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["NORTHWNDConnectionString"].ToString()); 
            dt = Session["SqlDataSource"] as DataTable; 
            Dictionary<string, object> KeyVal = record as Dictionary<string, object>; 
            if (eventType == "endEdit") 
            { 
                var Order = KeyVal.Values.ToArray(); 
                foreach (DataRow dr in dt.Rows) 
                { 
                    if (Convert.ToInt32(dr["OrderID"]) == Convert.ToInt32(Order[0])) 
                    { 
                        dr["EmployeeID"] = Order[1]; 
                        dr["Freight"] = Order[2]; 
                        dr["ShipCity"] = Order[3]; 
                        dr["ShipCountry"] = Order[4]; 
                        dr.AcceptChanges(); 
                    } 
 
                } 
            } 
 
            else if (eventType == "endAdd") 
            { 
                var Order = KeyVal.Values.ToArray(); 
                DataRow dr = dt.NewRow(); 
                dr["OrderID"] = Order[0]; 
                dr["EmployeeID"] = Order[1]; 
                dr["Freight"] = Order[2]; 
                dr["ShipCity"] = Order[3]; 
                dr["ShipCountry"] = Order[4]; 
                dt.Rows.Add(dr); 
            } 
            else if (eventType == "endDelete") 
            { 
                var Order = KeyVal.Values.ToArray(); 
                if (Session["SqlDataSource"] != null) 
                { 
                    DataRow[] rows = dt.Select("OrderID = " + Order[0]); 
 
                    foreach (DataRow row in rows) 
                        dt.Rows.Remove(row); 
 
                } 
            } 
            Session["SqlDataSource"] = dt; 
            dataBind(); 
        } 
 
Also refer our online demo for your reference. 
 
 
Please get back to us if you have further queries. 
 
Regards, 
Vignesh Natarajan. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon