CODEWITHSUNDEEP
jqueryjsongridview
Mou
Mou

Reputation: 16322

Iterate Gridview through jquery

suppose i have a gridview and my gridview has many rows including header and footer and pager.

in every row there is some textbox, dropdown and checkbox.

like two textbox for employeeid and employeename,one dropdown for sex, one checkbox for selecting graduate or not.

so i need to know that how could i iterate gridview through jquery and also iterate each row excluding header,footer and pager.

so i need to extract values from textbox,dropdown and checkbox from each row and build json string for sending data to server.

build json string like

            var json = "{'Name':'" + $("input[id*='txtName']").val() +
        "','Subject':'" + $("input[id*='Subject']").val()  +
        "','Email':'" + $("input[id*='Email']").val() +
        "','Message':'" + jQuery.trim($('.message').val()) + "'}";

thanks

Upvotes: 1

Views: 3890

Answers (2)

Tigran Gyulzadyan
Tigran Gyulzadyan

Reputation: 149

I don't know what gridview you are using, but i can suggest you such solution.

Gridview is rendered as table and you can give attributes to your rows like "Row0","Row1"

By finding your gridview in java script you can iterate through its rows and using assigned attributes know what is the current row and find appropriate element in row and take its value

$("tr",$("#gridViewID")).each(function()
{
  //   here you can get elements index of your row by tour attribute

   `$("input[id*='txtName']",$(this))` //is your textbox

   // getting all this values you can build your json string

})

Upvotes: 1

codeandcloud
codeandcloud

Reputation: 55308

Try this.

Add RowStyle to the GridView markup like this

<RowStyle CssClass="row" />
<AlternatingRowStyle CssClass="row" /><!-- If needed  -->

Now all the trs in the GridViewRow will have <tr class="row">. Then call this script inside your button click event.

var items = [];
$(".row").each(function() {
    var item = {};
    item.ID = $.trim($(this).find("input[id*='ID']").val());
    item.Name = $.trim($(this).find("input[id*='Name']").val());
    item.Gender = $(this).find("select[id*='Gender']").val();
    item.IsGraduate = $(this).find("input[id*='IsGraduate']").is(':checked');
    items.push(item);
    });
var DTO = JSON.stringify(items);

Please add reference to json2.js for browsers that do not have JSON support

Mock-up: http://jsfiddle.net/naveen/P8Aue/

Upvotes: 1

Related Questions