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.
Unfortunately, activation email could not send to your email. Please try again.

Editable grid: values in new record

Thread ID:

Created:

Updated:

Platform:

Replies:

123345 Mar 9,2016 04:24 AM Mar 18,2016 04:41 AM JavaScript 11
loading
Tags: ejGrid
Stefano Enrico
Asked On March 9, 2016 04:24 AM

Hi,

I have a editable grid in with editMode = normal. When I show a new record ,I want to set the values in the new row, like a sequential number.

Is it possibile? thanks

Stefano

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On March 10, 2016 07:12 AM

Hi Stefano

You can use the isIdentity property of the ejGrid columns to assign a sequential number to the columns. Please refer to the below online API reference link.

http://help.syncfusion.com/js/api/ejgrid#members:columns-isidentity

The column which is specified as isIdentity will be in readonly mode both while editing and adding a record. Also, auto incremented value is assigned to that isIdentity column.

You can handle the isIdentity column at server-side while updating record to the database. Refer to the code example.

<div id="Grid"></div>


<script>

    $(function () {

        $("#Grid").ejGrid({

            dataSource: ej.DataManager({

                url: "/Home/DataSource",

                insertUrl: "/Home/Insert",

                updateUrl: "/Home/Update",

                removeUrl: "/Home/Delete",

                adaptor: new ej.UrlAdaptor()

            }),

            allowPaging: true,

             . . . . .

            columns: [

                    { field: "OrderID", isPrimaryKey: true, isIdentity: true, width: 90 },

                     . . . . .


            ]

        });


    });

</script>


        public ActionResult Insert(EditableOrder value)

        {


            value.OrderID = OrderRepository.GetAllRecords().Last().OrderID + 1;

            OrderRepository.Add(value);

            var data = OrderRepository.GetAllRecords();

            return Json(data, JsonRequestBehavior.AllowGet);
        }


We have prepared a sample that can be downloaded from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/123345/ze/Sample118577-1415225695

Regards,
Seeni Sakthi Kumar S.

Stefano Enrico
Replied On March 10, 2016 10:45 AM

Hi Seeni,

Maybe I have not explained well. I would like to set the values in cells programmatically for all columns.

Stefano

Gowthami V [Syncfusion]
Replied On March 11, 2016 05:56 AM

Hi Stefeno,

We suspect that your requirement is to add default value to all the columns while adding a new row.

We can set the value for the columns while adding a record using “defaultValue” property of the columns as follows,


<script type="text/javascript">

    $(function () {

        $("#Grid").ejGrid({


            dataSource: window.gridData,
. . . .

editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true },

            toolbarSettings: { showToolbar: true, toolbarItems: ["add", "edit", "delete", "cancel"] },

            columns: [


              { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, defaultValue: 12345, width: 90 },
              { field: "CustomerID", width: 90, defaultValue: "ASDFG" },
. . . .

]

        });

    });
    </script>


Refer to the following sample demo, 

http://jsplayground.syncfusion.com/pqr2ixfu

Refer to the following UG for more clarification about “defaultValue” property,

http://help.syncfusion.com/js/api/ejgrid#members:columns-defaultvalue



If we misunderstood your requirement please provide below details,


1.       Grid rendering code example.


2.       Screenshot of the exact requirement.


3.       Detailed explanation of your requirement.

The provided information will help to analyze the requirement and provide you the response as early as possible.


Regards,

Gowthami V.


Stefano Enrico
Replied On March 11, 2016 08:18 AM

Hi Gowthami,

i want set different values any time that i add a new row. DefaultValue always set the same value.
I need something like an event that is triggered when i add a new row, to set the values in the new row

For example, i must set current time in a field

Thanks
Regards
Stefano

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On March 14, 2016 03:10 AM

Hi Stefano,

We understood from your query, you would like to show the current time to the corresponding column text box instead of showing default value while adding new row into the Grid. We have achieve your requirement using  actionBegin event.

