Questions on KendoReact Forum

1 answer

205 views

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

104 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

358 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

788 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

128 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

157 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

1 answer

214 views

Disable Row in grid

Hi,

I am working on a grid where i am enabled editable columns, all works fine as expected. my question how to disable only few rows in a grid to not editable

for example, i have 5 rows in grid and only 3 rows can be editable not others. i have column in a row that says can be editable or now

any help will be appreciated

Grid

answered on 19 Oct 2021

2 answers

234 views

[Solved] Avoid selecting checkbox when click on any row in kendo react grid

Hi Team,

I am working on the grid with checkbox using the sample provided here https://www.telerik.com/kendo-react-ui/components/grid/selection/

its working as stated in the example, but one question, is there way to avoid row checkbox to not checked when we click on any other column in the grid(other than checkbox column).

for example, in below screen i am clicking on product name(2nd) column and entire row is selected and checkbox is checked. i don't want checkbox to be checked when i click on other columns.

Grid

answered on 18 Oct 2021

1 answer

177 views

[Solved] KendoReact Grid OnRowDoubleClick for custom cell component

Hello, i am using KendoReact Grid component, for one column i use custom component for cell, for some reason OnRowDoubleClick event doesn't fire when i double click on this cell, fot other cells double click is working fine, what am i doing wrong? is there a way to make it work?

event doesn't fire when you click on span element(blue on screen), but when you click on cell padding(green on screen) it does fire

it looks like i need to pass the event on span element, but i dont know which one since only event that comes through props is onChange