Articles in this section
Category / Section

How to display Grid with dynamic image column in .NET WebForms application?

5 mins read

Sometimes you may need to show dynamic images in Grid column that are not available in Grid datasource

Solution

Image column and the image button column are bound to the Grid by using the Template property of the Grid.

ASPX

<ej:Grid ID="OrdersGrid" runat="server">
<Columns>
             <ej:Column HeaderText="Image" Template="True" TemplateID="#ImageTemplate" TextAlign="Center" Width="75" />
                        . . .
              <ej:Column HeaderText="Employee Icon" Template="true" TemplateID="#imageButtonTemplate" Width="75" TextAlign="Center" />
</Columns>
</ej:Grid>

JS Render

The image path for the image column is bound by using the JSRender Template to the Template.

 

<!-- For image column -->
    <script type="text/x-jsrender" id="ImageTemplate">        
            <img style="width: 70px; height: 70px" src="{{:PhotoPath}}" alt="{{ : PhotoPath }}" />
    </script>
<!-- For Image Button Column -->
    <script type="text/x-jsrender" id="imageButtonTemplate">
        <button class="EmployeeButton" name="EmployeeButton"></button>
        <button class="OrderButton" name="OrderButton"></button>
    </script>

 

The button created using column template is converted to ejButton and the images are bound within the button by using the prefixIcon property of the ejButton.

JS

<script type="text/javascript">        
        $(function () {
            $(".EmployeeButton").ejButton({ prefixIcon: "e-employee", contentType: "imageonly" }); 
            $(".OrderButton").ejButton({ prefixIcon: "e-order", contentType: "imageonly" });
</script>

CSS Style

The image path is specified through the cssClass mentioned in the prefixIcon property of the ejButton.

CSS

<style type="text/css">
        .e-employee {
            background-image: url('../Content/images/Employees/7.png');
            background-size: 105%;
        }
        .e-order {
            background-image: url('../Content/images/menu/10006.png');
            background-size: 105%;
        }
</style>

The OnServerRecordClick event of the Grid is enabled in order to trigger the server side record click event.

ASPX

<ej:Grid ID="OrdersGrid" runat="server" OnServerRecordClick="OnServerRecordClick">
. . .
</ej:Grid>

On the Click event of the image button bound to the Grid, the OnServerRecordClick event of the grid is triggered with the arguments passed explicitly.

JS

<script type="text/javascript">
        $(function () {            
            $(".EmployeeButton,.OrderButton").click(function (e) {
                triggerEvent(e);
            })
function triggerEvent(e) {
            var obj = $("#OrdersGrid").data("ejGrid");            
            var args = { currentTarget: e.currentTarget.name, selectedRecord: obj.getSelectedRecords(), selectedIndex: obj.model.selectedRowIndex };
            obj._trigger("recordClick", args);
        }
        function RecordClick(e) {            
            if (e.currentTarget != "EmployeeButton")
                return false
            else {
                triggerEvent(e);
            }
        }

At the server side event of the image buttonClick, the button details and the selectedRecord details are obtained in the GridEventArgs.

ASPX.CS

protected void OnServerRecordClick(object Sender, GridEventArgs e)
        {            
                var CommandName = e.Arguments["currentTarget"].ToString();
                switch (CommandName)
                {
                    case "EmployeeButton": 
                        Response.Redirect("DefaultFunctionalities.aspx");
                        break;
                }          
        }

Note:

A new version of Essential Studio for ASP.NET is available. Versions prior to the release of Essential Studio 2014, Volume 2 will now be referred to as a classic versions.The new ASP.NET suite is powered by Essential Studio for JavaScript providing client-side rendering of HTML 5-JavaScript controls, offering better performance, and better support for touch interactivity. The new version includes all the features of the old version, so migration is easy.

The Classic controls can be used in existing projects; however, if you are starting a new project, we recommend using the latest version of Essential Studio for ASP.NET. Although Syncfusion will continue to support all Classic Versions, we are happy to assist you in migrating to the newest edition.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below.

You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied