Batch Edit Grid - Dynamic New Row Defaults

[Chris]

Hi,

Query 1

I have a batch edit grid.  It is only used for adding new records.  It is used for adding new contact records.  Due to the nature of the project when adding contact records this way it is very common that each contact will have the same values for the "Cell", "Phone", "Address", "City" and "Postal Code" columns.  I was looking for a way to to default those columns to what was entered in the previously entered row. 

For example, I enter a row with the following values: Cell=123-4567; Phone=321-1234; Address=123 Test St; City=Calgary, AB;Postal Code=T2P 3K3.  Afterwards, I click the "Add" button and the new row will start out with the same Cell, Phone, Address, City and Postal Code values.

I got it mostly working using "before-batch-add" event but the "City" column isn't working right.  The "City" column is an autocomplete field.  I feel that I have something missing to make it work right when it comes to defaulting this field.  What happens is that the newly added row has a blank city when it should have a value.  If the City control gets focus it actually retrieves the correct city.  However, once it losses control it goes blank again.  When it reaches the controller to actually add the records the CityId field is 0 when it should be some other number. (it works if you type it in)

Here is some of the code:

The js that does the defaulting

    function beforeBatchAdd(args) {
        var gridObj = $("#RWStakeholder").data("ejGrid");
        if (gridObj.batchChanges.added.length > 0) {
            var newSort = gridObj.batchChanges.added.length + 1;
            args.defaultData.Sort = newSort;

            var newestRowIdx = gridObj.batchChanges.added.length - 1;

            if (gridObj.batchChanges.added[newestRowIdx].Cell != null) {
                args.defaultData.Cell = gridObj.batchChanges.added[newestRowIdx].Cell;
            }

            if (gridObj.batchChanges.added[newestRowIdx].Phone != null) {
                args.defaultData.Phone = gridObj.batchChanges.added[newestRowIdx].Phone;
            }

            if (gridObj.batchChanges.added[newestRowIdx].Address != null) {
                args.defaultData.Address = gridObj.batchChanges.added[newestRowIdx].Address;
            }

            if (gridObj.batchChanges.added[newestRowIdx].CityId > 1) {
                args.defaultData.CityId = gridObj.batchChanges.added[newestRowIdx].CityId;
            }

            if (gridObj.batchChanges.added[newestRowIdx].PostalCode != null) {
                args.defaultData.PostalCode = gridObj.batchChanges.added[newestRowIdx].PostalCode;
            }
        }       
    }

Template js for the City column:

    function CreateCity() {
        return $("<input>");
    }

    function WriteCity(args) {
        var val = args.rowdata.CityId;

        args.element.ejAutocomplete({
            dataSource: new ej.DataManager({
                url: "/Common/CityProvDataSource",
                adaptor: new ej.UrlAdaptor()
            }),
            showPopupButton: false,
            enableAutoFill: true,
            watermarkText: "Select a city",           
            fields: { text: "CityProvName", key: "Id" },
            width: "100%",           
        }).ejAutocomplete("selectValueByKey", val);
    }

    function ReadCity(args) {
        var data = args.ejAutocomplete("getSelectedItems")[0];

        if (!data)
            return {};

        return { text: data[0]["CityProvName"], value: data[0]["Id"] };
    }

I noticed that when the column is defaulted the "data" variable in "ReadCity" is different then when you type it in yourself.  When defaulted the data variable is only a string with the city name.  When typing it in the "data" variable has the City Name and Id. 

Below is the data source code to get the city in the controller:

