Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
875
How to change the value of an unbound child-cell
posted

I want to show an image in a child cell based on the value of a bound field in child row. Which is the right event to do this and how can i get the wanted child cell?

 

  • 17559
    Verified Answer
    posted

    Hello Kociemba ,

     

    I have been looking into your issue and I can suggest you the following custom approach for setting different images during the expanding of the row. For example you can handle the RowIslandCreated event of the WebHierarchichalDataGrid and set a different css class for the unbound field in it:

     

        void WebHierarchicalDataGrid1_RowIslandCreated(object sender, Infragistics.Web.UI.GridControls.RowIslandEventArgs e)

        {

            e.RowIsland.Columns.Add(new UnboundField() { Key="Image"});

            foreach (ContainerGridRecord r in e.RowIsland.Rows)

                if (r.Items[1].Value.ToString() == "1")

                    r.Items[0].CssClass = "tick";

                else

                    r.Items[1].CssClass = "cross";

        }

     

    .tick

    {

        background-image: url("../tick.png")! important;

      

    }

    .cross

    {

        background-image: url("../cross.png")! important;

    }

     

    Another approach that you may try is to handle the client event RowExpanding as follows:

      <ig:WebHierarchicalDataGrid  ID="WebHierarchicalDataGrid1" runat="server" Height="350px"

                Width="400px">

                   <ClientEvents  RowExpanded ="expanding"/>

            </ig:WebHierarchicalDataGrid>

     

     and perform the same functionality in java script:

     

    function expanding(sender, eventArgs) {

           // gets all child rows

            var rowIsland = eventArgs.get_row().get_rowIslands(1)[0].get_rows();

            //gets the first and the second cell of the current row

            for (var i = 0; i < rowIsland.get_length(); i++) {

                var row = rowIsland.get_row(i);

                var cell1 = row.get_cell(0);

                var cell2 = row.get_cell(1);

     

                //make some comparasion

                if (cell1.get_value() == 1)

                //adds a class with custom properties for the cell

                    cell1.get_element().className = 'tick';

                else

                    cell1.get_element().className = 'cross';

            }

        }

     

     

    Please let me know if you have any further questions or concerns with this matter.