ejGrid: unable to get a "save" requestType when frozenColumns set to 1 and allowEditing set to true

I am not getting a request type of "save" when done editing once I turn on a frozenColumn.

Anyone else having this same problem? See anything I should be doing differently?

Here's a snippet of my code:
$("#Grid").ejGrid({
            dataSource: datasource,
            allowPaging: false,
            allowScrolling: true,
            scrollSettings: { frozenColumns: 1 },
            editSettings: { allowEditing: true },
            columns: columns,
            actionComplete: function (arg) {
                if (arg.action == "edit" && arg.requestType == "save")
                {
                    // Do the save
                }
            }
        });

6 Replies

BR Brian October 9, 2017 08:53 PM UTC

I found a work around. If I set the number of frozen columns to 2 then the save event fires fine. I just added a hidden column and included it in the frozen column count setting.



SA Saravanan Arunachalam Syncfusion Team October 10, 2017 06:05 AM UTC

Hi Brian, 
Thanks for contacting Syncfusion’s support. 
We are sorry that we are unable to reproduce your reported issue and we have created a sample based on your provided code example that can be refer from the below link. 
By default, the cancel requestType will be triggered automatically when try to save without change anything from the editable element which is default behavior of Grid control. 
We suspect that you have tried to save the record without change any field which may be the cause of your reported issue. So, please ensure whether you have changed any one of the field while before saving the record. 
Regards, 
Saravanan A. 



BR Brian October 10, 2017 03:46 PM UTC

I modified your sample a bit to where I could again duplicate the problem:


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>Essential Studio for JavaScript : Default Functionalities</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta charset="utf-8" />

    <link rel='nofollow' href="15.3.0.26/external/bootstrap.css" rel="stylesheet" />

    <link rel='nofollow' href="//cdn.syncfusion.com/15.3.0.33/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />

    <link rel='nofollow' href="15.3.0.26/themes/web/content/default.css" rel="stylesheet" />

    <link rel='nofollow' href="15.3.0.26/themes/web/content/default-responsive.css" rel="stylesheet" />

    <link rel='nofollow' href="//cdn.syncfusion.com/15.3.0.29/js/web/responsive-css/ej.responsive.css" rel="stylesheet" />

    <!--[if lt IE 9]>

    <script src="//cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>

    <![endif]-->

    <!--[if gte IE 9]><!-->

    <script src="//cdn.syncfusion.com/js/assets/external/jquery-3.1.1.min.js"></script>

    <!--<![endif]-->

    <script src="//cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>

    <script src="//cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>

    <script src="15.3.0.26/scripts/web/jsondata.min.js"></script>

    <script src="//cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>

    <script type="text/javascript" src="//cdn.syncfusion.com/15.3.0.33/js/web/ej.web.all.min.js"></script>

    <script src="15.3.0.26/scripts/web/properties.js" type="text/javascript"></script>

</head>

<body>

    

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

<script type="text/javascript">

    

    $("#Grid").ejGrid({

            dataSource: window.gridData,

            allowPaging: false,

            allowScrolling: true,

            scrollSettings: { frozenColumns: 1 },

            editSettings: { allowEditing: true },

            columns: [

                { field: "CustomerID", headerText: "Customer ID", isPrimaryKey: true, allowEditing: false, template: "<img class='img-circle gain-loss-photo' src='/Profile/GetProfilePictureById?id={{:CustomerID}}' alt='' /> {{:CustomerID}}"},

                { field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right, editType: ej.Grid.EditingType.Numeric, width: 80, editParams: { decimalPlaces: 2 }},

                { field: "ShipCity", headerText: "Ship City"},

                { field: "ShipName", headerText: "Ship Name", width: 250}

            ],

            actionComplete: function (arg) {

                if (arg.action == "edit" && arg.requestType == "save")

                {

                    alert("save request type triggered");

                }

            }

        });


</script>

</body>

</html>



SA Saravanan Arunachalam Syncfusion Team October 11, 2017 05:57 AM UTC

Hi Brian, 
By default, we have prevented the editing on the primary key field and the cause of the issue is that you have manually prevent the editing by defining allowEditing as false for the primary key column which is not create the input element for that field. So, we suggest you to remove the allowEditing property from the primary key column and please refer to the below code example and jsplayground sample. 
$("#Grid").ejGrid({ 
            . . . 
            columns: [ 
                { field: "CustomerID", headerText: "Customer ID", width:100, isPrimaryKey: true, template: "<span>{{:CustomerID}}</span>"}, 
 
                . . . 
            ], 
        }); 
 
  
Note: The primary key field should contain unique value because edit/delete will be performed based on the primary key value and please refer to the below documentation link. 
Regards, 
Saravanan A. 



BR Brian October 11, 2017 03:38 PM UTC

Thanks! That was the key to fixing it.



SA Saravanan Arunachalam Syncfusion Team October 12, 2017 05:29 AM UTC

Hi Brian, 
Thanks for your update.       
We are happy that the provided information helped you. 
Regards, 
Saravanan A. 


Loader.
Up arrow icon