We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. On Pressing Select All button Child Grid All Check box should be checked

On Pressing Select All button Child Grid All Check box should be checked

On pressing select all button child grid check boxes should be checked
My code is below

    <ejs-grid id="Grid" load="load"
              allowPaging="true" gridLines="Both"
              allowSorting="true"
              allowResizing="true"
              allowGrouping="true">
        <e-grid-columns>
        </e-grid-columns>
    </ejs-grid>

function fillGrid() {
        if (vendor === 0) {
            return;
        }

        var grid = document.getElementById("Grid").ej2_instances[0];
        grid.query = new ej.data.Query().addParams('vendor', vendor);
        grid.dataSource = new ej.data.DataManager({
            url: "/Invoices/GetPurchaseOrdersForInvoice",
            adaptor: new ej.data.UrlAdaptor(),
            crossDomain: true
        });
            
            
        //grid.columns.push({ template: "#parent", headerText: "Options", width: "120" });
        grid.refreshColumns();

        console.log(grid);

        grid.columns[2].format = { type: 'date', format: 'ddd MMM yyyy' };
        grid.columns[3].format = { type: 'date', format: 'ddd MMM yyyy' };

    }

    function loadChild(args) {
        console.log(this);
        this.dataSource = new ej.data.DataManager({
            url: "/Invoices/GetPurchaseOrderDeliveriesForInvoice/" + this.parentDetails.parentKeyFieldValue,
            adaptor: new ej.data.WebApiAdaptor(),
            crossDomain: true
        });
        this.childGrid = {
            queryString: "PurchaseOrderDeliveryGridViewId",
            load: loadSubChild,
            columns: [
                { field: "Product.Name", headerText: "Product", width: "120" },
                { field: "QuantityRecieved", headerText: "Quantiy Received Total", width: "120" },
                { template: "#Amount", headerText: "Total Amount", width: "120" }
            ]
        } 
    }

    function created(args) {

        selectAll = true;
        var checkbox = document.getElementById("customCheck");
        console.log(checkbox);
        setTimeout(checked, 1000);
    }

    function checked() {
        $('#customCheck').prop('checked', true);
    }

    function load(args) {
        console.log(args);
        this.columns = [
            { field: "PurchaseOrderGridViewId", isPrimaryKey: "true", headerText: "Purchase Order ID", width: "120" },
            { field: "Description", headerText: "Description", width: "120" },
            { field: "EntryDate", format: "yMd", headerText: "Entry Date", width: "120" },
            { field: "OrderDate", format: "yMd", headerText: "Order Date", width: "120" },
            { field: "OrderFullfillDate", format: "yMd", headerText: "Order Fullfill Date", width: "120" },
            { field: "TotalPrice", format: "yMd", headerText: "Total Price", width: "120" },
            { template: "#parent", valueAccessor:"${PurchaseOrderGridViewId}", headerText: "Options", width: "120" }
        ];
        this.childGrid = {
            queryString: "PurchaseOrderGridViewId",
            load: loadChild,
            actionComplete: created,
            columns: [
                { template: "#child", headerText: "Options", width: "120" },
                { field: "PurchaseOrderDeliveryGridViewId", headerText: "Delivery ID", width: "120" },
                { field: "SumOfQtyReceived", headerText: "Quantiy Received Total", width: "120" },
                { field: "EntryDate", format: "yMd", headerText: "Entry Date", width: "120" },
                { field: "RecievingDate", format: "yMd", headerText: "Recieving Date", width: "120" }
            ]
        };
    }

    function loadSubChild(args) {
        this.dataSource = new ej.data.DataManager({
            url: "/Invoices/GetPurchaseOrderDeliveryItemsForInvoice/" + this.parentDetails.parentKeyFieldValue,
            adaptor: new ej.data.WebApiAdaptor(),
            crossDomain: true
        });
        $('#customCheck').prop('checked', true);
        
    }

    var calculateAmount = function (QtyReceived, Rate) {
        return QtyReceived * Rate;
    }

    function check(args) {
        //console.log(args);

    }

    function OnChangeCheckbox(checkbox) {
        if (checkbox.checked) {
            poDeliveries.push(checkbox.value)
        } else if (!checkbox.checked) {
            var index = poDeliveries.indexOf(checkbox.value);
            poDeliveries.splice(index, 1);
        }
        console.log(poDeliveries);
    }

    function OnSelect(args) {
        var grid = document.getElementById("Grid").ej2_instances[0];
        var row = args.closest("tr"); 
        grid.detailRowModule.expand(row.getAttribute('aria-rowindex'));
        //console.log(grid.detailRowModule);
        console.log(grid.childGrid);
    }

</script>
<script id="parent" type="text/x-template">
    <div>
        <button onclick="OnSelect(this)" class="btn btn-sm btn-outline-info">Select All</button>
    </div>
</script>
<script id="child" type="text/x-template">
    <div>
        <div class="custom-control custom-checkbox">
            <input class="custom-control-input" id="customCheck" onclick="OnChangeCheckbox (this)" type="checkbox" value="${PurchaseOrderDeliveryGridViewId}" />
            <label class="custom-control-label" for="customCheck">Invoice</label>
        </div>
    </div>
</script>

<script id="Amount" type="text/x-template">
    <div>
        ${calculateAmount(QuantityRecieved, PurchaseOrderItem.Rate)}
    </div>
</script>

3 Replies
SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 30, 2019 04:40 AM

Hi Usman, 

Greeting from Syncfusion. 

By default, we have provided build in support to select the rows in Grid using checkbox(checkbox selection). Please refer to the below code example and help documentation for more information. 

this.childGrid = { 
            queryString: "PurchaseOrderGridViewId", 
            load: loadChild, 
            actionComplete: created, 
            columns: [ 
                { type: 'checkbox', width: "50" }, 
                { field: "PurchaseOrderDeliveryGridViewId", headerText: "Delivery ID", width: "120" }, 
            ] 
        }; 



If we misunderstood or the above does not meet your requirement, share more details about your requirement that will be helpful to validate further at our end and to provide a better solution as soon as possible. 

Regards, 
Seeni Sakthi Kumar S 


US Usman September 30, 2019 06:06 AM

Ok..  But i want something different on selecting parent grid checkbox i want its all child chkbox checked which event should i use

TS Thavasianand Sankaranarayanan Syncfusion Team October 1, 2019 04:34 AM

Hi Usman, 

Thanks for your update. 

Query:  i want something different on selecting parent grid checkbox i want its all child checkbox checked which event should i use 
 
We have analyzed your requirement and we suggest you to use the below way to achieve your requirement. In the below code example, we have render button in parent grid using template property and in the button click event I have expand the corresponding child grid and select(check) all checkbox by clicking the header checkbox element in dataBound event. 

Please refer the below code example for more information. 

 . . . . . 
Var flag = false; 
 childGrid: { 
  dataSource: dataManger, 
    queryString: "EmployeeID", 
      dataBound: function(args) { 
        if (flag) { 
          var HCheckbox = this.getHeaderTable().querySelector(".e-checkselectall"); 
          HCheckbox.click(); // click the header checkbox to select all the records 
          flag = false; 
        } 
      }, 
  allowPaging: true, 
    columns: [ 
      { type: "checkbox", width: 50 }, 
    . . . . . 
  ] 
} 
}); 
grid.appendTo("#Grid"); 
 
window.fun = function(args) { // in parent grid button click 
  var a = grid.getRowInfo(args.target.parentElement); 
  grid.detailRowModule.expand(a.rowIndex); // expand the corresponding child grid 
  flag = true   
}; 
 

Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon