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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to use a grid for insert records in database, no local data

Thread ID:

Created:

Updated:

Platform:

Replies:

121355 Dec 4,2015 09:33 PM UTC Dec 11,2015 10:09 AM UTC ASP.NET Web Forms 7
loading
Tags: Grid
Roimer Machacón Otero
Asked On December 4, 2015 09:33 PM UTC

Hi, we're using grid in a new project and we want use the inline editing form for insert data in a database.

Exist a form for do this. In the live demo we can see that the examples are used in local data no in connection to a database.

Waiting prompt response.

Thanks you.



Roimer Machacón Otero
Replied On December 5, 2015 02:36 PM UTC

So much insert data with empty grid as the grid with data

Sunil Prabakar C [Syncfusion]
Replied On December 7, 2015 07:32 AM UTC

Hi Roimer,

Thanks for contacting Syncfusion support.

We need to perform the server side CRUD operation to store the updated data in DB, otherwise grid will save the data in local only without updating in Database table. So while refresh the grid we lost the saved record. We have the adaptor support to perform the server side operation in grid.

Please refer to the online help documentation and sample with example code,

Document Link: http://help.syncfusion.com/aspnetmvc/grid/editing?#crud-operation-with-server-side

Sample:

<ej:Grid ID="OrdersGrid" runat="server" AllowSorting="true" AllowPaging="true" >

        <DataManager Adaptor="remoteSaveAdaptor" UpdateURL="Default.aspx/Update" InsertURL="Default.aspx/Insert" DeleteURL="Default.aspx/Delete" />

            <Columns>

               <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90">

               </ej:Column>

                <ej:Column Field="CustomerID" HeaderText="Customer ID" TextAlign="Left" Width="90">

                </ej:Column>

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Left" Width="90">

                </ej:Column>

                <ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="80" Format="{0:C}" EditType="Numeric">

                    <NumericEditOptions DecimalPlaces="2"></NumericEditOptions>

                </ej:Column>               

            </Columns>

            <PageSettings PageSize="9" />

            <EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True" EditMode="Batch"></EditSettings>

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


    </ej:Grid>

         [Code Behind]

        [WebMethod]

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

        public static void Insert(Order value)

        {

            NORTHWNDEntities context = new NORTHWNDEntities();

            context.Orders.Add(value);

            context.SaveChanges();

        }

        [WebMethod]

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

        public static void Update(Order value)

        {

            Nwind1DataContext context = new Nwind1DataContext();

            Order table = context.Orders.Single(v => v.OrderID == value.OrderID);

            context.Entry(table).CurrentValues.SetValues(value);

            context.Entry(table).State = System.Data.Entity.EntityState.Modified;

            context.SaveChanges();


        }

        [WebMethod]

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

        public static void Delete(int key)

        {

            Nwind1DataContext context = new Nwind1DataContext();

            context.Orders.Remove(context.Orders.Single(v => v.OrderID == key));

            context.SaveChanges();
        }



In the above sample we have used remoteSaveAdaptor with Entity to perform the CRUD operation in SQL table.

Adaptor Documentation Link: http://help.syncfusion.com/js/datamanager/data-adaptors


Regards,
Sunil Prabakar C

Roimer Machacón Otero
Replied On December 7, 2015 03:56 PM UTC

Hi' we're seeing the example but this not working. Appear this error attached in a image.

In a image appear the definition of the grid and in another images appear the error that occur to load the grid in the page

Attachment: error_e960baf0.zip

Roimer Machacón Otero
Replied On December 7, 2015 08:30 PM UTC

Hi we've been testing otherwise of make this function and it doesn't work.

Attached image with the definition of the grid and form of use this.

To the moment of press the add button appear the error "Uncaught TypeError: Cannot read property '0' of null"

Attachment: error_add_button_596e36c3.rar

Balaji Marimuthu [Syncfusion]
Replied On December 8, 2015 11:59 AM UTC


Hi Roimer,

Sorry for the inconvenience caused.

Query:1 In a image appear the definition of the grid and in another images appear the error that occur to load the grid in the page
We have checked the reported issue and attached screenshot. But we are unable to reproduce the reported issue. Could you please share the following details to find the cause of issue?

1.     Share Essential Studio version details.
2.     Are you perform any action in RowSelected event? If any please share full code snippet.
3.     How did you bind the dataSource to the Grid.