public JsonResult CityProvDataSource([FromBody]DataManager dm)
        {
            Syncfusion.JavaScript.DataSources.DataOperations operation = new Syncfusion.JavaScript.DataSources.DataOperations();

            IEnumerable Data = null;

            Data = _context.City.Where(w => w.Id == 1).Select(r => new { CityProvName = r.CityName, Id = r.Id }).ToList();

            if (dm.Where != null)
            {
                if (dm.Where[0].Operator == "startswith")
                {
                    string searchVal = dm.Where[0].value.ToString().ToUpper();

                    Data = _context.City
                        .Where(w => w.Id > 1 && w.DeletionDate == null)
                        .Include(i => i.Province)
                        .Select(r => new { CityProvName = r.CityName + ", " + r.Province.ShortName, Id = r.Id })
                        .Where(w => w.CityProvName.ToUpper().StartsWith(searchVal))
                        .OrderBy(o => o.CityProvName)
                        .ThenBy(t => t.Id)
                        .ToList()
                        .Take(10);
                } else
                {
                    if (dm.Where[0].Operator == "equal")
                    {
                        if (dm.Where[0].value.ToString().IsStringInteger()) {
                            int cityId = Convert.ToInt32(dm.Where[0].value);
                            if (cityId > 1) {
                                Data = _context.City
                                    .Where(w => w.Id == cityId && w.DeletionDate == null)
                                    .Include(i => i.Province)
                                    .Select(r => new { CityProvName = r.CityName + ", " + r.Province.ShortName, Id = r.Id })
                                    .ToList();
                            }
                        }
                    }
                }
            }

            return Json(Data);
        }

How can I get the City column to default properly?

Query 2

The address column in the grid is a text area field.  I set it up using edit template.  When you want to start a new line in the text area field you press enter.  However, when you press enter it exits editing mode instead of starting the new line.  I can get around it by setting allow-keyboard-navigation to false.  What I really would like to do would be to disable only the "Enter" keyboard shortcut and have the other keyboard shortcuts work as normal.  (for example tabbing through the fields).  Is there a way to do this?  I asked this before, but was told it was not possible.  I'm hoping a second look might have a different answer.

Thanks,

Chris

[Sathyanarayanamoorthy Eswararao]

Hi Chris, 

Query 1 :  The "City" column is an autocomplete field. What happens is that the newly added row has a blank city when it should have a value.  If the City control gets focus it actually retrieves the correct city.  However, once it losses control it goes blank again. 

 

The above mentioned issue occurs because in the edit template Read function of the City column you have returned the object instead of the selected value. To avoid this issue we suggest you to return the value selected from the autocomplete control like in the below code example. 

 

 

<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.dataSource" before-batch-add="beforeBatchAdd"> 

    <e-edit-settings allow-editing="true" allow-adding="true" edit-mode="Batch"></e-edit-settings> 

    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' /> 

    <e-columns> 

        <e-column field="OrderID" is-primary-key="true" header-text="Order ID"></e-column> 

        <e-column field="CustomerID" header-text="CustomerID"> 

            <e-edit-template create="Create" read="Read" write="Write"> 

            </e-edit-template> 

        </e-column> 

        <e-column field="EmployeeID" header-text="EmployeeID"></e-column> 

        <e-column field="ShipCity" header-text="Ship City"> 

            <e-edit-template create="CreateCity" read="ReadCity" write="WriteCity"> 

            </e-edit-template> 

        </e-column> 

        

    </e-columns> 

</ej-grid> 

 

 

<script type="text/javascript"> 

    function CreateCity() { 

        return $("<input>"); 

    } 

 

    function WriteCity(args) { 

        var val = args.rowdata.OrderID; 

 

                      -------- 

 

    } 

 

    function ReadCity(args) { 

        var data = args.ejAutocomplete("getSelectedItems")[0]; 

 

        if (!data) 

            return {}; 

 

        return args.ejAutocomplete("getValue"); 

    } 

 

 

Query 2 :  What I really would like to do would be to disable only the "Enter" keyboard shortcut and have the other keyboard shortcuts work as normal.  (for example tabbing through the fields).  Is there a way to do this?  

 

To achieve this requirement we suggest you to change the change the keyConfig of the enter key to some other value in the actionComplete event. Please refer the below code example. 

 

 

<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.dataSource" before-batch-add="beforeBatchAdd" action-complete="complete"> 

    <e-edit-settings allow-editing="true" allow-adding="true" edit-mode="Batch"></e-edit-settings> 

    <e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel"}' /> 

    <e-columns> 

        <e-column field="OrderID" is-primary-key="true" header-text="Order ID"></e-column> 

        <e-column field="CustomerID" header-text="CustomerID"> 

            <e-edit-template create="Create" read="Read" write="Write"> 

            </e-edit-template> 

        </e-column> 

        <e-column field="EmployeeID" header-text="EmployeeID"></e-column> 

        <e-column field="ShipCity" header-text="Ship City"> 

            <e-edit-template create="CreateCity" read="ReadCity" write="WriteCity"> 

            </e-edit-template> 

        </e-column> 

 

    </e-columns> 