Please refer to the following code example,

    <div id="Grid"></div>


    <script type="text/javascript">

        $(function () {

            var element = $("#Grid");

            element.ejGrid({

                dataSource: window.gridData,

                allowPaging: true,

                actionBegin: "beginEvent",

                   . . . ..

                columns: [

                  { field: "OrderID", isPrimaryKey: true },

                        { field: "OrderDate", editType: ej.Grid.EditingType.DateTimePicker, format: "{0:MM/dd/yyyy hh:mm}" },     

                                 . . . .


                ]


            });

        });

        function beginEvent(args) {

            if ((args.requestType == "add")) {

                args.data.OrderDate = ej.globalize.format(new Date, "MM/dd/yyyy");

            }

        }
    </script>


In above codes we are showing the current date to the “OrderDate” column text box while adding the new record using the actionBegin event.

We have prepared a sample that can be referred from the following jsPlayground.

http://jsplayground.syncfusion.com/rouqgzl1

If we misunderstood your query, please provide the following information which would be helpful to analyze the issue and provide you solution as early as possible.

1)      You would like to update the sequential number, while adding a new row or saving a record?


Refer the following Help Document for actionBegin event.

http://help.syncfusion.com/js/api/ejgrid#events:actionbegin

Regards,
Seeni Sakthi Kumar S.


Stefano Enrico
Replied On March 14, 2016 11:09 AM

Thanks Seeni. You solve my iusse.
Regards
Stefano

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On March 15, 2016 12:39 AM

Hi Stefano,

We are happy to hear that your issue has been resolved.

Get back to us if you need further assistance.

Regards,

Seeni Sakthi Kumar S.

Stefano Enrico
Replied On March 16, 2016 06:29 AM

Hi Seeni,

i have another request. I can't set a value in column with editType = dropdown.

See here http://jsplayground.syncfusion.com/y2uwleuq
I can't set ShipCity = 'Lyon'  and Drop = 3 in a new record

Thanks
Regards
Stefano

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On March 17, 2016 04:42 AM

Hi Stefano,

To set values for the dropdown, you have to use ejDropDownList API in the actionComplete of ejGrid while adding a new record. Refer to the following code example.

    <div id="Grid"></div>

    <script type="text/javascript">

        $(function () {

            $("#Grid").ejGrid({

                // the datasource "window.gridData" is referred from jsondata.min.js

                dataSource: window.gridData,

                 . . . .

                columns: [

                        { field: "OrderID", isPrimaryKey: true },

                    . . . ..

                        { field: "ShipCity", headerText: 'Ship City', editType: ej.Grid.EditingType.Dropdown }

                ],

                actionBegin: function (args) {

                    if ((args.requestType == 'add')) {

                        args.data.CustomerID = 'stefano'

                        args.data.ShipCity = 'Lyon';

                        args.data.Verified = true;

                    }

                },

                actionComplete: function (args) {

                    if ((args.requestType == 'add')) {

                        this.element.find(".gridform #GridShipCity").ejDropDownList("setSelectedValue", args.data.ShipCity)//GridShipCity==>Id of Grid + FieldName

                    }

                },

            });

        });
    </script>


We have prepared a sample with the following code example that can be referred from the following jsPlayground.

http://jsplayground.syncfusion.com/kdxpgslk

Drop column is not present in the window.gridData, so it will not bind the data to Grid. We suspect that you would like to bind the foriegnkey for a specific column. To bind a foreign key column, you must define the field name in the column’s field as well as the foreignKeyField. foreignKeyValue will get or set a value that indicates to bind the field which is in foreign column datasource based on the foreignKeyField.

Note: field must be present in the ejGrid’s dataSource(window.gridData) and foreignKeyField and foreignKeyValue must be present in the column’s dataSource(window.employeeView).

