We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Multiple columns edit template for grid component

Thread ID:

Created:

Updated:

Platform:

Replies:

140957 Nov 15,2018 07:45 PM UTC Nov 21,2018 05:25 AM UTC ASP.NET MVC - EJ 2 5
loading
Tags: Grid
Vanderlei
Asked On November 15, 2018 07:45 PM UTC

Hi guys,

I'm trying to customize edit template by following your documentation example  (https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit#dialog)
I am formatting columns using styles (col-md-6, col-md-12, etc) but components doesn't fit to the columns. I need to show some text components placed side-by-side in a row, but in other rows I need one text component filling all row width.
Please look bellow:


Razor code:
<div class="form-row">
    <div class="form-group col-md-6">
        <div class="e-float-input e-control-wrapper">
            @Html.TextBox("Contato ID")
            <span class="e-float-line"></span>
            @Html.Label("contato_id", "Contato ID", new { @class = "e-float-text e-label-top" })
        </div>
    </div>
    <div class="form-group col-md-6">
        <div class="e-float-input e-control-wrapper">

        </div>
    </div>
</div>
<div class="form-row">
    <div class="form-group col-md-12">
        <div class="e-float-input e-control-wrapper">
            @Html.TextBox("Nome")
            <span class="e-float-line"></span>
            @Html.Label("nome", "Nome", new { @class = "e-float-text e-label-top" })
        </div>
    </div>
</div>
<div class="form-row">
    <div class="form-group col-md-6">
        <div class="e-float-input e-control-wrapper">
            @Html.TextBox("Setor")
            <span class="e-float-line"></span>
            @Html.Label("setor", "Setor", new { @class = "e-float-text e-label-top" })
        </div>
    </div>
    <div class="form-group col-md-6">
        <div class="e-float-input e-control-wrapper">
            @Html.TextBox("Função")
            <span class="e-float-line"></span>
            @Html.Label("funcao", "Função", new { @class = "e-float-text e-label-top" })
        </div>
    </div>
</div>
<div>
    <div class="form-row">
        <div class="form-group col-md-12">
            <div class="e-float-input e-control-wrapper">
                @Html.TextArea("observacoes")
                <span class="e-float-line"></span>
                @Html.Label("observacoes", "Observações", new { @class = "e-float-text e-label-top" })
            </div>
        </div>
    </div>
</div>

What am I doing wrong?
Thank you!

Thavasianand Sankaranarayanan [Syncfusion]
Replied On November 16, 2018 10:53 AM UTC

Hi Vanderlei, 

Thanks for contacting Syncfusion support. 

We have validated the provided information and checked with our end. The reported problem occurred because of the default MVC (site.css) styles override the provided CSS .  

We suggest you to remove the below CSS reference from App_Start/BundleConfig.cs (in your application) or you can apply textarea max-width as 100% to resolve the reported problem. 

namespace mvc_ej2 
{ 
    public class BundleConfig 
    { 
        public static void RegisterBundles(BundleCollection bundles) 
        { 
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include( 
                        "~/Scripts/jquery-{version}.js")); 
            . . . . . 
            bundles.Add(new StyleBundle("~/Content/css").Include( 
                      "~/Content/bootstrap.css", 
                      "~/Content/site.css")); // need to remove the default site css 
        } 
    } 
} 


 
<style> 
    input, select, textarea { 
        max-width: 100% !important; // we have override and applied max-width as 100% 
    } 
</style> 

If we misunderstood your query then share more details regarding your problem it will be more helpful for us to provide a better solution as early as possible. 

Regards, 
Thavasianand S. 


Vanderlei
Replied On November 19, 2018 01:42 PM UTC

Hi Thavasianand,
I tried many other ways and I got things working by using styles. Althought I am facing some other problems.
Please take a look at what I did:
For TextBox and TextArea I've got them aligned using styles

The result is ok so far:


1 - First issue is a horizontal misaligned row when I use the dropdown label .FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always). Please compare the picture below to the picture above. Is it possible to correct it?


2 - Second issue is saving data. The dialog form shows Contacts details from the contact table. ClientID is a foreign key in Contacts table so I need to save only the ID for the Client selected in dropdown. Data in dropdown component comes from other table using ViewBag.datasource (ClientName, ClientID). All data in the form is saved correctly but ClientID is not saved. 


Looking for a solution I've found some tips in your forum and I did this:


Now It's saving ClientID correctly but I'd like to know: is there a better way to do it? Do I need to do this workaround for each non string value in order to save to the database?

Many thanks!


Hi guys,

After trying to do CRUD to other tables in my database using Dialog Templates I realize that parameters name containing underline symbol are not updated/saved properly (please note: the values for those parameters which names contains "_" are not passed back from Dialog form). I changed "cliente_id" to "clienteid" and entered values are saving to database correctly. As I changed other parameters name in other views they started to work fine too. Does it make any sense?

Thanks!

Thavasianand Sankaranarayanan [Syncfusion]
Replied On November 20, 2018 08:58 AM UTC

Hi Vanderlei 

Query: 1 - First issue is a horizontal misaligned row when I use the dropdown label .FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always). Please compare the picture below to the picture above. Is it possible to correct it?  
  
We have checked shared code snippet, you have set floating label class in dropdownlist wrapper element. In dropdownlist component in built floating label support provided. So no need to add "e-float-input" class in dropdownlist wrapper element.  

Please find the code snippet for your reference.   
  
<div class="form-row">  
    <div class="form-group col-md-6">  
        <div class="e-float-input e-control-wrapper">  
            @Html.TextBox("Contato ID")  
            <span class="e-float-line"></span>  
            @Html.Label("contato_id", "Contato ID", new { @class = "e-float-text e-label-top" })  
        </div>  
    </div>  
    <div class="form-group col-md-6">  
    <div="e-float-input e-control-wrapper">    // remove the div element.  
@Html.EJS().DropDownList("customers").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).AllowFiltering(true).Width("300px").Placeholder("Select a customer").DataSource(obj =>  
CrossDomain(true).Adaptor("ODataAdaptor")).Fields(newDropDownListFieldSettings  
            { Text = "ContactName", Value = "CustomerID" }).Query((string)ViewBag.query).Render()  
    </div>  
</div>  

Query 2: is there a better way to do it? Do I need to do this workaround for each non string value in order to save to the database? 

We have validated the provided information, we suspect that in your sample, you are using dropdownedit (return value as string)for number column in Grid. We suggest you to use numerciedit for number column or use the below solution(parse dropdown value from string to number). 

In the below code example we have format and update ClientID value. 

   function actionBegin(args) { 
        if (args.requestType === 'save') { 
            // cast string to integer value. 
            args.data['ClientID'] = parseFloat(args.form.querySelector("#ClientID").value); 
        } 
    } 


Query3: As I changed other parameters name in other views they started to work fine too. Does it make any sense? 

By default , when apply underscore symbol in field we have considered as a complex field (to handle form validator) so that the data is not updated Properly . We suggest you to remove  “ _”  and use any other name to resolve the problem. 

Regards, 
Thavasianand S. 


Vanderlei
Replied On November 20, 2018 01:34 PM UTC

Hi Thavasianand,

Query 1 - Now it is working fine!
Query 2 and 3 - Since I changed fields names in order to not contain "_"  string/numeric values are working ok. I have not test to get values from/to date/datetime fields so far, I am going to do it today...
 
Many thanks!

Thavasianand Sankaranarayanan [Syncfusion]
Replied On November 21, 2018 05:25 AM UTC

Hi Vanderlei, 

Thanks for your update. 

Please let us know whether you need further assistance after testing our solution. 

Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon