Support of DisplayFormatAttribute ?

[SK Yong]

Hi Guys,

  I would like to know whether the Asp.MVC Grid support the DisplayFormatAttribute so that I can apply formatting to the data displayed in the grid through the MetadataTypeAttribute that ties my custom metadata class to the view model?

 Also, how do I get rid of he tiny line that exists between the grid header and grid row as in this example http://mvc.syncfusion.com/demos/web/grid/resizetofit ?

Thanks

Regards

Yong

[Prasanna Kumar Viswanathan]

Hi Yong,

Thanks for using Syncfusion products.

Query 1 : “DisplayFormatAttribute”

Yes, we have DisplayFormatAttribute support to apply formatting to the data displayed in the Grid. Please find the following code example, screenshot and sample as below,

@(Html.EJ().Grid<MVCSampleBrowser.Models.EditableOrder>("FlatGrid")

         .Datasource((IEnumerable<MVCSampleBrowser.Models.EditableOrder>)ViewBag.datasource)

            .AllowPaging()    /*Paging Enabled*/

             .EditSettings(edit => { edit.AllowEditing().AllowAdding().AllowDeleting(); })

             .ToolbarSettings(toolbar =>

        {

            toolbar.ShowToolbar().ToolbarItems(items =>

            {

                items.AddTool(ToolBarItems.Add);

                items.AddTool(ToolBarItems.Edit);

                items.AddTool(ToolBarItems.Delete);

                items.AddTool(ToolBarItems.Update);

                items.AddTool(ToolBarItems.Cancel);

                items.AddTool(ToolBarItems.Search);

            });

        })

        .Columns(col =>

        {

            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();

            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();

            col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).EditType(EditingType.Dropdown).Width(75).Add();

            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add();

            col.Field("OrderDate").HeaderText("Order Date").TextAlign(TextAlign.Right).Width(80).Add();

            col.Field("ShipCity").HeaderText("Ship City").Width(110).Add();

        })    
        )
---------------------------------------------------------------------------------------

public class EditableOrder

    {

        [Range(0, int.MaxValue, ErrorMessage = "OrderID must be greater than 0.")]

        public int OrderID

        {

            get;

            set;

        }

        [StringLength(5, ErrorMessage = "CustomerID must be 5 characters.")]

        public string CustomerID

        {

            get;

            set;

        }

        [Range(1, 9, ErrorMessage = "EmployeeID must be between 0 and 9.")]

        public int? EmployeeID

        {

            get;

            set;

        }

        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}")]

        public DateTime? OrderDate

        {

            get;

            set;

        }

Screenshot :



Sample Link : http://www.syncfusion.com/downloads/support/forum/120053/ze/Sample462298500

Query 2 : “how do I get rid of the tiny line that exists between the grid header and grid row”

We can apply an External Style to get the tiny line between the Grid header and Grid row. Please refer to the following code example,

<style>

    .e-grid .e-gridheader {

        border-bottom-width: 1px !important;

    }
    </style>

Regards,
Prasanna Kumar N.S.V