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

Support of DisplayFormatAttribute ?

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

1 Reply

PK Prasanna Kumar Viswanathan Syncfusion Team August 27, 2015 09:38 AM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon