I creating a table with sortable column. This is my code:
<p-dataTable [value]="list">
<p-column field="name" header="name" sortable="true">
</p-column>
<p-column field="value" header="value" sortable="true">
</p-column>
</p-dataTable>
The problem is that the sortable indicators are overlapped in the first column, so on click it works on second column only.
With many other column it works in the same way. It seems like all the indicators are overlapped in the same place (see picture).
Any suggestions?
Thanks
Related
I am using ag-grid and have checkboxes to select the row.
What I want to do is, any time the user clicks on any row or cell of that row, the complete row gets highlighted, without selecting the row.
I think your best solution would be to use the onCellClicked callback, and set the row as selected. Take a look at this code:
<AgGridReact
onCellClicked={this.cellClicked}
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
/>
And your callback method:
cellClicked(params) {
params.node.setSelected(true)
}
Here is a StackBlitz example for you.
I'm displaying a primeng table and the cell format will depend on the next column value, i.e. the one beside it to the right.
I'm wondering how I can get the value of another column. I have:
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header">
<ng-template let-row="rowData" pTemplate="body" *ngIf="col.field!='Name'">
{{row[col.field]}} --displays current cell. I want to compare value to value of cell beside it
</ng-template>
</p-column>
if "row[col.field]" gives me the value of the current column cell value, how can I get cell beside it?
Any ideas?
If you know the column name (eg id) of another column, then {{row['id']}}.
Or if you know the order in which other columns appear (eg 0), then {{row[cols[0].field]}}.
<p-column *ngFor="let col of cols" [field]="col.field [header]="col.header">
<ng-template let-row="rowData" pTemplate="body" *ngIf="col.field!='Name'">
{{row[col.field]}} --displays current cell.
{{row['id']}} --displays cell which column name is 'id'.
{{row[cols[0].field]}} --displays first column cell.
</ng-template>
</p-column>
I use the selectionMode = "multiple" option of datatable, How mark selected item from the database
Template:
<p-dataTable [value]="userLanguage" dataKey="key">
<p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
<p-column field="languageName" header="Idioma"></p-column>
<p-column field="languageId" header="Código"></p-column>
</p-dataTable>
selectionMode="multiple" needs to go into your p-dataTable line, not on the column. Also, you need to define what model you want to store your selected items, such as [(selection)]="selectedLanguages" on the same line. To display certain items as selected, you need to add the languages to the selectedLanguages array
In the prime datatable I have a checkbox to select multiple rows. When I select or unselect the checkbox, all the rows get selected/unselected correctly. On selecting or unselecting the checkbox I want to disable few buttons at the top. Hence I need help in knowing the attribute to capture selection.
<p-dataTable>
<p-column selectionMode="multiple">
</p-column>
</p-dataTable>
use onRowSelect and onRowUnselect events
for example :
(onRowSelect)="updateSelected($event)" (onRowUnselect)="updateSelected($event)"
onHeaderCheckboxToggle did the trick.
I am using a .NET Windows Forms DataGridView and I need to edit a DataBound column (that binds on a boolean DataTable column). For this I specify the cell template like this:
DataGridViewColumn column = new DataGridViewColumn(new DataGridViewCheckBoxCell());
You see that I need a CheckBox cell template.
The problem I face is that this column is constantly readonly/disabled, as if it would be of TextBox type. It doesn't show a checkbox at all.
Any thoughts on how to work with editable checkbox columns for DataGridView?
Update: For windows forms, please.
Thanks.
Well, after more than 4 hours of debugging, I have found that the DataGridView row height was too small for the checkbox to be painted, so it was not displayed at all. I have found this after an accidental row height resizing.
As a solution, you can set the AutoSizeRowsMode to AllCells.
richDataGrid.AutoSizeRowsMode = System.Windows.Forms.DataGridViewAutoSizeRowsMode.AllCells;
Instead of trying to create the column in code, click on the tiny arrow in a box at the top right of the DataGridView control, and select "Edit Columns..." from the menu that appears. In the dialog box, click the Add button, then choose the "Databound column" option and pick the boolean column you're binding to.
Create a TemplateField and bound the id to it, something like this:
<asp:TemplateField HeaderText="Whatever" SortExpression="fieldname" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:CheckBox runat="server" ID="rowCheck" key='<%# Eval("id") %>' />
</ItemTemplate>
</asp:TemplateField>