Data entry wireframe

[KINS]

Our Team is very interested to develope Blazor Web application using synfusion control.We have seen some third party vendor link devexpress and telerik but we are intrested for using synfusion control because of quick support of any question.Actually we are planning to develope web applocation using Blazor synfusion control.we need some help from synfusion support team for creating simple data entry page .For that I have created data entry wireframe which contain List Page and Entry Page.so Please create an one page as per wireframe attached in pdf format.

Pdf Note:-

1.First page contain List Page in pdf file

2.second page contain Data Entry form which contain Header information and detail information in multiple Tab like (SizeBreak,BOM,Process Spec,Attachment,Comments,communication)

3. Each Tab contain an one grid control and "add new button"

4.No need to refer from third page in PDF file

General Note:-

1.We need only designing help (razor page) not as .cs file (we will do this our own).

2.just we need list.razor and entry. razor only

Attachment: SRF_d9b5b347.rar

[Muthukumar Kannan]

Hi Ismail,  

Thanks for contacting Syncfusion support.  

Currently, we are validating your requirement for creating data entry page with Syncfusion blazor components by referring the shared pdf information.  However, we will update the further details and information about this within 2 business days until then we appreciate your patience.  

Please let us know if you have any concerns.  

Regards,  

Muthukumar K 

[KINS]

Thanks for reply... 

Awaiting for soonest reply.... 

That's great support team. 

I really appreciate for informing 

 

[Muthukumar Kannan]

Hi Hassan, 

You are most Welcome! 

Thanks for your appreciation. As promised, we will update the details on 9th June. 

Regards, 

Muthukumar K 

[Muthukumar Kannan]

Hi Hassan,  

Sorry for the inconvenience caused.  

Due to some unforeseen circumstances, we could not able to provide the workaround for your requirement as we promised. Currently, we are working with this prioritized. However, we will provide the sample for this tomorrow. Until then we appreciate your patience.  

Please let us know if you have any concerns.  

Regards,  

Muthukumar K 

[KINS]

OK noted with thanks 

Will wait for one more days.. 

[KINS]

Is it possible to get reply today ??? 

[Muthukumar Kannan]

Hi Hassan, 

Thanks for your patience. 

We have prepared workaround based on your requirement which is available in the below link. Could you please check that sample whether your requirement fulfilled with that or not? 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataentryUI-1157720521 

If you want to customize the appearance of the components, we suggest you use our theme studio utility. 

 https://ej2.syncfusion.com/themestudio/ 

https://blazor.syncfusion.com/documentation/appearance/theme-studio/ 

Please get back to us if you have any queries. 

Regards, 

Muthukumar K   

[KINS]

Thanks for supports as per promised...

Will check tomorrow and get back to us... 

[Muthukumar Kannan]

Hi Hassan, 

Welcome! Please check and let us know if you need any further assistance. 

Regards, 

Muthukumar K 

[KINS]

Thanks and confirmed..

It's works fine as per my requirements.

[Muthukumar Kannan]

Hi Hassan, 

Welcome …! 

Please get back to us if you need any assistance. 

Regards, 

Muthukumar K 

[KINS]

Sorry for another question in attached example.

I need to add all control ( combobox,textbox ,grid etc ) in razor page as static instead of dynamic (adding control in runtime).

Meantime I need to place all control in card components with Card Header ( Add title in card Header from attached example).

Also place the button  in card Headet in left or right side.

Please help without support team I can't finish my task.

Awaiting for soonest reply...

[Muthukumar Kannan]

Hi Hassan, 

Thanks for getting back to us. 

Based on your shared information, we suspect that you want to place all your application controls in the Card control. According to that, we have prepared the sample and find the snippets for render all controls in card component from below. 

MainLayout.razor: 

@inherits LayoutComponentBase 

 

<div class="page"> 

<div class="main"> 

    <SfCard> 

        <CardHeader Title="Sample Request Form" /> 

        <CardContent> 

             <div class="content px-4"> 

                   @Body 

              </div> 

        </CardContent> 

    </SfCard> 

