SubGrid ID values for select lists

Justin
Justin used Ask the Experts™
on
Does anyone know how to capture the correct ID value in a jqgrid subgrid to bind a drop down list? I have no issues placing a drop down list in the parent grid but when adding a select list to the subgrid i think i am not correctly using the id values?

In parent grid i can use the grid name, #jqgrid such as in:

var current = $("#jqGrid").jqGrid('getRowData', $("#jqGrid")[0].p.selrow).Name;

Open in new window

where my parent grid is:
$("#jqGrid").jqGrid({

Open in new window


but my subgrid uses a Id value that is different:
subGridRowExpanded: function (subgrid_id, row_id) {
            var sg_tableID = subgrid_id + "_t";
            alert(subgrid_id);
            var pager_id = "p_" + sg_tableID;
            $("#" + subgrid_id).html("<table id='" + sg_tableID + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
            jQuery("#" + sg_tableID).jqGrid({

Open in new window



I did place in an alert to see what the ID values are but i am not clear on how to code that correctly? how do i correctly target the subgrid ID to bind the select list?
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
what "select lists" are you talking about?

Author

Commented:
I was looking to populate a select list from database into my subgrid, I can do this in my grid by:


function popUsers() {
	var current = $("#TaskGrid").jqGrid('getRowData', $("#TaskGrid")[0].p.selrow).TaskValidator;

	$.ajax({
		url: "/Tasks/getUserList",
		datatype: 'json',
		mtype: 'Get',
		async: false,
		success: function (users) {
			$("#Task").html("");
			$("#Proxy").html("");
			$.each(users, function (i, user) {
				$("#Task").append(
					$('<option></option>').val(user.name).html(user.DisplayName)
				);
				$("#Proxy").append(
					$('<option></option>').val(user.name).html(user.DisplayName)
				);
			});
			$("#Task").prop("disabled", false);
			$("#Proxy").prop("disabled", false);
			$("#Task").val(current);
			$("#Proxy").val(current);
		}
	});
}

Open in new window


but i am not having luck populating the subgrid, i believe i am not getting the id values correct for the correct row. I am sure this is pretty standard in jqgrid as subgrid, just looking how to sort out the id values for each row.
leakim971Multitechnician
Top Expert 2014

Commented:
with this :
subGridRowExpanded: function (subgrid_id, row_id) {
subgrid_id is supposed to give you the subgrid ID, unique
and row_id the row ID, unique too
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
I was hoping it would be that easy but for some reason i get undefined error in my drop down, maybe my syntax is incorrect?

When I use:
var current = $("#" + subgrid_id).jqGrid('getRowData', $("#" + subgrid_table_id)[0].p.selrow).TaskValidator;
alert(current);

Open in new window


I get error when looks like it cant find "#" + subgrid_id. When i looks at what the valures are:

i get subgrid_id = jqGrid_7 and row_id = 7


When i try to use something like:
var current = $("#" + subgrid_id + "_" + row_id).jqGrid('getRowData', $("#" + subgrid_table_id)[0].p.selrow).TaskValidator;
        alert(current);

Open in new window


I still get the error like it doesn know what the ID value is. how do you correctly reference the row id number for the subgrid?
leakim971Multitechnician
Top Expert 2014

Commented:
could you add this first alert, it should help us :
alert("subgrid id : " + subgrid_id + "\nfound : " + $("#" + subgrid_id).length + "\nrow id : "+ row_id + "\nfound(row) : "+ $("#" + row_id").length + "\ndropdown found : " + $("select","#" + row_id).length);
var current = $("#" + subgrid_id).jqGrid('getRowData', $("#" + subgrid_table_id)[0].p.selrow).TaskValidator;
alert(current);

Open in new window

please post what you get in the alert box
don't forget ID attribute MUST (should) be unique. so you should be able to use : $("select","#" + row_id).length
to get a reference to your dropdown in the row

Author

Commented:
I added the alert with a small modification, I removed the second " from  $("#" + row_id").length as it gave me an error.

When i run the function i get: "Error: 'subgrid_id' is undefined"
The full function is:

function popUsersT() {
	alert("subgrid id : " + subgrid_id + "\nfound : " + $("#" + subgrid_id).length + "\nrow id : " + row_id + "\nfound(row) : " + $("#" + row_id).length + "\ndropdown found : " + $("select","#" + row_id).length);
	var current = $("#jqGrid").jqGrid('getRowData', $("#" + subgrid_id)[0].p.selrow).TaskValidator;
	alert(current);
	$.ajax({
		url: "/Tasks/getUserList",
		datatype: 'json',
		mtype: 'Get',
		async: false,
		success: function (users) {
			$("#TaskValidator").html("");
			$("#ProxyValidator").html("");
			$.each(users, function (i, user) {
				$("#TaskValidator").append(
					$('<option></option>').val(user.name).html(user.DisplayName)
				);
				$("#ProxyValidator").append(
					$('<option></option>').val(user.name).html(user.DisplayName)
				);
			});
			$("#TaskValidator").prop("disabled", false);
			$("#ProxyValidator").prop("disabled", false);
			$("#TaskValidator").val(current);
			$("#ProxyValidator").val(current);
		}
	});
}

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
my bad, use : $("#" + row_id).length

but look lik you know your issue now, how do you call "popUsersT()" ?
maybe you can call it passing subgrid_id and row_id :
popUsersT(subgrid_id,row_id);

Open in new window

Author

Commented:
I am calling the function in the edit form of the grid:

jQuery('#' + sg_tableID).jqGrid('navGrid', "#" + pager_id, { edit: true, add: false, del: false, search: false, refresh: true },
                {
                    zIndex: 100,
                    url: '/Home/EditTasksubList',
                    editData: {
                        sid: function () { return $("#name").val(); }
                    },
                    closeOnEscape: true,
                    closeAfterEdit: true,
                    recreateForm: true,
                    afterShowForm: popUsersT,
                    afterComplete: function (response) {
                        if (response.responseText) {
                            alert(response.responseText);
                        }
                    }
                })

Open in new window


When i attempted to pass something to the function as in: afterShowForm: popUsersT(subgrid_id, row_id)

The pager/edit button bar did not render on the subgrid.
leakim971Multitechnician
Top Expert 2014

Commented:
from there I see the only parameter is formid : www.trirand.com/jqgridwiki/dokuphp?id=wiki:form_editing
afterShowForm function (formid)
leakim971Multitechnician
Top Expert 2014
Commented:
maybe you can save the latest as global :
subGridRowExpanded: function (subgrid_id, row_id) {
   window.subgrid_id = subgrid_id;
   window.row_id = row_id;

Open in new window


and try :
alert("subgrid id : " + window.subgrid_id + "\nfound : " + $("#" + subgrid_id).length + "\nrow id : "+ window.row_id + "\nfound(row) : "+ $("#" + window.row_id).length + "\ndropdown found : " + $("select","#" + window.row_id).length);
var current = $("#" + subgrid_id).jqGrid('getRowData', $("#" + subgrid_table_id)[0].p.selrow).TaskValidator;
alert(current);

Open in new window

Author

Commented:
Thank you very much for your help so far. I think that got me closer, i can see values now:

subgrid id: jqGrid_12
found:1
row id:12
found(row):1
dropdown found:0

I get the error: Error: 'subgrid_table_id' is undefined
leakim971Multitechnician
Top Expert 2014

Commented:
so do the same for it
window.subgrid_table_id = sg_tableID;

Author

Commented:
I did give that a shot but i get Error: 'sg_tableID' is undefined

to make sure i understand what i did was

 subGridRowExpanded: function (subgrid_id, row_id) {
            var sg_tableID = subgrid_id + "_t";
            window.subgrid_id = subgrid_id;
            window.row_id = row_id;
            window.subgrid_table_id = sg_tableID;

Open in new window

and in function
var current = $("#" + subgrid_id).jqGrid('getRowData', $("#" + window.subgrid_table_id )[0].p.selrow).TaskValidator;

Open in new window

Multitechnician
Top Expert 2014
Commented:
subGridRowExpanded: function (subgrid_id, row_id) {
            var sg_tableID = subgrid_id + "_t";
            window.subgrid_id = sg_tableID;
            window.row_id = row_id;
            window.subgrid_table_id = sg_tableID;

Author

Commented:
Thank you for the reply, i made the ajustment:

 subGridRowExpanded: function (subgrid_id, row_id) {
            var sg_tableID = subgrid_id + "_t";
            window.subgrid_id = sg_tableID;
            window.row_id = row_id;
            window.subgrid_table_id = sg_tableID;

Open in new window


I get the error: Error: 'sg_tableID' is undefined

I never expected a drop down list in the subgrid would be so much trouble. Thank you for all your help with this.
leakim971Multitechnician
Top Expert 2014

Commented:
look likz you got the same error
could you clear you cache and try again and be sure to use your code updated
the best would be to provide a direct link to your page to see it

Author

Commented:
I am currently running this in vs2017 and do not have a place to publish on the web. I am pretty sure that the page is updated, if i run the code in debug mode I can see the error populate:

Unhandled exception at line 220, column 9 in http://localhost:50596/Scripts/Scripts.js
0x800a1391 - JavaScript runtime error: 'sg_tableID' is undefined

line 220 is

alert("subgrid id : " + window.subgrid_id + "\nfound : " + $("#" + subgrid_id).length + "\nrow id : " + window.row_id + "\nfound(row) : " + $("#" + window.row_id).length + "\ndropdown found : " + $("select", "#" + window.row_id).length + "\nsg_tableID: " + $("#" + sg_tableID).html);

Open in new window


Now this is wierd, if i commit out that line such as:
  //alert("subgrid id : " + window.subgrid_id + "\nfound : " + $("#" + subgrid_id).length + "\nrow id : " + window.row_id + "\nfound(row) : " + $("#" + window.row_id).length + "\ndropdown found : " + $("select", "#" + window.row_id).length + "\nsg_tableID: " + $("#" + sg_tableID).html);
        var current = $("#" + subgrid_id).jqGrid('getRowData', $("#" + window.subgrid_table_id )[0].p.selrow).TaskValidator;
        alert(current);

Open in new window


I get a blank alert box( which populates to the correct value if the initial value is not blank), if i click ok past that I can see the drop down list with the correct data. I dont know if i understand the why but it does seem to be working.


Thank you so much for getting me this far, you are AWESOME!!!!!!
leakim971Multitechnician
Top Expert 2014

Commented:
on that useless line 220 replace : sg_tableID
by : window.subgrid_id

Author

Commented:
leakim971 is amazingly helpful

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial