Hi,
i am using grid edit mode as row and i have two butons inside the grid. once clicking on any of the button, grid row edit mode is opening.
Is there any way we can avoid grid edit mode for the unbound columns or for the readonly columns.
Thanks
Nitesh
Hello Nitesh,
Thank you for posting in our community.
You can achieve the desired behavior with the use of the Selection feature and handling the rowEditingStarting event of the igGrid. By setting the mode option to “cell” and activation option to “true”, you will be able to select cells without forcing the entire row into edit mode.
In our Updating feature, you will now want to set the editMode: to "row". After this, you can write a function for the editRowStarting event. This event is triggered before the start of row editing and will allow you to control when you want row editing to begin. An example of how the Selection feature and the function should look can be seen in the code snippet below:
cell.index will refer to the column which the active cell is in. It begins at 0 and increments by 1 for each subsequent column. For example, if the readOnly buttons you have exist in the first and fourth column, your if statement will look like:
By returning false, editing is canceled and no editor is shown in the row.
I hope this solves your problem. Please refer to the attached sample for more insight.
Hi Joseph,
One more help , when i am using below code with hierchical grid parant row grid button is working fine with this approach.
but when i am trying with child row grid button the same function returning null.
can you suggest on this.
features.Selection().Mode(SelectionMode.Cell).Activation(true);
.AddClientEvent("editRowStarting", "editRowfun");
function editRowfun(e, ui) {
var cell = $("#grid1").igGridSelection("activeCell"); if (cell.index == 4 || cell.index == 5) { return false; } }
Thanks,
I am glad my suggestion provided you the behavior you desired.
As far as the current issue you are having goes, the first step I would suggest is to make sure your Updating editMode is set to "row". I believe the main place your issue lies is in your selector in the 'var cell' instantiation. In the current code, it may be referring to the parent grid. Because there is no active cell in the parent grid when the child grid is selected, it returns null. Instead, try changing the selector to $(this). This will refer to the child grid rather than the parent grid.
I hope this helps solve your issue. Please let me know if I can be of further assistance.
Hi Joe,
You are right that whole code is working fine when i am using script syntex i have tested and it's working fine.
Right now i am using MVC pattern and the syntex i can hardly find it on online documentation.
var cell = $("#grid1").igGridSelection("activeCell"); if (cell.index == 4 || cell.index == 5) { return false; }}
Above code is working in my application for parent row but when i am doing it from child row i am getting null reference for "cell".
can you send me any reference so that i can go over that.
Are there any further questions I may be able to assist you with on this matter?
Thank you very much for updating me on your solution. I am glad you were able to achieve your desired functionality. Please let me know if I can be of further assistance.
i tried with below approach and it's working fine for parent and child grid buttons.
function editRowfun(e, ui) { var cell = $("#grid1").igGridSelection("activeCell"); alert(cell);//
var index =ui.owner.grid._activeCell.index; // Here i am getting cell index
if (index == 3 || index == 5 || index == 6) { return false; }}
if any one have another approach please post to this thread.
i did exactly the same what you are suggesting but i am getting error. i have attached screen shot for reference.
The same behavior i am able to get it from script syntax but i am trying to achieve it by below code:
@(Html.Infragistics().Grid(Model.categories).ID("grid1").Width("100%").LoadOnDemand(false).AutoGenerateColumns(false).AutoGenerateLayouts(false).Columns(column =>{ column.For(x => x.ID).Hidden(true); column.For(x => x.CategoryName).HeaderText("Category Name").Width("30%"); column.For(x => x.Description).HeaderText("Description").Width("70%");column.For(x => x.button1).HeaderText("").Template("<input type=\"button\" value=\"Button1\" data-id=\"${ID}\" onclick=\"Buttonverify(this)\"/>").Width("6%"); Working Fine }).PrimaryKey("ID").Features(features =>{ features.Responsive().EnableVerticalRendering(false); features.Selection().Mode(SelectionMode.Cell).Activation(true); features.Updating().EditMode(GridEditMode.Row).EnableAddRow(false).EnableDeleteRow(false).Inherit(true).ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("button1").ReadOnly(true); }).AddClientEvent("editRowStarting", "editRowfun");}).ColumnLayouts(layouts =>{ layouts.For(x => x.Products) .Width("100%") .ForeignKey("CategoryID") .AutoGenerateColumns(false) .RenderCheckboxes(true) .Columns(column => { column.For(x => x.ID).Hidden(true); column.For(x => x.ProductName).HeaderText("Product Name").Width("40%"); column.For(x => x.UnitPrice).HeaderText("Unit Price").Width("20%"); column.For(x => x.UnitsInStock).HeaderText("Units In Stock").Width("20%");column.For(x => x.button1).HeaderText("").Template("<input type=\"button\" value=\"Button1\" data-id=\"${ID}\" onclick=\"Buttonverify(this)\"/>").Width("6%"); // Getting null value .Features(features => { features.Selection().Mode(SelectionMode.Cell).Activation(true); features.Updating().EditMode(GridEditMode.Row).EnableAddRow(false).ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("button1").ReadOnly(true); }).AddClientEvent("editRowStarting", "editRowfun"); }); }).UpdateUrl(Url.Action("EditingSaveChanges")).DataSourceUrl(Url.Action("editing-dataset")).Render())
// function editRowfun(e, ui) { var cell = $("#grid1").igGridSelection("activeCell"); alert(cell);// if (cell.index == 3 || cell.index == 5 || cell.index == 6) { return false; } } // ]]>
I am getting Null value when i click it from Child grid.
can any one help me on this issue.
After reviewing your code it looks to me like your issue lies in your selector in the line:
When you use the $("#grid1") selector, you may be referring to your parent grid only. This would explain why you get a null reference for cell because you are trying to select the active cell in the parent grid which does not exist. This is because you are selecting a cell in the child grid meaning the active cell is in the child rather than the parent. Therefore, we want to reference the currently selected item in the child grid. This can be done with the use of the $(this) selector. $(this) will select the child grid from which we can then reference the active cell. Please refer to my code snippet below:
This should allow cell to reference the cell in the child grid as desired. You may find this sample helpful as a reference for igHierarchicalGrid: http://igniteui.com/hierarchical-grid/editing-dataset
I hope this helps. Please let me know if you have any further questions.