Displaying Row Numbers Column at Runtime

How do I display the row number count in a dynamic javascript table?

the problem is that you used fan.id as a search param in artist.fans.indexOf(fan.id) which is not directly accessible throw the artist.fans so instead you need to use another method that accepts comparing function so you can compare their id

try to use

<th scope="row"><%= artist.fans.findIndex(f=> f.id == fan.id) %></th>

VBA: Displaying Row Numbers Completed in Run Time

According to some additional information placed in comments the simplest idea to keep information about progress of your subroutine is to use Excel status bar. Therefore we put within our subroutine something like this:

Application.StatusBar = "Current progress- Row No.: " & rowNum 

where rowNum is a variable (loop variable) representing current row.
Which is important- you need to return standard status bar behaviour calling this line before end of your procedure:

Application.StatusBar = False

Getting the rownumbers for all NA values of a column

We could use which with is.na

which(is.na(df))
[1] 3

Angular. Not able to show and display row number in the first column for dynamic table using Material

just add a new column 'num' with <td mat-cell *matCellDef="let element;let i=index"> {{i+1}} </td> and add to displayedColumns

You can use *ngIf="!first" if you want a separate columns.

<ng-container matColumnDef="num">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element;let i=index"> {{i+1}} </td>
</ng-container>

<ng-container *ngFor="let column of displayedColumns;let first=first">
<ng-container *ngIf="!first" [matColumnDef]="column">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>
</ng-container>

See stackblitz

Add row number column to DataGridView bound to DataTable

There are good options which don't interfere in the query or structure of data and are just based on GUI logic:

  • Using RowPostPaint event to Draw Row Number on RowHeader
  • Using RowPrePaint event to assign Row Number to HeaderCell of the row
  • Creating a new DataGridViewRowNumberColumn to show Row Number

Using RowPostPaint event to Draw Row Number on RowHeader

You can handle RowPostPaint and draw the row number in header cell. The following piece of code shows a simple logic for that:

private void dataGridView1_RowPostPaint(object sender, DataGridViewRowPostPaintEventArgs e)
{
var g = (DataGridView)sender;
var r = new Rectangle(e.RowBounds.Left, e.RowBounds.Top,
g.RowHeadersWidth, e.RowBounds.Height);
TextRenderer.DrawText(e.Graphics, $"{e.RowIndex + 1}",
g.RowHeadersDefaultCellStyle.Font, r, g.RowHeadersDefaultCellStyle.ForeColor);
}

Above code is good enough, however you may want to enhance the logic by mapping datagridview cell alignment to text format flags like this method. You may also want to put the logic inside a custom DataGridView and override OnRowPostPaint and also set DoubleBuffered property if the derived DataGridView to true.

Using RowPrePaint event to assign Row Number to HeaderCell of the row
If you assign a string value to Value property of the header cell, it will be displayed on the row header.

You assign values in a loop, in this case you need to handle RowAdded and RowRemoved events and re-assign the row number. A better solution is using RowPrePaint and check if the value of the header cell is not correct, then correct it:

private void dataGridView1_RowPrePaint(object sender, DataGridViewRowPrePaintEventArgs e)
{
var g = (DataGridView)sender;
if (e.RowIndex > -1 && $"{g.Rows[e.RowIndex].HeaderCell.Value}" != $"{e.RowIndex + 1}")
{
g.Rows[e.RowIndex].HeaderCell.Value = $"{e.RowIndex + 1}";
}
}

Creating a new DataGridViewRowNumberColumn to show Row Number

The second option is creating a new reusable column type to show row number. You can work with this column type like any other column types. You can add the column at design-time or run-time.

using System.ComponentModel;
using System.Windows.Forms;
public class DataGridViewRowNumberColumn : DataGridViewColumn
{
public DataGridViewRowNumberColumn() : base()
{
this.CellTemplate = new DataGridViewRowNumberCell();
this.Width = 40;
this.SortMode = DataGridViewColumnSortMode.NotSortable;
}
[Browsable(false)]
[DefaultValue(true)]
public override bool ReadOnly
{
get { return true; }
set { base.ReadOnly = true; }
}
}
public class DataGridViewRowNumberCell : DataGridViewTextBoxCell
{
protected override void Paint(System.Drawing.Graphics graphics,
System.Drawing.Rectangle clipBounds, System.Drawing.Rectangle cellBounds,
int rowIndex, DataGridViewElementStates cellState, object value,
object formattedValue, string errorText, DataGridViewCellStyle cellStyle,
DataGridViewAdvancedBorderStyle advancedBorderStyle,
DataGridViewPaintParts paintParts)
{
base.Paint(graphics, clipBounds, cellBounds, rowIndex, cellState, value,
formattedValue, errorText, cellStyle, advancedBorderStyle, paintParts);
}
protected override object GetValue(int rowIndex)
{
return rowIndex + 1;
}
protected override bool SetValue(int rowIndex, object value)
{
return base.SetValue(rowIndex, rowIndex + 1);
}
}

