card layout with multiple content

[KINS]

I have an sfcard in my blazor web applications.I would like to make data entry page with sfcard.please check my below requirement in sfcard. Also please check attached image for your reference.

1.Button should be card header (right side save button)

2.Need multiple card content with content title (refer image)

3.Each card content contains syncfusion control (refer image )

4.need scrollable option in card if control is more

( no page is scoll, it should scroll only inside the card)

Attachment: Untitled_7089fb9f.rar

[Vinitha Jeyakumar]

Hi Kins, 

 

 

Greetings from Syncfusion support 

 

 

We have validated your query “card layout with multiple content” 

 

We have checked the image you have attached, validated your requirement, and tried to meet your need using the Card component. We have also prepared a sample for your reference, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/168602/ze/Card_Scroll-239849791 

 

Please check the sample and let us know if it meets your requirement. 

 

Regards, 

Vinitha. 

 

[KINS]

Thanks for reply...

It works fine as per our requirement.

I have another two clarification.

1.How to maximize (full screen mode when I click on card) and minimize card (normal position)

2.How to do global search (find text in any card).

[Vinitha Jeyakumar]

Hi Kins,

Query 1. "How to maximize and minimize card (normal position)"

We have created a sample as per your requirement to maximize and minimize the card by clicking the respective buttons using jsInterop. please check the code below,

Code snippet:

index.razor

@inject IJSRuntime jsRuntime  

@using Syncfusion.Blazor.Cards  

  

<SfCard>  

    <CardHeader>  

        <div class="btn">  

            <button @onclick="max">Maximize</button>  

            <button @onclick="min">Minimize</button>  

        </div>  

    </CardHeader>  

    <CardContent>You can maximize and minimize the card</CardContent>  

</SfCard>  

@code  

{  

    public async Task max()  

    {  

        await jsRuntime.InvokeAsync<object>("accessDOMElement");  

    }  

    public async Task min()  

    {  

        await jsRuntime.InvokeAsync<object>("accessDOMElement1");  

    }  

}  

 

Host.cshtml

<script>  

        var card = document.getElementsByClassName('e-card')[0];  

        function accessDOMElement() {  

  

            var card = document.getElementsByClassName('e-card')[0];  

            card.classList.add("maximize");  

            /*card.classList.add("maximize");*/  

        }  

        function accessDOMElement1() {  

  

            var card = document.getElementsByClassName('e-card')[0];  

            if (card.classList.contains('maximize')) {  

                card.classList.remove('maximize');  

            }  

  

        }  

    </script>  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Card_Max_min-75327485

Query 2. "How to do global search (find text in any card)"

We want to let you know that we didn't have any support to search within a Card. 

But, to search texts globally in any Card can be achieved by pressing Ctrl+F (on Windows PC, Chromebook, or Linux system), or Command+F (on a Mac) on the keyboard. The “F” stands for “Find,” and it works in every browser.

Please let us know if you have any concerns.

Regards,

Vinitha

[KINS]

Thanks for reply...

Regarding global search 

Can I add card in gridview as a template??

If I can add card in template, then I can use grid global search to find text in card...

[KINS]

I am getting this error.pls help

