Link to home
Create AccountLog in
Avatar of Justin
JustinFlag for United States of America

asked on

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?
Avatar of leakim971
leakim971
Flag of Guadeloupe image

what "select lists" are you talking about?
Avatar of Justin

ASKER

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.
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
Avatar of Justin

ASKER

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?
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
Avatar of Justin

ASKER

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

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

Avatar of Justin

ASKER

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.
from there I see the only parameter is formid : www.trirand.com/jqgridwiki/dokuphp?id=wiki:form_editing
afterShowForm function (formid)
SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Justin

ASKER

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
so do the same for it
window.subgrid_table_id = sg_tableID;
Avatar of Justin

ASKER

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

ASKER CERTIFIED SOLUTION
Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of Justin

ASKER

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.
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
Avatar of Justin

ASKER

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!!!!!!
on that useless line 220 replace : sg_tableID
by : window.subgrid_id
Avatar of Justin

ASKER

leakim971 is amazingly helpful