I want to change the left most column header name to blank "", how could I go about doing that.
Hello Seang,
Thank you for posting in the community.
There is not API for doing that out of the box. You should use jQuery and manipulate the igGrid DOM tree.
There are two ways to do that:
The first uses the following code:
$("#grid1").igGrid("headersTable").find('thead > tr:eq(0) > th:eq(0) > span.ui-iggrid-headertext').html("");
This code finds the leftmost column header using the igGrid headersTable API.
The second way uses the following code:
$("#grid1_Name > span.ui-iggrid-headertext").html("");
where #grid1_Name is the name of the th element and is constructed the following way:
<grid_id>_<column_key>, where <grid_id> is the id of the grid placeholder and the <column_key> is the key of the column.
Do not hesitate to ask if you have any additional questions.
Best regards,Martin PavlovInfragistics, Inc.support@infragistics.com
I understand the approach here but so far I cant make it result in any action. I traced all the way up to the html() function and all looks good. Could it possibly be an event I'm canceling? Would this line of code fire any events? I know for sure the grid is fully loaded but no luck changing the visible field name.
Thanks for your feedback!
Those lines of code should not fire events.
You can also try the following code:
$("#grid1").igGrid("headersTable").find('thead > tr:eq(0) > th:eq(0) > span.ui-iggrid-headertext').empty();
or
$("#grid1").igGrid("headersTable").find('thead > tr:eq(0) > th:eq(0) > span.ui-iggrid-headertext').text("");
If this code does not help either, can you attach a sample, so I can investigate it further.
Best regards,
Martin Pavlov
Infragistics, Inc.
support@infragistics.com
I no longer have a need for this.
Have more troubles here. I change my divs to dynamic creation and now this is no longer working.
Here is a snapshot of my structure. Formatting is lost but maybe that will help.
<div id="myDiv0"><div id="myDiv0_table_container" class="ui-widget ui-helper-clearfix ui-corner-all ui-iggrid" tabindex="0" style="width: 490px; height: 350px;"><div class="ui-widget-header ui-helper-reset" style="overflow: hidden; position: relative; white-space: nowrap;"><table id="myDiv0_table_headers" class="ui-iggrid-headertable" cellspacing="0" cellpadding="0" border="0" style="width: 4250px;"><colgroup></colgroup><thead><tr><th id="myDiv0_table_Address" class="ui-iggrid-header ui-widget-header ui-iggrid-sortableheader ui-state-default" title="click to sort column"><div data-resizinghandle="true" style="position: relative; width: 100%; height: 0px; top: 0px; left: 0px;"></div><a href="#"><span class="ui-iggrid-headertext"></span><span class="ui-iggrid-colindicator"></span></a></th>
This is how I create them.
igniteui.prototype.createDataSheet = function ( inX, inY, inWidth, inHeight, newData ) { var id = this.windows.length; var window = document.createElement( 'div' ); window.setAttribute( 'id:', 'myWindow' + id ); window.setAttribute( 'data-minwidth', '75' ); window.setAttribute( 'data-minheight', '50' ); window.setAttribute( 'class', 'box message' ); var bar = document.createElement( 'div' ); bar.setAttribute( 'id', 'myBar' + id ); bar.setAttribute( 'class', 'handle bar' ); bar.innerHTML = '<h2>window'+id+'</h2>'; window.appendChild( bar ); var content = document.createElement( 'div' ); content.setAttribute( 'id', 'myContent' + id ) content.setAttribute( 'class', 'contents' ) window.appendChild( content ); var newDiv = document.createElement( 'div' ); newDiv.setAttribute( 'id', 'myDiv' + id ) content.appendChild( newDiv ); var slider = document.createElement( 'div' ); slider.setAttribute( 'id', 'mySlider' + id ) slider.setAttribute( 'class', 'handle resize' ) slider.innerHTML = '//'; window.appendChild( slider ); document.body.appendChild( window ); this.windows.push( $( newDiv ) );
};
Any ideas I'm just not able to get to the text field any longer.
Hello Sean,
That's a good solution.Do not hesitate to ask if you have any additional questions.
ah ok, I found a way around that actually.
var gridID = ui.owner.id();
$( "#" + gridID + " > thead > tr:eq(0) > th:eq(0) span.ui-iggrid-headertext" ).html( "" );
this was done having the owner id though. not directly like you mentioned. I use the same trick to get options
$( "#" + gridID ).igGridFiltering("option", "type");
Thank you for the feedback.The Known Issue is actually concerning the grid's features API calls, so if you don't have features defined for the grid then you should not bother.Attached you can find a sample demonstrating the known issue.