protected void Page_Load(object sender, EventArgs e)

        {

            this.FlatGrid.DataManager.Json = new NORTHWNDEntities6().OrderTables.ToList();

            this.FlatGrid.DataBind();
        }


4.     Share sample to reproduce the reported issue.

Refer to the helpdocument in following link: http://help.syncfusion.com/aspnet/grid/editing#crud-operation-with-server-side

Query:2 To the moment of press the add button appear the error "Uncaught TypeError: Cannot read property '0' of null"

We have enabled the batch editing and similar to the provided Grid definition. While pressing the add icon in Grid, we are unable to reproduce the reported issue.
Sample: Sample

1.     Are you binding the DataSource to Grid in initial load/ rendering the empty Grid?
2.     Share sample or modify the sample as issue reproducible.
3.     Share Essential Studio version details.

Please provide above details which will be helpful to find the cause of issue and provide you better solution at the earliest.

Regards,
Balaji Marimuthu

Roimer Machacón Otero
Replied On December 10, 2015 04:54 PM UTC

Hi, thanks for the reply, now we've another question, exist a form in editmode ="batch" with columns of editType ="dropdown" load values defined by a query connect to a database.

Example I've a column dataType with editType="dropDown". Now I need that when press the add button of the toolbar of the grid, in this column load a dropdown with rows of specific query of a table in a database. For this example : Numeric, Alphanumeric the two options for show and that are in a table of the database

Balaji Marimuthu [Syncfusion]
Replied On December 11, 2015 10:09 AM UTC

Hi Roimer,

To bind the external DataSource to Grid, you can use the DataSource property in Grid columns. Refer to the sample and code example as below.
Sample: Sample


<ej:Grid ID="FlatGrid" runat="server"  AllowPaging="true" >

           <Columns>

                <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" />

                <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" EditType="Dropdown" />

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="75"  />

                 . . .
         </ej:Grid>


[Controller]

  private void BindDataSource()

        {

            var EmployeeID = new List<object>();

            var order = new NorthwindDataContext().Orders.Select(s => s.ShipCountry).Take(50).ToList();

            foreach (var id in order)

            {

                EmployeeID.Add(new { value = id, text = id });

            }

            var data = EmployeeID.Distinct().ToList();


            this.FlatGrid.DataSource = new NorthwindDataContext().Orders.Take(50).ToList();

            this.FlatGrid.Columns[1].DataSource = data; //bind dataSource to column

            this.FlatGrid.DataBind();
        }


Note: Dropdown dataSource should be inform of text and value pair.

If you want to perform the operation based on row values, then you can use the CellEdit event in Grid which triggers when record cell edit .
Refer to the HelpDocument: http://help.syncfusion.com/js/api/ejgrid#events:celledit


   <ej:Grid ID="FlatGrid" runat="server"  AllowPaging="true" >


            <ClientSideEvents CellEdit="celledit" />
             
            . . .
        </ej:Grid>


<script>

       

        function celledit(args) {

            if (args.columnName == "CustomerID" && args.value==0) {

                var val = args.rowData["EmployeeID"];// pass prev "EmployeeID" value to server side


                $.ajax({

                    url: "/Default.aspx/Data",

                    type: "POST",

                    dataType: "json",

                    contentType: 'application/json; charset=utf-8',

                    data: JSON.stringify({ value: val }),

                    success: function (ret) {

                        $('#<%= FlatGrid.ClientID %>'+'CustomerID').ejDropDownList({ dataSource: ret.d });  //bind value to dropdown

                    },

                    error: function (xhr) {

                        alert('error');

                    }

                })

            }

        }


    </script>



In above code example, we have used the Ajax post request to bind the dataSource to CustomerID column based on the EmployeeID value while adding the records by checking the args.value equals to 0. Refer to the code example as below.

[Controller]

        [WebMethod]

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

        public static object Data(string value)

        {

                           //you can perform the query based operation here and return the dataSource for dropdown

            if (value == "0")

                value = "1";

            var data = new NorthwindDataContext().Orders.Take(50).Where(s => s.EmployeeID == Int32.Parse(value)).ToList();

            var EmployeeID = new List<object>();

            foreach (var id in data)

            {

                EmployeeID.Add(new { value = id.ShipCountry, text = id.ShipCountry });

            }

            return EmployeeID.Distinct().ToList();
        }


If we misunderstood your requirement please share us more information that will be helpful to provide you better solution at the earliest.

Regards,
Balaji Marimuthu

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;