Click here to Skip to main content
15,899,001 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I have a code that can Drag Rows from one grid o another one and now I want to access the columns in the second gridview and save it into the database.
how can I get the values of column[i]?!

What I have tried:

This is my code
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();
});



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);
}
Posted
Updated 23-Oct-18 8:26am
v2
Comments
F-ES Sitecore 17-Oct-18 5:35am    
Your server code doesn't know about any changes you have made to the elements via javascript. When you add data to the other table that you want saved in the database you'll need to come up with some way of serilising that data and storing it in a HiddenField so that when the page is submitted the data can be read from that hidden field and saved. You could serialise it as json.

This is not a trivial task.

1 solution

You are using a server-side data representation control (GridView) and you are populating them at the server in your C# code, and now you are dynamically manipulating the DOM (rendered HTML) at the client using jQuery and wanted to save the changes which won't work because:

(1) Your C# code doesn't know what you've changed in the client (drag and drop) - they are modified on the client and there's a disconnected space between them.
(2) Your dynamic HTML will be lost on each postbacks as your server doesn't know the state your modified HTML.


You shouldn't mix your JavaScript implementation with your C# code behind logic. If you are generating your Table using jQuery, then use jQuery to generate a table and modify them as you require. You would need to use AJAX to post your data changes in the database. Google for "jquery datatables" to see an example of a client-side grid.
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900