Adding a dynamic templated column (depending on each row)

[Carlo]

I have the following requirement: adding a dynamic templated column to a syncfusion grid whose content depends on each row (let's say the ID). 

For instance, I may want to add a dynamic templated column which contains a syncfusion button with red background when the row ID is odd, and a green background when it's even. Then, if ID=3, no button should be shown at all.

Additional requirement: these buttons should redirect me to a page that vary depending on their row ID

Final requirement: when i click on one of these buttons and I get redirected to this dynamic page, the ID of the row to which the button belongs isn't shown in the address bar.

Thanks in advance for your kind help.

[Carlo]

I could really use some help. As of now I'm able to add a custom column with a button using instructions provided here: http://help.syncfusion.com/ug/aspnetmvc/Documents/template.htm. The problem is that I need to attach some extra logic to this button (like changing its layout based on row ID and attaching to an event which takes the current row id as a parameter). To do so I tried setting up a specific id when I create the button through the template (using this syntax {{:ID}} to customize each button's id) (ex. id="btn{{:ID}"), but I don't know when to access this button through Jquery to set further customization: if I do that after $(document).ready the buttons are still not there because the grid is loading the data, and I don't seem to find any event in the grid which is triggered after all the data has been loaded, so that all the buttons are present in the page. Is my approach correct? If that is so, what event should I wait for in order to get the button through Jquery?

[Balaji Marimuthu]

Hi Carlo,

Thanks for using Syncfusion Products.

Query: #1 adding a dynamic templated column to a syncfusion grid whose content depends on each row (let's say the ID)

You can add the columns dynamically to Grid by using the Columns method. Please refer to the following Help Document and code example,

http://helpjs.syncfusion.com/js/api/ejgrid#methods:columns

@(Html.EJ().Button("btn").Text("AddDynamic column").ClientSideEvents(eve => eve.Click("btnclick")))

<script>

    function btnclick() {

        var gridobj = $("#FlatGrid").ejGrid("instance");

        var col = [{ headerText: "Template column", template: true, templateID: "#columnTemplate" }];

        gridobj.columns(col, "add");

    }

</script>

Query: #2 For instance, I may want to add a dynamic templated column which contains a syncfusion button with red background when the row ID is odd, and a green background when it's even. Then, if ID=3, no button should be shown at all.            

You can customize the Button in TemplateRefresh event which triggers when refreshing the template column elements in the Grid. Please refer to the following Help document,

http://helpjs.syncfusion.com/js/api/ejgrid#events:templaterefresh

@(Html.EJ().Grid<object>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.datasource)

        .AllowScrolling()

         .AllowPaging()    /*Paging Enabled*/

        .Columns(col =>

         . . . . .

.ClientSideEvents(eve => eve.TemplateRefresh("templaterefresh")))

We have rendered the Button to the column in TemplateRefresh event and customized the Button based on the ID value (apply color whether odd/even). 

<script>

function templaterefresh(args) {

        var val = args.data["EmployeeID"];

        var cell = $(args.cell);

        //render the button control

        if (val != 3) {

            cell.find(".template").ejButton({

                width: "100px",

                text: "Button",

                click: "click"

            });

        }

        if (val == 3)

            cell.find(".template").remove();

        //customize the color to button

        if (val % 2 == 0)

            cell.find(".template").css("background-color", "red"); //if even

        else

            cell.find(".template").css("background-color", "green");//if odd

    }

</script>

Query: #3 when I click on one of these buttons and I get redirected to this dynamic page, the ID of the row to which the button belongs isn't shown in the address bar.

We can redirect the Button to dynamic page in Button click event. Please refer to the below code example,

<script>

   

    function templaterefresh(args) {

        //render the button control

        if (val != 3) {

            cell.find(".template").ejButton({

                width: "100px",

                text: "Button",

                click: "click"

            });

        }

         . . . .

    }

    function click(args) {

        var gridobj = $("#FlatGrid").ejGrid("instance");

        val = gridobj.getSelectedRecords()[0]["EmployeeID"];

        window.open(window.location.rel='nofollow' href + val);  //redirect to dynamic page

    }

</script>

Please provide below information about how you wanted to redirect to the dynamic page when clicking the button that will be helpful to provide a solution at the earliest.

1.     Do you want to pass the ID value to the dynamic page?

2.     Do you want to pass the ID using query string but need to hide it from address bar?

Please refer to sample in following link:

SyncfusionMvcApplication21

Regards,

Balaji Marimuthu

[Carlo]

Thanks a lot for the kind reply, which solved most of my issues. The last thing which I need, as you suggested, is to pass the ID to the dynamic page without it being shown in the address bar. Maybe that should be handled with a POST request?

