Column Width resize

[kalaivaniMember]

Is it possible to resize the width of the grid view columns at runtime?

[Peter StoevKeymaster]

Hi kalaivani,

Yes, it is possible to resize the Grid columns at runtime. In order to achieve that, you need to enable the ‘columnsresize’ feature.
You can take a look at our Online Grid sample for Columns Resizing here: columnsresizing.htm.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kalaivaniMember]

It allows me to resize it .But the Filling function will call for every 5 sec ,for next refresh it will goes to original position .
Question 1 : How to retain the changed width ?
Question 2 : One of my column is Link field.Is it possible to just display the “Link” as text in that column and by internal it should take its respective path for redirection ?
Question 3 : How to stop the setinterval at code behind?

My script is below

$(document).ready(function () {
function getdata() {
var data = ‘{“Products”:[{“PNum”:”1001″,”Description”:”Product1″, “Stock”: “10”}, {“PNum”:”1002″,”Description”:”Product2″, “Stock”: “20”}]}’;
var source =
{
datatype: “json”,
async: false,
datafields: [
{ name: ‘Id’ },
{ name: ‘FileName’ },
{ name: ‘Link’ },
{ name: ‘user’ }
],
id: “id”,
url: ‘api/Files/’
};

var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).bind(‘bindingcomplete’, function () {

});
// //page rendering – anchor tag
var pagerrenderer = function () {
var element = $(“

“);
var paginginfo = $(“#jqxgrid”).jqxGrid(‘getpaginginformation’);
for (i = 0; i < paginginfo.pagescount; i++) {
// add anchor tag with the page number for each page.
var anchor = $("” + i + ““);
anchor.appendTo(element);
anchor.click(function (event) {
// go to a page.
var pagenum = parseInt($(event.target).text());
$(“#jqxgrid”).jqxGrid(‘gotopage’, pagenum);
});
}
return element;
}
var linkrenderer = function (id, row, column, value) {
var datarow = $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, id, “Link”);
// For link
if (value.indexOf(‘#’) != -1) {
value = value.substring(0, value.indexOf(‘#’));
}
var format = { target: ‘”_blank”‘ };

var html = $.jqx.dataFormat.formatlink(datarow, format);

return html;

}
$(“#jqxgrid”).jqxGrid(
{
source: dataAdapter,
pageable: true,
autoheight: true,
columnsresize: true,
pagerrenderer: pagerrenderer,
columns: [
{ text: ‘First Name’, dataField: ‘Id’, width: 100 },
{ text: ‘Last Name’, dataField: ‘FileName’, width: 100 },
{ text: ‘Product’, dataField: ‘Link’,cellsrenderer: linkrenderer},
{ text: ‘user’, dataField: ‘user’ }
]
});
}

getdata();
setInterval(function () {
if ($(“#jqxgrid”).jqxGrid(‘getpaginginformation’) == undefined) {
var page = 0;
}
else {
var page = $(“#jqxgrid”).jqxGrid(‘getpaginginformation’).pagenum;
}

getdata();
$(“#jqxgrid”).jqxGrid(‘gotopage’, page);
}, 5000);

});

[Peter StoevKeymaster]

In your refreshes, you set the columns width again. You should not do that, if you want to save the width that the user has set with the UI.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kalaivaniMember]

I think its because of iam setting as static Width as 100 .If i remove the static width then i cant able to resize it.

How to set the column Width on refresh i.r set interval function ?

[Peter StoevKeymaster]

Do you use jQWidgets 2.2 or an earlier version?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kalaivaniMember]

am using jQWidget 2.0 version .
What is new with 2.2 version ?

[Peter StoevKeymaster]

Multiple reported issues are fixed and there are multiple new features since jQWidgets 2.0. For more details visit the Release History page.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[kalaivaniMember]

Ok Let me download the latest version and try it .

1. Any idea how to clearinterval in code behind?
For every 5 sec it getting data from Json file .at certain time i should stop that process,as this process is started when the application starts and stops when the application end.Which is not recommended.

2. is it possible to display the Link column value as “Link” and internally it should store the respective path and redirect to it when the user click on the Link?
Currently the whole path is displayed in the grid and redirected to that path when user clicks.

[Peter StoevKeymaster]

Hi kalaivani,

– As far as I know the clearInterval works with setInterval and you need to pass an id of setInterval to clear the interval. For more take a look at: http://www.w3schools.com/jsref/met_win_clearinterval.asp.

– It depends on you what is displayed in a cell when you use a ‘cellsrenderer’ callback function. The function should return a HTML string that will be displayed by the Grid. if you associate the cell’s value to an Anchor tag’s href, the text of the Anchor could be something else depending on your business logic.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dsFranzParticipant]

Hi

I have a grid with flexible layout, and want to have the column resize behaviour like in your example above: columnsresizing.htm

The problem is, that there is shown a scrollbar at bottom, even when the columns fit the width of the grid (I mean the column width are not too big to
fit in the grid).
In your example, the width of last column is calculated to fit exactly the width of table (by width set to ‘auto’).
Looks like this does not always work with flexible layout.

You can try this on jsfiddle: http://jsfiddle.net/ndn6X/172/

Maybe you have to resize the browser window, it seems to me that at some resolutions it works fine, but in the most cases the scrollbar is shown.

I am using jQWidgets Version v4.3.0

The Code:

HTML:

<div id = "container">
	<div id="jqxgrid"></div>
</div>
<div>
 <input type="button" value="Button" id='jqxButton' />
</div>

CSS:

#container{
  width:'100%';
}

JAVASCRIPT:

 var data = generatedata(500);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }],
     datatype: "array"
 };

var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: '100%',
     theme: 'energyblue', 
     source: adapter,
     columnsresize:true,
     pageable: true,
     altrows: true,
     autoshowloadelement: true,
     enablehover: false,
     autoheight: true,
     sortable: true,
     selectionmode: 'none',
     columnsreorder: true,
     columnsresize: true,
     autosavestate: true,
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         columngroup: 'Name',
         width: '40%'
     }, {
         text: 'Last Name',
         columngroup: 'Name',
         datafield: 'lastname',
         width: '30%'
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 'auto',
         minwidth: 10, 
         resizable: false,
     }] 
 });
 
 $("#jqxButton").jqxButton({ width: 120, height: 40 });
 $('#jqxButton').on('click', function () { 
 			$('#jqxgrid').jqxGrid('setcolumnproperty', 'firstname', 'width', '30%');
      $('#jqxgrid').jqxGrid('setcolumnproperty', 'lastname', 'width', '40%');
      $('#jqxgrid').jqxGrid('setcolumnproperty', 'productname', 'width', 'auto');
 }); 

[Peter StoevKeymaster]

Hi dsFranz,

The solution is to define the ‘width’ property of all columns in percentages.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[dsFranzParticipant]

Hi Peter

Thanks for reply.

I’have already tried this solution before, it solves the problem with the scrollbar, but than it does not have the resize behaviour that I want.

When setting all columns ‘width’ property to percentage, when I resize a column the columns left of them move to the right (with of columns now is greater than table column).

But I want the behaviour like in your example: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/columnsresizing.htm?classic
When resizing a column, as long as the last column is greater than min size, the columns fit into table (no scrollbar).

[Peter StoevKeymaster]

Hi dsFranz,

We can offer only the Grid behavior I suggested.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts