We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Initialize on HTML attributes.

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.

1 Reply

GV Gowthami V Syncfusion Team April 27, 2016 11:51 AM UTC

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, 


Regards, 

Gowthami V. 


Loader.
Up arrow icon