Conditional format on column

[Toni]

Hello.

I'd like to include in my grid a conditional formatting for a given column.

Lets say I have an entity like this:

        public class MyClass

        {

            public Guid Id { get; set; }

            public string Description { get; set; }

            public Guid? AttachedFileId { get; set; }

        }

and

        public class AttachedFiles

        {

            public Guid Id { get; set; }

            public string Url { get; set; }

        }

Of course, AttachedFileId is a foreign key column to the AttachedFiles class.

When I load the data I want the AttachedFileId column to show a link with an icon (preferable same style that command buttons) to the Url in AttachedFiles binded row when informed and an upload button (also better if command button style) when the AttachedFileId is null.

Of course, I'd like to use the UploadFile component if possible.

How can I perform this? 

And let me ask you a second question related to this:

Where can I find a list of the icons for command or toolbar buttons (i.e. "e-icons e-save-icon", "e-icons e-edit" or "e-icons e-delete")?

Thanks in advance.

[Hariharan J V]

Hi Toni, 

Thanks for contacting Syncfusion support. 

Query1: I'd like to include in my grid a conditional formatting for a given column. 

 

As per your requirement we have created a sample for your reference. In the below sample we have applied conditional formatting for the foreignKey (UploadFiles) column in Grid. Based on the condition we have rendered button and uploader control in Grid by using the template property. 

Kindly refer to the below code example and sample for more information. 

<ejs-grid id="Grid" dataSource="ViewBag.dataSource" width="auto" queryCellInfo="queryCellInfo" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })"> 

    <e-grid-columns> 

        <e-grid-column foreignKeyField="UploadFiles" template="#template" dataSource="ViewBag.dataSource" headerText="Employee Image" textAlign="Center" width="150"></e-grid-column> 

   </e-grid-columns> 

</ejs-grid> 

 

<script id="template" type="text/x-template"> 

    ${if(UploadFiles.length > 0)} 

    <button id="element">Edit</button> 

    ${else} 

    <input type="file" id="fileupload" name="UploadFiles"> 

    ${/if} 

</script> 

 

<script> 

    function queryCellInfo(args) { 

        var btnele = args.cell.querySelector('button'); 

        var button = new ej.buttons.Button({ cssClass: `e-flat`, iconCss: 'e-edit e-icons' }, btnele); 

        // based on condition we have rendered uploader control  

        var ele = args.cell.querySelector('input'); 

        var uploadObject = new ej.inputs.Uploader({ 

            . . . . . 

       }); 

        uploadObject.appendTo(ele); 

 

    } 

</script> 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-core-conditional-format886196355  

Help documentation:  

https://ej2.syncfusion.com/javascript/documentation/uploader/es5-getting-started.html  

https://ej2.syncfusion.com/javascript/documentation/grid/how-to.html#render-other-components-in-a-column  

Query2: Where can I find a list of the icons for command or toolbar buttons. 

 

Please refer the following link for available ej2 icons and you can use this for command and toolbar buttons. 

 

Documentation: https://ej2.syncfusion.com/documentation/appearance/icons.html?lang=typescript#available-icons  

 

Regards, 

Hariharan 

[Toni]

The code for the first query is also valid in a child grid?

[Madhu Sudhanan P]

Hi Toni, 

We can use the same logic to use conditional template for the child grid. Please try the provided solution and get back to us if you have faced any difficulties in implementing the provided solution. 

Regards, 

Madhu Sudhanan P 

[Toni]

I've checked this workaround in my project and works perfectly even in a child grid.

Just a small advice to anybody that want to use it: remember that the template is javascript code, not server code. My problems came because I tried to use something like "myNullableVariable.HasValue" instead of "myNullableVariable!=null" ;-)

Thanks for all your assistance.

[Madhu Sudhanan P]

Hi Toni, 

 

Thanks for the update. We are glad that your requirement has been achieved. 

 

Regards, 

Madhu Sudhanan P