Thanks Dimka

right now i have one another query here I want the parent header to be repetitive for each expanded child. In below example I want dr name row  will be there for Mohite row( above the mohite row)

Thanks again.. :) I just want to know that if we want to change the css style of infragistics grid then is it possible for us to write a new css sheet and apply that for grid.. if yes then please let me know this using example I will be very thankful for your help. I want to change the background color. means need to add two different colors for child and parent.

Hello Mayuri,

In order to create a custom CSS for the grid it is need all existing styles to be overridden.

I have made a research regarding the colors changing questions for the hierarchical grid. The effect you have described could be achieved for non-dynamically applied styles. I have attached a sample representing a possible solution:

        $("#hierarchicalGrid").igHierarchicalGrid({

            rendered: function(evt, ui){

                var tr = $("#hierarchicalGrid").find('[data-id=0]');

                tr.addClass('blue1');

                var i = 0;

                while (tr.length !== 0)

                {

                    i = i + 1;

                    var br = '[data-id='+ i.toString() + ']';

                    var tr = $("#hierarchicalGrid").find(br);

                    tr.addClass('blue1');

                }

            },  …

All parent rows are selected and a custom class is added to them. Feel free to use the sample for custom projects. It could be customized by overriding the .blue1 class.

If you have any further questions or concerns please let me know.

Hello Mayuri,

Do you want me to consider any additional specificities of your scenario? If so, don’t hesitate to post here your requirements.

Hi

actually am still facing the header issue as you told me am doing like that but which is not the proper solution for me. my requirement is like that i want to add the alternate color bands for all the headers.

Hello Mayuri,

I am just following up to check if you have any further questions regarding this scenario. If so, feel free to contact me again.

thank you dimka

its working for me also

but when we change the background color to respective one it reflects but at the same time the lable of header is into the span so it look funny

<span class="ui-iggrid-headertext">Doctor name</span> then how to change the only css of this because the every header span has the same class name as class="ui-iggrid-headertext"

Hello Mayuri,

Have you changed the styles to correspond to your grid column id-s?

# hierarchicalGrid_DoctorName

{

                background:blue;

}

# hierarchicalGrid_DoctorID

{

                background:blue;

}

.ui-iggrid-expandheadercell {

 

    background:blue !important;

 

 }

 

.ui-widget-header {

 

    background: none repeat scroll 0 0 #FF0000;

 

    border-bottom: 1px solid #777777;

 

    color: #FFFFFF;

 

    font-weight: normal;

 

}

From the code you have provided they should be something like the id-s above.

I have tested this on a couple of projects and this works as expected.