Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
320
Ultrawebgrid Drag and Drop
posted

How do you implement the Drag and Drop feature in a UltraWeb Grid?

I remember a demo page with this functionality but I am unable to find it again :)

  • 410
    Suggested Answer
    posted

    Hi if you have not found solution. What I am doing is

    1. Have an order column in database

    2. Hide the column in client and add a column with up down arrow

    3. Write a javascript in client side when this up down arrow pressed

    4. Which does exchange the order value and sort the grid on column.

    It works file and allows you to move the row to higher or lower rows nicely.

    Regards

    • 620
      Offline posted in reply to Gennaro

      Could you post the java script for moving the rows and resorting them? I have a similar problem.

      • 410
        posted in reply to DJ Roedger

              "function UpdateTheOrderColumnForNewEntry(gridName,orderColumnName){\n" +
                            "    var grid = igtbl_getGridById(gridName);\n" +
                            "    var newlyaddedRow = grid.getActiveRow();\n" +
                            "    var ROWS = grid.Rows;\n" +
                            "    if (newlyaddedRow.ParentRow != null)  \n" +
                            "       ROWS = newlyaddedRow.ParentRow.Rows; \n" + 
                            "    // traverse each row to find the max number \n" +
                            "    var orderColumn = newlyaddedRow.Band.getColumnFromKey(orderColumnName);\n" +
                            "    var maxNumber = 0;\n" +
                            "    if (orderColumn != null){\n" +
                            "       for (var i=0; i < ROWS.length; i++){\n" +
                            "           // get the ordercell\n" +
                            "           var orderCell = ROWS.getRow(i).getCellByColumn(orderColumn);\n" +
                            "           var orderCellValue = orderCell.getValue();\n" +
                            "           if ((orderCellValue != null) && (orderCellValue > maxNumber)){\n" +
                            "               maxNumber = orderCellValue;\n" +
                            "           }\n" +
                            "       }   \n" +
                            "       // now it is time to update the ordercolumn of new row\n" +
                            "       var orderCellofNewRow =  newlyaddedRow.getCellByColumn(orderColumn);\n" +
                            "       orderCellofNewRow.setValue(maxNumber + 1, false);\n" +
                            "       // finally update the newly added row list if it does not filled allready\n" +
                            "       var gridNewRowPair = new GridNewRowPair(grid.Id, newlyaddedRow.Id);\n" +
                            "       if (! newRowsOfGrids.ContainsItem(gridNewRowPair))\n" +
                            "           newRowsOfGrids.AddItem(gridNewRowPair);\n" +
                            "   }\n" +
                            "}\n" +
                            "function Move(gridName,orderColumnName,Up){\n" +
                            "   var grid = igtbl_getGridById(gridName);\n" +
                            "   var activeCell = grid.getActiveCell();\n" +
                            "   var currentRow= activeCell.Row;\n" +
                            "   var ROWS = grid.Rows;\n" +
                            "   if (currentRow.ParentRow != null)  \n" +
                            "      ROWS = currentRow.ParentRow.Rows; \n" + 
                            "   var rowIndex = ROWS.indexOf(currentRow);\n" +
                            "   if (rowIndex != -1) { \n"+
                            "       var column = currentRow.Band.getColumnFromKey(orderColumnName);\n" +
                            "       var rowCell = currentRow.getCellByColumn(column);\n" +
                            "       var CurrentValue = rowCell.getValue();\n" +
                            "       var neighbourIndex = rowIndex - 1;\n" +
                            "       if (Up == false)\n" +
                            "           neighbourIndex = rowIndex + 1;\n" +
                            "       upperRow = ROWS.getRow(neighbourIndex);\n" +
                            "       if (upperRow != null) {\n"+
                            "           var gridNewRowPair = new GridNewRowPair(grid.Id, upperRow.Id);\n" +
                            "           if (newRowsOfGrids.ContainsItem(gridNewRowPair))\n" +
                            "               alert('Please save and then re-order newly added rows!!');\n" +
                            "           else {\n" +
                            "               var upperRowCell = upperRow.getCellByColumn(column);\n" +
                            "               var neighbourValue = upperRowCell.getValue();\n" +
                            "               rowCell.setValue(neighbourValue, false);\n" +
                            "               upperRowCell.setValue(CurrentValue,false);\n" +
                            "               grid.sortColumn(column.Id,false);\n" +
                            "               grid.addSortColumn(column.Id, true);\n" +
                            "           } \n" +
                            "       } \n" +
                            "   } \n" +
                            "}\n" +
                            "function RemoveNewlyAddedRow(gridName, rowId){\n" +
                            "   var grid = igtbl_getGridById(gridName);\n" +
                            "   var gridNewRowPair = new GridNewRowPair(grid.Id, rowId);\n" +
                            "   if (newRowsOfGrids.ContainsItem(gridNewRowPair))\n" +
                            "      newRowsOfGrids.RemoveItem(gridNewRowPair);\n" +
                            "}\n";

    • 14049
      Suggested Answer
      Offline posted
      Hi,
      What demo do you refer to? There is no built-in drag and drop
      functionality in the grid, other then the columns can be moved/grouped
      by dragging.
      The implementation should be external.
      There is a new drag and drop framework coming up with our 9.1 release,
      but again it will facilitate you to grab certain HTML elements and drop
      them onto others, but the logic should be implemented externally again.
      Right now you can download CTP samples browser and see the framework in
      action.
      http://www.infragistics.com/dotnet/netadvantage/aspnet.aspx#Downloads
      look for Aikido CTP download.
      • 320
        posted in reply to Alex Kartavov

        It was an example of moving pieces of a picture around a grid like a puzzle probably with in a webdatagrid

        • 40
          Offline posted in reply to Scott

          Hello, I get the same error below when trying the sample. Any luck getting this sample to work?

          'CustomClientAnimation' does not contain a definition for 'UltraWebGrid1' and no extension method 'UltraWebGrid1' accepting a first argument of type 'CustomClientAnimation' could be found (are you missing a using directive or an assembly reference?)

          I am new to Drag and Drop, does anyone have a good example of Drag and Drop between two UltraWebGrids?

           

          • 633
            posted in reply to [Infragistics] Duc Nguyen

            I can not get your download to work... it keeps giving me the error below:

             

            'CustomClientAnimation' does not contain a definition for 'UltraWebGrid1' and no extension method 'UltraWebGrid1' accepting a first argument of type 'CustomClientAnimation' could be found (are you missing a using directive or an assembly reference?)

             

            • 165
              posted in reply to Christopher Bishop

              "I put <div tags around "everything" fields, rows, columns the whole nine yards and I then tell the DaD framework that they are valid targets for dropping.

              On Drop I use ajax and loop through the grid information saving the data layout, object types etc. to the database. (by userid)
              "

              Can you supply code of how you do this?

              Also, our grid is hierarchical (3 bands), and I've tried to use the example for this with some luck but " 'Node' is null or not an object" after a few moves, and then all is bad....

              Thanks

               

              • 2636
                posted in reply to Jeff

                Could someone give a better example of what they are looking for?

                I am doing  this right now and do not have a problem with this, so I am trying to understand what it is you guys are looking for?

                Here is what I do (and yes I use the new release drag/drop framework) in a form builder.

                I put <div tags around "everything" fields, rows, columns the whole nine yards and I then tell the DaD framework that they are valid targets for dropping.

                On Drop I use ajax and loop through the grid information saving the data layout, object types etc. to the database. (by userid)

                Then when it loads (grid/row init) I rebuild the information.

                I do this not only for the grid but for adding comboboxes,text fields, radios etc. to a form (including tabs).

                So if someone can explain a little better what they want I can just throw up some sample code on how i do it.

                • 155
                  posted in reply to Chad

                  Hello czmelton,

                  I too have been looking for a solution for persisting "state" in the UltraWebGrid between user sessions.

                  My UltraWebGrid implementations are very user "configurable".

                  Including:

                  Moving column order

                  Resizing column width

                  Resizing row height

                  Sorting

                  I would like to be able to return the UltraWebGrid to the user exactly how they left it.

                  In the past I used the LoadLayout and SaveLayout methods to write the "state" (ie layout) to a xml string for an individual user and then write the string to a database. Then when the user started another session, the app would simply load the "state" (ie layout) from the xml string in the database. It worked fairly well, but unfortunately, it has been deprecated.

                  I requested the feature be reimplemented but have not seen it to date.

                  Thanks,
                  Jeff