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

CheckBoxSelection.onDocumentClick

Thread ID:

Created:

Updated:

Platform:

Replies:

144474 May 8,2019 08:40 AM UTC May 10,2019 03:25 PM UTC React - EJ 2 3
loading
Tags: ListBox
Ann Fredin
Asked On May 8, 2019 08:40 AM UTC

CheckBoxSelection.onDocumentClick "contain error" in checkbox-selection.js

Prince Oliver [Syncfusion]
Replied On May 9, 2019 07:15 AM UTC

Hello Ann, 

Greetings from Syncfusion support. 

We have checked the reported issue. This issue could occur when we miss to import and inject the CheckBoxSelection Module in the application. To use Multiselect control in checkbox mode, make sure that you have imported CheckBoxSelection module. Kindly refer to the following code snippet for importing CheckBoxSelection Module. 

[index.tsx] 
//Import the CheckBoxSelection module from the dropdowns package 
import { MultiSelectComponent, CheckBoxSelection, Inject } from '@syncfusion/ej2-react-dropdowns'; 
 
. . . . . . . . . . . . . . . . . . . .  . . . . . . . . . .  
 
//Inject the module in rendering part 
render() { 
    return (<div id="multichecbox" className='control-pane'> 
        <div className='control-section col-lg-8'> 
            <div id="multigroup" className="control-styles"> 
                <h4>CheckBox</h4> 
                <MultiSelectComponent id="checkbox" ref={(scope) => { this.mulObj = scope; }} dataSource={this.countries} fields={this.checkFields} placeholder="Select countries" mode="CheckBox" showSelectAll={true} showDropDownIcon={true} filterBarPlaceholder="Search countries" popupHeight="350px"> 
                    <Inject services={[CheckBoxSelection]} /> 
                </MultiSelectComponent> 
            </div> 
        </div> 
    </div>); 
} 

We have attached an example for your reference, please find it in the following location: https://stackblitz.com/edit/react-2ymis2-f2e4jx  

To know more about Multiselect with check box mode, please refer the below documentation link. 

If the issue persists in your end, please share us sufficient code to replicate the issue or modify the above example and revert it to us. This will help us provide a prompt solution. 

Regards, 
Prince 


Ann Fredin
Replied On May 9, 2019 07:37 AM UTC

import React from "react";
import {
ListBoxComponent,
Inject,
CheckBoxSelection
} from "@syncfusion/ej2-react-dropdowns";
import { ControlBase } from "./base/ControlBase";

class MListBox extends ControlBase {

defaultArgs = {
dataSource: [],
height: "250px",
selectionSettings: { showCheckbox: true }
};

renderControlOptions = () => {
var argsOptions = { ...this.defaultArgs, ...this.props };

return argsOptions;
};

render() {
return (
<div className="control-pane">
<div className="control-section">
<div id="listbox-selection">
<ListBoxComponent {...this.renderControlOptions()}>
<Inject services={[CheckBoxSelection]} />
</ListBoxComponent>
</div>
</div>
</div>
);
}
}
//getting err in console.....
//Uncaught TypeError: Cannot read property 'contains' of undefined //at CheckBoxSelection.onDocumentClick (checkbox-selection.js:419)

Sangeetha Priya Murugan [Syncfusion]
Replied On May 10, 2019 03:25 PM UTC

 
Hi Ann, 
 
Thank you for your update. 
 
We have checked your reported issue based on your provided code example and the listbox rendered properly in our end. For your convenience, we have prepared the sample based on the provided codes. Please find the link below. 
 
 
Before we proceed further we would like to let you know the following details. 
 
1. Provide detailed description of your issue. 
2. Please replicate your issue in the above sample and send back to us. 
3. Whether the console error occurs at initial load or performing any action in listbox? 
 
Could you please check the sample above sample and get back to us with the above requested information, based on that we will check and provide you a better solution quickly. 
 
Regards, 
Sangeetha M 



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