DataGridView Row Header number disappears when the Columns are sorted at runtime

You can draw the Row number in the header using the RowPostPaint event.

This event is rised each time a Row needs to be re-painted, so the numbers will be redrawn each time it's necessary and will persist.

You may want to set the RowHeadersWidthSizeMode property:

[DataGridView].RowHeadersWidthSizeMode = DataGridViewRowHeadersWidthSizeMode.DisableResizing

This will prevent a User from resizing the Rows Header, messing up the header's label (well, the numbers will be just hidden/partially visible. It's nonetheless an option).

The numbers are draw right-aligned and vertical-centered, so the number will expand on the left. You can change this behaviour changing the StringFormat's StringAlignment from Far (right) to Near (left):

 [StringFormat].Alignment = StringAlignment.Far   ' Align right
[StringFormat].Alignment = StringAlignment.Near ' Align left

The Color of the numbers is set to the DataGridView's dgv.RowTemplate.DefaultCellStyle.ForeColor.

Change this default style to set a different color.

The Font is set to the DataGridView's DefaultCellStyle.Font. Same consideration.

The number itself is formatted as $"{(e.RowIndex + 1):00}". Change it as required.

Private Sub DataGridView1_RowPostPaint(sender As Object, e As DataGridViewRowPostPaintEventArgs) Handles DataGridView1.RowPostPaint
Dim dgv = DirectCast(sender, DataGridView)
Dim rowHeader = $"{(e.RowIndex + 1):00}"

Dim headerBounds As Rectangle =
New Rectangle(e.RowBounds.Left, e.RowBounds.Top, dgv.RowHeadersWidth - 6, e.RowBounds.Height)

Using format = New StringFormat(StringFormatFlags.NoWrap)
format.Alignment = StringAlignment.Far
format.LineAlignment = StringAlignment.Center
Using brush As SolidBrush = New SolidBrush(dgv.RowTemplate.DefaultCellStyle.ForeColor)
e.Graphics.DrawString(rowHeader, dgv.DefaultCellStyle.Font, brush, headerBounds, format)
End Using
End Using
End Sub

How to show row number in Access query like ROW_NUMBER in SQL

You can try this query:

Select A.*, (select count(*) from Table1 where A.ID>=ID) as RowNo
from Table1 as A
order by A.ID

Using SUM With Dynamic Row Numbers

In order to dynamically calculate a range, use INDIRECT.

For example, in order to calculate the sums of columns D:M, use the following formula:

=SUM( INDIRECT("D" & ROW() & ":M" & ROW()) )

Which converts (If the line is 1, of course) into

=SUM(D1:M1)

Can I make a CSS grid with dynamic number of rows or columns?

Okay, after reading the MDN reference, I found the answer! The key to dynamic rows (or columns) is the repeat property.

const COLORS = [  '#FE9',  '#9AF',  '#F9A',  "#AFA",  "#FA7"];
function addItem(container, template) { let color = COLORS[_.random(COLORS.length - 1)]; let num = _.random(10000); container.append(Mustache.render(template, { color, num }));}
$(() => { const tmpl = $('#item_template').html() const container = $('#app'); for(let i=0; i<5; i++) { addItem(container, tmpl); } $('#add_el').click(() => { addItem(container, tmpl); }) container.on('click', '.del_el', (e) => { $(e.target).closest('.item').remove(); });});
.container {  width: 100%;  display: grid;  grid-template-columns: repeat(4, 1fr);  grid-template-rows: repeat(auto-fill, 120px);  grid-row-gap: .5em;  grid-column-gap: 1em;}
.container .item {}
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="app" class="container"></div>
<button id="add_el">Add element</button>
<template id="item_template"> <div class="item" style="background: {{color}}"> <p>{{ num }}</p> <p> <button class="del_el">Delete</button> </p> </div></template>


Related Topics



Leave a reply



Submit