Add Column for QR Code Generator in Data Grid

[Nelson Tan]

Good Day to All,

It is possible to add column for QR Code Generator?, the concept is when adding Item Code using barcode scanner then click tab to automatically generate QR Code for Item Code?, please check image below.

Thanks in Advance :)

Nelson

[Vignesh Natarajan]

Hi Nelson,  

 

Greetings from Syncfusion support.  

 

Query: “the concept is when adding Item Code using barcode scanner then click tab to automatically generate QR Code for Item Code?” 

 

We have analyzed your query and we understand that you want to display QR Code while inserting a record based on ItemCode value. We have achieved your requirement using CellTemplate feature of Grid. Cell/Column template feature is  used to display custom component inside the Grid column. Using this feature, we have rendered the QrCodeGenerator component inside the Grid column. QRCode will be udpated once the ItemCode value is updated in batch mode.   

 

Refer the below code example.  

 

<SfGrid DataSource="@Employees" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings>     

    <GridColumns> 

        <GridColumn HeaderText="Employee Image" TextAlign="TextAlign.Center" Width="120"> 

            <Template> 

                @{ 

                    var employee = (context as EmployeeData); 

                    <div class="image"> 

                        <SfQRCodeGenerator Width="200px" Height="150px" Value="@(employee.EmployeeID.ToString())"></SfQRCodeGenerator> 

                    </div> 

                } 

            </Template> 

        </GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" IsPrimaryKey="true" DefaultValue="@(Employees.Max(x=>x.EmployeeID) + 1)" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.HireDate) HeaderText="Hire Date" Format="d" TextAlign="TextAlign.Right" Width="150"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/columns#column-template 

https://blazor.syncfusion.com/documentation/barcode/qrcodegenerator 

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan 

[Nelson Tan]

Good Day Mr. Vignesh Natarajan,

Thanks for the reply.. :)

Nelson

[Nelson Tan]

Good Day,

How can i remove QR Code name?

Thanks in Advance :)

Nelson

[Vignesh Natarajan]

Hi Nelson,  

 

Thanks for the update.  

 

Query: “How can i remove QR Code name?” 

 

We suggest you to achieve your requirement by defining the empty blank space string in Text property of QrCodeGeneratorTextDisplay component. Refer the below code example. 

 

<SfGrid DataSource="@Employees" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 

    <GridColumns> 

        <GridColumn HeaderText="Employee Image" TextAlign="TextAlign.Center" Width="120"> 

            <Template> 

                @{ 

                    var employee = (context as EmployeeData); 

                    <div class="image"> 

                        <SfQRCodeGenerator Width="200px" Height="150px" Value="@(employee.FirstName)"> 

                            <QRCodeGeneratorDisplayText Text=" "></QRCodeGeneratorDisplayText> 

                        </SfQRCodeGenerator> 

                    </div> 

                } 

            </Template> 

        </GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" IsPrimaryKey="true" DefaultValue="@(Employees.Max(x=>x.EmployeeID) + 1)" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.HireDate) HeaderText="Hire Date" Format="d" TextAlign="TextAlign.Right" Width="150"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

 

Refer the below UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/barcode/qrcodegenerator#customizing-the-text  

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan 

[Nelson Tan]

Hello Sir Vignesh Natarajan,

Thanks for quick reply :)

I have another question..

How can i add column for Item image and when adding Item Code using barcode scanner then click tab to automatically add item image for Item Code?, it is possible when i click item image it will zoom in or it will zoom into large image?

Thanks again

Nelson

[Vignesh Natarajan]

Hi Nelson,  

 

Thanks for the update.  

 

Query: “How can i add column for Item image and when adding Item Code using barcode scanner then click tab to automatically add item image for Item Code?” 

 

We are quite unclear about your requirement. So kindly share more details along with the following details.  

 

1. Do you want to insert the record automatically with ItemCode value while scanning the barcode scanner?
2. Or do you have requirement to show the image column in Grid while inserting a record?
3. Share more details about your requirement with pictorial representation.

 

Above requested details will be very helpful in analyzing your requirement at our end and provide solution as early as possible.      

 

Query : “it is possible when i click item image it will zoom in or it will zoom into large image?” 

 

We have analyzed your query and we do not have direct support to zoom in to show large image while clicking the QrCode. So we have achieved your requirement by display a custom dialog with QrCodeGenerator component inside it while clicking on QrCode in Grid column.  

 

Refer the below code example.  

 

