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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

147950 Sep 28,2019 11:39 PM UTC Oct 1,2019 09:34 AM UTC ASP.NET Core - EJ 2 3
loading
Tags: DataGrid
Usman
Asked On September 28, 2019 11:39 PM UTC

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>

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On September 30, 2019 09:40 AM UTC

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 


Usman
Replied On September 30, 2019 11:06 AM UTC

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

Thavasianand Sankaranarayanan [Syncfusion]
Replied On October 1, 2019 09:34 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon