Questions on KendoReact Forum

1 answer

196 views

Hello

I am working agains AWS and it is a two step uploading, one first call to get the url where I have to upload and one second call to upload the file onto that url. I need to access the on click method before the upload uploads in order to get the url where i can upload the file.

Some help would be appreciated.

kind regards,

Upload

answered on 28 Oct 2021

1 answer

216 views

upload with credentials

Hello,

I cannot find an example of the upload with credentials where I can pass an authorization token in the header of the request, some help would be appreciated.

https://www.telerik.com/kendo-react-ui/components/upload/credentials/

Thanks,

Upload

answered on 28 Oct 2021

1 answer

162 views

KendoReact Grid headers and columns have different sizes depends on page zoom

for some reason when you zoom the page columns and headers scale differently which leads to slight shift for columns(last column has the biggest shift)

the bigger zoom the bigger shift, is there any way to fix that or what can cause this issue?

Grid

Wrappers for React

answered on 28 Oct 2021

1 answer

169 views

Simple dropdown not working with usestate

Hello,

We are implementing the dropdown from this example:https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/

But setting the same array of fields with useState but we get the error "Typeerror: data.findindex is not a function" , the code is below, some get would be very appreciated.

  useEffect(()=>{ 
    fetchCompModelData()
  }, [])
 
constfetchCompModelData = async () => { 
  try{ 
    const uniqueItemsModel = uniqueElementModel(result.data);
    setCompModelData(uniqueItemsModel);
    debugger
  }catch(err){
    console.log("AXIOS ERROR", err.message);
  }
}
const uniqueElementModel = async (arr) => {   
  const datatest =  ["test",
  "GA 315",
  "V320TS",
  "RS200n-W115",
  "RS110IE-A110",
  "RS110IE-A125"];  
  return datatest
}
const [compModelData, setCompModelData] = useState([])
return (
          <div>
            
           <div className="mb-3">
                  <label htmlFor="brand-name" className="text-info"> Model </label>
                  <DropDownList 
                      data={compModelData}
                    />  
</div>
      </div>        
  )
}

DropDownList

answered on 27 Oct 2021

1 answer

639 views

[Solved] Kendo Grid Select All -On All Pages

Hi ,

do you have an example of pages and select all

when the onHeaderSelectionChange event - select all the items in all pages in grid?

in the documention of selection -

the example below , selected all in current page only

thanks!

Grid

answered on 27 Oct 2021

1 answer

222 views

How do I implement drag and drop between a KendoReact Grid and a TreeList?

Hi all,

I need to add the capability to drag something from a Grid to a TreeList.

As far as my research has taken me, this is not available out of the box.

Can anybody advise me on strategies to make this work?

Thanks!

Sean P

Drag and Drop

Grid

TreeList

answered on 27 Oct 2021

0 answers

104 views

What's causing border on images in PDF export?

Hi,

We're exporting a page to pdf that includes several chart svgs. When the pdf is opened in Chrome, the svgs include a thin drop shadow on the right and bottom of each chart, but when opened in Preview this shadow doesn't appear. We've dug pretty deep into the css and svg data and can't find any potential causes; other svgs (our logo, etc.) export fine. Any idea how we can address the discrepancy between views?

Thanks!

PDF Processing

updated question on 25 Oct 2021

1 answer

128 views

kendo-pivotgrid-react-wrapper how do I get cell data

Hi,

I need to know how do i get details of the cell (both row details and column details)in pivot grid as im using kendo-pivotgrid-react-wrapper please explain me with any examples as soon as possible.Thanks in advance

answered on 22 Oct 2021

1 answer

125 views

FormValidator not working in simple form

Hello,

Im using the validation form fields but for some reason my state is not being updated after I enter valid data, on form submission the inputs are all null even thought I had entered valid data. some help would be greatly appreciated. Part of the code is below

 
 const data = {
    manufacturer_id: parseInt(manufacturerId)||null,
    comp_model: compModel||null, 
    comp_type_id: parseInt(compTypeId)||null,
    comp_nickname: compNickname||null,
    comp_serial_no: compSerialNo||null,
    comp_pressure: parseFloat(compPressure)||null,
    comp_pressure_unit: compPressureUnit.id||null,
    comp_regulation: compRegulation.id||null,
    comp_cooling: compCooling.id||null,
    comp_year: compYear.text||null,
    comp_power_supply: compPowerSupply.id||null,
    comp_power_supply_unit: null,
    comp_motor_power: parseInt(compMotorPower)||null,
    comp_motor_power_unit: compMotorPowerUnit.id||null,
    comp_output: parseFloat(compOutput)||null,
    comp_output_unit: compOutputUnit.id||null,
    real_comp_data_id: idCreatedCompressor
  } 
 
  /**
  * Function to save Compressor Data.
  * Error message will save in the 'message' state.
  */
  const postCompressorSave = async (e) => {  
    debugger;
    const isEmpty = Object.values(data).every(x => x === null || x === '');
    if(isEmpty) {
      return;
    }
    if(idCreatedCompressor !== "") {
      postCompressorUpdate();  
      return;
    }
    const dataWithStatus = {...data, data_status_flow_id:status.IN_PROGRESS}
    try{
    const result = await authAxios.post(`/compressors`, dataWithStatus)
      setIdCreatedCompressor(result.data)
      console.log(idCreatedCompressor);
    }catch(err){
      console.log("AXIOS ERROR", err.message);
    }
  }
 
 