<SfGrid DataSource="@Employees" Toolbar="@(new List<string>() { "Add", "Delete", "Update", "Cancel" })" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Batch"></GridEditSettings> 

    <GridColumns> 

        <GridColumn HeaderText="Employee Image" TextAlign="TextAlign.Center" Width="120"> 

            <Template> 

                @{ 

                    var employee = (context as EmployeeData); 

                    <div class="image" @onclick="@(()=>openDialog(employee.FirstName))"> 

                        <SfQRCodeGenerator Width="200px" Height="150px" Value="@(employee.FirstName)"> 

                            <QRCodeGeneratorDisplayText Text=" "></QRCodeGeneratorDisplayText> 

                        </SfQRCodeGenerator> 

                    </div> 

                } 

            </Template> 

        </GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.EmployeeID) HeaderText="Employee ID" IsPrimaryKey="true" DefaultValue="@(Employees.Max(x=>x.EmployeeID) + 1)" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.FirstName) HeaderText="First Name" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(EmployeeData.HireDate) HeaderText="Hire Date" Format="d" TextAlign="TextAlign.Right" Width="150"></GridColumn> 

    </GridColumns> 

</SfGrid> 

  

<style> 

    .image img { 

        height: 55px; 

        width: 55px; 

        border-radius: 50px; 

        box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0, 0, 0, 0.2); 

    } 

</style> 

  

<SfDialog Width="300px" IsModal="true" @bind-Visible="@IsVisible"> 

    <DialogEvents OnOverlayClick="@OnOverlayclick"> 

    </DialogEvents> 

    <DialogTemplates> 

        <Content> 

            <SfQRCodeGenerator Width="250px" Height="250px" Value="@(QRValue)"> 

                <QRCodeGeneratorDisplayText Text=" "></QRCodeGeneratorDisplayText> 

            </SfQRCodeGenerator> 

        </Content> 

    </DialogTemplates> 

</SfDialog> 

  

@code{ 

    public List<EmployeeData> Employees { get; set; } 

  

    public string Check { get; set; } = ""; 

    public string QRValue { get; set; } = ""; 

  

    private bool IsVisible { get; set; } = false; 

  

    private void openDialog(string value) 

    { 

        QRValue = value; 

        this.IsVisible = true; 

    } 

  

    private void OnOverlayclick(MouseEventArgs arg) 

    { 

  

        this.IsVisible = false; 

    } 

 

 

Refer the below screenshot for output of above code example.  

 

 

 

Kindly refer the below sample for your reference 

 

Sample: https://www.syncfusion.com/downloads/support/forum/169146/ze/DataGrid_Server469409969.zip 

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/dialog/getting-started#modal-dialog  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Nelson Tan]

Good Day Sir Vignesh Natarajan,

Thanks for the reply..

I mean another column for Image saved in sql server, not  in QR Code column..

But thanks i know now about how to enlarge image icon..

Nelson :)

[Vignesh Natarajan]

Hi Nelson,  

 

Thanks for the update.  

 

Query: “I mean another column for Image saved in sql server, not  in QR Code column..” 

 

We have already documented this topic in our UG documentation to display a image in Grid Column. Kindly efer the below Ug documentation for your reference  

 

https://blazor.syncfusion.com/documentation/datagrid/columns#column-template 

 

Please get back to us if you have further queries or if above solution does not match you requirement, kindly share more details how image is stored ( image type) in your SQL server.   

 

Regards, 

Vignesh Natarajan 

[Nelson Tan]

Good Day Sir Vignesh Natarajan,

My question is how can extend color in Nav Menu?

Thanks in Advance..

Nelson

[Vignesh Natarajan]

Hi Nelson,  

 

Query: “My question is how can extend color in Nav Menu?” 

 

We need some more details about your requirement. So kindly share the following details.  

 

1. Are you facing the reported issue while using our Syncfusion MenuBar component.
2. Or facing the reported issue with default Blazor NavMenu component?.
3. Share more details about your Nav Menu bar.

 

Above details will be very helpful in validating the reported query at our end and provide solution as early as possible.  

 

Regards, 

Vignesh Natarajan 

[Nelson Tan]

Good Day Vignesh Natarajan,

Please check the file thanks..

Nelson

Attachment: For_Blazor_nav_menu_93301b48.rar

[Vignesh Natarajan]

Hi Nelson,  

 

Thanks for sharing the requested details.   

 

Query: “Please check the file thanks..” 

 

We have analyzed the shared files and found that you are using Blazor NavMenu component. We suggest you to resolve your query by removing the below style (height property to sidebar component ) in MainLayout.razor.css file (if created in Dotnet 5.0).  

 

.sidebar { 

       width: 250px; 

       /*height: 100vh;*/ 

       position: sticky; 

       top: 0; 

   } 

 

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan