Databound <AjaxToolkit:Combobox> strange behaviour with large amount of data

Question

User-1939834628 posted

I'm experiencing a strange behaviour of a <AjaxToolkit:Combobox> widget used on Asp.net form.

I got it declared this way:

<ajaxToolkit:ComboBox
    ID="cbConvenzionato"
    runat="server"
    AutoCompleteMode="SuggestAppend"
    DropDownStyle="DropDownList"
    DataSourceID="sdsConvenzionati"
    DataTextField="nome"
    DataValueField="id"
    AutoPostBack="true" 
    Width="200px" 
    OnSelectedIndexChanged="cbConvenzionato_SelectedIndexChanged" 
    AppendDataBoundItems="true">
        <asp:ListItem Text="Tutti" Value="" Selected="True" />
</ajaxToolkit:ComboBox>

And its related data-source in this way:

<asp:SqlDataSource
    ID="sdsConvenzionati"
    runat="server"
    ConnectionString="<%$ ConnectionStrings:db %>"
    ProviderName="<%$ ConnectionStrings:db.ProviderName %>"
    SelectCommand="
        SELECT
            id,
            nome
        FROM
            anag_convenzionati
        WHERE
            ((data_cancellazione IS NULL) OR (data_cancellazione = ''))
        ORDER BY nome;" />

I think that the problem is given from the amount of data provided from the datasource since I used the same approach many times and I never had such kind of issues.

The amount of raw data transfered for such table should be around 100k (calculations made exporting data from database and encoding it the way JSON should).

The abnormal behaviour is not on the data visualization itself since combobox appears to be filled with all the data but from the interactive selection/filtering mechanism that brokes and does not even allow to enter characters inside the widget. The only way to select items is trough graphical interaction (that may takes time since there are lots of items).

Threre's a way to fix this?

P.S. As a side question I would like to know if there's a way to change the way the item selection mechanism works i.e. I need a control that allows to search for a substring instead left string matching.

Best regards,

 Mike

Answer 1

User1535942433 posted

Hi weirdgyn1972,

weirdgyn1972

The abnormal behaviour is not on the data visualization itself since combobox appears to be filled with all the data but from the interactive selection/filtering mechanism that brokes and does not even allow to enter characters inside the widget. The only way to select items is trough graphical interaction (that may takes time since there are lots of items).

I have created a test and it works fine. According to your problems,I have some doubts:

1.You said the combobox can't allow to enter characters. Do you have write characters without inside the listitem? Just  the item is A,B and you have enter C.  Or  could you enter but can't show the corresponding item auto?

2. The selection/filtering break. Couldn't you select and filter? Or you can't get the value selected after posting?

3.Do you have other codes to affect it? You could post your result image to us.It will help us to solve your problems.

Best regards,

Yijing Sun

Answer 2

User-1939834628 posted

yij sun

Hi weirdgyn1972,

I have created a test and it works fine. According to your problems,I have some doubts:

1.You said the combobox can't allow to enter characters. Do you have write characters without inside the listitem? Just  the item is A,B and you have enter C.  Or  could you enter but can't show the corresponding item auto?

What I was meaning is that the text entered by user inside combobox will not produce a selection neither an input inside the textbox. 

The interactive selection (in such way) is the only relevant difference between this component and standard dropdownlist loosing such feature renders it useless.

yij sun

2. The selection/filtering break. Couldn't you select and filter? Or you can't get the value selected after posting?

As I specified in the message the ONLY way to select the item is to scroll inside the combobox and select it ... text entered in the combobox did not select any value. Once selected (trough mouse click) and posted SelectedValue is correctly set.

yij sun

3.Do you have other codes to affect it? You could post your result image to us.It will help us to solve your problems.

The relevant code in the page is that I wrote in the first message. I can write here all the page code but I don't think it will add much detail.

Maybe you need some details in setting like web. config or master page?

Best regards. Mike.

Answer 3

User-1939834628 posted

<%@ Page MasterPageFile="~/MasterPage.master" Language="C#" AutoEventWireup="true" CodeFile="RptCostoVeicoli2.aspx.cs" Inherits="Intranet.RptCostoVeicoli2" %>

