Styling Syncfusion controls

[William Wong]

I am using ASP MVC controls and I would like to know if there is any tutorial on how to style the Syncfusion controls? I would like to set all the font type to Arial and also the base font size to 10pt. For the Grid control I would like to set custom alternating/hover colors and also the column titles' color.

My grids are connected to datasource via webapi and sometimes errors may occur in the server side. Is there any way to catch the exception thrown on the server side (e.g. a 500 Internal Server Error) and display it on a web dialog (not the browser alert dialog)? I think the current settings of my grids would only show a spinning animation forever.

[Prasanna Kumar Viswanathan]

Hi William,

Thanks for using Syncfusion Products.

Query : “how to style the Syncfusion controls”

Currently we are implementing theme studio for our Syncfusion EJ controls.  From that application, we will be able to customize the Grid theme for its various inner elements like header, content, pager etc. and export it as a CSS file. And this feature will be included in any of our upcoming releases.
Query : “Applying style for grid controls”

We can able to set style for Grid control using its class names. We have already created a UG documentation for applying style to grid control and please refer the documentation from the following link: 
Link : https://help.syncfusion.com/js/grid/style-and-appearance

Please refer the following code snippet :

@(Html.EJ().Grid<Sample119380.OrdersView>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

        .AllowScrolling()

         .AllowSorting()    /*Sorting Enabled*/

         .AllowPaging()    /*Paging Enabled*/

        .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).Width(75).Add();

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

        }))

<style>

   .e-grid td {

        font-family : Arial !important ;

        font-size : 10px !important;   

}

    .e-grid .e-headercelldiv {

        font-size : 10px ;

        color : red;

    }

    .e-hover {

        color : yellow !important;

        background-color : red !important;

    }

    .e-grid-icon.e-groupheadercell {

        font-size : 10px;

        color : red;
    }    }</style>

For your convenience, we have created a sample and same can be downloaded from the below link

Sample Link : https://www.syncfusion.com/downloads/support/forum/119380/ze/Sample119380-684258123

Query : “Is there any way to catch the exception thrown on the server side and display it on a web dialog”

Your requirement has been achieved by using actionFailure Event in ejGrid. In this event, we can be able to get error details in the arguments. Using that we can open a dialog box to describe the type of exception thrown.
Please refer the following code snippet:

@(Html.EJ().Grid<object>("Grid")

              .Datasource(ds => ds.URL("api/Orders").Adaptor(AdaptorType.WebApiAdaptor))

              .AllowPaging()

              .PageSettings(page => { page.PageSize(8); })

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

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

                       });

                   })

              .Columns(cols =>

              {

                  cols.Field("OrderID").IsPrimaryKey(true).Add();

                  cols.Field("EmployeeID").Add();

                  cols.Field("CustomerID").Add();

                  cols.Field("Freight").Format("{0:C}").Add();

                  cols.Field("ShipCountry").Add();

              })

              .ClientSideEvents(eve => eve.ActionFailure("Failure"))

)

@(Html.EJ().Dialog("ErrorList").ShowOnInit(false).Title("Error List"))

<script type="text/javascript">

    function Failure(args)

    {

        var str = "";

        str = $($(args.error.responseText).find('b')[0]).text() + ":" + $(args.error.responseText).find('i').text();

        $("#ErrorList").html("<table>" + str + "</table>");

        $("#ErrorList").ejDialog("open");

    }
</script>

--------------------------------------------------------------------------
Controller

public class OrdersController : ApiController

    {

        // GET api/orders

        NorthwindDataContext db = new NorthwindDataContext();

        public PageResult<Order> Get(ODataQueryOptions opts)

        {

           throw new Exception();

            List<Order> ord = db.Orders.ToList();

            return new PageResult<Order>(opts.ApplyTo(ord.AsQueryable()) as IEnumerable<Order>, null, ord.Count);

                   }

For your convenience, we have created a sample and same can be downloaded from the below link

Sample Link : https://www.syncfusion.com/downloads/support/forum/119380/ze/WebApiSample_Modified-1341481083

Please let me know if you need any further assistance.

Regards,
Prasanna Kumar N.S.V

[William Wong]

Thank you very much for your samples! I have successfully styled my controls using css. However I cannot find any easy way to define the font-family globally....

[Prasanna Kumar Viswanathan]

Hi William,

Thanks for the update.
 
We suggest you to use “e-js” class name to set the font-family globally for all the controls.

Please refer the following code example, screenshot and sample.

@(Html.EJ().Grid<Sample119380.OrdersView>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

        .AllowScrolling()

         .AllowSorting()    /*Sorting Enabled*/

         .AllowPaging()    /*Paging Enabled*/

         .AllowGrouping()

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

        .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).Width(75).Add();

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

        }))

<style>

    .e-js {

        font-family : Arial !important ;

        font-size : 10px !important;
    }

Please download the sample from the following link

Sample Link : https://www.syncfusion.com/downloads/support/forum/119380/ze/Sample119380-1226543918

Please let me know if you need any further assistance.

Regards,
Prasanna Kumar N.S.V