CheckBoxSelection.onDocumentClick

Ann Fredin

Asked On May 8, 2019 08:40 AM UTC

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

Reply | Reply with quote

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'>

<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">

</MultiSelectComponent>

</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.

UG Link: https://ej2.syncfusion.com/react/documentation/multi-select/checkbox/#checkbox

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

Reply | Reply with quote

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)

Reply | Reply with quote

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.

Sample Link: https://stackblitz.com/edit/react-zwux39-dc6ojy?file=index.js

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US