RadMultiSelect doesnt work on the latest chrome

2 Answers 354 Views

MultiSelect

2 Answers, 1 is accepted

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!