<%@ MasterType VirtualPath="~/MasterPage.master" %>

<asp:Content ContentPlaceHolderID="HeadContent" ID="_HeadContent" runat="server">
    <script type="text/javascript" src="/REPORT/RptCostoVeicoli2.js"></script>
</asp:Content>

<asp:Content ContentPlaceHolderID="MainContent" ID="_MainContent" runat="server">
    <asp:HiddenField ID="hdnAnno" ClientIDMode="Static" runat="server" Value="" />
    <asp:HiddenField ID="hdnMese" ClientIDMode="Static" runat="server" Value="" />
    <div id="main">
        <table cellpadding="0" cellspacing="0" style="width: 100%;">
            <tr>
                <td style="width: 70%; text-align: left;">
                    <h1>
                        <asp:Label ID="lblPagina" runat="server" Text="Pagina: Report Costo Veicoli" />
                    </h1>
                </td>
            </tr>
        </table>
        <div id="conts" style="overflow: hidden;">
            <asp:Panel ID="Pannello" DefaultButton="_btnRicerca" runat="server">
                <div id="ricerca">
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td rowspan="4">
                                <h1 style="padding: 0px; margin: 0px;">Ricerca</h1>
                            </td>
                            <td>Convenzionato:</td>
                            <td style="text-align: left;">
                                <ajaxToolkit:ComboBox
                                    ID="cbConvenzionato"
                                    runat="server" 
                                    CssClass="WindowsStyle"
                                    AutoCompleteMode="SuggestAppend"
                                    DropDownStyle="DropDownList"
                                    DataSourceID="sdsConvenzionati"
                                    DataTextField="nome"
                                    DataValueField="id"
                                    AutoPostBack="true"
                                    OnSelectedIndexChanged="cbConvenzionato_SelectedIndexChanged"
                                    AppendDataBoundItems="true">
                                    <asp:ListItem Text="Tutti" Value="" Selected="True" />
                                </ajaxToolkit:ComboBox>
                            </td>
                            <td align="right">Targa veicolo:</td>
                            <td style="text-align: left;">
                                <asp:DropDownList
                                    ID="ddlVeicoli"
                                    runat="server"
                                    DataTextField="targa"
                                    DataValueField="id"
                                    AutoPostBack="true"
                                    OnSelectedIndexChanged="ddlVeicoli_SelectedIndexChanged"
                                    AppendDataBoundItems="true">
                                    <asp:ListItem Text="TUTTI" Value="" Selected="True" />
                                </asp:DropDownList>
                            </td>
                        </tr>
                        <tr>
                            <td>Serie:</td>
                            <td style="text-align: left;">
                                <asp:TextBox
                                    ID="txtSerie"
                                    runat="server"
                                    ClientIDMode="Static"
                                    AutoPostBack="true"
                                    OnTextChanged="txtSerie_TextChanged" />
                            </td>
                            <td align="right">Mese:</td>
                            <td style="text-align: left;">
                                <asp:DropDownList
                                    ID="ddlMese"
                                    ClientIDMode="Static"
                                    runat="server"
                                    onchange="javascript: setMeseAnno()"
                                    AutoPostBack="True"
                                    OnSelectedIndexChanged="ddlMese_SelectedIndexChanged">
                            </td>
                        </tr>
                        <tr>
                            <td>Modalit&agrave; noleggio:</td>
                            <td style="text-align: left;">
                                <asp:DropDownList
                                    ID="ddlModalitaNoleggio"
                                    runat="server"
                                    ClientIDMode="Static"
                                    DataSourceID="sdsModalitaNoleggio"
                                    DataTextField="descrizione"
                                    AutoPostBack="true"
                                    OnSelectedIndexChanged="ddlModalitaNoleggio_SelectedIndexChanged"
                                    DataValueField="modalita_noleggio"
                                    AppendDataBoundItems="true">
                                    <asp:ListItem Text="TUTTI" Value="" Selected="True" />
                                </asp:DropDownList>
                            </td>
                            <td colspan="2" />
                        </tr>
                        <tr>
                            <td colspan="4" align="center">
                                <asp:Button ID="_btnRicerca" runat="server" ClientIDMode="Static" OnClick="btnRicerca_Click" Text="Ricerca" />
                            </td>
                        </tr>
                    </table>
                </div>
                <div id="data" style="text-align: center; width: 940px">
                    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%;" id="TABLE1">
                        <tr>
                            <td style="height: 19px" colspan="2">
                                <table align="center" cellpadding="3" cellspacing="0" style="font-weight: bold; width: 100%; border: 0px;">
                                    <tr>
                                        <td align="center" style="height: 14px" valign="middle">
                                            <asp:Label ID="lblStatus" runat="server" Font-Size="Small" ForeColor="Green" />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <asp:GridView
                                    ID="gvNoleggi"
                                    DataSourceID="sdsNoleggi"
                                    runat="server"
                                    CellPadding="0"
                                    CellSpacing="0"
                                    ShowHeader="true"
                                    ShowFooter="true"
                                    PageSize="20"
                                    Width="100%"
                                    BorderStyle="None"
                                    GridLines="Horizontal"
                                    AutoGenerateColumns="false"
                                    AllowSorting="true"
                                    AllowPaging="true"
                                    EmptyDataText="Nessun noleggio presente.">
                                    <SelectedRowStyle CssClass="SelRow" />
                                    <HeaderStyle CssClass="GridHeader" />
                                    <AlternatingRowStyle CssClass="AltRow" BackColor="#F7F5E9" />
                                    <Columns>
                                        <asp:TemplateField HeaderText="Numero" SortExpression="numero_noleggio">
                                            <ItemTemplate>
                                                <asp:HyperLink runat="server" ID="link_noleggio" NavigateUrl='<%# "~/NOLEGGIO/Noleggio.aspx?id_noleggio=" + Eval("id_noleggio")%>' Text='<%# Eval("numero_noleggio")%>' />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:BoundField DataField="modalita" HeaderText="Modalit&agrave;" />
                                        <asp:BoundField DataField="durata" HeaderText="Durata (gg)" SortExpression="durata" />
                                        <asp:BoundField DataField="giorni_lavorativi" HeaderText="Giorni lav." SortExpression="giorni_lavorativi" />
                                        <asp:TemplateField HeaderText="Veicolo" SortExpression="targa">
                                            <ItemTemplate>
                                                <asp:HyperLink runat="server" ID="link_veicolo" NavigateUrl='<%# "~/VEICOLI/AnagraficaVeicoli.aspx?id=" + Eval("id_veicolo")%>' Text='<%# Eval("targa")%>' />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:BoundField DataField="canone" HeaderText="Canone" SortExpression="canone" DataFormatString="{0:C2}" />


                                        <asp:BoundField DataField="importo_pratica" HeaderText="Importo pratica" SortExpression="importo_pratica" DataFormatString="{0:C2}" />

                                        <asp:BoundField DataField="aliquota" HeaderText="Aliquota" DataFormatString="{0}%" />

                                        <asp:BoundField DataField="importo_maturato" HeaderText="Importo maturato" SortExpression="importo_maturato" DataFormatString="{0:C2}" />

                                        <asp:BoundField DataField="importo_listino" HeaderText="Imp. listino" SortExpression="importo_listino" DataFormatString="{0:C2}" />
                                        <asp:BoundField DataField="sconto_listino" HeaderText="Sconto listino" SortExpression="sconto_listino" DataFormatString="{0}%" />

                                        <asp:TemplateField HeaderText="Convenzionato" SortExpression="ragione_sociale">
                                            <ItemTemplate>
                                                <asp:HyperLink runat="server" ID="link_convenzionato" NavigateUrl='<%# "~/ANAGRAFICHE/Convenzionati.aspx?id=" + Eval("id_convenzionato")%>' Text='<%# Eval("ragione_sociale")%>' />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <asp:Label runat="server" ID="lblTotaleNoleggi" Text="Numero totale noleggi: --" />
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <asp:Button runat="server" ID="_btnEsportaXLS" ClientIDMode="Static" Text="Esporta (XLS)" OnClick="btnEsportaXLS_Click" />
                            </td>
                        </tr>
                    </table>
                </div>
            </asp:Panel>
        </div>
    </div>
    <asp:SqlDataSource
        ID="sdsConvenzionati"
        runat="server"
        ConnectionString="<%$ ConnectionStrings:db %>"
        ProviderName="<%$ ConnectionStrings:db.ProviderName %>"
        SelectCommand="
        SELECT
            id,
            nome
        FROM
            anag_convenzionati
        WHERE
            ((data_cancellazione IS NULL) OR (data_cancellazione = ''))
        ORDER BY nome;" />
    <asp:SqlDataSource
        ID="sdsModalitaNoleggio"
        runat="server"
        ConnectionString="<%$ ConnectionStrings:db %>" 
        ProviderName="<%$ ConnectionStrings:db.ProviderName %>" 
        SelectCommand="
            SELECT 
                modalita_noleggio, 
                descrizione 
            FROM 
                tab_modalita_noleggio
            WHERE
                modalita_noleggio IN ('OPO','M','S')
            ORDER BY descrizione"></asp:SqlDataSource>
    <asp:SqlDataSource
        ID="sdsVeicoli"
        runat="server"
        EnableCaching="false"
        CancelSelectOnNullParameter="false"
        ConnectionString="<%$ ConnectionStrings:db %>" 
        ProviderName="<%$ ConnectionStrings:db.ProviderName %>" 
        SelectCommand="
            SELECT 
                id, 
                targa
            FROM 
                veicoli_contratti
            WHERE
                ((@id_convenzionato IS NULL) OR (id_convenzionato = @id_convenzionato))
                AND (data_cancellazione IS NULL) 
                AND (stato = 'OPERATIVA')
                AND (targa IS NOT NULL)
                AND NOT(targa = '')
            ORDER BY targa;">
        <SelectParameters>
            <asp:ControlParameter
                Name="id_convenzionato"
                ControlID="cbConvenzionato"
                PropertyName="SelectedValue"
                Direction="Input"
                ConvertEmptyStringToNull="true"
                DbType="Int32"
                DefaultValue="" />
        </SelectParameters>
    </asp:SqlDataSource>
    <asp:SqlDataSource
        ID="sdsNoleggi"
        runat="server"
        EnableCaching="false"
        CancelSelectOnNullParameter="false"
        ConnectionString="<%$ ConnectionStrings:db %>" 
        ProviderName="<%$ ConnectionStrings:db.ProviderName %>"         
        OnSelected="sdsNoleggi_Selected"
        SelectCommandType="StoredProcedure"
        SelectCommand="report_costo_veicoli">
        <SelectParameters>
            <asp:ControlParameter
                Name="_mese"
                Direction="Input"
                DbType="Int32"
                ControlID="hdnMese"
                PropertyName="Value"
                ConvertEmptyStringToNull="true"
                DefaultValue="" />
            <asp:ControlParameter
                Name="_anno"
                Direction="Input"
                DbType="Int32"
                ControlID="hdnAnno"
                PropertyName="Value"
                ConvertEmptyStringToNull="true"
                DefaultValue="" />
            <asp:ControlParameter
                Name="_id_convenzionato"
                Direction="Input"
                DbType="Int32"
                ControlID="cbConvenzionato"
                PropertyName="SelectedValue"
                ConvertEmptyStringToNull="true"
                DefaultValue="" />
            <asp:ControlParameter
                Name="_id_veicolo"
                Direction="Input"
                DbType="Int32"
                ControlID="ddlVeicoli"
                PropertyName="SelectedValue"
                ConvertEmptyStringToNull="true"
                DefaultValue="" />
            <asp:ControlParameter
                Name="_modalita_noleggio"
                Direction="Input"
                DbType="String"
                ControlID="ddlModalitaNoleggio"
                PropertyName="SelectedValue"
                ConvertEmptyStringToNull="true"
                DefaultValue="" />
            <asp:ControlParameter
                Name="_serie"
                Direction="Input"
                DbType="String"
                ControlID="txtSerie"
                PropertyName="Text"
                ConvertEmptyStringToNull="true"
                DefaultValue="" />
        </SelectParameters>
    </asp:SqlDataSource>
