Hello. I am trying to create a filterable grid table. In our project, we are using React partly, meaning I need to import all my dependencies via script tag. I was following the Grid Component example in the docs but couldn't find a way to import process function from kendo-react-query library.

Code: import { process } from '@progress/kendo-data-query';

I need this as a script tag so that I can consume it through window object like this: window.KendoDataQuery.process

I already added all the recommended js script tags into my page but couldn't find this specific process function in the window object under any of the Kendo objects.

Help is appreciated. Thanks.

Hi

When we have combobox control in a form, it is not firing onChange event. It is firing onOpen event, but not onChange. I have tried FormComboBox and ComboBox inside Form, but both are failing.

Demo project: https://stackblitz.com/edit/react-combo-notfiring-onchange?file=app/main.jsx

I need to be able to rename a file before uploading (for example, to strip bad characters).  Simply renaming the file in any of the events doesn't work -- once it hits the actual upload mechanism, the filename goes back to the original name.

Thanks for any assistance!

Hi Team, 

I've created a demo of my issue here, https://stackblitz.com/edit/react-kpchtb. Im trying to stack windows with their modal, but as you will see in the demo, opening the second window stacks its modal under both windows.

How can I stack it above preventing users from interacting with the first window? 

Thanks,
Grant

Hi,

I have multiple Upload components on a single page. First is for single file and second is with multiple files upload enabled. I need custom messages for "upload.select". One will be "Select single file" and other "Select multiple files" Is this possible?

Hi,

The KendoReact Upload control has a 'multiple' prop. According to the documentation, "If set to false, only one file can be selected at a time". However, setting this prop to false only prevents selection of multiple files via the Select Files button. Multiple files can still be selected by dragging and dropping. This behaviour can be seen in the cited Kendo example:

https://www.telerik.com/kendo-react-ui/components/upload/file-processing/#toc-upload-of-single-or-multiple-files

Is this a bug or intended behaviour? If this is intended behaviour, is there a workaround to prevent upload of multiple files on drag and drop?

Kind regards,

David

Hi,

The KendoReact Upload component seems to only cater for sending files to dedicated server handlers. Is there any way to convert attached files to a byte array rather than posting to a server endpoint?

Kind regards,

David

i use Springboot for backend and database, front as react.

i want to use saveUrl in kendo-upload ui post my image to springboot and saving image in mysql db.

i have "uploadFile" variable as axios request parameter

@RestController
@CrossOrigin
public class MemberController {

@Autowired
MemberMapper mapper;


MultipartFile upload;
String photoname;

@PostMapping(value = "/member/upload", consumes = {"multipart/form-data"})
public Map<String, String> fileUpload(@RequestParam MultipartFile uploadFile, HttpServletRequest request){
String uploadPath = request.getSession().getServletContext().getRealPath("/WEB-INF/photo");
System.out.println(uploadPath);


int pos = uploadFile.getOriginalFilename().lastIndexOf("."); 
String ext = uploadFile.getOriginalFilename().substring(pos);


Date date = new Date();
SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmss");
photoname = "jeju" + sdf.format(date) + ext;

upload = uploadFile;

Map<String, String> map = new HashMap<String, String>();
map.put("photoname", photoname);
return map;
}

and 

for react

let uploadFile = null;

    imageUpload=(e)=>{
        const uploadFile = e.affectedFiles[0].name;
        
        const memberFile = new FormData();
        memberFile.append("uploadFile",uploadFile);
        axios({
            method: 'post',
            url: URL + '/member/upload',
            data: memberFile,
            headers: {'Content-Type':'multipart/form-data'}
        }).then(response=>{
            alert(response.data.photoname+" ==> save as this name");
            
            this.setState({
                photoname: response.data.photoname
            })
        }).catch(err=>{
            console.log("error while uploading images:"+err);
        })
    }

 onAdd = (event) => {
        const afterStateChange = () => {
            event.affectedFiles
                .filter(file => !file.validationErrors)
                .forEach(file => {
                    const reader = new FileReader();
                    reader.onloadend = (ev) => {
                        this.setState({
                            filePreviews: {
                                ...this.state.filePreviews,
                                [file.uid]: ev.target.result
                            }
                        });
                    };
                    reader.readAsDataURL(file.getRawFile());
                });
        };
        this.setState({
            files: event.newState,
            events: [
                ...this.state.events,
                `selected file: ${event.affectedFiles[0].name}`
            ],
        }, afterStateChange);
        uploadFile = event.affectedFiles[0].name;
    }

render(){

    return (

 <div>
                    <InputLabel id="demo-simple-select-label">picture</InputLabel>
                    <br />
                    <Upload 
                        batch={false}
                        multiple={true}
                        files={this.state.files}
                        onAdd={this.onAdd}
                        onRemove={this.onRemove}
                        onProgress={this.onProgress}
                        onStatusChange={this.onSatusChange}
                        withCredentials={false}
                        saveUrl={URL + '/member/upload'}
                        removeUrl={'https://demos.telerik.com/kendo-ui/service-v4/upload/remove'}
                        onChange={this.imageUpload.bind(this)}
                    />
                    <div className={'example-config'} style={{ marginTop: 20 }}>
                        <ul className={'event-log'}>
                            {
                                this.state.events.map(event => <li key={event}>{event}</li>)
                            }
                        </ul>
                    </div>
                    {
                        this.state.files.length ? 
                        <div className={'img-preview example-config'}>
                            <h3>image preview</h3>
                            {
                                Object.keys(this.state.filePreviews)
                                    .map((fileKey, index) => (<img 
                                        src={this.state.filePreviews[fileKey]} 
                                        alt={index}
                                        style={{ width: 200, margin: 10 }} 
                                    />))
                            }
                        </div> : undefined
                    }
                </div>

);

}

Hello,

 1) I am trying to put some extra notes while hovering over data points. I am using a Scatter plot. While trying the example given below, it only works for "line" but not scatter. I am also getting data from firebase from a JSON structure. please let me know how the structure should be. Refer screenshot 1.

 <ChartSeriesItem type="line" data={seriesData} field="value" noteTextField="extremum" /> 

2) Color for different datapoint, I am trying to mark x and y from firebase. each x,y represents a hand or leg. I want each to be in separate color, How to implement that. again I have attached a JSON structure, refer screenshot 1.