Use Switch inside Column template

[Adam Eldred]

Hello,

I am trying to use a switch control inside the template for a grid Column with little success.  I have looked as a couple of older examples, but they do not seem to work for this control.  What is the easiest way to render this control within the cell?

        <ejs-grid id="grid) dataSource=@item width="auto" height="auto">

            <e-grid-columns>

                 <e-grid-column field="Name" headerText="Name"></e-grid-column>

                 <e-grid-column field="Extension" headerText="Extension"></e-grid-column>

                <e-grid-column field="IsLoggedIn" template="#LoggedInTemplate" headerText="Logged In"></e-grid-column>

                <e-grid-column field="Permissions" headerText="Permissions"></e-grid-column>

            </e-grid-columns>

        </ejs-grid>

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

            <div>

                <label for="LI_${ID}" style="padding: 10px 70px 10px 0">LI</label>

                <ejs-switch id="LI_${ID}" checked="true"></ejs-switch>

            </div>

        </script>

Thanks!

[Pavithra Subramaniyam]

Hi Adam, 

 

Thanks for Contacting Syncfusion Support. 

 

You can achieve your requirement by using ‘column.template’, a property which has options to display custom element instead of a field value in the column.  We have prepared a simple sample in which we have appended the Essential JavaScript 2 JavaScript Switch component to the column template in queryCellInfo event of Grid component.  Please refer to the below code, Documentation link, and sample link. 

 

[index.chtml] 

<ejs-grid id="GridOverview" queryCellInfo="queryCellInfo" dataSource="ViewBag.datasource"> 

     <e-grid-columns> 

        <e-grid-column field="Verified" template="#template" headerText="Template Switch" width="120"></e-grid-column> 

        <e-grid-column field="OrderID" headerText="OrderID" isPrimaryKey="true" isIdentity="true" textAlign="Right" width="120"></e-grid-column> 

        .   .   . 

        </e-grid-columns> 

</ejs-grid> 

 

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

    <div> 

        <input id="${OrderID}" class='e-tchk' type="checkbox" /> 

    </div> 

</script> 

 

<script> 

    function queryCellInfo(args) { 

        if (args.column.field === 'Verified') { 

            var targEle1 = args.cell.querySelector('.e-tchk'); 

            var switchComp = new ej.buttons.Switch({ checked: args.data[args.column.field] }); 

            switchComp.appendTo(targEle1); 

 

        } 

 

    } 

</script> 

 

 

Documentation:  https://ej2.syncfusion.com/documentation/grid/api-grid.html#querycellinfo  

                               https://ej2.syncfusion.com/documentation/switch/getting-started.html?lang=typescript  

 

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/switch-1428412211  

 

Regards, 

Pavithra S. 

[Adam Eldred]

That works perfectly, thank you.

It may be nice to have the base input type needed for the controls for use with the composition script listed somewhere.  For example I was missing that the switch needed to be based on a checkbox input.  Unless I missed this in the documentation somewhere...  

[Pavithra Subramaniyam]

Hi Adam, 

Thanks for your update. 

We are glad to hear that the provided information helps you. We have mentioned the element to be rendered for Switch component in our Getting Started documentation section. Please refer to the below screenshot and documentation link. 

 

https://ej2.syncfusion.com/documentation/switch/getting-started.html?lang=es5#add-switch-to-the-project  

Regards, 

Pavithra S.