jQuery UI Widgets Forums Gauges and Maps TreeMap sub grid & grouping

This topic contains 5 replies, has 2 voices, and was last updated by  tpsdas 4 years, 7 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • sub grid & grouping #80940

    tpsdas
    Participant

    Dear sir,
    I am new in PHP – MySSQL want to make a data grid with search/ sorting / grid password protection along with sub grid & grouping and Auto search option from Table option for my small organization ( difficult to buy the software).
    While I have able to make search/ sorting / grid password protection. BUt I am not able to make Sub grid & grouping (Tree)and Auto search option from Table option. Can any onle help me out how go about this.
    Regards
    Tpsdas
    tpsdas@gmail.com

    sub grid & grouping #80954

    Peter Stoev
    Keymaster

    Hi tpsdas,

    I suggest you to look at the TreeGrid’s demos.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    sub grid & grouping #80994

    tpsdas
    Participant

    Dear Sir,
    Tried from the demo example ( folder name : server_side_grid_editing_with_popup) .
    I hv able to make the search/ sorting / edit & filter option.
    BUt UN-able to code Sub grid & grouping & grid password ( Tree Option)
    PLz plz help me.
    Below mentioned is the code I hv tried:
    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <title id=’Description’>In order to enter in edit mode, click any of the ‘Edit’ buttons. To save the changes, click the ‘Save’ button in the popup dialog. To cancel the changes
    click the ‘Cancel’ button in the popup dialog.</title>
    <link rel=”stylesheet” href=”../../jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”../../scripts/jquery-1.10.2.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.pager.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxwindow.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxinput.js”></script>
    <script type=”text/javascript” src=”../../scripts/gettheme.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.sort.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.edit.js”></script>

    <script type=”text/javascript”>
    $(document).ready(function () {
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘EmployeeID’, type: ‘string’},
    { name: ‘FirstName’, type: ‘string’},
    { name: ‘LastName’, type: ‘string’},

    { name: ‘Title’, type: ‘string’}
    ],
    cache: false,
    id: ‘EmployeeID’,
    url: ‘data.php’,
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server – send update command
    var data = “update=true&FirstName=” + rowdata.FirstName + “&LastName=” + rowdata.LastName + “&Title=” + rowdata.Title;
    data = data + “&EmployeeID=” + rowid;

    $.ajax({
    dataType: ‘json’,
    url: ‘data.php’,
    type: ‘POST’,
    data: data,
    success: function (data, status, xhr) {
    // update command is executed.
    commit(true);
    }
    });
    }
    };

    var dataAdapter = new $.jqx.dataAdapter(source);

    // initialize the input fields.
    $(“#firstName”).jqxInput({width: 150, height: 23});
    $(“#lastName”).jqxInput({width: 150, height: 23});

    $(“#title”).jqxInput({width: 150, height: 23});

    var dataAdapter = new $.jqx.dataAdapter(source);
    var editrow = -1;

    // initialize jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 900,
    selectionmode: ‘singlecell’,
    source: dataAdapter,
    autoheight: true,
    filterable: true,
    //editable : true,
    sortable: true,
    pageable: true,
    columns: [
    { text: ‘EmployeeID’, editable: false, datafield: ‘EmployeeID’, width: 90 },
    { text: ‘First Name’, columntype: ‘dropdownlist’, datafield: ‘FirstName’, width: 150 },
    { text: ‘Last Name’, columntype: ‘dropdownlist’, datafield: ‘LastName’, width: 150 },

    { text: ‘Title’, datafield: ‘Title’, width: 90 },
    { text: ‘Edit’, filterable: false, sortable:false, datafield: ‘Edit’, columntype: ‘button’, cellsrenderer: function () {
    return “Edit”;
    }, buttonclick: function (row) {
    // open the popup window when the user clicks a button.
    editrow = row;
    var offset = $(“#jqxgrid”).offset();
    $(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 } });

    // get the clicked row’s data and initialize the input fields.
    var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
    $(“#firstName”).val(dataRecord.FirstName);
    $(“#lastName”).val(dataRecord.LastName);

    $(“#title”).val(dataRecord.Title);

    // show the popup window.
    $(“#popupWindow”).jqxWindow(‘open’);
    }
    }
    ]
    });

    // initialize the popup window and buttons.
    $(“#popupWindow”).jqxWindow({
    width: 280, resizable: false, isModal: true, autoOpen: false, cancelButton: $(“#Cancel”), modalOpacity: 0.01
    });

    $(“#popupWindow”).on(‘open’, function () {
    $(“#firstName”).jqxInput(‘selectAll’);
    });

    $(“#Cancel”).jqxButton();
    $(“#Save”).jqxButton();

    // update the edited row when the user clicks the ‘Save’ button.
    $(“#Save”).click(function () {
    if (editrow >= 0) {
    var row = { FirstName: $(“#firstName”).val(), LastName: $(“#lastName”).val(), Title: $(“#title”).val()};

    var rowID = $(‘#jqxgrid’).jqxGrid(‘getrowid’, editrow);
    $(‘#jqxgrid’).jqxGrid(‘updaterow’, rowID, row);
    $(“#popupWindow”).jqxWindow(‘close’);
    }
    });
    });
    </script>
    </head>
    <body class=’default’>
    <div id=’jqxWidget’>
    <div id=”jqxgrid”></div>
    <div style=”margin-top: 30px;”>
    <div id=”cellbegineditevent”></div>
    <div style=”margin-top: 10px;” id=”cellendeditevent”></div>
    </div>
    <div id=”popupWindow”>
    <div>Edit</div>
    <div style=”overflow: hidden;”>
    <form>
    <table>
    <tr>
    <td align=”right”>First Name:</td>
    <td align=”left”><input id=”firstName” /></td>
    </tr>
    <tr>
    <td align=”right”>Last Name:</td>
    <td align=”left”><input id=”lastName” /></td>
    </tr>

    <tr>
    <td align=”right”>Title:</td>
    <td align=”left”><input id=”title”/></td>
    </tr>
    <tr>
    <td align=”right”></td>
    <td style=”padding-top: 10px;” align=”right”><input style=”margin-right: 5px;” type=”button” id=”Save” value=”Save” /><input id=”Cancel” type=”button” value=”Cancel” /></td>
    </tr>

    </table>
    </form>
    </div>
    </div>
    </div>
    </body>
    </html>

    sub grid & grouping #81002

    Peter Stoev
    Keymaster

    Hi tpsdas,

    I would suggest you to see the TreeGrid’s demos, not the Grid’s demos. If you are looking for grid nesting, then look at the Grid’s demos. In addition, gettheme.js is not part of the package from more than an year so I suppose that you use a very old version of our software. I would suggest you to always use the newest versions.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    sub grid & grouping #81037

    tpsdas
    Participant

    Dear Peter,
    Could You kindly give me the link of the newest version of Your Software demos for my reference.
    Actually I hv experienced when I am able to code the Search & Edit function – i am Not Able to code Grid & Sub grid option & Search & Edit function& & Vice versa in same grid view.
    Actually I am looking for Search _ Sort Grid_Sub Grid & Edit & Also putting Password in the same grid view ( All under 1 roof)
    Can U kindly HELP me pleaseeee!!!
    Regards
    Tapas

    sub grid & grouping #81380

    tpsdas
    Participant

    Dear Peter,
    Could You kindly give me the link of the newest version of Your Software demos for my reference.

    Actually I am looking for Search _ Sort Grid_Sub Grid & Edit & Also putting Password in the same grid view ( All under 1 roof)
    Can U kindly HELP me pleaseeee!!!
    Regards
    Tapas
    tpsdas@gmail.com

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.