Marco
$("#Grid").ejGrid({
dataSource: data,
-----------------
load : function (args) {
for (var i = 0 ; i < this.model.columns.length; i++) {
if (ej.isNullOrUndefined(this.model.columns[i].allowSorting)) {
this.model.columns[i].headerTemplateID = "#datetemplate";
}
}
},
create : function(args) {
var headers = this.getHeaderTable().find(".e-headercelldiv");
for (var i = 0 ; i < headers.length; i++) {
if(headers.eq(i).parent().hasClass("e-headertemplate"))
headers.eq(i).prepend("<span style='float:right'>" + headers.eq(i).attr("data-ej-mappingname") + "</span>")
}
},
isResponsive: true,
columns: [
------------------------
{ field: "CustomerID", headerText: "Customer ID", width: 80, allowSorting : false },
----------------
{ field: "Freight", width: 75, format: "{0:C}", textAlign: ej.TextAlign.Right, priority: 3, allowSorting : false },
---------------
]
});
<script id="datetemplate" type="text/x-jsrender">
<span class="date e-headericon"></span>
</script>
<style>
.e-headericon {
content: url("Style/images/GridActive.png");
height : 20px !important;
width: 23px !important;
float : left;
}
</style> |
Hi Prasanna Kumar,
I see you yourself could not use JsRender syntax in header template.
However, your solution will suffice for my purpose and this "ticket" should be considered "successfully closed" as long as you provide guarantee that this tecnique won't brake later on with updates :)
Thank you,
Marco
Hi Prasanna,
The very first thing I have to notice is that there is no "data-ej-mappingname" attribute, but this one is set: "ej-mappingname".
Also the column reordering suddenly stops to works, for it seems impossibile to drop a column anywhere among headers: this is the error I can share:
ej.web.all.min.js:10 Uncaught TypeError: Cannot read property 'field' of null
at Object.drop (ej.web.all.min.js:10)
at Object._dropEvent (ej.web.all.min.js:10)
at Object._drop (ej.web.all.min.js:10)
at Object._dragEnd (ej.web.all.min.js:10)
at Object._dragStop (ej.web.all.min.js:10)
at HTMLDocument.e (jquery.min.js:2)
at HTMLDocument.dispatch (jquery.min.js:3)
at HTMLDocument.q.handle (jquery.min.js:3)
I was fancy some problem with the name of the attribute, however, leaving standard headers (removing the code of this thread), makes the drop works again - it find the field. So I am back to you again for I need both working: a custom e-icon inserted in the template, and column dropping as usual.
Did I miss something?
load : function (args) {
for (var i = 0 ; i < this.model.columns.length; i++) {
if (ej.isNullOrUndefined(this.model.columns[i].allowSorting)) {
this.model.columns[i].headerTemplateID = "#datetemplate";
}
}
},
actionComplete: function(args){
var headers = this.getHeaderTable().find(".e-headercelldiv");
for (var i = 0 ; i < headers.length; i++) {
if(headers.eq(i).parent().hasClass("e-headertemplate"))
headers.eq(i).prepend("<span style='float:right'>" + headers.eq(i).attr("data-ej-mappingname") + "</span>")
}
}, |