Replies
Hello all,
The described functionality can be achieved with a custom-editor-template.
I made a sample based on the following two scenarios:
– Edit cell when focusing out the currently updated cell.
– Edit cell when clicking on a button outside the grid (To test this approach, the
Here is the sample in Codesandbox – https://codesandbox.io/s/igx-grid-custom-editor-template-7xw4k .
Please, take a look at the sample and let me know if you have any questions.
Best Regards,
Hristo Popov
Hi Brandon,
Using Anguar's FormGroup to reset a form consisted of our controls will work the way you want.
Here is a StackBlitz sample for your reference, based on this scenario.
Please, let me know if you have any questions!
Best regards,
Hristo Popov
Hello,
Thank you for contacting us!
The best control for this scenario is the dialog window.
You can apply it as many buttons/ fields/inputs/.. as you want and add logic to them.
The igDialog has some really convenient build-in functionality like showMinimizeButton, showMaximizeButton, showPinButton, draggable, which facilitate the developing experience and also the user experience, respectfully when creating and using this control.
Here is a sample for you reference:
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn-na.infragistics.com/igniteui/2019.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2019.1/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2019.1/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2019.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
<button id="openDialog">
</button>
<div id="dialog">
<p>
<img style="width: 150px" src="https://www.igniteui.com/images/samples/dialog-window/content.jpg" />
</p>
<input id="actionInput" style="margin: 5px"/>
<button id="actionButton" style="margin: 5px">Action</button>
</div>
<script>
$(function () {
$("#openDialog").igButton({ labelText: "Open Dialog" });
$("#dialog").igDialog({
state: "closed",
modal: true,
draggable: true,
resizable: false,
showCloseButton: true,
showMinimizeButton: true,
showMaximizeButton: true,
showPinButton: true,
height: "350px",
width: "290px",
zIndex: 100010
});
$("#openDialog").on({
click: function (e) {
$("#dialog").igDialog("open");
}
});
$("#actionButton").igButton({disabled: false}).on({
click: function(e){
window.alert($("#actionInput").val());
}
});
});
</script>
</body>
</html>
Please, let me know if you have any questions!
Best regards,
Hristo Popov
Hi,
To add a button alongside a data item in a cell, you can add this code snippet in the CustomTemplate class:
Label label = new Label();
label.ID = "TemplateLabel";
label.CssClass = "id-label";
label.Text = ((DataRowView)((TemplateContainer)container).DataItem)["id"].ToString();
container.Controls.Add(label);
Your InstantiateIn method in the CustomTemplate should look like this:
public void InstantiateIn(Control container)
{
Label label = new Label();
label.ID = "TemplateLabel";
label.CssClass = "id-label";
label.Text = ((DataRowView)((TemplateContainer)container).DataItem)["id"].ToString();
container.Controls.Add(label);
Button delete = new Button();
delete.ID = "TemplateButton";
delete.Text = "Delete";
delete.OnClientClick = "return deleteRow()";
container.Controls.Add(delete);
}
This way you are filling the container with a label that contains the respective id of the cell.
Here is a help topic for your reference – https://ko.infragistics.com/help/aspnet/webdatagrid-refrence-a-cell-when-creating-an-item-template.
Regards,
Hristo Popov
Hello,
Thank you for contacting us!
Adding a button column through the code is described in this help topic – https://ko.infragistics.com/help/aspnet/webdatagrid-using-item-template
I also made a sample based on your requirement.Wbdg_5F00_add_5F00_button_5F00_on_5F00_column.zip
Please, take a look at the topic and the sample and let me know if you have any questions.
Regards,
Hristo Popov
Hello,
Thank you for contacting us!
To be able to apply initial row selection, first you have to set the primaryKey and the rowSelectable property for the IgxGrid.
The initial selection is made through the IgxGrid API:
ngAfterViewInit(){
this.grid.selectRows([1]);
this.grid.markForCheck();
}
The row indexes start from 0.
Keep in mind that the IgxGrid ChangeDetectionStrategy is OnPush, so when you apply changes to the Grid, you have notify it, which is done with the markForCheck() method.
I made a StackBlitz sample, based on your requirement.
Please, take a look at the sample and let me know if you have any questions.
Hi,
Thank you for contacting us!
We will get back to you as soon as possible.
Thank you for your patience and happy holidays!
Best regards,
Hristo