Retrieve row count after Drag Drop GridView rows with jQuery in ASP.Net

Hi dorsa,

Inorder to count the rows set the count in the Hiddenfield after receive to access it from code behind.

Check this example. Now please take its reference and correct your code.

HTML

<asp:HiddenField ID="hfSourceRowsCount" runat="server" />
<asp:GridView ID="gvSource" runat="server" CssClass="drag_drop_grid GridSrc" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="Item" />
        <asp:BoundField DataField="Price" HeaderText="Price" />
    </Columns>
</asp:GridView>
<hr />
<asp:HiddenField ID="hfDestRowsCount" runat="server" />
<asp:GridView ID="gvDest" runat="server" CssClass="drag_drop_grid GridDest" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Item" HeaderText="Item" />
        <asp:BoundField DataField="Price" HeaderText="Price" />
    </Columns>
</asp:GridView>
<br />
<asp:Button Text="Row Count" runat="server" OnClick="Count" />
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script type="text/javascript">
    $(function () {
        var sourceCount = $("#gvSource").find('tr:not(tr:first-child)').length;
        var destCount = $("#gvDest").find('tr:not(tr:first-child)').length - 1;
        $(".drag_drop_grid").sortable({
            items: 'tr:not(tr:first-child)',
            cursor: 'crosshair',
            connectWith: '.drag_drop_grid',
            axis: 'y',
            dropOnEmpty: true,
            receive: function (e, ui) {
                if (e.target.id == 'gvDest') {
                    destCount++;
                    sourceCount--;
                    $('#hfSourceRowsCount').val(sourceCount);
                    $('#hfDestRowsCount').val(destCount);
                }
                else if (e.target.id == 'gvSource') {
                    destCount--;
                    sourceCount++;
                    $('#hfSourceRowsCount').val(sourceCount);
                    $('#hfDestRowsCount').val(destCount);
                }
                $(this).find("tbody").append(ui.item);
            }
        });
        $("[id*=gvDest] tr:not(tr:first-child)").remove();
    });
</script>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.AddRange(new System.Data.DataColumn[2] { new System.Data.DataColumn("Item"), new System.Data.DataColumn("Price") });
        dt.Rows.Add("Shirt", 450);
        dt.Rows.Add("Jeans", 3200);
        dt.Rows.Add("Trousers", 1900);
        dt.Rows.Add("Tie", 185);
        dt.Rows.Add("Cap", 100);
        dt.Rows.Add("Hat", 120);
        dt.Rows.Add("Scarf", 290);
        dt.Rows.Add("Belt", 150);
        gvSource.UseAccessibleHeader = true;
        gvSource.DataSource = dt;
        gvSource.DataBind();

        dt.Rows.Clear();
        dt.Rows.Add();
        gvDest.DataSource = dt;
        gvDest.DataBind();
    }
}

protected void Count(object sender, EventArgs e)
{
    int rowsgvSource = Convert.ToInt32(hfSourceRowsCount.Value);
    int rowsgvDest = Convert.ToInt32(hfDestRowsCount.Value);
    ClientScript.RegisterClientScriptBlock(this.GetType(), "", "alert('Source Count: " + rowsgvSource + "'); alert('Destination Count: " + rowsgvDest + "');", true);
}

Screenshot