RadMultiSelect doesnt work on the latest chrome

2 Answers 338 Views
MultiSelect
gevin
Top achievements
Rank 1
gevin asked on 14 Nov 2024, 04:29 AM

look at you site it doesnt work on here either

https://demos.telerik.com/aspnet-ajax/multiselect/serversideevents/defaultcs.aspx

2 Answers, 1 is accepted

Sort by
0
Vasko
Telerik team
answered on 14 Nov 2024, 07:07 AM

Hello Gevin,

We are aware of this issue, as it was reported a little after the newest Chrome update was released.

After investigating it, we found that the browser is stripping the ClientState input element, which leads to the issue where selected items' values are not retained after a postback in Chrome version 131.0.6778.70. This functionality works correctly in previous Chrome versions and other browsers like Microsoft Edge and Firefox.

We have prioritized this issue and are currently preparing a hotfix that will resolve this problem. The fix will be included in an upcoming SP release, and we will notify you as soon as it becomes available. You can also track the status of the bug on our Feedback Portal.

In the meantime, you can apply the following workaround to dynamically recreate the ClientState input element if it is removed by the browser:

<telerik:RadMultiSelect ID="rcbUsers" runat="server" Width="500px" DropDownHeight="200px"
    DataValueField="UserID" DataTextField="UserName" TagMode="Multiple" AutoPostBack="true">
    <ClientEvents OnLoad="onMultiSelectLoad" />
</telerik:RadMultiSelect>

<asp:Button ID="btnGetItems" runat="server" Text="Get Selected Items" OnClick="btnGetItems_Click" />
<br />
<asp:Label ID="lblSelectedItems" runat="server" Text="Selected Items: " />
function onMultiSelectLoad(sender) {
    // Get the control's unique ID
    var controlId = sender.get_id();
    var clientStateId = controlId + "_ClientState";
    var clientStateName = controlId + "_ClientState";

    // Check if the ClientState input exists
    var existingInput = document.getElementById(clientStateId);

    // Recreate the input if it doesn't exist
    if (!existingInput) {
        // Find the RadMultiSelect's container
        var container = document.getElementById(controlId).parentElement;

        if (container) {
            // Dynamically create the hidden input element
            var clientStateInput = document.createElement("input");
            clientStateInput.id = clientStateId;
            clientStateInput.name = clientStateName;
            clientStateInput.type = "hidden";
            clientStateInput.autocomplete = "off";

            // Set the initial value for the ClientState
            clientStateInput.value = JSON.stringify({
                enabled: true,
                selectedItems: [],
                deselectedItems: [],
                value: [], // Adjust based on your initial state
                selectedDataItems: [] // Adjust based on your initial state
            });

            // Append the hidden input to the parent container
            container.appendChild(clientStateInput);
        }
    }
}
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // Bind static user data
        DataTable userData = GetUserData();
        rcbUsers.DataSource = userData;
        rcbUsers.DataBind();
    }
}

protected void btnGetItems_Click(object sender, EventArgs e)
{
    try
    {
        // Convert Value property to a list of strings
        List<string> selectedValues = rcbUsers.Value.Cast<object>().Select(v => v.ToString()).ToList();
        lblSelectedItems.Text = "Selected Items: " + string.Join(", ", selectedValues);
    }
    catch (Exception ex)
    {
        lblSelectedItems.Text = "Error: " + ex.Message;
    }
}

// Static user data
private DataTable GetUserData()
{
    DataTable dt = new DataTable();
    dt.Columns.Add("UserID", typeof(int));
    dt.Columns.Add("UserName", typeof(string));

    dt.Rows.Add(1, "Steven White");
    dt.Rows.Add(2, "Nancy King");
    dt.Rows.Add(3, "Robert Davolio");
    dt.Rows.Add(4, "Michael Leverling");
    dt.Rows.Add(5, "Andrew Callahan");

    return dt;
}

Regards,
Vasko
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources
0
Vasko
Telerik team
answered on 15 Nov 2024, 06:59 AM

Hello Gavin,

We just followed up on the bug report item with details on how to obtain the hotfix and the upgrade instructions. You can download the hotfix by logging into your account and obtaining the Telerik_UI_for_ASP.NET_AJAX_2024_4_1114_Dev_hotfix.zip installation from https://www.telerik.com/account/downloads/product-download?product=RCAJAX

Please test and let us know the result.

Regards,
Vasko
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources
Tags
MultiSelect
Asked by
gevin
Top achievements
Rank 1
Answers by
Vasko
Telerik team
Share this question
or