Single cell in flexgrid

Posted by: ehh on 27 June 2021, 10:14 pm EST

  • Posted 27 June 2021, 10:14 pm EST

    Hello,

    Is there a way to add style or class to a single cell in the flexgrid.

    Like if i want a single cell to change background color.

    Best Regard,
    Emil
  • Replied 27 June 2021, 10:17 pm EST



    Forgot an example.
  • Replied 29 June 2021, 1:18 am EST

    Hi,
    You may format the cells using the CellFactory. Please refer to the following demo sample for reference:
    https://demos.componentone.com/blazor/blazorexplorer/FlexGrid/ConditionalFormatting

    Hope it helps!

    Regards,
    Manish Gupta
  • Replied 29 June 2021, 5:57 pm EST

    Hello Manish,
    Thanks for the answer, im not sure i can use the CellFactory for my problem. But maybe you can help if i explain it a little more.

    I have an object for each cell in my grid, and im building my grid unbound.
    Each cell have following properties.

    Value,
    BackColor,
    Format,
    Edited

    Is there a way to parse my cell objects to the CellFactory, and set the formatting and backcolor there or is that not posible?.

    Hope it describes the problem a little better :).

    Best Regards,
    Emil


  • Replied 30 June 2021, 8:56 pm EST

    Hi Emil,
    Please refer to the following demo sample for reference which has the MyCell class having Value, BackColor, Format and Edited property and the FlexGrid values are set and formatting is done using Unbound mode with CellFactory.

    Regards,
    Manish Gupta
    FlexGrid_UnboundGridStyling.zip
  • Replied 30 June 2021, 10:51 pm EST

    Thanks for the great demo, this is exactly what im looking for.
    There is now a different problem, when i try and edit my cell i get the name of the class. When i would like to get the value of the object.

    Image from your demo.


    Best Regards,
    Emil
  • Marked as Answer

    Replied 1 July 2021, 8:11 pm EST

    Hi Emil,
    For this, we need to override the OnCellEditorCreated and OnEditEnded method for GridCellFactory.
    Please refer to the attached sample for reference.

    Regards,
    Manish Gupta

    FlexGrid_CellFactory_Editing_CellObject.zip
  • Replied 2 July 2021, 12:13 am EST

    You did it agian, your demo pointed me in the right direction.

    Thanks a lot for the help.

    Best Regards,
    Emil
  • Replied 25 July 2021, 11:05 pm EST

    I seem to have run into a new problem after some testing, when i select a cell, and want to start typing in a quick edit fashion, the first input I enter is dropped and the cell becomes editable. Is there a way to enable quick edit when using the cellfactory and the OnCellEditorCreated.

    Best Regards,
    Emil
  • Replied 26 July 2021, 8:57 pm EST

    Hi Emil,
    For this, we need to write a JS function to retain the first character input. This method should be called once the page is rendered.
    Please refer to the attached sample and the following code snippet:
    function Editor() {
    var grid = document.getElementById("grid-wrapper");
    grid.addEventListener("keydown", function (e) {
    var _inputs = grid.querySelectorAll("input");
    setTimeout(function () {
    var inputs = grid.querySelectorAll("input");
    if (inputs[1] && _inputs.length == 1) {
    _inputs = 2;
    inputs[1].value = inputs[0].value;
    }
    },20)
    },true)
    }


    Regards,
    Manish Gupta

    FlexGrid_CellFactory_Edit_CellObj_firstchar.zip
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels