jQWidgets Forums

This topic contains 3 replies, has 2 voices, and was last updated by ivailo 10 years, 1 month ago.

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

Author

Column resize is not working in child grid of nested grid Posts

May 8, 2015 at 6:53 am Column resize is not working in child grid of nested grid #70826

Participant

hi,

Column resize is not working in child grid of nested grid.
Even I have used columnresize property in nested grid.
Regards,
Karthic

May 8, 2015 at 7:31 am Column resize is not working in child grid of nested grid #70832

ivailo

Participant

Hi karthic_cdm,

Maybe you are forget to include jqxgrid.columnsresize.js. It’s not included in our demo.
Try to use this code. Here the column resize works fine.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to display nested Grid plugins.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type=" text /javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/employees.xml";

            var source =
            {
                datafields: [
                    { name: 'FirstName' },
                    { name: 'LastName' },
                    { name: 'Title' },
                    { name: 'Address' },
                    { name: 'City' }
                ],
                root: "Employees",
                record: "Employee",
                id: 'EmployeeID',
                datatype: "xml",
                async: false,
                url: url
            };

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

            var orderdetailsurl = "../sampledata/orderdetails.xml";

            var ordersSource =
            {
                datafields: [
                    { name: 'EmployeeID', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                root: "Orders",
                record: "Order",
                datatype: "xml",
                url: orderdetailsurl,
                async: false
            };

            var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
            orders = ordersDataAdapter.records;
            var nestedGrids = new Array();

            // create nested grid.
            var initrowdetails = function (index, parentElement, gridElement, record) {
                var id = record.uid.toString();
                var grid = $($(parentElement).children()[0]);
                nestedGrids[index] = grid;
                var filtergroup = new $.jqx.filter();
                var filter_or_operator = 1;
                var filtervalue = id;
                var filtercondition = 'equal';
                var filter = filtergroup.createfilter('stringfilter', filtervalue, filtercondition);
                // fill the orders depending on the id.
                var ordersbyid = [];
                for (var m = 0; m < orders.length; m++) {
                    var result = filter.evaluate(orders[m]["EmployeeID"]);
                    if (result)
                        ordersbyid.push(orders[m]);
                }

                var orderssource = { datafields: [
                    { name: 'EmployeeID', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                    id: 'OrderID',
                    localdata: ordersbyid
                }
                var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);

                if (grid != null) {
                    grid.jqxGrid({
                        source: nestedGridAdapter, width: 780, height: 200, columnsresize: true,
                        columns: [
                          { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                          { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
                          { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                          { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                          { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
                       ]
                    });
                }
            }

            var photorenderer = function (row, column, value) {
                var name = $('#jqxgrid').jqxGrid('getrowdata', row).FirstName;
                var imgurl = '../../images/' + name.toLowerCase() + '.png';
                var img = '<div style="background: white;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></div>';
                return img;
            }

            var renderer = function (row, column, value) {
                return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
            }

            // creage jqxgrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                height: 365,
                source: source,
                rowdetails: true,
                columnsresize: true,
                rowsheight: 35,
                initrowdetails: initrowdetails,
                rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                ready: function () {
                    $("#jqxgrid").jqxGrid('showrowdetails', 1);
                },
                columns: [
                      { text: 'Photo', width: 50, cellsrenderer: photorenderer },
                      { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer },
                      { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer },
                      { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer },
                      { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer },
                      { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer }
                  ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

May 8, 2015 at 8:42 am Column resize is not working in child grid of nested grid #70837

karthic_cdm

Participant

Hi Ivailo,
I included jqxgrid.columnsresize.js in my project.
yet its not working.
Here is the code snippet.

 //populating data and creating grid for selected security groups from dropdownlist--Primary Grid
function CreateGridSelectedSGMembers(openFrom,gridData) {

    var source =
                            {
                                datatype: "json",
                                datafields: [
                                { name: 'GroupName', type: 'string' }
                                ],
                                localdata: gridData

                            };
    var dataAdapter = new $.jqx.dataAdapter(source, {
        downloadComplete: function (data, status, xhr) { },
        loadComplete: function (data) { },
        loadError: function (xhr, status, error) { }
    });

    var initrowdetails = function (index, parentElement, gridElement, datarecord) {

        PGroupName = datarecord.GroupName;
        childgrid = $($(parentElement).children()[0]);
        ChildLoadgrdSGMembers(PGroupName);

    }
    
    if (openFrom != '') {
        $(openFrom + "#grdSGMembers").jqxGrid(
      {
          source: dataAdapter,
          ready: function () {
              // callback function which is called by jqxGrid when the widget is initialized and the binding is completed.
          },
          columnsresize: true,
          sortable: true,
          //pageable: true,
          autoheight: true,
          //height: 550,
          //scrollmode: 'deferred',
          //autorowheight: true,
          Width: '98%',
          rowdetails: true,
          rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight:500, rowdetailshidden: true },
          initrowdetails: initrowdetails,
          selectionmode: 'singlecell',
          filterable: true,
          columnsheight: 45,
          pagesizeoptions: ['5', '10', '20', '30', '50'],
          theme: 'metro',
          columns: [
      { text: 'GroupName', datafield: 'GroupName' }
          ],
      });
    }
    else {
        $(openFrom + "#grdSGMembers").jqxGrid(
      {
          source: dataAdapter,
          ready: function () {
              // callback function which is called by jqxGrid when the widget is initialized and the binding is completed.
          },
          columnsresize: true,
          sortable: true,
          //pageable: true,
          autoheight: true,
          //height: 550,
          //scrollmode: 'deferred',
          //autorowheight: true,
          Width: '98%',
          rowdetails: true,
          rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 300, rowdetailshidden: true },
          initrowdetails: initrowdetails,
          selectionmode: 'singlecell',
          filterable: true,
          columnsheight: 45,
          pagesizeoptions: ['5', '10', '20', '30', '50'],
          theme: 'metro',
          columns: [
      { text: 'GroupName', datafield: 'GroupName' }
          ],
      });
    }
}

//populating data and creating nested grid for selected security groups' grid
function ChildLoadgrdSGMembers(PGroupName) {
       
       var prm = {};
       prm.PGroupName = PGroupName;
       if (prm.PGroupName) {
           try {
               $.ajax({
                   url: '../Admin/GetGridData',
                   type: 'POST',
                   dataType: 'json',
                   data: JSON.stringify(prm),
                   contentType: "application/json; charset=utf-8",
                   success: function (data) {

                       var grdSGMembers = data[0].grdSGMembers;
                       var grdDashboard = data[1].grdDashboard;
                       $("#lblDashboardTitle").css("display", "block");
                       $("#lblDashboardTitle").text('Dashboard for ' + PGroupName);
                       CreateGridSGMembers(grdSGMembers);
                       CreateGridDashboard(grdDashboard);
                       
                       //
                   },
                   error: function (xhrequest, ErrorText, thrownError) {
                       console.log(ErrorText + "," + thrownError);
                   }
               });
           }
           catch (e) {
               alert('Error: ' + e);
           }
       }
       
}

//creating grid for group members
function CreateGridSGMembers(gridData) {

   
    var source =
                            {
                                datatype: "json",
                                datafields: [
                                     { name: 'Groups', type: 'string' },
                                { name: 'AccountID', type: 'string' },
                                { name: 'FirstName', type: 'string' },
                                { name: 'LastName', type: 'string' },
                                { name: 'DisplayName', type: 'string' },
                                { name: 'Email', type: 'string' },
                                 { name: 'AccountDisabled', type: 'string' }
                                
                                ],
                                localdata: gridData,
                                 sortcolumn: 'Groups',
                                 sortdirection: 'desc'
                               
                            };
    var dataAdapter = new $.jqx.dataAdapter(source, {
        downloadComplete: function (data, status, xhr) { },
        loadComplete: function (data) { },
        loadError: function (xhr, status, error) { }
    });

    childgrid.jqxGrid(
  {
      source: dataAdapter,
      ready: function () {
          // callback function which is called by jqxGrid when the widget is initialized and the binding is completed.
          //childgrid.jqxGrid('sortby', 'Groups', 'desc');
      },
      columnsresize: true,
      sortable: true,
      //pageable: true,
      //autoheight: true,
      height: 250,
      //scrollmode: 'deferred',
      //autorowheight: true,
      Width: '98%',
      selectionmode: 'singlecell',
      filterable: true,
      columnsheight: 45,
      pagesizeoptions: ['5', '10', '20', '30', '50'],
      theme: 'metro',
      columns: [
          { text: 'Groups', datafield: 'Groups' },
  { text: 'AccountID', datafield: 'AccountID' },
  { text: 'FirstName', datafield: 'FirstName' },
  { text: 'LastName', datafield: 'LastName' },
  { text: 'DisplayName', datafield: 'DisplayName' },
  { text: 'Email', datafield: 'Email' },
   { text: 'Account Disabled', datafield: 'AccountDisabled' }
   
      ]
  });
    var isModalOpen = localStorage.getItem("isModalOpen").toString();
    if (isModalOpen == "true") {
        childgrid.jqxGrid(
         {
             height: 470,
         });
    }
    
}

Thanks,
Karthic

May 8, 2015 at 9:57 am Column resize is not working in child grid of nested grid #70846

ivailo

Participant

Hi karthic_cdm,

In your presented code the reason for this behavior is not visible.
Try to update to the last version – 3.8.0.
If is needed include the js files in this sequence :

<script type="text/javascript" src="../../scripts/jquery-1.11.1.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.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type=" text /javascript" src="../../scripts/demos.js"></script>

If this doesn’t help, check the console for errors and if there are any – send them with the feedback.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.