How to get the values of a ID column in a jqGrid from VB.NET code behind page? - vb.net

Question

My .ascx page has two jqGrids
$(document).ready(function () {
var searchText = "";
$("#cclist").jqGrid({
//url: ResolveUrl() + '/CC_DoctorList',
datatype: 'local',
// postData: { "CaseNo": CaseNo },
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (jsondata) { return JSON.stringify(jsondata); },
jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
colNames: ['Remove', 'DoctorID', 'Last Name', 'First Name', 'Address'],
colModel: [
{ name: 'RemoveAction', width: 80, fixed: true, sortable: false, resize: false, align: "center" },
{ name: 'ID', index: 'ID', width: 50, sortable: false, hidden: false },
{ name: 'LastName', index: 'LastName', width: 100, hidden: false, sortable: false },
{ name: 'FirstName', index: 'FirstName', width: 100, hidden: false, sortable: false },
{ name: 'Address', width: 420, hidden: false, sortable: false,
jsonmap: function (obj) {
var street = obj.Address.Address1
var city = obj.Address.City
var state = obj.Address.StateProvince
var zip = obj.Address.PostalCode
if (street != '') { street = street + ', ' }
if (city != '') { city = city + ', ' }
if (state != '') { state = state + ', ' }
var Address = street + city + state + zip
return Address
}
}
],
gridComplete: function () { addDeleteIcon(); },
pager: '#ccpager',
rowNum: 100,
rowList: [100, 200],
sortname: 'LastName',
sortorder: 'desc',
viewrecords: true,
gridview: true,
height: "100%",
caption: 'Send Copy of Report To:',
multiselect: false,
shrinkToFit: false,
loadui: "disabled"
})//.jqGrid('navGrid', '#ccpager', { edit: false, add: true, del: false, search: true });
$("#list").jqGrid({
url: ResolveUrl() + '/DoctorList',
datatype: 'local',
postData: { "searchText": searchText },
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (jsondata) { return JSON.stringify(jsondata); },
jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
colNames: ['Add', 'DoctorID', 'Last Name', 'First Name', 'Address'],
colModel: [
{ name: 'AddAction', width: 80, fixed: true, sortable: false, resize: false, align: "center" },
{ name: 'ID', index: 'ID', width: 50, sortable: false, hidden: false },
{ name: 'LastName', index: 'LastName', width: 100, hidden: false, frozen: true, sortable: false },
{ name: 'FirstName', index: 'FirstName', width: 100, hidden: false, frozen: true, sortable: false },
{ name: 'Address', width: 420, hidden: false, sortable: false,
jsonmap: function (obj) {
var street = obj.Address.Address1
var city = obj.Address.City
var state = obj.Address.StateProvince
var zip = obj.Address.PostalCode
if (street != '') { street = street + ', ' }
if (city != '') { city = city + ', ' }
if (state != '') { state = state + ', ' }
var Address = street + city + state + zip
return Address
}
}],
gridComplete: function () {
var ids = jQuery("#list").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
var rd = $("#list").getRowData(cl);
var imageid = 'addImg_' + rd['ID']
be = "<div><image style='height:22px;width:20px;' alt='' src='" + ResolveUrl('//img/icons/add_black.png') + "'></image></div>"//"<input type='button' value='Remove' onclick=\"jQuery('#rowed2').editRow('" + cl + "');\" />";
jQuery("#list").jqGrid('setRowData', ids[i], { AddAction: be });
}
},
pager: '#pager',
rowNum: 5,
rowList: [5, 10, 15, 20],
sortname: 'LastName',
sortorder: 'desc',
viewrecords: true,
gridview: true,
caption: 'Search Result',
multiselect: false,
height: "100%",
shrinkToFit: false
})
jQuery("#list").click(function (e) {
var el = e.target;
if (el.nodeName !== "TD") {
el = $(el, this.rows).closest("td");
}
var iCol = $(el).index();
var row = $(el, this.rows).closest("tr.jqgrow");
var rowId = row[0].id;
var noMatch = 0;
if (iCol == 0) {
var rd = $("#list").getRowData(rowId);
var DoctorID = rd['ID'];
//check if the doc already exists in the cc doc list
var ids = jQuery("#cclist").jqGrid('getDataIDs');
if (ids.length == 0) {
ids.length = ids.length + 1;
}
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
var ccrd = $("#cclist").getRowData(cl);
var newrowid = ids.length + 1;
var ccDoctorID = ccrd['ID'];
if (DoctorID != ccDoctorID) {
noMatch = noMatch + 1;
if (noMatch == ids.length) {
var deleteImageIcon = "<div><image style='height:22px;width:20px;' alt='' src='" + ResolveUrl('//img/icons/trashbin.png') + "'></image></div>"; // onclick=\"jQuery('#cclist').delRowData('" + rowId + "');\"
jQuery("#cclist").jqGrid('addRowData', newrowid, { RemoveAction: deleteImageIcon, ID: rd['ID'], LastName: rd['LastName'], FirstName: rd['FirstName'], Number: rd['Number'], Address: rd['Address'] });
// alert(ids);
// var hdnids = document.getElementById('hdnDocIDs').value;
// hdnids.value = rd['ID'];
//var hdnids = jQuery("#<%=hdnDocIds.ClientID %>").val();
//alert(hdnids);
//hdnids = rd['ID'];
//alert('hdnvalue :' + hdnids);
//$("#<%=hdnlbldocs.ClientID%>").val(rd['ID'].toString() + ',' + $("#<%=hdnlbldocs.ClientID%>").val())
//$("#<%=hdnlbldocs.ClientID%>").val(rd['ID']);
//alert($("#<%=hdnlbldocs.ClientID%>").val());
//alert($("#<%=hdnlbldocs.ClientID%>").val(rd['ID'] + ','));
//alert($("#<%=hdnlbldocs.ClientID%>").val());
//jQuery("#<%=hdnDocIDs.ClientID %>").val(rd['ID']);
//The below works as expected - working.
jQuery("#<%=hdnDocIDs.ClientID %>").val(jQuery("#<%=hdnDocIDs.ClientID%>").val() + ',' + rd['ID']);
alert('All hdn ids : ' + jQuery("#<%=hdnDocIDs.ClientID%>").val());
//Using hidden fields it concatenates the doc ids - working
//alert('in side the for loop ID 2:' + rd['ID'] + ' DoctorID : ' + DoctorID);
//var furl = ResolveUrl() + '/AddCCDoctor';
//var furl = '';
//var param = '{"CaseNo":"' + CaseNo + '", "DoctorID":"' + DoctorID + '" }';
//var param = '{ "DoctorID":"' + DoctorID + '" }';
//var callback = function (msg) { dataHasChanged(); jQuery("#cclist").trigger("reloadGrid"); };
// ajaxJsonCall(furl, param, callback);
//jQuery("#cclist").jqGrid('setGridParam', {datatype: 'json'}).trigger('reloadGrid');
function (msg) { dataHasChanged(); jQuery("#cclist").trigger("reloadGrid"); };
}
}
}
}
});
The #list grid gets loaded by clicking on the Search button that I have not posted in the above code. Once the #list jqGrid is loaded users can click on the rows they are interested in and those rows are added to the #cclist jqgrid.
Now, to make the .ascx more generic I need to be able to write a public method in the code behind to return all the rows IDs (doctorIDs) that are added to the #cclist jqGrid and save the IDs to the database.
Can someone help me out on how to do this?

