1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Custom column

Custom column

Hi.

I have a grid with a attendance records:

@using (Html.BeginForm("Index", "HRRecord",FormMethod.Post))

{

}

created="created" rowHeight="22" locale="@(System.Globalization.CultureInfo.CurrentCulture.Name)">



foreignKeyValue="LastName" dataSource=ViewBag.Persons width="120">

foreignKeyValue="FirstName" dataSource=ViewBag.Persons width="120">

width="160">

width="120">

width="100">

........................................................................


All fields is correctly completed with data from controler.


I have 2 questions:


1). - How can change background color for columns (dxx) for weekend days in function of month and year (from controller if is possible)?

2). - Is possible to hide column d31 (d30,d29) for months with fewer days?


thanks in advance for big help.


6 Replies 1 reply marked as answer
MS Manivel Sellamuthu Syncfusion Team August 25, 2021 02:22 AM UTC

Hi George, 

Greetings from Syncfusion support. 

Query: How can change background color for columns (dxx) for weekend days in function of month and year 
 
To change  background color for particular columns we suggest you to use customAttribute property of e-grid-column tag helper. Please refer the below documentation link for more information. 


Query:  Is possible to hide column d31 (d30,d29) for months with fewer days? 
 
You can hide any particular column in Grid before rendering by defining visible property of e-grid-column as false. In the below code example ShipCountry column is defined as visible false. 
 
 <ejs-grid id="Grid" dataSource="ViewBag.datasource"  allowPaging="true"> 
            <e-grid-columns> 
                <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column> 
                <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column> 
                <e-grid-column field="OrderDate" headerText=" Order Date"  textAlign="Right" format="yMd" width="130"></e-grid-column> 
                <e-grid-column field="Freight" headerText="Freight"  textAlign="Right" format="C2" width="120"></e-grid-column> 
                <e-grid-column field="ShippedDate" headerText="Shipped Date"  textAlign="Right" format="yMd" width="140"></e-grid-column>                 
                <e-grid-column field="ShipCountry" visible="false" headerText="Ship Country" width="150"></e-grid-column> 
        </ejs-grid> 

To proceeding your query further could you please share the below details 

  1. Please share the complete Grid code
  2. How can change background color for columns (dxx) for weekend days in function of month and year -  From this  query do you want to change the particular column cells or entire column
  3. Please share more about your requirements

Regards, 
Manivel 


GI Gige August 30, 2021 07:40 PM UTC

Thank you very much for answer.



Attachment: Index_eb2f2f6.zip

GI Gige August 30, 2021 07:43 PM UTC

  1. Please share the complete Grid code = in attachment.
  2. How can change background color for columns (dxx) for weekend days in function of month and year -  From this  query do you want to change the particular column cells or entire column: entire column but from controller (via View Bag ?)
  3.  hide column d31 when choose month with 30 days

MS Manivel Sellamuthu Syncfusion Team August 31, 2021 03:20 PM UTC

Hi George, 

Thanks for your update. 

Query: entire column but from controller (via View Bag ?) 
 
You can change the background color for entire column using customAttributes property of the Grid column. We can store the attribute value in the controller and assign the value to particular column’s customAttributes property.  

Please refer the below code example and sample for more information. 

<div> 
    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" beforeDataBound="beforeDataBound" allowPaging="true"> 
        <e-grid-pagesettings pageCount="4" pageSize="5"></e-grid-pagesettings> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="Customer Name" customAttributes="@(new { @class=ViewBag.customAttribute } ) " width="150"></e-grid-column> 
. . . 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
. . . 
 
<style> 
    .e-background,.e-background.e-headercell{ 
        background: #d7f0f4; 
    } 
</style> 
  public IActionResult Index() 
        { 
            ViewBag.DataSource = OrdersDetails.GetAllRecords().ToList(); 
            ViewBag.customAttribute= "e-background"; 


Query: hide column d31 when choose month with 30 days 

Based on this query you want to hide the particular column based on the row data. You can achieve your requirement by using the beforeDataBound event and hideColumns method of  the Grid. In the beforeDataBound event we can get the current view data and by iterating them we can hide the particular column if the row data has matched value. 

In the below code example we have checked the fright column has value more than 5 or not. If so we have hide the column using hideColumns method. Please refer the below code example and sample for more information. 

<div> 
    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" beforeDataBound="beforeDataBound"  allowPaging="true"> 
        <e-grid-pagesettings pageCount="4" pageSize="5"></e-grid-pagesettings> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="120"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="Customer Name" customAttributes="@(new { @class=ViewBag.customAttribute } ) " width="150"></e-grid-column> 
            <e-grid-column field="Freight" headerText="Freight" format="N2" width="120"></e-grid-column> 
            <e-grid-column field="OrderDate" headerText="Order Date" type="date" format="yMd" width="150"></e-grid-column> 
            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script> 
    var isInitial = true; 
    function beforeDataBound(args) { 
        var grid = this; 
// using flag variable for preventing the execution more than once 
        if (isInitial) { 
            isInitial = false; 
// here we are iterating the grid current view data and hiding the particular column based on the data value 
            for (var i = 0; i < args.result.length; i++) { 
                if (args.result[i].Freight > 5) { 
                    grid.hideColumns(["Freight"]); 
                    break; 
                } 
            } 
        } 
    } 
 
</script> 

API:  




Please let us know if you need further assistance. 

Regards, 
Manivel 


Marked as answer
GI Gige August 31, 2021 05:38 PM UTC

You are the Best!

Thank you very much for help.



MS Manivel Sellamuthu Syncfusion Team September 1, 2021 04:56 AM UTC

Hi George, 

Thanks for your update. 

We are glad that the provided solution helped you. 

Please let us know if you need further assistance. 

Regards, 
Manivel 


Loader.
Up arrow icon