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.

Hi Dimka

As the example give by you is using the json data binding will you pls give me the solution means writing the javascript and adding the css class for that tr using model as a database

  @(Html.Infragistics().Grid(Model.DoctorName.AsQueryable())
                .EnableHoverStyles(false)
                .ID("hierarchicalGrid")          
                .Width("90%")
                .Height("70%")
                .LoadOnDemand(false)
                .ExpandCollapseAnimations(true)
                .ShowHeader(true)
                .FixedHeaders(true)
                .AutoGenerateColumns(false)
                .PrimaryKey("DoctorID")
                .AutoGenerateLayouts(true)
                .Columns(column =>
                {

                    column.For(x => x.DoctorName).HeaderText("DoctorName").DataType("string");
                    column.For(x => x.DoctorID).HeaderText("DoctorID").DataType("int").Hidden(true);
                 
                })
                .ColumnLayouts(layouts =>
                {
                    layouts.For(x => x.patient)
                    .PrimaryKey("patientID")
                    .ForeignKey("DoctorID")
                    .EnableHoverStyles(false)
                    .ShowHeader(true)
                    .AutoGenerateLayouts(true)
                    .RenderCheckboxes(true)
                    .AutoGenerateColumns(false)
                    .Features(features =>
                    {

                        features.Sorting().Mode(SortingMode.Single).ModalDialogAnimationDuration(5).ColumnSettings(settings =>
                        {

                          

                        });
                        features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Cell);

                    })
                    .Columns(childcols1 =>
                    {
                        childcols1.For(x => x.patientID).HeaderText("patientName ID").DataType("int").Hidden(true);

                        childcols1.For(x => x.patientName).HeaderText("patientName").DataType("string");
                      

                    });
                })
                            .Features(features =>
                            {

                             
                                features.Sorting().Mode(SortingMode.Single).ColumnSettings(settings =>
                                {
                                  
                                });
                                features.Selection().MouseDragSelect(true).MultipleSelection(true).Mode(SelectionMode.Row);

                            })

        .Width("100%")
        .DataBind()
        .Render( ))

so pls help me that how can write the javascript function for changing the css of such grid

Hello Mayuri,

Thank you for the additional details.

In order to style all child grid headers by a single style it is needed to add the following style in your view file:

    .ui-widget-header {

    background: none repeat scroll 0 0 #FF0000;

    border-bottom: 1px solid #777777;

    color: #FFFFFF;

    font-weight: normal;

}

Since this class will apply the style to the parent grid header it is also necessary to edit the igHierarchicalGrid header separately. This could be achieved by applying style to each of the header cells. Actually this is the most straight-forward approach since the header of the parent grid does not have its own id but the cells included in it are assigned with id-s or classes which define the uniquely:

   #grid1_ProductId {

    background:blue;

    }

    #grid1_Name {

    background:blue;

    }

    .ui-iggrid-expandheadercell {

    background:blue !important;

    }

I have attached an MVC sample for your reference.

If you have any further questions regarding this matter feel free to contact me again.

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.