How to change/set row height for new row template? I have followed second solution proposed here http://es.infragistics.com/community/forums/p/69830/354317.aspx#354317 It works fine for rows that already exist in the grid but it seems that it doesn't work for new rows, I mean, when you add a row and start filling the cell. Any advice? Thanks.
Hello Luis,
Thank you for posting in the community.
What I can suggest is handling the rendered event of the igGrid. In this event a reference to the add new row could be retrieved and its height could be set . For example:
$("#grid1").igGrid({ autoGenerateColumns: false, primaryKey: "ID", rendered: function () { $("[title='Click to start adding new row']").css("height", "3em"); }, columns: [ { headerText: "ID", key: "ID", dataType: "string", template: "<p>${ID}</p>" }, { headerText: "Name", key: "Name", dataType: "string", template: "<p>${Name}</p>" }, { headerText: "Age", key: "Age", dataType: "string", template: "<p>${Age}</p>" } ], dataSource: data, features: [ { name: "Updating" } ] });
$("#grid1").igGrid({
autoGenerateColumns: false,
primaryKey: "ID",
rendered: function () {
$("[title='Click to start adding new row']").css("height", "3em");
},
columns: [
{ headerText: "ID", key: "ID", dataType: "string", template: "<p>${ID}</p>" },
{ headerText: "Name", key: "Name", dataType: "string", template: "<p>${Name}</p>" },
{ headerText: "Age", key: "Age", dataType: "string", template: "<p>${Age}</p>" }
],
dataSource: data,
features: [
{
name: "Updating"
}
]
});
I also made a small sample illustrating my suggestion and I am attaching it for your reference.
Please have a look at the provided sample and let me know if you need any further assistance.
Your sample works but it doesn't in my code. I changed to spanish version because I use spanish language, but still the style is not applied. If I apply style manually in the debugger it is ok:
$(document).delegate("#Grid", "iggridrendering", function (evt, ui) { $("[title='Haga clic para agregar una nueva fila']").css("height", "3em"); });
Is there any other way to apply this style?
Thank you for getting back to me.
What I can suggest as an alternative is getting reference to the Add New Row row by the css applied and set the height in the rendered event as following:
$("#grid1").igGrid({ autoGenerateColumns: false, primaryKey: "ID", rendered: function () { $(".ui-iggrid-addrow").css("height","4em"); }, . . .
$(".ui-iggrid-addrow").css("height","4em");
.
I modified the sample and I am attaching it for your reference.
Please let me know whether it helps you achieve your requirement.
Muchas gracias Vasya por tu ayuda! Thanks for your help Vasya! I know your solution should work, unfortunately for some reason it doesn't in my case. But based on your advise I found that this makes it:
<style type="text/css">
.ui-iggrid-addrow {
height: 4em; }</style>
So it's ok now ;)
I am glad that you have been able to resolve your issue.
Please let me know if you need any further assistance with this matter.