constNicknameInput = (fieldRenderProps) => {
      const { validationMessage, visited, ...others } = fieldRenderProps;
      return (
        <div> 
             <label for="nickname-name" className="text-info">Nickname</label>
             <Input type="text" name="nickname" placeholder=""
              style={{height: "30px"}}
              onChange={e=>setCompNickname(e.target.value)}
              {...others}/>
              {visited && validationMessage && <Error>{validationMessage}</Error>}
        </div>
      );
    };
    
    const SerialNoInput = (fieldRenderProps) => {
      const { validationMessage, visited, ...others } = fieldRenderProps;
      return (
        <div>
              <label for="serial-no-name" className="text-info">Serial No</label>
              <Input type="text" name="serialNo" placeholder=""
              style={{height: "30px"}}
              onChange={e=>setCompSerialNo(e.target.value)}
              {...others}/>
              {visited && validationMessage && <Error>{validationMessage}</Error>}
        </div>
      );
    };
    
    const MotorPowerInput = (fieldRenderProps) => {
      const { validationMessage, visited, ...others } = fieldRenderProps;
      return (
        <div>
            <label for="motor-power-name" className="text-info">Motor Power</label>
            <Input type="text" name="motor-power" placeholder="ex: 75"
               style={{height: "30px"}}
               onChange={e=>setCompMotorPower(e.target.value)}
               {...others}/> 
              {visited && validationMessage && <Error>{validationMessage}</Error>}
        </div>
      );
    }; 
    const pressureUnitInput = (fieldRenderProps) => {
      const { validationMessage, visited, ...others } = fieldRenderProps;
      return (
        <div> 
            <label for="rated-pressure-name" className="text-info">Rated Pressure</label>
            <Input type="text" name="pressure" placeholder=""
            style={{height: "30px"}}
            onChange={e=>setCompPressure(e.target.value)}
            {...others}/>
            <label for="rated-pressure-unit" className="text-info">{compPressureUnit}</label> 
            {visited && validationMessage && <Error>{validationMessage}</Error>}
        </div>
      );
    }; 
    const OutputInput = (fieldRenderProps) => {
      const { validationMessage, visited, ...others } = fieldRenderProps;
      return (
        <div> 
            <label for="output-name" className="text-info">Output</label>
            <Input type="text" name="motor-power" placeholder="ex: 75"
            style={{height: "30px"}}
            onChange={e=>setCompOutput(e.target.value)}
            {...others}/>
            <label for="output-unit" className="text-info">{compOutputUnit}</label> 
            {visited && validationMessage && <Error>{validationMessage}</Error>}
        </div>
      );
    }; 
     
  
  return (
          <Form className="mt-3 mb-4 px-0" onSubmit={postCompressorSave}
          render={(formRenderProps) => (
            <FormElement
              style={{
                maxWidth: 650,
              }}
            >
              <fieldset className={"k-form-fieldset"}> 
                <div className="mb-3">
                  <Field
                    name={"nickname"}
                    component={NicknameInput} 
                    validator={inputValidator}
                  /> 
                </div> 
                <div className="mb-3">
                  <Field
                    name={"serialNo"}
                    component={SerialNoInput} 
                    validator={inputValidator}
                  /> 
                </div> 
                <div className="mb-3">
                  <label for="cooling-name" className="text-info">Cooling</label>
                  <DropDownList
                      value={compCooling}
                      textField="text"
                      dataItemKey="id" 
                      onChange={(e) => {
                        setCompCooling(e.target.value);
                      }}
                      data={compCoolings}
                    /> 
                </div>
                <div className="mb-3">
                  <label for="year-manufactured-name" className="text-info">Year Manufactured</label>
                  <DropDownList
                        value={compYear}
                        textField="text"
                        dataItemKey="id" 
                        onChange={(e) => {
                          setCompYear(e.target.value);
                        }}
                        data={years}
                      />   
                </div>
                <div>
                  <label for="power-supply-name" className="text-info">Power Supply</label>
                  <DropDownList
                        value={compPowerSupply}
                        textField="text"
                        dataItemKey="id" 
                        onChange={(e) => {
                          setCompPowerSupply(e.target.value);
                        }}
                        data={compPowerSupplies}
                      /> 
                </div>  
                <div className="mb-3">
                  <Field
                    name={"motorPower"}
                    component={MotorPowerInput} 
                    validator={inputValidator}
                  /> 
                </div>   
                <div className="mb-3">
                  <Field
                    name={"ratedPressure"}
                    component={pressureUnitInput} 
                    validator={inputValidator}
                  /> 
                </div>    
                <div className="mb-3">
                  <Field
                    name={"output"}
                    component={OutputInput} 
                    validator={inputValidator}
                  /> 
                </div>    
              </fieldset>
              <div className="k-form-buttons">
                <button type={"submit"} className="btn btn-outline-success btn-block mt-1" 
                  style={{height: "30px", fontSize: "16px", paddingTop: "4px"}}>
                  Save
                </button>
              </div>
            </FormElement>
          )}
        />
              
  )
}

Form

answered on 22 Oct 2021

1 answer

329 views

[Solved] TreeList Custom Cell for Expandable Column

I haven't been able to render a custom cell for the column that's housing the expandable cells. If I set `cell` to `CustomCell`, the expandability (the carrot dropdowns) disappears. I couldn't find an example in the docs that showed the actual expandable cells getting rendered custom (just the regular cells with values) - could you please show me a simple example to get me on the right track? Is it that I should build the expandable carrots into the custom cell myself or did I miss something in the docs?

Thank you!

TreeList

answered on 22 Oct 2021