</asp:Content>

This's the .cs code:

using OfficeOpenXml;
using System;
using System.Data;
using System.Drawing;
using System.Globalization;
using System.Linq;
using System.Text;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using Utility;

namespace Intranet
{
    public partial class RptCostoVeicoli2 : Page
    {
        #region Private data

        private const string FILENAME = "Report_Costo_Veicoli.xlsx";
        private const string CURRENCY_FORMAT = "€ #,##0.00";

        #endregion

        #region Private methods

        private void GetMonths()
        {
            DateTime _date = DateTime.Now;

            ddlMese.Items.Add(
                new ListItem(
                    _date.AddMonths(-3).ToString("MMMM/yyyy", CultureInfo.GetCultureInfoByIetfLanguageTag("it")),
                    _date.AddMonths(-3).ToString("MM/yyyy")));

            ddlMese.Items.Add(
                new ListItem(
                    _date.AddMonths(-2).ToString("MMMM/yyyy", CultureInfo.GetCultureInfoByIetfLanguageTag("it")),
                    _date.AddMonths(-2).ToString("MM/yyyy")));

            ddlMese.Items.Add(
                new ListItem(
                    _date.AddMonths(-1).ToString("MMMM/yyyy", CultureInfo.GetCultureInfoByIetfLanguageTag("it")),
                    _date.AddMonths(-1).ToString("MM/yyyy")));

            ListItem _selectedItem = new ListItem(
                    _date.ToString("MMMM/yyyy", CultureInfo.GetCultureInfoByIetfLanguageTag("it")),
                    _date.ToString("MM/yyyy"))
            {
                Selected = true
            };

            ddlMese.Items.Add(_selectedItem);
            hdnAnno.Value = _date.ToString("yyyy");
            hdnMese.Value = _date.ToString("MM");
        }

