JQ Grid HTML Control in a Grid

jQuery("#gvUserManager").jqGrid({
        data: mydata,
        datatype: "local",
        editurl: 'clientArray',
        colNames: ['Name', 'User Name', 'Email', 'Staff Level', ' User Type', "Send Password", "User ID"],
        colModel: [
            { name: 'Name', index: 'Name', width: 100, editable: true, editoptions: { readonly: false, size: 25 } },
            {
                name: 'UserName', index: 'UserName', width: 100, editable: true, editoptions: {
                    dataInit: function(e) {
                        $(e).autocomplete({
                            source: availableTags,
                            minLength: 1,
                            focus: function(event, ui) {
                                $(e).val(ui.item.label);
                            },
                            classes: {
                                "ui-autocomplete": "highlight"
                            },
                            select: function(event, ui) {
                                $(e).val(ui.item.label);
                                $("input#UserName").val(ui.item.value);
                            }
                        });
                    }

                }
            },
            { name: 'Email', index: 'Email', width: 200, editable: true, editoptions: { size: 30 } },
            { name: 'StaffLevel', index: 'Active', width: 100, align: "center", editable: true, edittype: "select", editoptions: { value: "1:1;2:2;3:3" } },
            { name: 'UserType', index: 'Staff', width: 100, editable: true, formatter: UserTypeFormater, edittype: "select", editoptions: { value: "  Admin:Admin;staff:staff" } },
            { name: 'action', index: 'action', sortable: false, formatter: sendPasswordFormater },
            { name: 'UserId', index: 'UserId', width: 100, editable: false, hidden: true }
        ],
        shrinkToFit: false,
        rowNum: 50,
        recreateForm: false,
        rowList: [10, 20, 30],
        pager: '#userManagerPagenav',
        sortname: 'id',
        viewrecords: true,
        caption: "User Manager",
        multiselect: true,
        width: 500,
        height: 210,
        hidegrid: false

    });
    function sendPasswordFormater(cellvalue, options, rowObject) {
        var edit = "";
        if (typeof (rowObject.UserId) !== "undefined") {
            edit = "<input style='padding:5px' type='button' value='Send Password' onclick=\"GetPassword('" + options.rowId + "');\"  />";
        }
        return edit;
    }

Comments

Popular posts from this blog

My Interview Experience

React Checkbox Control SPFx