Multiple data in 1 column; show image in column using code behind

[Trinh Thang Long]

Hi there, I'm having 2 small issues with a grid control. 

The first one is: my sql table have 2 column name: customerFirstname and customerLastname, now I want to bind these 2 values to 1 column name customerFullname in grid control but I don't know how to do it, the <ej:column/> only support value from 1 field.

The second one is: I want to show the customer's photo in grid using code behind (in .aspx.cs file, not by using template and script in .aspx file) but current I can't find a method to do this,

Please tell me if there is any solution for this,

Thank you very much

[Farveen Sulthana Thameeztheen Basha]

Hi Trinh, 

Thanks for contacting Syncfusion Support. 

Query # 1:- my sql table have 2 column name: customerFirstname and customerLastname, now I want to bind these 2 values to 1 column name customerFullname in grid 

We have checked your query and if you want to display 2 values in the single column Name you can display two values in single column name by using HeaderText property of the Grid. Please refer to the code example:- 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="true"> 

           <Columns> 

               <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90"> 

               </ej:Column> 

                .  .  . 

 

            </Columns> 

             

    </ej:Grid> 

 Please refer to the documentation Link:- 

https://help.syncfusion.com/aspnet/grid/columns#headers 

If we misunderstood your requirement, please share us the screenshot/Video Demo that could be helpful to provide you solution as early as possible. 

Query#2 :-  I want to show the customer's photo in grid using code behind (in .aspx.cs file, not by using template  

We couldn’t achieve your requirement on code behind(in asp.cs file).  You can render the image inside the Grid only by using Template column property of the Grid.  

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Trinh Thang Long]

Hi Trinh, 

Thanks for contacting Syncfusion Support. 

Query # 1:- my sql table have 2 column name: customerFirstname and customerLastname, now I want to bind these 2 values to 1 column name customerFullname in grid 

We have checked your query and if you want to display 2 values in the single column Name you can display two values in single column name by using HeaderText property of the Grid. Please refer to the code example:- 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="true"> 

           <Columns> 

               <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="true" TextAlign="Right" Width="90"> 

               </ej:Column> 

                .  .  . 

 

            </Columns> 

             

    </ej:Grid> 

 Please refer to the documentation Link:- 

https://help.syncfusion.com/aspnet/grid/columns#headers 

If we misunderstood your requirement, please share us the screenshot/Video Demo that could be helpful to provide you solution as early as possible. 

Query#2 :-  I want to show the customer's photo in grid using code behind (in .aspx.cs file, not by using template  

We couldn’t achieve your requirement on code behind(in asp.cs file).  You can render the image inside the Grid only by using Template column property of the Grid.  

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

Thank you for your quickly support,

For the query #1, the header text HeaderText="Order ID"  only change the header's name of the column, what I need is combine 2 columns into 1, for example:

from this: https://1drv.ms/i/s!AuQ9JG7oUd-Phqtcg6fZEKxm-1cueg

into this: https://1drv.ms/i/s!AuQ9JG7oUd-Phqtd6U2LkVhdgb1yzg

I have another question for the grid: how can I check the existing of the image then show the default image if there is no image found, for example:

<img style="width: 75px; height: 70px" src="../Content/images/Employees/{{:EmployeeID}}.png" alt="{{ : EmployeeID }}" />

if there is no image name 999.png corresponding to the EmployeeID: 999, then it will show the default image, something like nophoto.png

Thank you very much,

[Farveen Sulthana Thameeztheen Basha]

Hi Trinh, 

Query # 1 :-what I need is combine 2 columns into 1:- 

 

You can merge two columns into single column by using MergeCellInfo event of the Grid. In this event you can combine two columns by using colMerge functions available on the event. Also you can combine the headers of the column using mergeHeaderCellInfo event of the Grid. 

 

 Please refer to the documentation and Online Demo Link:- 

 

https://help.syncfusion.com/api/js/ejgrid#events:mergecellinfo 

https://help.syncfusion.com/api/js/ejgrid#events:mergeheadercellinfo 

https://help.syncfusion.com/aspnetmvc/grid/cell#cell-merging 

http://mvc.syncfusion.com/demos/web/grid/cellmerging 

 

 

Query #2 :-  how can I check the existing of the image then show the default image if there is no image found, 

 

You can simply add  onerror="this.src='http://src1/error-img.jpg';" to all your image tags, if there is no image, it will show your error default image. 

Please refer to the code example:- 

 

<script type="text/x-jsrender" id="columnTemplate"> 

    <img style="width: 75px; height: 70px" src="../content/images/grid/Employees/{{:EmployeeID}}.png" alt="{{: EmployeeID }}" onerror="this.src='../content/images/grid/Employees/Spicy.png';" /> 

</script> 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Trinh Thang Long]

Thank you for your support, 

It's perfect for the image displaying,

For the cell merging function, the cell after merged only show value of the first cell:

Original :

John

Mike

Nick

After cell merging:

John

What I need is:

John   Mike   Nick

Is therer any solution for this?

Thank you very much!

[Farveen Sulthana Thameeztheen Basha]

Hi Trinh, 

We have achieved your requirement “Display two column values into single column” using ColumnTemplate property of the Grid. Using columnTemplate property, we can merge two column values inside the script Tag. Please refer to the code example:- 

<body> 

    <div class="content-container-fluid"> 

        <div class="row"> 

            <div class="cols-sample-area"> 

                <script type="text/x-jsrender" id="columnTemplate"> 

                   {{:FirstName}} {{:LastName}} 

                </script> 

                 

    <script type="text/javascript"> 

        $(function () { 

            $("#Grid").ejGrid({ 

                // the datasource "window.employeeView" is referred from jsondata.min.js 

                dataSource: ej.DataManager(window.employeeView).executeLocal(ej.Query().take(8)), 

                allowPaging: true, 

                 

                columns: [ 

                     { headerText: "Full Name", template: "#columnTemplate", textAlign: "center", width: 110 }, 

                           .   .   . 

 

                ],       

                            

            }); 

        }); 

    </script> 

</body> 

Please refer to the sample Link:- 

http://jsplayground.syncfusion.com/jt2xfxoh 

Please refer to the documentation Link:- 

https://help.syncfusion.com/js/grid/columns#column-template 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T 

[Trinh Thang Long]

Wonderful! This is exactly what I need, thank you very much for your support!

[Farveen Sulthana Thameeztheen Basha]

Hi Trinh, 

Thanks for your update. We are glad to know that your reported problem has been resolved. Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T