1. Home
  2. Forum
  3. Blazor
  4. Odd behaviors when ShowCheckbox is true/false

Odd behaviors when ShowCheckbox is true/false

Questions:

I have four questions. Let me know if you would rather these be separated into individual threads.

  1. Based on the setting of ShowCheckbox, user selection is allowed (ValueChange is fired). This seems to be based on the value of MaximumSelectionLength. When ShowCheckbox = false, a default value (0) for MaximumSelectionLength is ignored whereas when ShowCheckbox = true, it is enforced.
  2. The checkboxes are displayed to the righ of the list items regardless of the CheckboxPosition parameter.
  3. DragStart event is fired regardless of the AllowDragAndDrop parameter.
  4. The Select All HTML element is displayed incorrectly.

Worth noting is I encapsulate SfListBox in my custom component and the ShowCheckbox and MaximumSelectionLength are two of my component's parameters which is how I observed this behavior and eventually tied it to the MaximumSelectionLength parameter.


Background:

I am using version 19.4.0.53 with the following code (based on one of your samples):

@using Syncfusion.Blazor.DropDowns

@using System.Diagnostics



    

        
Select your favorite car:

                            DataSource="@vehicleData"
                    TItem="ListItem"
                    TValue="string[]"
                    MaximumSelectionLength=@maxSelectionLength
                    AllowDragAndDrop=false
                    >


                                                    ShowSelectAll=false
                                        CheckboxPosition=CheckBoxPosition.Left
                                        Mode=SelectionMode.Multiple
                                        >
            


                                                Value="Id"
                                    GroupBy="Speed"
                                    >
            


                                                Position=ToolBarPosition.Right
                                    >
            


                                        TValue="string[]"
                            DragStart=@OnDragStart
                            ValueChange=@OnValueChange
                            >
    


        
    






@code{
    private string[] value = new string[] { "List-01" };
    private string[] toolbarItems = new string[] { "MoveUp", "MoveDown", "MoveTo", "MoveFrom", "MoveAllTo", "MoveAllFrom" };
    private double maxSelectionLength;// = 5.0;


    private List vehicleData = new List
    {
        new ListItem { Text = "Hennessey Venom", Id = "List-01", Speed="Fast" },
        new ListItem { Text = "Bugatti Chiron", Id = "List-02", Speed="Fast" },
        new ListItem { Text = "Bugatti Veyron Super Sport", Id = "List-03", Speed="Fast" },
        new ListItem { Text = "SSC Ultimate Aero", Id = "List-04", Speed="Fast" },
        new ListItem { Text = "Koenigsegg CCR", Id = "List-05", Speed="Fast" },
        new ListItem { Text = "McLaren F1", Id = "List-06", Speed="Slow" },
        new ListItem { Text = "Aston Martin One-77", Id = "List-07", Speed="Slow" },
        new ListItem { Text = "Jaguar XJ220", Id = "List-08", Speed="Slow" },
        new ListItem { Text = "McLaren P1", Id = "List-09", Speed="Slow" },
        new ListItem { Text = "Ferrari LaFerrari", Id = "List-10", Speed="Slow" }
    };


        private void OnDragStart(DragEventArgs args)
        {
            Debug.WriteLine("OnDragStart method invoked.");
        }


        private void OnValueChange(ListBoxChangeEventArgs args)
        {
            Debug.WriteLine("OnValueChange method invoked:");


            if (args.Value is not null) this.value = args.Value;
        }


    public class ListItem
    {
        public string Text { get; set; }
        public string Id { get; set; }
        public string Speed { get; set; }
    }
}