[Balaji Marimuthu]

Hi Carlo,

Please find the response.

Query: # when I click on one of these buttons and I get redirected to this dynamic page, the ID of the row to which the button belongs isn't shown in the address bar. Maybe that should be handled with a POST request?
Your requirement is achieved by using the AJAX post and we have sent the ID value to server side. Please refer to the following sample and code example,
Sample:  Forum-120073

function click(args) {

        var gridobj = $("#FlatGrid").ejGrid("instance");

        val = gridobj.getSelectedRecords()[0]["EmployeeID"];

        $.ajax({

            url: "/Grid/Data",

            type: "POST",

            data: {data: val},

            success: function (data) {

                window.open(window.location.origin + data);

            },

            error: function (e) {

            }

        });

    }

You can get the ID value to the server side and redirect the page based on ID value. We have stored the ID value to session. So you can access the ID value to another page by retrieving the value from session. Please refer to the following code example,

public string Data(int? data)

        {

            Session["ID"] = data;  //you can get the session value

            var val="";

            if (data == 1)

               val = "/Home/Index";

            else

               val = "/Home/About";

            return val;

        }

Regards,
Balaji Marimuthu

[neo]

Hi 

Do syncfusion angular grid support this? 

mycolumn.template = '#template';

[Farveen Sulthana Thameeztheen Basha]

Hi neo, 

Query#:- Do syncfusion angular grid support this? mycolumn.template = '#template'; 

Thanks for contacting Syncfusion Support. 

Yes we can  give the  template by using “template” property of the Grid as like your code example:- 

App.component.html 

 

<ej-grid [allowpaging]="true" [allowsorting]="true" [datasource]="gridData"> 

        <e-columns> 

            <e-column headertext="EmployeeImage" width="100" [template]="template"></e-column> 

             ... 

       </e-columns> 

</ej-grid> 

 

App.component.ts 

 

export class GridComponent { 

             public gridData; 

              public template;  

              constructor() 

              { 

                 this.gridData = window.employeeView; 

                 this.template = "#columnTemp"; 

 

                 .    . 

              } 

     } 

 

Index.html 

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

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

    </script> 

 

Otherwise you can follow anyone of the below steps for rendering template column. You can directly give  template as string or else you can use ng-template for rendering template column as llike given below 

Template as String:- 

 

App.component.ts 

 

export class GridComponent { 

             public gridData; 

              public template= "<img style="width: 75px; height: 70px" src="app/Employees/{{:EmployeeID}}.png" alt="{{: EmployeeID }}" ";  

              constructor() 

              { 

                 this.gridData = window.employeeView; 

                 .    . 

              } 

     } 

 

 </script> 

 

Ng-template:- 

 

<ej-grid id="Grid" [datasource]="gridData" allowpaging="true" [pagesettings]="pageSettings"> 

    <e-columns> 

        <e-column headertext="Photo"> 

            <ng-template e-template let-data> 

                <div *ngif="data.EmployeeID"> 

                    <img style="width: 75px; height: 70px" [attr.src]="'app/Content/images/grid/Employees/' + data.EmployeeID + '.png' " [alt]="data.EmployeeID" /> 

                </div> 

            </ng-template> 

        </e-column> 

          .    .     . 

    </e-columns> 

</ej-grid> 

Please refer to the documentation and Demo Link:- 

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

https://ng2jq.syncfusion.com/#/grid/columntemplate;theme=bootstrap 

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

Regards, 

Farveen sulthana T 

[neo]

Hi,

Thank for your response.

Yes. Your provided solution is working as documented in the knowledge base.

But not for the below method, i only able to get to render the html anchor, but not able to perform the callback function.

myGrid.template = '<a (onClick)="myfunction($event)">xaxa</div>';

Thank you.

[Farveen Sulthana Thameeztheen Basha]

Hi Neo, 

We have checked your reported problem and you can define the callback function and perform actions on index.html page. You can use ng-template for rendering the template column and define the callback function on GridComponent.ts file. 

Please refer to the code example:- 

App.compoent.html 

<ej-grid #grid [allowpaging]="true" [datasource]="gridData" [toolbarsettings]="toolbarItems" (load)="load($event)"> 

    <e-columns> 

        <e-column headertext="Button" width="20"> 

            <ng-template ngfor #link [ngforof]="links"> 

                <a rel='nofollow' href="#" (click)="onClick(link)"></a> 

            </ng-template> 

        </e-column> 

</ej-grid> 

 

App.component.ts 

  export class GridComponent { 

    public gridData: any; 

     onClick(link: LinkObj) { 

       .   .  . 

    } 

Sample:  

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

Regards, 

Farveen sulthana T