Answer 1

Thanks for taking time to read my post and posting your comments.
I put the code in a function as below and it is working as expected.
var hiddenField = $("#<%= hdnDocIDs.ClientID %>");
var selectedValues = "";
function updateSelectedRowsHidden() {
var selectedRows = [];
selectedRows = $('#cclist').jqGrid('getDataIDs');
selectedValues = "";
hiddenField.val("");
for (var i = 0; i < selectedRows.length; i++) {
var myRow = $('#cclist').jqGrid('getRowData', selectedRows[i]);
selectedValues = selectedValues + myRow.ID + ",";
}
hiddenField.val(selectedValues);
}

Answer 2

You see this answer, here I'm getting data out of selected rows and sending that to server method. Have a save button in your page like the one in answer
Now in your case you want data from entire grid. So for you code will be like this.
$('#clickMe').click(function() {
var rowsOnPage=[];
var docId=[];
rowsOnPage=$('#cclist').jqGrid('getDataIDs');
for(var i=0;i<rowsOnPage.length;i++)
{
docId.push(rowsOnPage[i].ID);
}
$.ajax({
type: 'POST',
url: '#Url.Action("editMe")',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify({DoctorID:docID })
dataType: "json",
success: function() {
$('#grid').trigger("reloadGrid");
},
error: function() {
alert("error");
}
});
});
and the server method(in ASP.NET MVC) which will be your code behind method in your approach will be like this.
//depends upon dataType of DoctorID(int or string)
public ActionResult editMe(string[] DoctorID)
{
}