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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Styling Syncfusion controls

Thread ID:

Created:

Updated:

Platform:

Replies:

119380 Jun 12,2015 07:42 AM UTC Jun 18,2015 08:42 AM UTC ASP.NET MVC 3
loading
Tags: Grid
William Wong
Asked On June 12, 2015 07:42 AM UTC

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 [Syncfusion]
Replied On June 15, 2015 10:26 AM UTC

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 : http://help.syncfusion.com/ug/js/Documents/customizestyles.htm

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 : http://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 : http://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
Replied On June 17, 2015 10:28 AM UTC

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 [Syncfusion]
Replied On June 18, 2015 08:42 AM UTC

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 : http://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


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.

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

;