I want to insert rows into a WebGrid, using jquery

Question

I want to insert rows into a webgrid using Jquery. I will get my values from textboxes on the page.

var grid1 = new WebGrid(Model.dsvm as IEnumerable<ASP_Upload_Version_1.Models.Share_Template>, canPage: true, canSort: false);
                            @grid1.GetHtml(tableStyle: "table table-sm table-striped table-bordered table-condensed",
                            htmlAttributes: new { @id = "GridPractice", @class = "table table-sm table-striped table-bordered table-condensed", @style = "width:100%" },
                            columns: grid1.Columns(
                            grid1.Column("PracticeArea", "Practice Area"),
                            grid1.Column("MarketArea", "Market Area"),
                            grid1.Column(format: @<text>
                                    <a data-title="Are you sure to deactivate this Input?"><i class="fa fa-trash" style="color:red"></i></a></text>, header: "Remove")));

I tried using the following jquery action, yielded no result

$('#Submit_AddRow1').click(function () {
            var row = GridPractice.find("tr").eq(1)
            SetValue(row, 0, $('#txtPracticeArea').val());
            SetValue(row, 1, $('#txtMarketArea').val());
            $('#GridPractice').append(row);
        })

score 1 · Accepted Answer · answered May 16 '19 at 09:54

The following jquery function worked:

$("#Submit_AddRow1").click(function () {
    //Reference the WebGrid.
    var webGrid = $("#GridPractice");

    //Reference the first row.
    var row = webGrid.find("tr").eq(1);

    //Check if row is dummy, if yes then remove.
    if ($.trim(row.find("td").eq(0).html()) == "") {
    row.remove();
    }

    //Clone the reference first row.
    row = row.clone(true);

    //Reference the Practice Area TextBox.
    var txtfoo = $("#txtfoo");

    //Reference the Market Area TextBox.
    var txtbar = $("#txtbar");

    //Add the Practice Area value to first cell.
    SetValue(row, 0, txtfoo);

    //Add the Market Area value to second cell.
    SetValue(row, 1, txtbar);

    //Add the row to the WebGrid.
    webGrid.append(row);
});

function SetValue(row, index, textbox) {
    //Reference the Cell and set the value.
    row.find("td").eq(index).html(textbox.val());

    //Clear the TextBox.
    textbox.val("");
}

I want to insert rows into a WebGrid, using jquery

1 Answers1