</div> 

</div> 

 

@*For styling the Header*@ 

<style> 

.e-card .e-card-header { 

    background-color: violet; 

} 

.e-card .e-card-header .e-card-header-caption .e-card-header-title{ 

    font-size: 30px; 

    font-weight: 400; 

    line-height: 40px; 

} 

  

Please find the sample from below. 

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

Please share the below details if we misunderstood your query. 

1. Do you want place any specific module alone in Card control ? If then share that details
2. Could please share the image/png for your requirement format layout if possible?

The above details will help us to provide the quick and better support from our end. 

Please get back to us if you have any queries. 

Regards, 

Muthukumar K 

[KINS]

Thanks..

Please check attached file for our requirement

Attachment: Untitled_c8fabcb7.zip

[Revanth Krishnan]

Hi Hassan, 

 

Thanks for the update. 

 

Can you please confirm whether the provided sample in the last update satisfied your requirement? 

 

Regards, 

Revanth 

[KINS]

Yes, I am satisfied 

But i need layout in attached format..

Please help

[Revanth Krishnan]

Hi Hassan, 

 

 

Good day to you. 

 

 

We have validated your query “I need a layout in the attached format”. 

 

We have analyzed the shared screenshot of the layout, and your requirement to render the each components inside the cards can be achieved by rendering the components inside the ‘CardContent’ template. We have prepared a sample for your reference, 

 

Code Snippet: 

SFR.razor 

<SfCard> 

    <CardHeader Title="Card Title" /> 

    <CardContent> 

        <table class="table"> 

            <tr> 

                <th style="width: 80%;"> 

                    <div class="row"> 

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4"> 

                            <SfTextBox Placeholder='First Name'></SfTextBox> 

                        </div> 

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4"> 

                            <SfTextBox Placeholder='First Name'></SfTextBox> 

                        </div> 

                        <div class="col-xs-4 col-sm-4 col-lg-4 col-md-4"> 

                            <SfTextBox Placeholder='First Name'></SfTextBox> 

                        </div> 

                    </div> 

                    . . .  

        </table> 

    </CardContent> 

</SfCard> 

 

 

<SfCard> 

    <CardHeader Title="Card Header"> 

        <div> 

            <SfButton IsPrimary="true" Content="Add New Version"></SfButton> 

 

            <SfButton CssClass="e-success" Content="Approval Status"></SfButton> 

 

            <SfButton CssClass="e-warning" Content="Generate Style"></SfButton> 

        </div> 

    </CardHeader> 

    <CardContent> 

        <Grid PageSize="4"></Grid> 

    </CardContent> 

</SfCard> 

 

<Tabs></Tabs> 

 

InnerTabControl.razor 

<SfCard> 

    <CardHeader Title="Card Header"> 

        <div style="padding: 20px;"> 

            <SfButton IsPrimary="true" Content="Add New Item"></SfButton> 

        </div> 

    </CardHeader> 

    <CardContent> 

        <div style="padding: 10px;"> 

            <SfGrid DataSource="@Orders" AllowPaging="true"> 

                <GridPageSettings PageSize="5"></GridPageSettings> 

            </SfGrid> 

        </div> 

    </CardContent> 

</SfCard> 

 

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

 

Also, please check the below documentation and demo samples of cards for further reference, 

Documentation: https://blazor.syncfusion.com/documentation/card/getting-started/ 

Demo Sample: https://blazor.syncfusion.com/demos/card/basic-card?theme=bootstrap4 

 

 

Please check the above code snippets, sample, and documentation and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

[KINS]

Thanks...

I am closing this thread and I am really happy for solving my problem.

Really Synfussion company is best for supporting when compare to other company....

[Revanth Krishnan]

Hi Hassan, 

 

Thanks for the update. 

 

We are glad that the provided solution satisfied your requirement. Please get in touch with us if you would require any further assistance. 

 

Regards, 

Revanth