Multiple columns edit template for grid component

[Vanderlei]

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]

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]

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]

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

            obj.Url("https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Customers"). 

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); 

        } 

    } 

Help documentation : https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit#reading-values-from-editors  

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]

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]

Hi Vanderlei, 

Thanks for your update. 

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

Regards, 

Thavasianand S.