</ej-grid> 

 

 

<script type="text/javascript"> 

 

    function complete(args) { 

 

        if (args.requestType == "refresh") 

            this.model.keyConfigs.saveRequest = "17"; 

 

    } 

 

 

If you need any further assistance please get back to us. 

 

Please refer the below help documentation for more details. 

 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete 

 

 

Regards, 

Sathyanarayanamoorthy 

[Chris]

Hi,

Query 1:

I finally got it working, although I am sure there is probably a better way.  Please let me know if there is a better way.  It is a batch edit grid so I think "ReadCity" must return something in the form of:

{ text: "text val", value: intVal }

I fixed the issue where the City would disappear when the city cell lost focus.  (when you didn't manually type in the city).  I did it by changing "ReadCity" to:

    function ReadCity(args) {              
        var data = args.ejAutocomplete("getSelectedItems")[0];

        if (!data)
            return {};

        if (typeof data == "string") {
            var gridObj = $("#RWStakeholder").data("ejGrid");
            var curRow = gridObj._batchEditRowData;

            return { text: data, value: curRow.CityId };
        } else {
            return { text: data[0]["CityProvName"], value: data[0]["Id"] };
        }
    }

In order for the defaulted city to display before the city cell on the new row gets focus I used the "batch-add" event.  I couldn't think of any other way to get the city name other then an ajax call and changing the "innerHTML" of the cell.  It's probably not the right way to do it, but everything works client side and server side.

    function onBatchAdd(args) {
        if (args.defaultData.CityId > 1) {

            $.ajax({
                url: "/Common/GetCityProvByCityId",
                type: "GET",
                data: { "CityId": args.defaultData.CityId },
                success: function (data1) {
                    if (data1.length > 0) {
                        var gridObj = $("#RWStakeholder").data("ejGrid");
                        args.row[0].cells[11].innerHTML = data1[0].CityProvName;
                    } else {
                        alert("Could not find city.");
                    }

                }
            });
           
        }
    }

Query 2: Thank you, that worked. 

Thanks,

Chris

[Vignesh Natarajan]

Hi Chris, 

 

Thanks for the update. 

 

Query 1:  It is a batch edit grid so I think "ReadCity" must return something in the form of:{ text: "text val", value: intVal } 

 

Instead of using the ajax post to get the city name we suggest you to return the selected value in the Read function of city column. Then, we can get the city Name in the beforeBatchAdd event as like the other columns and also the city name is maintained as text and value pair only. Kindly refer the below code example, 

 

 

 

<ej-grid id="FlatGrid" allow-paging="true" datasource="ViewBag.dataSource" before-batch-add="beforeBatchAdd" action-complete="complete"> 

    <e-edit-settings allow-editing="true" allow-adding="true" edit-mode="Batch"></e-edit-settings> 

    ….. 

    <e-columns> 

          …………….. 

        <e-column field="ShipCity" header-text="Ship City"> 

            <e-edit-template create="CreateCity" read="ReadCity" write="WriteCity"> 

            </e-edit-template> 

        </e-column> 

 

    </e-columns> 

</ej-grid> 

 

 

<script type="text/javascript"> 

 

     

 

    function CreateCity() { 

        return $("<input>"); 

    } 

 

    function WriteCity(args) { 

             …………. 

    } 

 

    function ReadCity(args) { 

        var data = args.ejAutocomplete("getSelectedItems")[0]; 

 

         ………………. 

 

        return args.ejAutocomplete("getValue"); 

    } 

 

 

    function beforeBatchAdd(args) { 

        var gridObj = $("#FlatGrid").data("ejGrid"); 

        if (gridObj.batchChanges.added.length > 0) { 

            …………… 

 

            if (gridObj.batchChanges.added[newestRowIdx].ShipCity != null) { 

                args.defaultData.ShipCity = gridObj.batchChanges.added[newestRowIdx].ShipCity; 

            } 

 

 

        } 

    } 

 

 

 

Also refer the below link for sample 

 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/Hierarchy_Grid-520531821.zip  

 

 

Please get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan