1. Home
  2. Forum
  3. Blazor
  4. Data entry wireframe

Data entry wireframe

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

19 Replies 1 reply marked as answer
MK Muthukumar Kannan Syncfusion Team June 7, 2021 03:09 PM UTC

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 


KI KINS June 7, 2021 03:29 PM UTC

Thanks for reply... 

Awaiting for soonest reply.... 


That's great support team. 

I really appreciate for informing 
 

MK Muthukumar Kannan Syncfusion Team June 8, 2021 05:57 AM UTC

Hi Hassan, 

You are most Welcome! 

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

Regards, 
Muthukumar K 


MK Muthukumar Kannan Syncfusion Team June 9, 2021 02:30 PM UTC

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 



KI KINS June 9, 2021 02:33 PM UTC

OK noted with thanks 


Will wait for one more days.. 




KI KINS June 10, 2021 01:25 PM UTC

Is it possible to get reply today ??? 

MK Muthukumar Kannan Syncfusion Team June 10, 2021 03:39 PM UTC

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? 


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



Please get back to us if you have any queries. 

Regards, 
Muthukumar K   


Marked as answer
KI KINS June 10, 2021 04:07 PM UTC

Thanks for supports as per promised...

Will check tomorrow and get back to us... 

MK Muthukumar Kannan Syncfusion Team June 11, 2021 05:15 AM UTC

Hi Hassan, 

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

Regards, 
Muthukumar K 


KI KINS June 11, 2021 01:19 PM UTC

Thanks and confirmed..

It's works fine as per my requirements.

MK Muthukumar Kannan Syncfusion Team June 14, 2021 05:58 AM UTC

Hi Hassan, 

Welcome …! 

Please get back to us if you need any assistance. 

Regards, 
Muthukumar K 


KI KINS June 15, 2021 01:11 AM UTC

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...

MK Muthukumar Kannan Syncfusion Team June 15, 2021 01:50 PM UTC

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. 


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 


KI KINS June 16, 2021 04:00 AM UTC

Thanks..

Please check attached file for our requirement

Attachment: Untitled_c8fabcb7.zip

RK Revanth Krishnan Syncfusion Team June 16, 2021 01:11 PM UTC

Hi Hassan, 
 
Thanks for the update. 
 
Can you please confirm whether the provided sample in the last update satisfied your requirement? 
 
Regards, 
Revanth 


KI KINS June 16, 2021 02:29 PM UTC

Yes, I am satisfied 

But i need layout in attached format..

Please help

RK Revanth Krishnan Syncfusion Team June 17, 2021 11:42 AM UTC

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> 
 
 
Also, please check the below documentation and demo samples of cards for further reference, 
 
 
Please check the above code snippets, sample, and documentation and let us know if it satisfies your requirement. 
 
Regards, 
Revanth 


KI KINS June 17, 2021 02:51 PM UTC

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....

RK Revanth Krishnan Syncfusion Team June 17, 2021 03:36 PM UTC

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 


Loader.
Up arrow icon