Inserting table into Trirand JQGrid Edit Dialog that was creating with JQuery

Question

I have a JQuery and AJAX function that creates a table with 2 list boxes and buttons to add/remove from one list box to another. I want to insert this table into the Edit Dialog box of the JQGrid. So that when the add or edit button is clicked the table displays and the user can add items and the corresponding cell is edited.

Java script and AJAX:

function create_listbox() {

    var html = '<select id="ddlRoles" size="7" multiple></select>';
    var selected = '<select id="ddlSelectedRoles" size="7" multiple></select>';
    var table = '<table id="table1" border="3"></table>';
    var tr = '<tr id="tr1"></tr>';
    var td1 = '<td id="td1"></td>';
    var td2 = '<td id="td2"></td>';
    var td3 = '<td id="td3"></td>';
    var addButton = '<button id="add" onclick="addRole()">Add Role</button><br>';
    var removeButton = '<button onclick="removeRole()">Remove Role</button><br>';

    $('#whatever').append(table);
    $('#table1').append(tr);
    $('#tr1').append(td1);
    $('#tr1').append(td2);
    $('#tr1').append(td3);
    $('#td1').append(html);
    $('#td2').append(addButton);
    $('#td2').append(removeButton);
    $('#td3').append(selected);


    $.ajax({
        url: "MyApplication.asmx/GetRoles",
        data: "{ }",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataFilter: function (data) { return data; },
        success: function (data) {
            //                  alert(data.d);
            for (var i = 0; i < data.d.length; i++) { 
                $('#ddlRoles').append("<option value=\"" + data.d[i].RoleID + "\">" + data.d[i].RoleName + "</option>")
            }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus + ":" + errorThrown);
        }
    });

}

I know that I need an EditTypeCustomElement and EditTypeGetCustomValue but I am completely stumped as to how to accomplish this.

I've tried returning $table.get(0) with the create_listbox function which adds a table but it doesn't add the child elements. Any help?

Answer 1

You need a EditTypeCustomElement (below) JQuery and Ajax:

function create_listbox(value, options) {

    var htmlRolesDdl = '';
    var htmlRolesSelectedDdl = '';

    $.ajax({
        url: "MyApp.asmx/GetRoles",
        data: "{ }",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataFilter: function (data) { return data; },
        success: function (data) {
            var roles = new Array();
            if (value.toString().match(',') == null) roles.push(value.toString());
            else roles = value.toString().split(",")

            for (var i = 0; i < data.d.length; i++) {

                var isMatch = false;
                for (var j = 0; j < roles.length; j++) {
                    if (data.d[i].RoleName == roles[j].toString()) {
                        htmlRolesSelectedDdl += "<option id=\"option" + data.d[i].RoleID + "\"" + " value=\"" + data.d[i].RoleID + "\">" + data.d[i].RoleName + "</option>";
                        //$selected.append("<option id=\"option" + data.d[i].RoleID + "\"" + " value=\"" + data.d[i].RoleID + "\">" + data.d[i].RoleName + "</option>")
                        isMatch = true;
                    }
                }

                if (!isMatch) {
                    htmlRolesDdl += "<option id=\"option" + data.d[i].RoleID + "\"" + " value=\"" + data.d[i].RoleID + "\">" + data.d[i].RoleName + "</option>"
                    //$listbox.append("<option id=\"option" + data.d[i].RoleID + "\"" + " value=\"" + data.d[i].RoleID + "\">" + data.d[i].RoleName + "</option>")
                }
            }
        },
        async: false,            
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus + ":" + errorThrown);
        }
    });



    var html = '<table id="UserRole" border="0">';
    html += '<tr>';
    html += '<td>';
    html += '<select id="ddlRoles" size="7" multiple width="155" style="width:155px;">';
    html += htmlRolesDdl;
    html += '</select>';
    html += '</td>';
    html += '<td>';
    html += '<button onclick="addRole()" style="width:100px;">  Add >></button><br>';
    html += '<button onclick="removeRole()" style="width:100px;"><< Remove</button><br>';
    html += '</td>';
    html += '<td>';
    html += '<select class="ListBoxStyle" id="ddlSelectedRoles" size="7" width="155" multiple style="width:155px;">';
    html += htmlRolesSelectedDdl;
    html += '</select>';
    html += '</td>';
    html += '</tr>';
    html += '<tr>';
    html += '<td colspan="3" align="center" style="padding-top:5px;padding-bottom:10px;">';
    html += '(Press and Hold "Ctrl" to select multiple roles)';
    html += '</td>';
    html += '</tr>';
    html += '</table>';





    return $(html);
}

and a EditTypeGetCustomValue (below) JQuery and AJAX:

function listbox_value(elem, type, stringvalue) {
    if (type == 'get') {
        var roles = new Array();
        $("#ddlSelectedRoles > option").each(function () {
            roles.push($(this).val().toString());
        });

        return roles.toString();

    } else if (type == 'set') {
        var roles = new Array();
        $("#ddlSelectedRoles > option").each(function () {
            roles.push($(this).val().toString());
        });

        $("#<%= hdnSelectedRoles.ClientID %>").val(roles);

        return roles.toString();
    }

}