Show Row Index in Gridview

Question

I have been looking throughout Stack Overflow and can't seem to find anything related to my issue.

I have a gridview that displays results and I have some buttons on each row to move that row up or down.

After I click the button, I would like it to change the row index, so say row 1 goes to row 2, then I would like the new row 2 to display 2 instead of 1.

So the row index isnt updated and stays its original row index.

I would like it so that the row index updates after the html button click is pressed. I will show the current code for moving up and down rows.

Preferably, I would like to integrate it into the javascript code I have already done, but if other code works I will use that.

This is my first post, so please go easy on me and ask any questions below and I will answer as fast as possible.

Thanks.

Answer 1

Wouldn't something like this work?

$('table').change(function(){
    let allrows = $('tr', this);
    for(let i = 0; i < allrows.length; i++){
        $('td.index', $(allrows[i])).val(i+1);
    }
});

i just wrote this up, and didnt debug/test it so you might find a bug, but this should point you in the right direction

Answer 2

Will drag & drop work below is teh code for same

this process of GridView row reordering ie Drag and Drop ordering of GridView Rows using jQuery in ASP.Net. The drag and drop ordering of GridView Rows will be performed using jQuery UI Sortable Plugin.

<asp:GridView ID="gvLocations" runat="server" AutoGenerateColumns="false">
<Columns>
    <asp:TemplateField HeaderText="Id" ItemStyle-Width="30">
        <ItemTemplate>
            <%# Eval("Id") %>
            <input type="hidden" name="LocationId" value='<%# Eval("Id") %>' />
        </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="Location" HeaderText="Location" ItemStyle-Width="150" />
    <asp:BoundField DataField="Preference" HeaderText="Preference" ItemStyle-Width="100" />
</Columns>

Code Behind

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindGrid();
    }
}

private void BindGrid()
{
    string query = "SELECT Id, Location, Preference FROM HolidayLocations ORDER BY Preference";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.CommandType = CommandType.Text;
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    gvLocations.DataSource = dt;
                    gvLocations.DataBind();
                }
            }
        }
    }
}

JS part

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function () {
    $("[id*=gvLocations]").sortable({
        items: 'tr:not(tr:first-child)',
        cursor: 'pointer',
        axis: 'y',
        dropOnEmpty: false,
        start: function (e, ui) {
            ui.item.addClass("selected");
        },
        stop: function (e, ui) {
            ui.item.removeClass("selected");
        },
        receive: function (e, ui) {
            $(this).find("tbody").append(ui.item);
        }
    });
});
</script>


**Code to save same in in DB**


protected void UpdatePreference(object sender, EventArgs e)
{
    int[] locationIds = (from p in Request.Form["LocationId"].Split(',')
                            select int.Parse(p)).ToArray();
    int preference = 1;
    foreach (int locationId in locationIds)
    {
        this.UpdatePreference(locationId, preference);
        preference += 1;
    }

    Response.Redirect(Request.Url.AbsoluteUri);
}

private void UpdatePreference(int locationId, int preference)
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("UPDATE HolidayLocations SET Preference = @Preference WHERE Id = @Id"))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.CommandType = CommandType.Text;
                cmd.Parameters.AddWithValue("@Id", locationId);
                cmd.Parameters.AddWithValue("@Preference", preference);
                cmd.Connection = con;
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }
    }
}

Complete Article here