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

Freeze Template Column in Grid

I have grid which has below configuration/code. however i am not able to make this to work

cols.push({ field: 'ResourceId', headerText: 'ResourceId', textAlign: 'Left', type:'string',isPrimaryKey: true,visible:false,valueAccessor: populateresID});
if(actuals){
cols.push({ field: 'TeamName', headerText: 'TeamName', textAlign: 'Left', type:'string',isPrimaryKey: false,width:100});
}
cols.push({ field: 'name', headerText: 'Resource Name', textAlign: 'Left', type:'string',isPrimaryKey: false,
edit: {
create: function (args) {
this.elem = document.createElement('input');
//this.elem.text=args.data.name;
return this.elem;
},
read: function () {
return this.dObj.text;
},
destroy: function () {
//dObj.destroy();
},
keydown:function(args){
alert(args);
},
write: function (args) {
this.dObj = new AutoComplete({
autofill:true,
highlight: true,
suggestionCount:999,
dataSource: ResourceCollection,
ignoreCase:true,
filterType:"Contains",
fields:{ text: 'Name'}, //, value: 'Code'
placeholder:'Search User',
value: args.rowData !== undefined ? args.rowData["name"] : "-",
actionBegin:function(args){
console.log(args);
},
actionComplete:function(args){
console.log('actioncomplete');
console.log(args);
},
change:function(args){
try{
if(args.itemData!=null){
let rId=args.itemData.Code.replace('#','%23');
let items = [];
let gridInstance:Grid=(args.element.closest(".e-grid").ej2_instances[0] as Grid);
gridInstance.updateCell(0,'ResourceId',rId);
}
}catch(e){
console.log(e);
}
}
});
this.dObj.appendTo(this.elem);
}
},width: 350,allowResizing:true,allowEditing:false});
}

<ejs-grid #gridbid id='gridbid' [allowSelection]='true' [dataSource]='bidData' [allowExcelExport]='true' [frozenColumns]='1'
height='99%' showColumnChooser='true' [editSettings]='editSettings' [toolbar]='toolbarOptions' [columns]='bidColumns'
[allowSorting]='false' [allowResizing]='true' allowReordering='true' (rowSelected)='bidRowSelectHandler($event)' (toolbarClick)="bidToolbarClick($event)"
(beginEdit)='bidbeginEdit($event)' (cellEdit)='bidCellEdit($event)' (cellSaved)="gridUpdateTotal($event)" (rowDataBound)="rowBound($event)"
(queryCellInfo)="renderCellInfo($event)"
(actionBegin)='bidOnActionBegin($event)' (actionComplete)='bidOnActionComplete($event)' >
</ejs-grid>




3 Replies

JC Joseph Christ Nithin Issack Syncfusion Team October 31, 2022 12:21 PM

Hi PDev,


   Greetings from Syncfusion support.


   Before proceeding to the solution, Share the below details which will help us provide a better solution ASAP.


  • Simple sample to reproduce the issue or reproduce the issue in the sample provided in the previous update.
  • Video demo for reproducing the issue.
  • Replication Steps to reproduce the issue.
  • The Syncfusion package version you are using.


Regards,

Joseph I.




PD PDev November 1, 2022 02:59 AM

Don't know what was the issue but if I set Frozen Columns on Data-bound event, then i can Freeze columns. I think if document would have mentioned that then It would have been better,



JC Joseph Christ Nithin Issack Syncfusion Team November 7, 2022 11:17 AM

Hi PDev,


  Before proceeding, Share the below details which will help us improve the documentation from our side.


  • Complete grid rendering code.
  • Explain in detail have you assigned the columns and the frozen columns dynamically.
  • Video demo of your requirement.


Regards,

Joseph I.


Loader.
Live Chat Icon For mobile
Up arrow icon