Observations:

  1. When ShowCheckbox is false, the listbox renders as expected and user selection is possible (ValueChange is fired). Note that maxSelectionLength = 0 by default as declared in the code above.
  2. When ShowCheckbox is true, the listbox renders as expected but user selection is not possible (ValueChange does not fire).
  3. Repeating #2 with maxSelectionLength defined (uncomment = 5.0), user selection is possible and the five-item selection limit is enforced.
  4. Since the MaximumSelectionLength parameter is not nullable I have to use an arbitrary value in order to enable user selection when ShowCheckbox is true. Is there a way to indicate no selection limit other than setting a large value?
  5. In the code above, CheckboxPosition is set to Left but the checkbox is displayed on the right side of the list item. When set to Right, the checkbox is displayed to the right of the list item.
  6. Regardless of the setting of AllowDragAndDrop, the DragStart event fires even when the group header is clicked. This isn't a huge deal, just unexpected behavior.
  7. When ShowSelectAll is true, the Select All HTML element is not displayed correctly (displayed to the left of the listbox. I think I saw this issue was addressed in a weekly release so this may not be manifested in the version I am using.

Thanks for your assistance in understanding this observed behavior.

Peter

8 Replies
PE Peter March 1, 2022 08:09 PM UTC

Update...I noticed more odd behaviors


  1.  When AllowFiltering is true the checkboxes are displayed to the left of the list items regardless of the CheckboxPosition setting and a checkbox is shown for the group header though it does not respond to a click,
  2. When AllowFiltering is false (which is the default for Observation #5 in the original post) the checkboxes are displayed to the right of the list items regardless of the CheckboxPosition setting.

Peter

SP Sangeetha Priya Murugan Syncfusion Team March 2, 2022 11:37 AM UTC

Hi Peter, 
 
We need to validate more on your reported issue so we will update you the further details on March 4th 2022.  
 
Regards, 
Sangeetha M 


SP Sangeetha Priya Murugan Syncfusion Team March 4, 2022 02:37 PM UTC

Hi Peter, 
 
We have checked your provided issue and we can’t be able to run your provided codes in our end. So, before we proceed further, please share the issue replicable sample with full customization codes. Based on that we will check and provide you a better solution quickly. 
 
Regards, 
Sangeetha M 


PE Peter March 5, 2022 06:57 AM UTC

Sorry you are having problems with the code snippet provided. Attached is a VS2022 solution that demonstrates the issues.


I copied the notes from my posts in the ProblemDemo.razor file for easy reference.


Attachment: SfListBoxProblemDemo_2d741ed8.zip


SP Sangeetha Priya Murugan Syncfusion Team March 7, 2022 03:15 PM UTC

 
Hi Peter, 
 
We need to validate more on your reported items. So, we will update you the further details on March 8th, 2022. We appreciate your patience until then. 
 
Regards, 
Sangeetha M 



SP Sangeetha Priya Murugan Syncfusion Team March 8, 2022 09:48 AM UTC

Hi Peter, 
 
Query #1: When ShowCheckbox is false, the listbox renders as expected and user selection is possible (ValueChange is fired). Note that maxSelectionLength = 0 by default as declared in the code above. 
 
We have considered the MaximumSelectionLength only when the ShowCheckBox option is true. Otherwise, we haven’t considered this property for selection. So, only the ValueChange event triggered properly. 
 
Query #2: When ShowCheckbox is true, the listbox renders as expected but user selection is not possible (ValueChange does not fire). 
 
You have set the null value for MaximumSelectionLength, we have maintained this property as a Double type. So, if we set to null the default value 0 is taken into an account. So, only the selection process is skipped, and the event not triggered. 
 
Query #3: Repeating #2 with maxSelectionLength defined (uncomment = 5.0), user selection is possible and the five-item selection limit is enforced 
 
In this you have set the proper values for selection limit. So, it works properly. 
 
Query #4: Since the MaximumSelectionLength parameter is not nullable I have to use an arbitrary value in order to enable user selection when ShowCheckbox is true. Is there a way to indicate no selection limit other than setting a large value? 
 
Query #5: In the code above, CheckboxPosition is set to Left but the checkbox is displayed on the right side of the list item. When set to Right, the checkbox is displayed to the right of the list item. 
 
Query #6: Regardless of the setting of AllowDragAndDrop, the DragStart event fires even when the group header is clicked. This isn't a huge deal, just unexpected behavior. 
 
Query #8: When AllowFiltering is true the checkboxes are displayed to the left of the list items regardless of the CheckboxPosition setting and a checkbox is shown for the group header though it does not respond to a click, 
 
Query #9: When AllowFiltering is false (which is the default for Observation #5 in the original post) the checkboxes are displayed to the right of the list items regardless of the CheckboxPosition setting 
 
we have confirmed these as defects and the fix will be available in our March 30th, 2022 patch release, we appreciate your patience until then. You can track the status of this defects using below link from our feedback portal,  
 
 
Query #7: When ShowSelectAll is true, the Select All HTML element is not displayed correctly (displayed to the left of the listbox. I think I saw this issue was addressed in a weekly release so this may not be manifested in the version I am using. 
 
Please check this with the latest version and kindly get back to us, with more details. If you still getting the same issue or need further assistance on this. 
 
Regards, 
Sangeetha M 


PE Peter March 8, 2022 06:10 PM UTC

Thank you for reviewing my questions.


I understand the application of MaximumSelectionLength by the ListBox component and will adjust my usage accordingly.


I look forward to the March release to address items #5, #6, #8 and #9.


I still am confused with #7. I updated to the .55 release and the Select All element is displayed as originally stated. This is the result of the codebase I sent you with the following adjustments:

  1. Updated to 19.4.0.55
  2. MaximumSelectionLength (maxSelectionLength) = 5
  3. ShowSelectAll parameter = true

2022-03-08_4-53-27.png

However, a single modification to the above--changing the AllowFiltering to true--produces:

2022-03-08_5-04-13.png


SP Sangeetha Priya Murugan Syncfusion Team March 9, 2022 10:52 AM UTC

Hi Peter, 
 
We have confirmed this as defect [SelectAll icon positioning], and we will consider this along with the below defects. And the fix will be available in our March 30th, 2022, patch release, we appreciate your patience until then.  
  
 
  
 
Regards, 
Sangeetha M 


Loader.
Up arrow icon