Cloned row is not editable like the source row
Hello,
type: "clone", buttonOptions: { text: "+", width: "100", click: "cloneRow" }
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: [
{
}
]
Any help or ideas would be welcomed! I am VERY new to ejGrid and I am learning as I go.
SIGN IN To post a reply.
3 Replies
VN
Vignesh Natarajan
Syncfusion Team
January 25, 2019 07:11 AM UTC
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
Help documentation links,
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.
Demo page for ej2 Grid
Please get back to us if you have further queries.
Regards,
Vignesh Natarajan.
ML
Miles Leach
January 25, 2019 09:41 PM UTC
Thank you Vignesh,
Attachment: example_e68b808a.zip
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
VN
Vignesh Natarajan
Syncfusion Team
January 28, 2019 11:04 AM UTC
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,
Help documentation link,
Please get back to us if you still face the issue.
Regards,
Vignesh Natarajan.
SIGN IN To post a reply.
