Cloned row is not editable like the source row

[Miles Leach]

Hello,

I am using ESJ 1.X ejGrid. I have a function that successfully clones a row, but the new row is not editable. For example the source row has several drop downs and input boxes that are editable, but the cloned row they are not editable. Also need to be able to clone any of the cloned rows with a new row.

Here is my function:

   function cloneRow(args) { 

            var $tr = $(args.target).closest("tr"); 

            var $clone = $tr.clone();            

           $tr.after($clone); 

        } 

Here is my button at the end of the row:

HeaderText: "", 

                        commands: [ 

                            { 

                                type: "clone", 

                                buttonOptions: { 

                                    text: "+", 

                                    width: "100", 

                                    click: "cloneRow" 

                                } 

                            } 

                        ]

Any help or ideas would be welcomed! I am VERY new to ejGrid and I am learning as I go.

[Vignesh Natarajan]

Hi Miles, 

 

Thanks for the patience. 

 

Query: however the row has several fields in it that are editable only in the source row. For example the source row has several drop downs and input boxes that are editable, but the cloned row they are not editable. Also need to be able to clone any of the cloned rows with a new row. 

 

From your query, we understand that you need to clone a row on button click and perform actions like sorting, editing etc in the cloned row. To achieve your requirement we suggest you to use addRecord() method of ejGrid. Because to perform actions like editing, sorting records must be present in the dataSource. But cloning the record by inserting it below the selected record will not insert the record in dataBase.  So we suggest you to clone the new row by using adding the record in the dataSource using addRecord method.     

 

While performing editing actions, primarykey must be enabled to any of the available column which has unique values. So we suggest you to define isPrimaryKey to any of the column. And in order to make the row as same as like cloned we can set the visibility of primary key column as false. 

 

So, using addRecord method of ejGrid we can add the cloned row. Hence the cloned row is become editable and we can also able to clone any of the cloned rows with a new row. 

 

Please refer the below code example and sample Link, 

 

 

    $("#lstSelected").ejGrid({ 

                dataSource: window.gridData, 

                allowPaging: true, 

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

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

                columns: [ 

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

                    { field: "EmployeeID" , editType:"dropdownedit"}, 

                    { field: "Freight", editType: "numericedit" }, 

                    { field: "ShipCountry" }, 

                    { 

                        headerText: "", 

                        commands: [ 

                            { 

                                type: "clone", 

                                buttonOptions: { 

                                    text: "+", 

                                    width: "100", 

                                    click: "cloneRow" 

                                } 

                            } 

                        ], 

                        isUnbound: true, 

                    } 

                ] 

            }); 

        }); 

 

        function cloneRow(args) { 

            var gridObj = $('#lstSelected').data('ejGrid'); 

            var data = gridObj.getSelectedRecords(); 

            gridObj.addRecord({ OrderID: Math.random(), EmployeeID: data[0].EmployeeID, Freight: data[0].Freight, ShipCountry: data[0].ShipCountry });  

        }  

    </script> 

 

 

For your convenience we have prepared a sample which can be downloaded from below link 

 

Sample: http://www.syncfusion.com/downloads/support/directtrac/225686/ze/SyncfusionASPNETApplication1679936552  

 

Help documentation links, 

 

https://help.syncfusion.com/api/js/ejgrid#methods:addrecord  

 

https://help.syncfusion.com/api/js/ejgrid#methods:getselectedrecords  

 

https://help.syncfusion.com/js/grid/editing  

 

https://help.syncfusion.com/js/grid/columns#visibility  

 

 

We also would like to let you know about our next generation JavaScript product - Essential JS 2, in case if you are not aware of it. Essential JS 2 is fully re-written to be modular, responsive and lightweight. 

We suggest you look into our following product page for more details. 

 

https://www.syncfusion.com/products/essential-js2 

 

Demo page for ej2 Grid 

 

https://ej2.syncfusion.com/javascript/demos/#/material/grid/grid-overview.html  

 

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan.  

 

 

[Miles Leach]

Thank you Vignesh,

However that is successfully adding a new row, but it does not come in with pre-populated values that the first one has, thus it is not cloned but just a new row added. I need a new row added with the exact same values in the drop downs etc. that the row I clicked the button from has, but the values do need to be editable. Also it is putting the row at the top instead of directly underneath it. I have attached a screenshot...and here is the code below...

Here is my code:

 function cloneRow(args) {

            var gridObj = $('#lstSelected').data('ejGrid');

            var data = gridObj["_currentJsonData"][0];

            console.log(data);

            gridObj.addRecord({

                BP_ID: Math.random(), Package_Type: data.Package_Type, Package_Description: data.Package_Description, Customer_ID: data.Customer_ID,

                Subdivision_ID: data.Subdivision_ID, HoursWithChildren: data.HoursWithChildren, Floor: data.Floor, Location: data.Location, Qty: data.Qty});  

             resizeGrids();            

        } 

Here is the ejGrid:

