SubGrid ID values for select lists

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?
JustinAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
what "select lists" are you talking about?
0
JustinAuthor 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.
0
leakim971PluritechnicianCommented:
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
0
Determine the Perfect Price for Your IT Services

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

JustinAuthor 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?
0
leakim971PluritechnicianCommented:
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
0
JustinAuthor 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

0
leakim971PluritechnicianCommented:
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

0
JustinAuthor 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.
0
leakim971PluritechnicianCommented:
from there I see the only parameter is formid : www.trirand.com/jqgridwiki/dokuphp?id=wiki:form_editing
afterShowForm function (formid)
0
leakim971PluritechnicianCommented:
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

0
JustinAuthor 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
0
leakim971PluritechnicianCommented:
so do the same for it
window.subgrid_table_id = sg_tableID;
0
JustinAuthor 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

0
leakim971PluritechnicianCommented:
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;
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JustinAuthor 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.
0
leakim971PluritechnicianCommented:
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
0
JustinAuthor 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!!!!!!
0
leakim971PluritechnicianCommented:
on that useless line 220 replace : sg_tableID
by : window.subgrid_id
0
JustinAuthor Commented:
leakim971 is amazingly helpful
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.