jQWidgets Forums

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts

  • Rahul
    Participant

    Hi Ivailo,
    The DEMo you linked,my code is somewhat similar to that but using nested grid…..i m dropping row values in the nested grid not in a normal grid.
    This is my code:
    <link rel=”stylesheet” href=”/javascript/jqwidgets/jqwidgets/styles/jqx.base.css” type=”text/css” />
    <script type=”text/javascript” src=”/javascript/jqwidgets/scripts/jquery-1.11.1.min.js””></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxcore.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxbuttons.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxgrid.sort.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxgrid.pager.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxgrid.edit.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxgrid.filter.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxgrid.columnsresize.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxdatatable.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxtreegrid.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxdropdownbutton.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxdragdrop.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/jqwidgets/jqxexpander.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/scripts/demos.js”></script>
    <script type=”text/javascript” src=”/javascript/jqwidgets/generatedata.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {
    $(“#add”).click(function(){
    var datarow = {};
    var commit = $(“#grid1”).jqxGrid(‘addrow’, null, datarow);
    // $(“#grid1”).jqxGrid(‘refresh’);
    var rows = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
    alert(rows);
    $(“#count”).text(rows + ” Boards”);
    // $(“#grid1”).jqxGrid(‘updatebounddata’, ‘addrow’);
    //$(“#expand”).click();
    //$(“#grid1”).jqxGrid(‘hiderowdetails’, rows-1);
    });

    $(“#remove”).click(function(){
    var selectedrowindex = $(“#grid1”).jqxGrid(‘getselectedrowindex’);
    //alert(selectedrowindex);
    var rowscount = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $(“#grid1”).jqxGrid(‘getrowid’, selectedrowindex);
    var commit = $(“#grid1”).jqxGrid(‘deleterow’, id);
    $(“#expand”).click();
    }
    var rows = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
    $(“#count”).text(rows + ” Boards”);
    });

    $(“#expand”).click(function(){
    var count = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
    for (var m = 0; m < count; m++) {
    $(“#grid1”).jqxGrid(‘showrowdetails’, m);
    }
    });

    $(“#collapse”).click(function(){
    var count = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
    for (var m = 0; m < count; m++) {
    $(“#grid1”).jqxGrid(‘hiderowdetails’, m);
    }
    });

    var url = “<%=Encoder.encodeForJavaScript(State.getLocaleContextPath(request))%>/javascript/jqwidgets/sampledata/employees.xml”;
    var source1 =
    {
    datafields: [
    { name: ‘FirstName’ },
    { name: ‘LastName’ },
    { name: ‘Title’ },
    { name: ‘Address’ },
    { name: ‘City’ }
    ],
    root: “Employees”,
    record: “Employee”,
    id: ‘EmployeeID’,
    datatype: “xml”,
    async: false,
    url: url,
    sortcolumn: ‘FirstName’,
    sortdirection: ‘asc’
    };

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

    var orderdetailsurl = “<%=Encoder.encodeForJavaScript(State.getLocaleContextPath(request))%>/javascript/jqwidgets/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;
    //alert(orders);
    var nestedGrids = new Array();

    // create nested grid.
    var initrowdetails = function (index, parentElement, gridElement, record) {
    /* alert(“Index : “+index);
    alert(“Parent : “+parentElement.FirstName);
    alert(“Grid : “+gridElement);
    alert(“Record : “+record.FirstName); */
    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 = [];
    //alert(orders.length);
    for (var m = 0; m < orders.length; m++) {
    var result = filter.evaluate(orders[m][“EmployeeID”]);
    //alert(orders[m]);
    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: 575, height: 200,
    sortable: 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: 250 }
    ]
    });
    }
    }
    var renderer = function (row, column, value) {
    return ‘<span style=”margin-left: 4px; margin-top: 9px; float: left;”>’ + value + ‘</span>’;
    }

    // creage jqxgrid
    $(“#grid1”).jqxGrid(
    {
    width: 650,
    height: 625,
    source: source1,
    rowdetails: true,
    columnsresize: true,
    sortable: true,
    filterable: true,
    rowsheight: 35,
    initrowdetails: initrowdetails,
    rowdetailstemplate: { rowdetails: “<div id=’subgrid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
    ready: function () {
    var count = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
    //alert(count);
    for (var m = 0; m < count; m++) {
    $(“#grid1”).jqxGrid(‘showrowdetails’, m);
    }
    },
    columns: [
    //{ text: ‘Photo’, width: 50, cellsrenderer: photorenderer },
    { text: ‘First Name’, datafield: ‘FirstName’, width: 100, editable: true, cellsrenderer: renderer },
    { text: ‘Last Name’, datafield: ‘LastName’, width: 100, editable: false,cellsrenderer: renderer },
    { text: ‘Title’, datafield: ‘Title’, width: 180, editable: false,cellsrenderer: renderer },
    { text: ‘Address’, datafield: ‘Address’, width: 300, editable: false,cellsrenderer: renderer },
    { text: ‘City’, datafield: ‘City’, width: 170, editable: false,cellsrenderer: renderer }
    ]
    });
    var source2 =
    {
    localdata: generateshippingdata(20),
    datafields: [
    { name: ‘ShipName’, type: ‘string’ },
    { name: ‘ShipAddress’, type: ‘string’ },
    { name: ‘ShipCity’, type: ‘string’ },
    { name: ‘ShipCountry’, type: ‘string’ }
    ],
    datatype: “array”
    };
    var dataAdapter2 = new $.jqx.dataAdapter(source2);
    var columns2 = [
    { text: ‘Ship Name’, datafield: ‘ShipName’, width: 200 },
    { text: ‘Ship Address’, datafield: ‘ShipAddress’, width: 200 },
    { text: ‘Ship City’, datafield: ‘ShipCity’, width: 130 },
    { text: ‘Ship Country’, datafield: ‘ShipCountry’, width: 120 }
    ];

    $(“#grid2”).on(‘rowclick’, function () {
    // put the focus back to the Grid. Otherwise, the focus goes to the drag feedback element.
    $(“#grid2”).jqxGrid(‘focus’);
    });

    // create data grids.
    $(“#grid2”).jqxGrid(
    {
    width: 650,
    source: dataAdapter2,
    autoheight: true,
    pageable: true,
    //editable: true,
    columnsresize: true,
    sortable: true,
    filterable: true,
    //selectionmode: ‘multiplerowsadvanced’,
    columns: columns2,
    rendered: function () {
    // select all grid cells.
    var gridCells = $(‘#grid2’).find(‘.jqx-grid-cell’);
    if ($(‘#grid2’).jqxGrid(‘groups’).length > 0) {
    gridCells = $(‘#grid2’).find(‘.jqx-grid-group-cell’);
    }
    // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
    gridCells.jqxDragDrop({
    appendTo: ‘body’, dragZIndex: 99999,
    dropAction: ‘none’,
    initFeedback: function (feedback) {
    feedback.height(90);
    feedback.width(250);
    }
    });

    var rows = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
    $(“#count”).text(rows + ” Boards”);

    // initialize the dragged object.
    gridCells.off(‘dragStart’);
    gridCells.on(‘dragStart’, function (event) {
    var value = $(this).text();
    var position = $.jqx.position(event.args);
    var cell = $(“#grid2”).jqxGrid(‘getcellatposition’, position.left, position.top);
    //alert(“Cell : “+cell);
    $(this).jqxDragDrop(‘data’, $(“#grid2”).jqxGrid(‘getrowdata’, cell.row));
    var groupslength = $(‘#grid2’).jqxGrid(‘groups’).length;
    //alert(“Group length : “+groupslength);
    // update feedback’s display value.
    var feedback = $(this).jqxDragDrop(‘feedback’);
    //alert(“Feedback : “+feedback);
    var feedbackContent = $(this).parent().clone();
    var table = ‘<table>’;
    $.each(feedbackContent.children(), function (index) {
    if (index < groupslength)
    return true;
    table += ‘<tr>’;
    table += ‘<td>’;
    table += columns2[index – groupslength].text + ‘: ‘;
    table += ‘</td>’;
    table += ‘<td>’;
    table += $(this).text();
    table += ‘</td>’;
    table += ‘</tr>’;
    });
    table += ‘</table>’;
    feedback.html(table);
    });
    gridCells.off(‘dragEnd’);
    // set the new cell value when the dragged cell is dropped over the second Grid.
    gridCells.on(‘dragEnd’, function (event) {

    var count = $(“#grid1”).jqxGrid(‘getdatainformation’).rowscount;
    var value = $(this).jqxDragDrop(‘data’);
    //alert(count);
    for (var m = 0; m < count; m++) {
    var position = $.jqx.position(event.args);
    var pageX = position.left;
    var pageY = position.top;

    var $targetGrid = $(“#subgrid” + m);
    var targetX = $targetGrid.offset().left;
    var targetY = $targetGrid.offset().top;
    var width = $targetGrid.width();
    var height = $targetGrid.height();
    //alert(“Page X : ” + pageX +”\nPage Y : ” + pageY +”\nTarget X : ” + targetX +”\nTarget Y : ” + targetY + “\nWidth : ” + width +”\nHeight : ” +height);

    // fill the grid if the user dropped the dragged item over it.
    if (pageX >= targetX && pageX <= targetX + width) {
    if (pageY >= targetY && pageY <= targetY + height) {
    //alert(“Start”);
    var datarow = {};
    datarow[“ShipName”] = value.ShipName;
    datarow[“ShipAddress”] = value.ShipAddress;
    datarow[“ShipCity”] = value.ShipCity;
    datarow[“ShipCountry”] = value.ShipCountry;
    //alert(“Step”);
    var commit = $(“#subgrid”+m).jqxGrid(‘addrow’, null, datarow);
    //alert(“Done”);
    var selectedrowindex = $(“#grid2”).jqxGrid(‘getselectedrowindex’);
    //alert(selectedrowindex);
    var rowscount = $(“#grid2”).jqxGrid(‘getdatainformation’).rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var id = $(“#grid2”).jqxGrid(‘getrowid’, selectedrowindex);
    var commit = $(“#grid2”).jqxGrid(‘deleterow’, id);
    }
    break;
    }
    }
    }
    });
    }
    });
    var source3 =
    {
    localdata: generateattendantsdata(20),
    datafields: [
    //{ name: ‘EmployeeID’, type: ‘string’ },
    { name: ‘Pool’, type: ‘string’ },
    { name: ‘Schedule’, type: ‘string’ },
    { name: ‘Role’, type: ‘string’ },
    { name: ‘Board’, type: ‘string’ },
    { name: ‘Id’, type: ‘string’},
    { name: ‘Name’, type: ‘string’ }//,
    //{ name: ‘ShippedDate’, type: ‘date’ }
    ],
    datatype: “array”
    };
    var dataAdapter3 = new $.jqx.dataAdapter(source3);
    var columns3 = [
    //{ text: ‘Off’, columntype: ‘button’, width: 40 },
    { text: ‘Pool’, datafield: ‘Pool’, width: 50 },
    { text: ‘Schedule’, datafield: ‘Schedule’, width: 60 },
    { text: ‘Board’, datafield: ‘Board’, width: 100 },
    { text: ‘Role’, datafield: ‘Role’, width: 50 },
    { text: ‘Id’, datafield: ‘Id’, width: 100 },
    { text: ‘Name’, datafield: ‘Name’, width: 250 }//,
    // { text: ‘Shipped Date’, datafield: ‘ShippedDate’, width: 250 }
    ];

    $(“#grid3”).on(‘rowclick’, function () {
    // put the focus back to the Grid. Otherwise, the focus goes to the drag feedback element.
    $(“#grid3”).jqxGrid(‘focus’);
    });

    // create data grids.
    $(“#grid3”).jqxGrid(
    {
    width: 650,
    source: dataAdapter3,
    autoheight: true,
    //selectionmode: ‘checkbox’,
    pageable: true,
    selectionmode: ‘singlecell’,
    columnsresize: true,
    sortable: true,
    filterable: true,
    //selectionmode: ‘multiplecellsextended’,
    columns: columns3,
    rendered: function () {
    // select all grid cells.
    var gridCells = $(‘#grid3’).find(‘.jqx-grid-cell’);

    // initialize the jqxDragDrop plug-in. Set its drop target to the second Grid.
    gridCells.jqxDragDrop({
    appendTo: ‘body’, dragZIndex: 99999,
    dropAction: ‘none’,
    initFeedback: function (feedback) {
    feedback.height(25);
    },
    dropTarget: $(‘#grid1’), revert: true
    });

    gridCells.off(‘dragStart’);
    gridCells.off(‘dragEnd’);
    gridCells.off(‘dropTargetEnter’);
    gridCells.off(‘dropTargetLeave’);
    // disable revert when the dragged cell is over the second Grid.
    gridCells.on(‘dropTargetEnter’, function () {
    gridCells.jqxDragDrop({ revert: false });
    });
    // enable revert when the dragged cell is outside the second Grid.
    gridCells.on(‘dropTargetLeave’, function () {
    gridCells.jqxDragDrop({ revert: true });
    });
    // initialize the dragged object.
    gridCells.on(‘dragStart’, function (event) {
    var value = $(this).text();
    //alert(value);
    var position = $.jqx.position(event.args);
    // alert(position);
    var cell = $(“#grid3”).jqxGrid(‘getcellatposition’, position.left, position.top);
    //alert(cell);
    $(this).jqxDragDrop(‘data’, {
    value: value
    // alert(value);
    });
    });
    // set the new cell value when the dragged cell is dropped over the second Grid.
    gridCells.on(‘dragEnd’, function (event) {
    var value = $(this).text();
    var position = $.jqx.position(event.args);
    var cell = $(“#grid1”).jqxGrid(‘getcellatposition’, position.left, position.top);
    if (cell != null) {
    $(“#grid1″).jqxGrid(‘setcellvalue’, cell.row, cell.column, value);
    }
    });
    }
    });
    });
    </script>
    <body class=’default’>
    <div id=’jqxWidget’ style=”margin-top: 20px;”>
    <div style=”margin-left: 20px; float: left; width: 650px;”>
    <div>
    <div style=”float: left;”>
    <input type=”button” id=”add” value=”Add” style=”width: 100px;”/>
    </div>
    <div style=”margin-left: 10px; float: left;”>
    <input type=”button” id=”remove” value=”Remove” style=”width: 100px;”/>
    </div>
    <div style=”margin-left: 20px; float: left;” id=”count”></div>
    <div style=”float: right;”>
    <input type=”button” id=”expand” value=”+” style=”width: 20px;”/>
    </div>
    <div style=”margin-right: 2px; float: right;”>
    <input type=”button” id=”collapse” value=”-” style=”width: 20px;”/>
    </div>
    </div>
    <div style=”margin-top: 20px;” id=”grid1″></div>
    </div>
    <div style=”margin-left: 20px; float: left; width: 650px;”>
    <div id=”jqxdropdownbutton” style=”position: relative; margin-right: 3px; margin-top: 5px; float:right;”>
    <div style=”position: relative; margin-right: 3px; margin-top: 5px; float:right;” id=”grid4″>
    </div>
    </div>
    <div id=”grid3″></div>
    <div style=”margin-top: 20px;” id=”grid2″></div>
    </div>
    </div>
    </body>
    ———————————————————————-
    after clicking ADD button, a new row adds to grid 1. then i m unable to drag and drop from grid 2.
    Problem occurs in nested grid row addition.

Viewing 1 post (of 1 total)