$('#lstSelected').ejGrid({

                dataSource: [],

                enableRowHover: true,

                allowTextWrap: true,

                allowSorting: true,

                allowFiltering: false,

                allowSelection: false,

                allowResizing: true,

                allowScrolling: true,

                scrollSettings: { height: $(window).height() - 250, width: "100%" },                

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

                columns: [

                    { headerText: "", template: true, templateID: "#savechktmp", width: 50, textAlign: "center", type: "string" },

                    { field: "BP_ID", visible: false, isPrimaryKey: true, defaultValue: 0 },

                    { field: "Package_Type", headerText: "Type", type: "string", width: 100, foreignKeyField: "value", foreignKeyValue: "text", dataSource: pkgtypes },

                    { field: "Package_Description", headerText: "Description", type: "string", width: 200 },

                    { field: "Customer_ID", headerText: "Customer", type: "string", width: 220, foreignKeyField: "value", foreignKeyValue: "text", dataSource: customerList },

                    { field: "Subdivision_ID", headerText: "Subdivision", type: "string", width: 220, foreignKeyField: "value", foreignKeyValue: "text", dataSource: subdivisionList },

                    { field: "HoursWithChildren", headerText: "Hours (*)", type: "numeric", format: "{0:N0}", width: 100 },

                    { field: "Floor", headerText: "Location", width: 150, template: true, templateID: "#floortmp" },

                    { field: "Location", headerText: "Room", width: 150, template: true, templateID: "#locationtmp" },

                    { field: "Qty", headerText: "Qty", width: 100, template: true, templateID: "#qtytmp" },

                    {

                        headerText: "", textAlign: "center",

                        commands: [

                            { type: "clone", buttonOptions: { width: "80%", text: "+", click: "cloneRow" } }

                        ],         

                        width: 130

                    }

                ],

Attachment: example_e68b808a.zip

[Vignesh Natarajan]

Hi Miles, 

 

Thanks for the update. 

 

We are able to reproduce the reported issue at our end while using the shared code example. The reported issue will occur because the dropdown and numeric textbox is rendered within the actionComplete event of ejGrid and also you have get the data from the _currentJsonData.  

 

To avoid the reported issue we suggest you to render the other ejcontrols like dropdown, numeric textbox in the templateRefresh event of ejGrid. 

 

Refer the below code example, 

 

 

 

    <script type="text/X-jsrender" id="savechktmp"> 

        <input type="checkbox" /> 

    </script> 

 

 

    <script type="text/x-jsrender" id="floortmp"> 

        <input id="Floor{{:BP_ID}}" class="floor" /> 

    </script> 

 

    <script type="text/x-jsrender" id="locationtmp"> 

        <input id="Location{{:BP_ID}}" class="location" /> 

    </script> 

 

    <script type="text/x-jsrender" id="qtytmp"> 

        <input id="Qty{{:BP_ID}}" class="qty" /> 

    </script> 

 

 

    <div id="bwpopup"></div> 

    <div id="lstSelected"></div> 

    <script> 

        $("#bwpopup").ejButton({ 

            click: "additem", 

            text: "insert", 

 

        }) 

 

        function additem(args) { 

 

            var selectedItems = [{ 

                BP_ID: 12, Package_Type: "B", Package_Description: "Heelo", HoursWithChildren: "0 hour", Floor: "1st Floor", Location: "Bar 1", Qty: 1 

            }] 

            var obj = $("#lstSelected").ejGrid("instance"); 

 

            $('#lstSelected').ejGrid('model.dataSource', selectedItems); // updated grid data using dataSource method. 

        } 

 

        var pkgtypes = [{ value: "B", text: "Base" }, { value: "U", text: "Upgrade" }] 

 

 

        var items1 = [ …]; 

 

        var items2 = [……..]; 

 

 

        $('#lstSelected').ejGrid({ 

               …………… 

            templateRefresh: "refresh", 

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

            columns: [ 

                { headerText: "", template: true, templateID: "#savechktmp", width: 50, textAlign: "center", type: "string" }, 

                { field: "BP_ID", visible: false, isPrimaryKey: true, defaultValue: 0 }, 

             ………….. 

               { field: "Floor", headerText: "Location", width: 150, template: true, templateID: "#floortmp" }, 

                { field: "Location", headerText: "Room", width: 150, template: true, templateID: "#locationtmp" }, 

                { field: "Qty", headerText: "Qty", width: 100, template: true, templateID: "#qtytmp" }, 

               { 

                    headerText: "", textAlign: "center", 

                    commands: [ 

                        { type: "clone", buttonOptions: { width: "80%", text: "+", click: "cloneRow" } } 

                    ], 

                    width: 130 

                } 

            ], 

        }); 

 

 

        function cloneRow(args) { 

 

            var gridObj = $('#lstSelected').data('ejGrid'); 

            var index = $(args.target).index(); 

            var data = gridObj.model.currentViewData[index]; // use model.currentViewData to get the data. 

            gridObj.addRecord({ 

                BP_ID: Math.ceil(Math.random() * 100), Package_Type: data.Package_Type, Package_Description: data.Package_Description, HoursWithChildren: data.HoursWithChildren, Floor: data.Floor, Location: data.Location, Qty: data.Qty 

            }); 

 

            var row = $(args.target).closest("tr"); 

            row.prev().before(row);  // find the newly added row and change its position. 

 

        } 

 

        function refresh(args) { 

            if ($(args.cell).find(".floor").length) { 

                $(args.cell).find(".floor").ejDropDownList({ 

                    dataSource: items1,  // define the dataSource here 

                    selectedItemIndex: 0, 

                    fields: { 

                        text: "text", 

                        value: "value" 

                    } 

                }); 

            } 

            else if ($(args.cell).find(".location").length) { 

                $(args.cell).find(".location").ejDropDownList({ 

                    dataSource: items2, 

                    selectedItemIndex: 0, 

                    fields: { 

                        text: "text", 

                        value: "value" 

                    } 

                }); 

            } 

            else if ($(args.cell).find(".qty").length) { 

                $(args.cell).find(".qty").ejNumericTextbox({ value: 1 }); 

 

            } 

 

        } 

    </script> 

 

 

 

Refer the below link for sample, 

http://www.syncfusion.com/downloads/support/directtrac/225606/ze/SyncfusionASPNETApplication-1028146459  

 

Help documentation link, 

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

 

Please get back to us if you still face the issue. 

 

Regards, 

Vignesh Natarajan.