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
555
Making a row editable dynamically
posted

Hi,

I have 3 bands in igHierarchicalGrid. I have few columns which are editable in the second band.

I am using the default row level editing with Done and Cancel buttons. After SaveChanges is called on the Done button click I want to refresh the grid, expand it and make one of the cells in a row to be editable dynamically.

I am calling

grid.igHierarchicalGrid("dataBind"); which refreshes the grid but I am not able to edit the row without again clicking on it.

I want to make a row editable dynamically which has a particular ID as primary key just after the grid is refreshed and expanded.

I am able to refresh and expand the grid.

I have tried using StartEdit but it needs endEdit which I don't want to call:

gridUpdating.startEdit(row.Id, "Comment");

Can you please suggest something?

Regards

Singh

  • 555
    Offline posted

    In addition to the above issue:

    My grids are load on demand. As per the requirements, when I refresh the grid I need to append a custom text to one of the cells in the column.

    It refreshes the grid with the custom value, now if the user clicks the row manually to make it editable ( because I am not able to make it editable dynamically), the Done button remains disabled unless a value is changed in the that row. I want Done button to be enabled so that it can go into save changes.

    Regards

    Singh

  • 345
    Offline posted

    Hello, Singh

     

    Thank you for posting in our forum!

    If the startEdit method requires endEdit, there is a chance you are incorrectly targeting the parent grid instead of the child one and because the editing hasn’t finished, it throws an error.

    When you expand your child grid, the “expand” method has a callback function which you may use to edit the rows programmatically. Here’s how do to it:

    • Inside the callback use the “allChildren” method to get a flat list of all child grid elements
    • After that - jQuery’s eq() method to reduce the list to a single object.
    • Then call “startEdit” with the ID of the row you want to edit.

    I made a small sample, check it out.

     

    Best Regards,

    Vasil Pavlov

    Associate Software Developer

    Infragistics, Inc.

    www.infragistics.com/support

     

    <!DOCTYPE html>
    <html>
    <head>
    <title>HierarchicalGrid</title>
    <script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.core.js"></script>
    <script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.lob.js"></script>
    <script src="https://igniteui.github.io/help-samples/data-files/northwind.js"></script>
    <link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
    <link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/structure/infragistics.css" rel="stylesheet">
    </head>
    <body>
        <table id="hierarchicalGrid"></table>
        <script>
        $(function () {
        $("#hierarchicalGrid").igHierarchicalGrid({
            width: "100%",
            autoGenerateColumns: false,
            dataSource: northwind,
            responseDataKey: "results",
            dataSourceType: "json",
            caption: "Orders By Employee",
            features: [
                {
                    name: "Responsive",
                    enableVerticalRendering: true,
                    columnSettings: [
                        {
                            columnKey: "Title",
                            classes: "ui-hidden-phone"
                        },
                        {
                            columnKey: "Address",
                            classes: "ui-hidden-phone"
                        }
                    ]
                },
                {
                    name: "Sorting",
                    inherit: true
                },
            ],
            columns: [
               { key: "EmployeeID", headerText: "Employee ID", dataType: "number", width: "0%", hidden: true },
               { key: "FirstName", headerText: "First Name", dataType: "string", width: "20%" },
               { key: "LastName", headerText: "Last Name", dataType: "string", width: "20%" },
               { key: "Title", headerText: "Title", dataType: "string", width: "20%" },
               { key: "Address", headerText: "Address", dataType: "string", width: "25%" },
               { key: "City", headerText: "City", dataType: "string", width: "15%" }
            ],
            autoGenerateLayouts: false,
            columnLayouts: [
                {
                    key: "Orders",
                    responseDataKey: "results",
                    width: "100%",
                    autoGenerateColumns: false,
                    primaryKey: "OrderID",
                    columns: [
                        { key: "OrderID", headerText: "Order ID", dataType: "number", width: "20%" },
                        { key: "CustomerID", headerText: "Customer ID", dataType: "string", width: "0%", hidden: true },
                        { key: "ShipName", headerText: "Ship Name", dataType: "string", width: "20%" },
                        { key: "ShipAddress", headerText: "Ship Address", dataType: "string", width: "20%" },
                        { key: "ShipCity", headerText: "Ship City", dataType: "string", width: "20%" },
                        { key: "ShipCountry", headerText: "Ship Country", dataType: "string", width: "20%" }
                    ],
                    features: [
                         {
                             name: "Responsive",
                             enableVerticalRendering: false,
                             columnSettings: [
                                 {
                                     columnKey: "ShipAddress",
                                     classes: "ui-hidden-phone"
                                 },
                                 {
                                     columnKey: "ShipCity",
                                     classes: "ui-hidden-phone"
                                 }
                             ]
                         },
                         {
                            name: "Updating",
                            editmode: "row",
                            enableAddRow: true
                         },
                         {
                             name: "Summaries",
                             columnSettings: [
                                  {
                                      columnKey: "OrderID",
                                      summaryOperands: [
                                          {
                                              rowDisplayLabel: "Orders Count",
                                              type: "count",
                                              decimalDisplay: 3
                                          }
                                      ]
    
                                  },
                                 {
                                     columnKey: "ShipName",
                                     allowSummaries: false
                                 },
                                 {
                                      columnKey: "ShipAddress",
                                      allowSummaries: false
                                 },
                                 {
                                     columnKey: "ShipCity",
                                     summaryOperands: [
                                         {
                                             rowDisplayLabel: "Sao Paulo Orders",
                                             type: "custom1",
                                             summaryCalculator: $.proxy(countSaoPauloValues, this),
                                             order: 5,
                                             decimalDisplay: 1
                                         },
                                          {
                                              rowDisplayLabel: "Bergamo Orders",
                                              type: "custom2",
                                              summaryCalculator: $.proxy(countBergamoValues, this),
                                              order: 6,
                                              decimalDisplay: 1
                                          }
                                     ]
                                 },
                                  {
                                      columnKey: "ShipCountry",
                                      allowSummaries: false
                                  },
    
                                 
                             ]
    
                         }
                    ]
                }
            ]
        });
        
        //expanding first parent row in the grid
        var firstRow = $("#hierarchicalGrid").igHierarchicalGrid("rootWidget").rowAt(0);
        $("#hierarchicalGrid").igHierarchicalGrid("expand", firstRow, function(){
        //updating the first row of the first child table
        var children = $("#hierarchicalGrid").igHierarchicalGrid("allChildren");
        children.eq(0).igGridUpdating("startEdit", 10258); 
        });
       
        function countSaoPauloValues(data) {
            var i, l = data.length, count = 0, elem;
            for (i = 0; i < l; i++) {
                elem = data[i];
                if (elem === "Sao Paulo") {
                    count++;
                }
            }
            return count;
        }
        function countBergamoValues(data) {
            var i, l = data.length, count = 0, elem;
            for (i = 0; i < l; i++) {
                elem = data[i];
                if (elem === "Bergamo") {
                    count++;
                }
            }
            return count;
        }
    
    });
    </script>
    </body>
    </html>

  • 555
    Offline posted in reply to Vasil Pavlov

    hi,

    I tried the above but I get the following error:

    "Editing the specified row or column is currently not possible. It should be in view on the current page and virtualization frame.

    My code is as below:

    $(document).delegate("#igGrid", "iggriddatarendered", function (evt, ui) {

     if (expandAll === true) {

    var parentGrid = $("#igGrid").igHierarchicalGrid("rootWidget");

    var domElement = parentGrid.rowById(rowID);

    if (domElement != null) {

    $("#igGrid").igHierarchicalGrid("expand", domElement, function () {

    //updating the first row of the first child table

    var children = $("#igGrid").igHierarchicalGrid("allChildren");

    children.eq(0).igGridUpdating("startEdit", currentTradeIdFileTypeId);

    });

    }

       }

    });