How to dynamically change the Splitter Component's Height property at runtime?

[luyan]

I've tried:

               splitter.Height = "1000px";

and

                Dictionary<string, object> ps = new Dictionary<string, object>();

                ps.Add("Height", "1000px");

                await splitter.SetParametersAsync(ParameterView.FromDictionary(ps));

both can't change the height style.

[Indrajith Srinivasan]

Hi Luyan,

Greetings from Syncfusion support, 

 

We have validated your reported query. In order to change the splitter height dynamically, we suggest you to use the property binding for the splitter Height property. We have also prepared a sample based on your requirement. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/152835/ze/Splitter_Height-872648016

Can you please check the above solution and let us know if it meets your requirements?

Regards, 

Indrajith 

[luyan]

Thanks for your quickly reply.

My situation has a little different from your sample.

In fact I need set up Splitter height automaticlly after page loaded, so I can caculate the actual sliptter height.

Base your code,  I added OnAfterRenderAsync method:

@code {

    SfSplitter splitterObj;

    private string splitterHeight { get; set; } = "240px";

    private void Clicked()

    {

        this.splitterHeight = "500px";

        this.StateHasChanged();

    }

    protected override Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender)

        {

            this.splitterHeight = "800px"; //I'll call js to get parent div height

            this.StateHasChanged();

        }

        return base.OnAfterRenderAsync(firstRender);

    }

}

It's didn't work. 

BTW: If I set the splitterHeight to 500px in OnAfterRenderAsync, the Click didn't work either.

[Indrajith Srinivasan]

Hi Luyan,

Thanks for the update, 

 

We have validated your reported query. In order to update the property initially, we suggested you to use the component Created event instead of OnAfterRenderAsync blazor life cycle method.

 

 

<SfSplitter Height="@splitterHeight" Width="100%"> 

      <SplitterEvents Created="@onCreated"></SplitterEvents> 

</SfSplitter>

@code { 

   private string splitterHeight { get; set; } = "240px";
    private void onCreated()
    { 

        this.splitterHeight = "500px";
        this.StateHasChanged(); 

   } 

} 

 

Can you please try out the above solution and let us know if you face any difficulties? 

Regards, 

Indrajith 

[luyan]

It works. 

Thank you very much.

[Indrajith Srinivasan]

Hi Luyan,

Thanks for the update,

Please let us know if you need any further assistance.

Regards,
Indrajith