To define a editParams for the dropdown, use the following code example.

    <div id="Grid"></div>

    <script type="text/javascript">

        $(function () {

            $("#Grid").ejGrid({

                // the datasource "window.gridData" is referred from jsondata.min.js

                dataSource: window.gridData,

                allowPaging: true,

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

                columns: [

                        { field: "OrderID", isPrimaryKey: true },

                          . . . .  .

                        {

                            field: "EmployeeID", foreignKeyField: 'EmployeeID', foreignKeyValue: 'FirstName', dataSource: window.employeeView, editParams: {

                                fields: {//editParams must be defined like this

                                    text: "EmployeeID", text: "FirstName"

                                }, dataSource: window.employeeView

                            }

                        }

                ]

            });

        });
    </script>


We have prepared a sample with the foreignKeyField that can be referred from the following jsPlayground.

http://jsplayground.syncfusion.com/ogk4iert

Without using foreignKeyField, you could also a dropdown edit and bind a dataSource with a text and value pair. Refer to the following code example.

   <div id="Grid"></div>

    <script type="text/javascript">

        $(function () {


            var dpDataSource = [

                { value: 0, text: 'Zero' },

                { value: 1, text: 'One' },

                { value: 2, text: 'Two' },

                { value: 3, text: 'Three' },

                { value: 4, text: 'Four' },

                { value: 5, text: 'Five' },

                { value: 6, text: 'Six' },

                { value: 7, text: 'Seven' },

                { value: 8, text: 'Eight' },

                { value: 9, text: 'Nine' },

                { value: 10, text: 'Ten' },

            ]

            $("#Grid").ejGrid({

                // the datasource "window.gridData" is referred from jsondata.min.js

                dataSource: window.gridData,

                allowPaging: true,

                editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },

                toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel] },

                columns: [

                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 85 },

                           . . .

                        {

                            field: "EmployeeID", editType: ej.Grid.EditingType.Dropdown, dataSource: dpDataSource

                        }

                ]

                }

            });

        });
    </script>


We have prepared a sample that can be downloaded from the following location.

http://jsplayground.syncfusion.com/u11xmd0a

Note: For dropdown editType column, dataSource is not mandatory.

Refer to the following Help Documents.

http://help.syncfusion.com/js/api/ejgrid#members:columns-foreignkeyvalue
http://help.syncfusion.com/js/api/ejgrid#members:columns-foreignkeyfield
http://help.syncfusion.com/js/api/ejgrid#members:columns-datasource

Regards,
Seeni Sakthi Kumar S.

Stefano Enrico
Replied On March 17, 2016 05:07 AM

Hi Seeni,

thanks for the response, but I prepared a more simple and specific example:


I want set the dropdown value when add a new record, as i do for OrderId

Thanks
Regards
Stefano

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On March 18, 2016 04:41 AM

Hi Stefano,

Query: I want set the dropdown value when add a new record, as i do for OrderId

We have answered this query in our previous response with the following example that the ejDropDownList’s value must be defined using their API (setSelectedValue) within the actionComplete event followed by the actionBegin event of ejGrid.

http://jsplayground.syncfusion.com/kdxpgslk

However, we have modified your jsPlayground example as follows.

http://jsplayground.syncfusion.com/ayehm3dv

    <div id="Grid"></div>

    <script type="text/javascript">

        $(function () {

             . . . .

            $("#Grid").ejGrid({

                dataSource: gridData,

                allowPaging: true,

                columns: [

                        { field: "OrderId", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 85 },

                        { field: "Drop", headerText: 'Drop', width: 100, type: 'number', dataSource: dpDataSource, foreignKeyField: 'value', foreignKeyValue: 'text', editType: ej.Grid.EditingType.Dropdown, editParams: { dataSource: dpDataSource } },

                ],

                actionBegin: function (args) {

                    if ((args.requestType == 'add')) {

                        args.data.OrderId = 99;

                        args.data.Drop = 3;

                    }

                },

                actionComplete: function (args) {

                    if ((args.requestType == 'add')) {

                        this.element.find(".gridform #GridDrop").ejDropDownList("setSelectedValue", args.data.Drop)// GridDrop ==>Id of Grid + FieldName

                    }

                },


            });

        });
    </script>


Regards,
Seeni Sakthi Kumar S.

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.

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.

;