Editable grid: values in new record

[Stefano Enrico]

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]

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]

Hi Seeni,

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

Stefano

[Gowthami V]

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]

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]

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]

Thanks Seeni. You solve my iusse.

Regards

Stefano

[Seeni Sakthi Kumar Seeni Raj]

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]

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]

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]

Hi Seeni,

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

http://jsplayground.syncfusion.com/nbpngfr3

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

Thanks

Regards

Stefano

[Seeni Sakthi Kumar Seeni Raj]

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.