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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Initialize on HTML attributes.

Thread ID:

Created:

Updated:

Platform:

Replies:

123842 Apr 26,2016 09:24 AM UTC Apr 27,2016 11:51 AM UTC JavaScript 1
loading
Tags: ejGrid
Wouter
Asked On April 26, 2016 09:24 AM UTC

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 [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;