How to change/set row height for new row template? I have followed second solution proposed here http://ko.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?
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.
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 ;)
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.