Initialize on HTML attributes.

[Wouter]

Is it possible to initialize components using only html. I rather dont mix js code in my html, so I'm adding the data-ej attributes to my elements in html and read those in my external js file. So for example a grid:

HTML:

<div id="Grid"
     data-url="Users/Data"
     data-ej-enablerowhover="false"
     data-ej-columns='[{"field":"Email"},{"field":"PhoneNumber"},{"field":"UserName"},{"field":"","headerText":"","template":"#columnTemplate","width":300}]'
     data-ej-toolbarsettings-showtoolbar="true"
     data-ej-toolbarsettings-toolbaritems='["search"]' >
</div>

JavaScript:

            var dm = ej.DataManager({ url: $("#Grid").data("url"), adaptor: new ej.UrlAdaptor() });
                $("#Grid").ejGrid({
                dataSource: dm,
                columns: $("#Grid").data("ej-columns"),
                toolbarSettings: {
                    showToolbar: $("#Grid").data("ej-toolbarsettings-showtoolbar"),
                    toolbarItems: $("#Grid").data("ej-toolbarsettings-toolbaritems"),
                    customToolbarItems: $("#Grid").data("ej-toolbarsettings-customtoolbaritems")
                },
                enableRowHover: $("#Grid").data("ej-enablerowhover")
            });

But this seems something that could work out of the box.

[Gowthami V]

Hi Wouter, 

Thanks for using Syncfusion products. 

We can initialize the grid components using data-ej attributes by referring “ej.unobtrusive.min.js” file as follows, 

Refer to the below code for enable unobtrusive mode, 

<appSettings> 

<add key="UnobtrusiveJavaScriptEnabled" value="true"/> 

. . . . 

</appSettings> 

 

//Refer unobtrusive script file  

 

<script src="~/Scripts/ej/ej.unobtrusive.min.js"></script> 

Grid rendering html code, 

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

   {{:EmployeeID}} 

</script> 

<div id="Grid" data-role="ejgrid" data-ej-allowpaging='true' 

     data-ej-allowsorting='true' data-ej-allowfiltering='true' 

     data-ej-datasource='ej.dataSources.Editing.data0' 

     data-ej-toolbarsettings-showtoolbar='true' 

     data-ej-enablerowhover="false" 

     data-ej-columns='[{"field":"Email"},{"field":"PhoneNumber"},{"field":"UserName"},{"field":"","headerText":"","template":"#columnTemplate","width":300}]' 

     data-ej-toolbarsettings-toolbaritems='["search"]'></div> 

<script> 

    ej.createObject("ej.dataSources.Grid", { "data0": ej.DataManager({ "url": "/Users/Data", "adaptor": "UrlAdaptor" }) }); 

</script> 

For your convenience we have created a sample and the same can be downloaded from the following link, 

http://www.syncfusion.com/downloads/support/directtrac/123842/SAMPLE~11338755659.ZIP 

Regards, 

Gowthami V.