blazor.webassembly.js:1 crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]

      Unhandled exception rendering component: Cannot read properties of undefined (reading 'querySelector')

      TypeError: Cannot read properties of undefined (reading 'querySelector')

          at accessDOMElement (https://localhost:44317/:143:69)

          at https://localhost:44317/_framework/blazor.webassembly.js:1:3942

          at new Promise (<anonymous>)

          at Object.beginInvokeJSFromDotNet (https://localhost:44317/_framework/blazor.webassembly.js:1:3908)

          at Object.w [as invokeJSFromDotNet] (https://localhost:44317/_framework/blazor.webassembly.js:1:64218)

          at _mono_wasm_invoke_js_blazor (https://localhost:44317/_framework/dotnet.5.0.6.js:1:190800)

          at do_icall (wasm://wasm/00aba242:wasm-function[10596]:0x194e4e)

          at do_icall_wrapper (wasm://wasm/00aba242:wasm-function[3305]:0x79df9)

          at interp_exec_method (wasm://wasm/00aba242:wasm-function[2155]:0x44ad3)

          at interp_runtime_invoke (wasm://wasm/00aba242:wasm-function[7862]:0x12efff)

Microsoft.JSInterop.JSException: Cannot read properties of undefined (reading 'querySelector')

TypeError: Cannot read properties of undefined (reading 'querySelector')

    at accessDOMElement (https://localhost:44317/:143:69)

    at https://localhost:44317/_framework/blazor.webassembly.js:1:3942

    at new Promise (<anonymous>)

    at Object.beginInvokeJSFromDotNet (https://localhost:44317/_framework/blazor.webassembly.js:1:3908)

    at Object.w [as invokeJSFromDotNet] (https://localhost:44317/_framework/blazor.webassembly.js:1:64218)

    at _mono_wasm_invoke_js_blazor (https://localhost:44317/_framework/dotnet.5.0.6.js:1:190800)

    at do_icall (wasm://wasm/00aba242:wasm-function[10596]:0x194e4e)

    at do_icall_wrapper (wasm://wasm/00aba242:wasm-function[3305]:0x79df9)

    at interp_exec_method (wasm://wasm/00aba242:wasm-function[2155]:0x44ad3)

    at interp_runtime_invoke (wasm://wasm/00aba242:wasm-function[7862]:0x12efff)

   at Microsoft.JSInterop.JSRuntime.<InvokeAsync>d__15`1[[System.Object, System.Private.CoreLib, Version=5.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].MoveNext()

   at ONEERP.Web.Pages.Material.MaterialImageSearchListBase.max() in D:\OneErp\ONEERP.Web\ONEERP.Web\Pages\Material\MaterialImageSearchList.razor.cs:line 180

   at ONEERP.Web.Pages.Material.MaterialImageSearchListBase.ZoomInOut(MenuEventArgs args) in D:\OneErp\ONEERP.Web\ONEERP.Web\Pages\Material\MaterialImageSearchList.razor.cs:line 174

   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

   at Syncfusion.Blazor.SplitButtons.Internal.DropDownMenu.TriggerEvent(EventArgs e, DropDownMenuItem item)

   at Syncfusion.Blazor.SplitButtons.Internal.DropDownMenu.ClickHandler(MouseEventArgs e, DropDownMenuItem item)

   at Syncfusion.Blazor.SplitButtons.Internal.DropDownMenu.<>c__DisplayClass30_0.<<BuildRenderTree>b__1>d.MoveNext()

--- End of stack trace from previous location ---

   at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)

d.printErr @ blazor.webassembly.js:1

d.preRun.push.window.Blazor._internal.dotNetCriticalError @ blazor.webassembly.js:1

w @ blazor.webassembly.js:1

_mono_wasm_invoke_js_blazor @ dotnet.5.0.6.js:1

$do_icall @ 00aba242:0x194e4e

$do_icall_wrapper @ 00aba242:0x79df9

$interp_exec_method @ 00aba242:0x44ad3

$interp_runtime_invoke @ 00aba242:0x12efff

$mono_jit_runtime_invoke @ 00aba242:0x118e5f

$do_runtime_invoke @ 00aba242:0x79d42

$mono_runtime_try_invoke @ 00aba242:0x12982

$mono_runtime_invoke @ 00aba242:0x10ec2b

$mono_wasm_invoke_method @ 00aba242:0x108e48

Module._mono_wasm_invoke_method @ dotnet.5.0.6.js:1

call_method @ dotnet.5.0.6.js:1

(anonymous) @ dotnet.5.0.6.js:1

endInvokeJSFromDotNet @ blazor.webassembly.js:1

(anonymous) @ blazor.webassembly.js:1

Promise.then (async)

beginInvokeJSFromDotNet @ blazor.webassembly.js:1

w @ blazor.webassembly.js:1

_mono_wasm_invoke_js_blazor @ dotnet.5.0.6.js:1

$do_icall @ 00aba242:0x194e4e

$do_icall_wrapper @ 00aba242:0x79df9

$interp_exec_method @ 00aba242:0x44ad3

$interp_runtime_invoke @ 00aba242:0x12efff

$mono_jit_runtime_invoke @ 00aba242:0x118e5f

$do_runtime_invoke @ 00aba242:0x79d42

$mono_runtime_invoke_checked @ 00aba242:0xf65d

$mono_runtime_try_invoke_array @ 00aba242:0x10e831

$ves_icall_InternalInvoke @ 00aba242:0xed492

$ves_icall_InternalInvoke_raw @ 00aba242:0xecf57

$do_icall @ 00aba242:0x194ddb

$do_icall_wrapper @ 00aba242:0x79df9

$interp_exec_method @ 00aba242:0x44ad3

$interp_runtime_invoke @ 00aba242:0x12efff

$mono_jit_runtime_invoke @ 00aba242:0x118e5f

$do_runtime_invoke @ 00aba242:0x79d42

$mono_runtime_invoke_checked @ 00aba242:0xf65d

$mono_runtime_try_invoke_array @ 00aba242:0x10e831

$ves_icall_InternalInvoke @ 00aba242:0xed492

$ves_icall_InternalInvoke_raw @ 00aba242:0xecf57

$do_icall @ 00aba242:0x194ddb

$do_icall_wrapper @ 00aba242:0x79df9

$interp_exec_method @ 00aba242:0x44ad3

$interp_runtime_invoke @ 00aba242:0x12efff

$mono_jit_runtime_invoke @ 00aba242:0x118e5f

$do_runtime_invoke @ 00aba242:0x79d42

$mono_runtime_invoke_checked @ 00aba242:0xf65d

$mono_runtime_try_invoke_array @ 00aba242:0x10e831

$ves_icall_InternalInvoke @ 00aba242:0xed492

$ves_icall_InternalInvoke_raw @ 00aba242:0xecf57

$do_icall @ 00aba242:0x194ddb

$do_icall_wrapper @ 00aba242:0x79df9

$interp_exec_method @ 00aba242:0x44ad3

$interp_runtime_invoke @ 00aba242:0x12efff

$mono_jit_runtime_invoke @ 00aba242:0x118e5f

$do_runtime_invoke @ 00aba242:0x79d42

$mono_runtime_try_invoke @ 00aba242:0x12982

$mono_runtime_invoke @ 00aba242:0x10ec2b

$mono_wasm_invoke_method @ 00aba242:0x108e48

Module._mono_wasm_invoke_method @ dotnet.5.0.6.js:1

call_method @ dotnet.5.0.6.js:1

(anonymous) @ dotnet.5.0.6.js:1

beginInvokeDotNetFromJS @ blazor.webassembly.js:1

h @ blazor.webassembly.js:1

e.invokeMethodAsync @ blazor.webassembly.js:1

(anonymous) @ blazor.webassembly.js:1

invokeWhenHeapUnlocked @ blazor.webassembly.js:1

(anonymous) @ blazor.webassembly.js:1

t.dispatchEvent @ blazor.webassembly.js:1

(anonymous) @ blazor.webassembly.js:1

(anonymous) @ blazor.webassembly.js:1

e.onGlobalEvent @ blazor.webassembly.js:1

Show 43 more frames

[Buvana Sathasivam]

Hi KINS, 

Query #1: “Can I add card in gridview as a template?? If I can add card in template, then I can use grid global search to find text in card...” 

Yes, we can add a card component or any component inside the DataGrid component using templates (either row template or column template). But data operations like filtering, sorting, and searching will take place based on the field property defined in GridColumn (if a column template is used) and existing in the datasource. 

If a RowTemplate is used, data operations like filtering, sorting, and searching will take place based on the datasource value only, not based on content inside the template. So it will not be possible to perform a search operation based on the content rendered inside the Grid template. 

Refer to the below UG documentation for your reference.  

Column Template: https://blazor.syncfusion.com/documentation/datagrid/column-template 

Row Template: https://blazor.syncfusion.com/documentation/datagrid/row-template#row-template-with-formatting 

Query #2: “I am getting this error” 

 

We suspect that you have enabled the IgnoreScriptIsolation set to true in the Program.cs file. So, you need to properly reference the script file like below. 

https://blazor.syncfusion.com/documentation/common/adding-script-references 

If you still have an issue, could you please share your _Layout.cshtml and package version? 

Regards, 

Buvana S 

[KINS]

Thanks for quick support..

As per below link,how to manage paging in card which is generated in loop.

https://www.syncfusion.com/downloads/support/forum/168602/ze/Card_Scroll-239849791

For example):-

I have totally 100 card with image .I would like to load 10 card on initial load, when i scroll down then ut should load again 10 records respectively.

[Buvana Sathasivam]

Hi KINS, 

We have achieved your requirement using Blazor built-in virtualization support with the Virtualize component. It renders 10 cards on initial loading at the DOM element, and the remaining cards will appear when you scroll down the page. Please see below the code and sample. 

Index.razor 

<Virtualize ItemsProvider="LoadCardDetails" Context="cards"> 

<SfCard> 

 

    <CardHeader> 

        <div class="col 10 m10 l10" style="text-align: right;"> 

            <div>@cards.CardName</div> 

            <SfButton CssClass="mr-1">Save</SfButton> 

 

        </div> 

    </CardHeader> 

     

     

    <CardContent> 

        <h3>Card Header 1</h3> 

        <div class="row" style="padding-left: 175px"> 

 

            <div class="column" style="width: 75%;padding-left: 50px"> 

                <div class="row" style="width:100%"> 

                     <div>@cards.CardContent</div> 

                    ….. 

               </div> 

                <br /> 

                 

                ….. 

           </div> 

        </div> 

   </CardContent> 

</SfCard> 

</Virtualize> 

 

@code{ 

    private List<CardDetails> cards; 

 

        protected override async Task OnInitializedAsync() 

        { 

            cards = await GetCardDetails(); 

        } 

        private async ValueTask<ItemsProviderResult<CardDetails>> LoadCardDetails(ItemsProviderRequest request) 

        { 

            var cards = await GetCardDetails(); 

            return new ItemsProviderResult<CardDetails>(cards.Skip(request.StartIndex).Take(10), cards.Count()); // Taken 10 cards when page scroll 

        } 

        private async Task<List<CardDetails>> GetCardDetails() 

        { 

            List<CardDetails> cardList = new List<CardDetails>(); 

            List<string> roleList = new List<string>() { ".Net Developer", "Testing Engineer", "Graphic Designer", "Technical Writer", "Support Coordinator" }; 

            int roleArrayIndex = 0; 

            int tempCount = 0; 

            int cardDataCount = 100; 

 

            for (int i = 1; i <= cardDataCount; i++) 

            { 

                if (i > tempCount + cardDataCount / roleList.Count()) 

                { 

                    roleArrayIndex++; 

                    tempCount = i - 1; 

                } 

 

                var cardDetails = new CardDetails() 

                { 

                    CardId = i, 

                    CardName = "Card " + i.ToString(), 

                    CardContent = roleList[roleArrayIndex] 

                }; 

 

                cardList.Add(cardDetails); 

            } 

            return await Task.FromResult(cardList); 

        } 

 

     public class CardDetails 

        { 

            public int CardId { get; set; } 

 

            public string CardName { get; set; } 

 

            public string CardContent { get; set; } 

        } 

    

} 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Card684373567 

Link: https://docs.microsoft.com/en-us/aspnet/core/blazor/components/virtualization?view=aspnetcore-6.0 

Please let us know if you have any further assistance. 

Regards, 

Buvana S