Hi,
Can we make the column read only while updating and allow to enter value on add new row.
Thanks
Indra
Hello Indra,
I have been looking into your question and your requirements can be achieved by setting the columns in the igGrid initially to be not read-only but editable. This can be done by enabling the Updating feature and in the ColumnSettings set the columns not to be read-only.
features.Updating(). ColumnSettings(settings => { settings.ColumnSetting().ColumnKey("CustomerID").ReadOnly(false); settings.ColumnSetting().ColumnKey("CompanyName").ReadOnly(false); });
After that, the addition of rows in the igGrid as well as the editing of rows will be enabled. The editRowStarting event of the igGrid will also be handled by adding an AddClientEvent of type GridUpdatingClientEvents.EditRowStartin. Another event that should be handled is the editRowEnded event of the igGrid, also added with AddClientEvent of type GridUpdatingClientEvents.EditRowEnded.
features.Updating(). EnableAddRow(true). AddClientEvent(GridUpdatingClientEvents.EditRowStarting, "editRowStarting"). AddClientEvent(GridUpdatingClientEvents.EditRowEnded, "editRowEnded"). EditMode(GridEditMode.Row)
A script tag in the view will be created and will handle editRowStarting by creating the function of the same name with the event and object parameters. After that, the column settings of the grid will be taken to check which columns are set not to be read-only.
The editRowStarting event is fired both when editing a row and when adding, so after firing the event, it will be checked if the event is executed for editing a row, and if so, the readOnly property of the given columns will be set to true and the changes will be applied with columnSettings scope.
function editRowStarting(evt, ui) { var grid = $("#grid1"); var colSettings = $("#grid1").igGridUpdating("option", "columnSettings"); if(ui.rowAdding === false){ colSettings[0].readOnly = true; colSettings[1].readOnly = true; grid.igGridUpdating("option", "columnSettings", colSettings); } }
However, this, in turn, will cause the columns to be read-only for the future, so editRowEnded will be handled, and when the event is fired after adding or editing a row, the columns will return to their initial state in an identical way, as here the readOnly property will be set to false.
function editRowEnded(evt, ui) { var grid = $("#grid1"); var colSettings = $("#grid1").igGridUpdating("option", "columnSettings"); colSettings[0].readOnly = false; colSettings[1].readOnly = false; grid.igGridUpdating("option", "columnSettings", colSettings); }
The described scenario could be observed here:
In addition, I have prepared small sample illustrating this behavior which could be found attached here. Please test it on your side and let me know how it behaves.
0385.igGridReadOnly.zip
If you require any further assistance on the matter, please let me know.
Regards,
Georgi Anastasov
Entry Level Software Developer
Infragistics
Thank you Georgi, sure will look into the sample.
Hello Indra, Sure, please take your time to test the suggested solution. Thank you for your cooperation. Regards, Georgi Anastasov Entry Level Software Developer Infragistics
I have enhanced this functionality by adding the copy row button. Select the row and copy. But it is not work
@{ ViewData["Title"] = "Home Page"; } @using Infragistics.Web.Mvc @model igGridReadOnly.Models.CustomersViewModel <div> @(Html.Infragistics().Grid(Model.Customers.AsQueryable()). ID("grid1"). AutoGenerateColumns(false). AutoGenerateLayouts(true). Height("500px"). Width("1000px"). PrimaryKey("CustomerID"). AutoCommit(true). Caption("Customers"). RenderCheckboxes(true). Columns(column => { column.For(x => x.CustomerID).HeaderText("Customer ID").DataType("string").Hidden(false); column.For(x => x.CompanyName).HeaderText("Company Name").DataType("string").Hidden(false); column.For(x => x.ContactName).HeaderText("Contact Name").DataType("string").Hidden(false); column.For(x => x.Address).HeaderText("Address").DataType("string").Hidden(false); column.For(x => x.City).HeaderText("City").DataType("string").Hidden(false); column.For(x => x.Salary).HeaderText("Salary").DataType("number").Hidden(false); }) .Features(features => { features.Updating(). //enable row add EnableAddRow(true). //client event for start editing row AddClientEvent(GridUpdatingClientEvents.EditRowStarting, "editRowStarting"). AddClientEvent(GridUpdatingClientEvents.EditRowEnded, "editRowEnded"). EditMode(GridEditMode.Row). ColumnSettings(settings => { //set the column you want to be readonly first to false settings.ColumnSetting().ColumnKey("CustomerID").ReadOnly(false); settings.ColumnSetting().ColumnKey("CompanyName").ReadOnly(false); }); features.Selection().Mode(SelectionMode.Row).MultipleSelection(true).AllowMultipleRangeSelection(true); }). DataBind(). Render()) </div> <input type="button" id="copyRow" class="button-style" value="Copy Row" /> <script> //handle the event function editRowStarting(evt, ui) { //grid var grid = $("#grid1"); //column setting var colSettings = $("#grid1").igGridUpdating("option", "columnSettings"); //when adding row columns will be readonly = false //when editing row columns will be readonly = true if (ui.rowAdding === false) { //set the columns read only property to true when edit row colSettings[0].readOnly = true; colSettings[1].readOnly = true; //apply the settings grid.igGridUpdating("option", "columnSettings", colSettings); } } //on row ended function editRowEnded(evt, ui) { var grid = $("#grid1"); var colSettings = $("#grid1").igGridUpdating("option", "columnSettings"); //set columns read only to property false for next editing or adding colSettings[0].readOnly = false; colSettings[1].readOnly = false; grid.igGridUpdating("option", "columnSettings", colSettings); } $("#copyRow").igButton({ labelText: $("#copyRow").val(), click: function (e) { var rows = $('#grid1').igGridSelection('selectedRows'); $.each(rows, function (ix, el) { rowId = el.element.attr("data-id"); var rowObj = { "CustomerID": $("#grid1").igGrid("getCellValue", rowId, "CustomerID"), "CompanyName": $("#grid1").igGrid("getCellValue", rowId, "CompanyName"), "ContactName": $("#grid1").igGrid("getCellValue", rowId, "ContactName"), "Address": $("#grid1").igGrid("getCellValue", rowId, "Address"), "City": $("#grid1").igGrid("getCellValue", rowId, "City"), }; $("#grid1").igGridUpdating("addRow", rowObj); }); } }); </script>
Please suggest
Hello, Sure, please take your time to test the suggested solution. Thank you for your cooperation. Regards, Georgi Anastasov Entry Level Software Developer Infragistics
Thank you. Will work and let you know if any issue.
Thank you for the code snippet provided.
I have been looking into your question and this is the expected behavior of the grid as the PrimaryKey of the grid must be unique for each row and not repeated for two or more rows as this causes conflicts such as not being able to edit the given new row as there is another initially with the same primary key.
However, the click function of the button you prepared is correct with the only difference that you set the same primary key to the newly added row. What you need to do is find another primary key for example the next in the line, but necessarily unique.
What I could suggest as an approach is in iterating through the selected rows in the given function and creating a variable that will take the next number in the row of primary keys, and this will be done by taking the length of the data source and adding one:
let pk = $("#grid1").data('igGrid').dataSource._data.length + 1;
This primary key must be of the same datatype as the column itself, in this case it is of type string, so you will convert it to a string:
let temp = pk.toString();
After that, when initializing the new row on the primary key of the line, you will set this new unique number:
var rowObj = { "CustomerID": temp, "CompanyName": $("#grid1").igGrid("getCellValue", rowId, "CompanyName"), "ContactName": $("#grid1").igGrid("getCellValue", rowId, "ContactName"), "Address": $("#grid1").igGrid("getCellValue", rowId, "Address"), "City": $("#grid1").igGrid("getCellValue", rowId, "City"), "Salary": $("#grid1").igGrid("getCellValue", rowId, "Salary"), };
0488.igGridCopyButton.zip
Thank you for your cooperation.