1. Home
  2. Forum
  3. Blazor
  4. Add value

Add value

I am using SfToolbar for the year above. When I click the years above I want to the corresponding month to be highlighted below.


 Screenshot (478).png


7 Replies
BC Belle Cruz December 22, 2021 01:57 AM UTC

Is there any update about my query?


VM Vengatesh Maniraj Syncfusion Team December 22, 2021 02:40 PM UTC

Hi Belle,


Greetings from Syncfusion Support.


You can achieve your requirement by binding the click handler for every toolbar item and highlighting the corresponding month based on your requirement within the click event handler like below.


 <SfToolbar>

            <ToolbarItems>

                <ToolbarItem Align="ItemAlign.Center" Id="2019" OnClick="@Clicked" Text="2019"></ToolbarItem>

                <ToolbarItem Align="ItemAlign.Center" Id="2020" OnClick="@Clicked" Text="2020"></ToolbarItem>

                <ToolbarItem Align="ItemAlign.Center" Id="2021" OnClick="@Clicked" Text="2021"></ToolbarItem>

            </ToolbarItems>

        </SfToolbar>



public void Clicked(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

       // You customize here based on your requirement

    }



Kindly check the above suggestion and get back to us if you need any further assistance.


Regards,

Vengatesh 


BC Belle Cruz December 23, 2021 02:43 AM UTC

Can you give me sample code in public void Clicked?


BC Belle Cruz December 23, 2021 06:08 AM UTC


        <ToolbarItems>

            <ToolbarItem Align="ItemAlign.Center" Id="p3" OnClick="@ClickedYear" Text="2018" />

            <ToolbarItem Align="ItemAlign.Center" Id="p2" OnClick="@ClickedYear" Text="2019" />

            <ToolbarItem Align="ItemAlign.Center" Id="p1" OnClick="@ClickedYear" Text="2020" />

            <ToolbarItem Align="ItemAlign.Center" Id="Yearc" OnClick="@ClickedYear" Text="2021" />

        </ToolbarItems>



public void ClickedYear(Syncfusion.Blazor.Navigations.ClickEventArgs args)

    {

        if (args.Item.Id == "p3")

        {

            CurrentDate = CurrentDate.AddYears(-3);


            InvokeAsync(() => { StateHasChanged(); });

        }

        if (args.Item.Id == "p2")

        {

            CurrentDate = CurrentDate.AddYears(-2);


            InvokeAsync(() => { StateHasChanged(); });

        }

        if (args.Item.Id == "p1")

        {

            CurrentDate = CurrentDate.AddYears(-1);


            InvokeAsync(() => { StateHasChanged(); });

        }

        if (args.Item.Id == "Yearc")

        {

            CurrentDate = CurrentDate.AddYears(1);


            InvokeAsync(() => { StateHasChanged(); });

        }

    }



Here is my code but the output is not correctly getting the week numbers of months. When I clicked the button it only adding and subtracting days. I want a solution that when I clicked the years above or the toolbar items it will display the current date and current month. For example when i clicked the year 2018 then it will display the week number of current month


SK Satheesh Kumar Balasubramanian Syncfusion Team December 23, 2021 10:18 AM UTC

Hi Belle, 
  
Thanks for your update. 
  
We have checked your requirement at our end and prepared the sample based on that for your reference which can be viewed from the below link. 
  
  
Kindly let us know for if you need further assistance. 

Regards, 
Satheesh Kumar B 


BC Belle Cruz December 23, 2021 10:32 AM UTC

It is not working when clicking the year, month and the two 


SK Satheesh Kumar Balasubramanian Syncfusion Team December 27, 2021 11:53 AM UTC

Hi Belle, 
  
Thanks for your update. 
  
Please check the attached sample to highlight the toolbar item based on requirement which can be downloaded from the following link. 
  
  
Index.razor: 
<style> 
    .e-toolbar .e-tbar-btn.e-btn .e-icons.e-chevron-left { 
        color: red; 
    } 
  
    .e-toolbar .e-tbar-btn.e-btn .e-icons.e-chevron-right { 
        color: red; 
    } 
  
    .e-toolbar .e-toolbar-items .e-toolbar-item.year-active .e-tbar-btn.e-btn, 
    .e-toolbar .e-toolbar-items .e-toolbar-item.month-active .e-tbar-btn.e-btn { 
        color: blue; 
    } 
</style> 
  
@code { 
    public DateTime CurrentDate { get; set; } = DateTime.UtcNow; 
    public void Clicked(Syncfusion.Blazor.Navigations.ClickEventArgs args) 
    { 
        for (int i = 0; i < YearToolbar.Items.Count; i++) 
        { 
            YearToolbar.Items[i].CssClass = ""; 
        } 
        for (int i = 0; i < MonthToolbar.Items.Count; i++) 
        { 
            MonthToolbar.Items[i].CssClass = ""; 
        } 
        if (args.Item.Id == "2019") 
        { 
            CurrentDate = DateTime.UtcNow; 
            CurrentDate = CurrentDate.AddYears(-2); 
            OnCreate(); 
            InvokeAsync(() => { StateHasChanged(); }); 
        } 
        if (args.Item.Id == "2020") 
        { 
            CurrentDate = DateTime.UtcNow; 
            CurrentDate = CurrentDate.AddYears(-1); 
            OnCreate(); 
            InvokeAsync(() => { StateHasChanged(); }); 
        } 
        if (args.Item.Id == "2021") 
        { 
            CurrentDate = DateTime.UtcNow; 
            OnCreate(); 
            InvokeAsync(() => { StateHasChanged(); }); 
        } 
        if (args.Item.Id == "2022") 
        { 
            CurrentDate = DateTime.UtcNow; 
            CurrentDate = CurrentDate.AddYears(1); 
            OnCreate(); 
            InvokeAsync(() => { StateHasChanged(); }); 
        } 
        if (args.Item.Id == "Previous") 
        { 
            CurrentDate = CurrentDate.AddDays(-7); 
            OnCreate(); 
            InvokeAsync(() => { StateHasChanged(); }); 
        } 
        if (args.Item.Id == "Next") 
        { 
            CurrentDate = CurrentDate.AddDays(7); 
            OnCreate(); 
            InvokeAsync(() => { StateHasChanged(); }); 
        } 
    } 
  
    public void OnCreate() 
    { 
        for (int i = 0; i < YearToolbar.Items.Count; i++) 
        { 
            if (CurrentDate.Year.ToString() == YearToolbar.Items[i].Id) 
            { 
                YearToolbar.Items[i].CssClass = "year-active"; 
            } 
        } 
        for (int i = 0; i < MonthToolbar.Items.Count; i++) 
        { 
            if (CurrentDate.Month.ToString() == MonthToolbar.Items[i].Id) 
            { 
                MonthToolbar.Items[i].CssClass = "month-active"; 
            } 
        } 
    } 
 } 
  
Could you please confirm whether the above solution has fulfilled your requirement? 

Regards, 
Satheesh Kumar B 


Loader.
Up arrow icon