Docs: Virtualize and ReadData example for Autocomplete

Documentation/Blazorise.Docs/Models/Snippets.generated.cs

@@ -5715,6 +5715,48 @@ protected override async Task OnInitializedAsync()
     List<string> multipleSelectionTexts;
 }";
 
+        public const string AutocompleteVirtualizeAndReadDataExample = @"<Autocomplete TItem=""Country""
+              TValue=""string""
+              Data=""@ReadDataCountries""
+              TotalItems=""totalCountries""
+              TextField=""@(( item ) => item.Name)""
+              ValueField=""@((item) => item.Iso)""
+              @bind-SelectedValue=""@SelectedSearchValue""
+              Placeholder=""Search...""
+              Virtualize
+              ReadData=""@OnHandleReadData"">
+    <NotFoundContent> Sorry... @context was not found! :( </NotFoundContent>
+</Autocomplete>
+@code {
+    [Inject]
+    public CountryData CountryData { get; set; }
+
+    public IEnumerable<Country> Countries;
+    IEnumerable<Country> ReadDataCountries;
+    int totalCountries;
+
+    public string SelectedSearchValue { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        Countries = await CountryData.GetDataAsync();
+        totalCountries = Countries.Count();
+        await base.OnInitializedAsync();
+    }
+
+    private Task OnHandleReadData( AutocompleteReadDataEventArgs autocompleteReadDataEventArgs )
+    {
+        if ( !autocompleteReadDataEventArgs.CancellationToken.IsCancellationRequested )
+        {
+            ReadDataCountries = Countries
+                .Where(x => x.Name.StartsWith(autocompleteReadDataEventArgs.SearchValue, StringComparison.InvariantCultureIgnoreCase))
+                .Skip(autocompleteReadDataEventArgs.VirtualizeOffset).Take(autocompleteReadDataEventArgs.VirtualizeCount);
+        }
+
+        return Task.CompletedTask;
+    }
+}";
+
         public const string AutocompleteVirtualizeExample = @"<Autocomplete TItem=""Country""
               TValue=""string""
               Data=""@Countries""

Documentation/Blazorise.Docs/Pages/Docs/Extensions/Autocomplete/AutocompletePage.razor

@@ -128,4 +128,27 @@
     <DocsPageSectionSource Code="AutocompleteVirtualizeExample" />
 </DocsPageSection>
 
+<DocsPageSection>
+    <DocsPageSectionHeader Title="Virtualize with ReadData">
+        <Paragraph>
+            Blazorise Autocomplete's <Code>Virtualize</Code> and <Code>ReadData</Code> features work together to handle large datasets efficiently.
+            The <Code>ReadData</Code> event allows you to load only the data needed for the current interaction, without loading the entire dataset into memory.
+            Meanwhile, the <Code>Virtualize</Code> property ensures that only the visible items are rendered in the DOM, significantly improving performance when working with large lists.
+        </Paragraph>
+        <Paragraph>
+            In the provided example, the dataset is represented using <Code>IEnumerable</Code> for simplicity, but in real-world scenarios, you would typically use <Code>IQueryable</Code>.
+            This allows for true deferred execution, ensuring only the required data is fetched and processed.
+        </Paragraph>
+        <Paragraph>
+            To enable <Code>Virtualize</Code> with <Code>ReadData</Code>, you must also set the <Code>TotalItems</Code> property.
+            The <Code>TotalItems</Code> value represents the total count of items in your dataset and is required for proper virtualization.
+        </Paragraph>
+    </DocsPageSectionHeader>
+    <DocsPageSectionContent Outlined FullWidth>
+        <AutocompleteVirtualizeAndReadDataExample />
+    </DocsPageSectionContent>
+    <DocsPageSectionSource Code="AutocompleteVirtualizeAndReadDataExample" />
+</DocsPageSection>
+
+
 <ComponentApiDocs ComponentTypes="[typeof(Autocomplete<,>)]" />

Documentation/Blazorise.Docs/Pages/Docs/Extensions/Autocomplete/Code/AutocompleteVirtualizeAndReadDataExampleCode.html

@@ -0,0 +1,47 @@
+<div class="blazorise-codeblock">
+<div class="html"><pre>
+<span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">Autocomplete</span> <span class="htmlAttributeName">TItem</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Country</span><span class="quot">&quot;</span>
+              <span class="htmlAttributeName">TValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">string</span><span class="quot">&quot;</span>
+              <span class="htmlAttributeName">Data</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>ReadDataCountries</span><span class="quot">&quot;</span>
+              <span class="htmlAttributeName">TotalItems</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">totalCountries</span><span class="quot">&quot;</span>
+              <span class="htmlAttributeName">TextField</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>(( item ) =&gt; item.Name)</span><span class="quot">&quot;</span>
+              <span class="htmlAttributeName">ValueField</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue"><span class="atSign">&#64;</span>((item) =&gt; item.Iso)</span><span class="quot">&quot;</span>
+              <span class="htmlAttributeName"><span class="atSign">&#64;</span>bind-SelectedValue</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>SelectedSearchValue</span><span class="quot">&quot;</span>
+              <span class="htmlAttributeName">Placeholder</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="htmlAttributeValue">Search...</span><span class="quot">&quot;</span>
+              <span class="htmlAttributeName">Virtualize</span>
+              <span class="htmlAttributeName">ReadData</span><span class="htmlOperator">=</span><span class="quot">&quot;</span><span class="sharpVariable"><span class="atSign">&#64;</span>OnHandleReadData</span><span class="quot">&quot;</span><span class="htmlTagDelimiter">&gt;</span>
+    <span class="htmlTagDelimiter">&lt;</span><span class="htmlElementName">NotFoundContent</span><span class="htmlTagDelimiter">&gt;</span> Sorry... <span class="atSign">&#64;</span>context was not found! :( <span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">NotFoundContent</span><span class="htmlTagDelimiter">&gt;</span>
+<span class="htmlTagDelimiter">&lt;/</span><span class="htmlElementName">Autocomplete</span><span class="htmlTagDelimiter">&gt;</span>
+</pre></div>
+<div class="csharp"><pre>
+<span class="atSign">&#64;</span>code {
+    [Inject]
+    <span class="keyword">public</span> CountryData CountryData { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+
+    <span class="keyword">public</span> IEnumerable&lt;Country&gt; Countries;
+    IEnumerable&lt;Country&gt; ReadDataCountries;
+    <span class="keyword">int</span> totalCountries;
+
+    <span class="keyword">public</span> <span class="keyword">string</span> SelectedSearchValue { <span class="keyword">get</span>; <span class="keyword">set</span>; }
+
+    <span class="keyword">protected</span> <span class="keyword">override</span> <span class="keyword">async</span> Task OnInitializedAsync()
+    {
+        Countries = <span class="keyword">await</span> CountryData.GetDataAsync();
+        totalCountries = Countries.Count();
+        <span class="keyword">await</span> <span class="keyword">base</span>.OnInitializedAsync();
+    }
+
+    <span class="keyword">private</span> Task OnHandleReadData( AutocompleteReadDataEventArgs autocompleteReadDataEventArgs )
+    {
+        <span class="keyword">if</span> ( !autocompleteReadDataEventArgs.CancellationToken.IsCancellationRequested )
+        {
+            ReadDataCountries = Countries
+                .Where(x =&gt; x.Name.StartsWith(autocompleteReadDataEventArgs.SearchValue, StringComparison.InvariantCultureIgnoreCase))
+                .Skip(autocompleteReadDataEventArgs.VirtualizeOffset).Take(autocompleteReadDataEventArgs.VirtualizeCount);
+        }
+
+        <span class="keyword">return</span> Task.CompletedTask;
+    }
+}
+</pre></div>
+</div>

Documentation/Blazorise.Docs/Pages/Docs/Extensions/Autocomplete/Examples/AutocompleteVirtualizeAndReadDataExample.razor

@@ -0,0 +1,43 @@
+@namespace Blazorise.Docs.Docs.Examples
+
+<Autocomplete TItem="Country"
+              TValue="string"
+              Data="@ReadDataCountries"
+              TotalItems="totalCountries"
+              TextField="@(( item ) => item.Name)"
+              ValueField="@((item) => item.Iso)"
+              @bind-SelectedValue="@SelectedSearchValue"
+              Placeholder="Search..."
+              Virtualize
+              ReadData="@OnHandleReadData">
+    <NotFoundContent> Sorry... @context was not found! :( </NotFoundContent>
+</Autocomplete>
+@code {
+    [Inject]
+    public CountryData CountryData { get; set; }
+
+    public IEnumerable<Country> Countries;
+    IEnumerable<Country> ReadDataCountries;
+    int totalCountries;
+
+    public string SelectedSearchValue { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        Countries = await CountryData.GetDataAsync();
+        totalCountries = Countries.Count();
+        await base.OnInitializedAsync();
+    }
+
+    private Task OnHandleReadData( AutocompleteReadDataEventArgs autocompleteReadDataEventArgs )
+    {
+        if ( !autocompleteReadDataEventArgs.CancellationToken.IsCancellationRequested )
+        {
+            ReadDataCountries = Countries
+                .Where(x => x.Name.StartsWith(autocompleteReadDataEventArgs.SearchValue, StringComparison.InvariantCultureIgnoreCase))
+                .Skip(autocompleteReadDataEventArgs.VirtualizeOffset).Take(autocompleteReadDataEventArgs.VirtualizeCount);
+        }
+
+        return Task.CompletedTask;
+    }
+}