Questions on KendoReact Forum

0 answers

107 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

132 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

130 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

341 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

1 answer

213 views

[Solved] TreeList Resizable Columns

I noticed on the Stackblitz code from this page on Kendo's TreeList docs, that the resizability is a little glitchy feeling (try expanding the Position column). For example, resizing a column also causes the other columns to grow or shrink in width too, and there is a noticeable jump for some columns with longer values. Is there any workaround for this or is this expected behavior?

Thank you in advance!

TreeList

answered on 22 Oct 2021

1 answer

108 views

FormValidator not working in simple form

Hello,

I have the following form, but for some reason the button is not triggering the method execution neither the validator regex is working. some help would be greatly appreciated.

  const inputRegex = new RegExp(/^([a-zA-Z\d\.,%/\-_].*)/);
  const inputValidator = (value) =>
        inputRegex.test(value) ? "" : "Please enter a valid value.";

 
 
return (
          <Form className="mt-3 mb-4 px-0" onSubmit={postCompressorSave}
          render={(formRenderProps) => (
            <FormElement
              style={{
                maxWidth: 650,
              }}
            >
              <fieldset className={"k-form-fieldset"}>
                <legend className={"k-form-legend"}>
                  Please fill in the email field:
                </legend>
                <div className="mb-3">
                <Field
                  name={"nikname"}
                  component={NicknameInput}
                  label={"NickName"}
                  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

372 views

Horizontal Card View

I have an arbitrary number of Cards being returned from a database query. I would like these cards to layout horizontally and automatically line wrap. I've tried the ListView, but I can't find a way to make it horizontal. I also tried the GridLayout, but it doesn't seem to work if you don't specify the row and column explicitly. And the StackLayout just puts them all on the same row, no matter how many of the Cards there are.

Do I have to manually divide them up into rows myself? So if I want 4 cards per row, and I have 20 cards, I programmatically create the 5 rows? Is there a better option?

Thanks!

Tye

Card

ListView

answered on 21 Oct 2021

1 answer

796 views

Radio button column in the grid

Hi,

Implementing radio buttons in the grid - where the user can only select one row at a time - probably entails a custom cell with a radio button in each row - where the 'name' property is the same for all the rows. A search in the grid forums for the keyword 'radio' did not yield a result. Since this could be a fairly common scenario was checking to see if there is a sample for this that has already been created.

Thanks and regards,

Amit

Grid

answered on 20 Oct 2021

1 answer

131 views

[Solved] scheduler slotduration

Hello

Is it possible to have a custom slot in viewItem for example :

i have a program which starts 6:17 and ends 6:32 and another one starts 6:43 and ends 7:02.

best regards.

Scheduler

answered on 19 Oct 2021

1 answer

163 views

PDF export shouldn't display grid

I am trying to export kendo react grid using excel as per sample here https://www.telerik.com/kendo-react-ui/components/grid/excel-export/ which is working as expected.

Also I have to export in PDF Format as well. but export pdf code mentioned here(https://www.telerik.com/kendo-react-ui/components/grid/pdf-export/) is totally different than excel. is there way to achieve both excel and pdf in common code? any help will be appreciated

Grid

answered on 19 Oct 2021