        private void Ricerca()
        {
            sdsNoleggi.Select(DataSourceSelectArguments.Empty);
        }

        #endregion

        #region Event handlers

        protected void Page_Load(object sender, EventArgs e)
        {
            lblStatus.ForeColor = Color.Green;

            if (!IsPostBack)
            {
                ddlMese.Items.Clear();
                GetMonths();
            }
        }

        protected void btnLogout_Click(object sender, EventArgs e)
        {
            Response.Redirect("/Login.aspx");
        }

        protected void sdsNoleggi_Selected(object sender, SqlDataSourceStatusEventArgs e)
        {
            lblTotaleNoleggi.Text = string.Format("Numero totale noleggi: {0}", e.AffectedRows);
        }

        protected void cbConvenzionato_SelectedIndexChanged(object sender, EventArgs e)
        {
            ddlVeicoli.DataSource = null;

            sdsVeicoli.Select(DataSourceSelectArguments.Empty);

            ddlVeicoli.DataSource = sdsVeicoli;
            ddlVeicoli.DataBind();

            Ricerca();
        }

        protected void txtSerie_TextChanged(object sender, EventArgs e)
        {
            Ricerca();
        }

        protected void ddlVeicoli_SelectedIndexChanged(object sender, EventArgs e)
        {
            Ricerca();
        }

        protected void ddlModalitaNoleggio_SelectedIndexChanged(object sender, EventArgs e)
        {
            Ricerca();
        }

        protected void ddlMese_SelectedIndexChanged(object sender, EventArgs e)
        {
            Ricerca();
        }

        #endregion
    }

This's the javascript code:

function setMeseAnno() {
    var _data = $('#ddlMese').val();

    var _tokens = _data.split("/");

    if (_tokens.length >= 2) {
        $('#hdnAnno')
            .val(_tokens[1]);

        $('#hdnMese')
            .val(_tokens[0]);
    }
}

I'm unable to post a picture inside this message... 

Answer 4

User1535942433 posted

Hi weirdgyn1972,

What's the version of your ajaxcontroltoolkit? I have created a test of version of 20.1.0 and version of 7.1005.0.

And the result is the version of 20.1.0 combobox could work fine and the version of 7.1005.0 break. So,I suggest you could use the newest version.

Best regards,

Yijing Sun

Answer 5

User-1939834628 posted

Yes ! thanks the problem was the toolkit version. Thank you!

I installed 20.1.0 and everything works now.