Enable disable the fields/controls in React Kendo Grid

13 posts, 0 answers
  1. Parag
    Parag avatar
    49 posts
    Member since:
    Aug 2018

    Posted 19 Oct 2018 Link to this post

    I want to disable the fields/controls in React kendo grid based on input.
    For example : Based on selection of value in Full Name, I want to disable the Birth Date column
  2. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 22 Oct 2018 Link to this post

    Hello, Parag,

    This could be achieved using different approaches based on the used editing logic.

    In general, the editable property of the column can be set to function, and this function will determine if the column will be editable or not:

    https://www.telerik.com/kendo-react-ui/components/grid/api/GridColumnProps/#toc-editable

    I made an example using one of the approaches:

    https://stackblitz.com/edit/react-gsxk9b?file=app/main.js

    If more details are needed, please share how the editing is handled and we will assist further.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Parag
    Parag avatar
    49 posts
    Member since:
    Aug 2018

    Posted 23 Oct 2018 Link to this post

    My use includes based on selection of combo box value it should populate the values in other controls. I am using the same editing logic which is specified in Kendo website (https://www.telerik.com/kendo-react-ui/components/grid/editing/editing-inline/).

    Please find attached screenshot for my use case

    On selection of Full name (dropdown) value I am able to populate the value in Last Name control however same is not getting updated in dataItem because onchange of dropdown I am firing  this.props.onChange which itself invokes ItemChange event and it updates one value at a time in dataItem (Currently it updates FullNameId in dataItem, As I specified same in code), similarly I want to update the other fields as well. Below is the function which get fires when I changed the values in dropdown. Is there any option to pass multiple field on change like LastName, FirstName etc.

    handleChange = (e) => {
            this.props.onChange({
                dataItem: this.props.dataItem,
                field: "FullNameId",
                syntheticEvent: e.syntheticEvent,
                value: e.target.value
            });
         }

  4. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 24 Oct 2018 Link to this post

    Hello, Parag,

    Yes, it is possible to pass the entire dataItem, but then this has to be handled on the itemChange event by setting only the value on the entire dataItem. Also, the itemChange event also modifying multiple properties on a single change.

    I made an example demonstrating this:

    https://stackblitz.com/edit/react-lthy76?file=app/main.js

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  5. Parag
    Parag avatar
    49 posts
    Member since:
    Aug 2018

    Posted 24 Oct 2018 in reply to Stefan Link to this post

    Thanks for the quick reply. It works. 

    also can you please let me know is there any mechanism to focus individual cell of grid. for example : I have button outside of grid and onclick of button I want to focus inside the grid cell. The cell which is empty or having error.
  6. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 25 Oct 2018 Link to this post

    Hello, Parag,

    This can be done by selecting the desired element based on a query selector and calling its focus method:

    https://stackblitz.com/edit/react-lthy76?file=app/main.js


    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Parag
    Parag avatar
    49 posts
    Member since:
    Aug 2018

    Posted 25 Oct 2018 in reply to Stefan Link to this post

    Hi Stefan,

    Thanks for the quick reply. Do we have any other way apart from using javascript class name?

    Regards,

    Parag

     

     

  8. Parag
    Parag avatar
    49 posts
    Member since:
    Aug 2018

    Posted 25 Oct 2018 in reply to Stefan Link to this post

    Hi Stefan,

    Below approach works for me but I am facing one issue when I click on Add New button. For example When I clicked on button it adds a new row to the grid and whenever I select the dropdown values it updates rest of the cells. Till this point everything works fine but when I again clicked on add new button, then dropdown in newly added row , takes values of previously added dropdown control row.

     

    Below is the code

    enterInsert() {
    const dataItem = { inEdit: true, FullName:"",FullNameId: -1, FirstName: "", LastName: "" };
    const newproducts = this.state.data.slice();
    newproducts.unshift(dataItem);
    this.update(newproducts, dataItem);
    this.setState({
    data: newproducts
    });
    }

  9. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 26 Oct 2018 Link to this post

    Hello, Parag,

    Regarding the questions:

    1)  " Do we have any other way apart from using javascript class name?" - Any approach for selecting the desired element can be used, the Grid is a standard DOM element and its elements can be accessed in the most convenient way depending on the case.

    2) "When I again clicked on add new button, then DropDown in a newly added row, takes values of previously added DropDown control row." - Please check if the "newproducts" value just before it is passed to the state. If it is with the old value inspect the update function to ensure that at any point the values are not being overwritten.

    ----------------------------------------------------------------------

    Also, I noticed that this account is not currently associated with a valid License or a Trial. Before continuing with the technical support, could you please start a Trial account or associate this with a license if you already have a valid license.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  10. Parag
    Parag avatar
    49 posts
    Member since:
    Aug 2018

    Posted 29 Oct 2018 in reply to Stefan Link to this post

    Hi Stefan,

     

     have integrated filter in grid and when I clicked on focus button focus went to filterable textbox. is there any way to bypass this?   

  11. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 30 Oct 2018 Link to this post

    Hello, Parag,

    This could occur if the DOM selector is targeting the textbox element. 

    Could you please provide the code that is used to focus the button?

    Also, a short video or a screenshot of the case could prove helpful.

    Regards,
    Stefan
    Progress Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  12. Jatin
    Jatin avatar
    1 posts
    Member since:
    Jul 2020

    Posted 06 Jul 2020 in reply to Stefan Link to this post

    Hi Stefan,

     

    I have a use case where I want to disable or enable in-cell editing based on the data I am passing to GRID.

     

    Regards,

    Jatin

  13. Stefan
    Admin
    Stefan avatar
    3035 posts

    Posted 06 Jul 2020 Link to this post

    Hello, Jatin,

    There are some examples in the thread showing how this can be done.

    Is it possible to share more detail on the requirement in order to provide more to the point suggestions?

    Regards,
    Stefan
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top