Hi All,

I was working in Infragistics in MVC in which I need to set set height and width of grid dynamically based on record count.Initially height and width of grid is set for 10 records.But when I get 3 records only in the grid the height and width of the grid is not changed according to the no. of records in the grid dynamically.

Plesae find the code given below.

$.ig.loader({

scriptPath: "@Url.Content("~/Content/Scripts")",

cssPath: "@Url.Content("~/Content/css")",

resources: 'igGrid.*',

ready: function () {

$.getJSON("@Url.Content("~/ProviderInquiry/GetAll")", JSON.stringify(dataResponse), function (data) {

var headerTextValues = ["ID", "Suffix", "NPI", "Title", "Address Line1", "Status", "Alpha Sort1", "Alpha Sort2", "Address Line2", "City", "State", "Zip","ProviderInternalNum"];

$('#employeeGrid').igGrid({

expandCollapseAnimations: true,

animationDuration: 1000,

expandTooltip: "Expand to View Details",

collapseTooltip: "Hide details",

height: "35%",

width: "100%",

dataSource: data,

responseDataKey: "Records",

dataSourceType: "json",

autoGenerateLayouts: false,

autoGenerateColumns: false,

rowEditDialogContainment: "owner",

showReadonlyEditors: false,

columns: [

{

headerText: headerTextValues[0], key: "ProviderID", width: 100,

template: "<a href='@Url.Content("~/Provider/Provider?ProviderInternalNum=${ProviderInternalNum}")' target='_blank'>${ProviderID}</a>"

},

{ headerText: headerTextValues[1], key: "ProviderSuffix", width: 70 },

{ headerText: headerTextValues[2], key: "NPI", width: 100 },

{ headerText: headerTextValues[3], key: "ProviderTitle", width: 155 },

{ headerText: headerTextValues[4], key: "ProviderAddress1", width: 165 },

{ headerText: headerTextValues[5], key: "ProviderStatus" },

{ headerText: headerTextValues[6], key: "AlphaSort1" },

{ headerText: headerTextValues[7], key: "AlphaSort2" },

{ headerText: headerTextValues[8], key: "ProviderAddress2" },

{ headerText: headerTextValues[9], key: "ProviderCity" },

{ headerText: headerTextValues[10], key: "ProviderState" },

{ headerText: headerTextValues[11], key: "ProviderZipCode" },

{headerText: headerTextValues[12], key: "ProviderInternalNum"}

//{ headerText: headerTextValues[4], key: "UpdateRow", width: 175, template: "<a href='Home/ManageEmployee?EmployeeId=${EmployeeId}&command=edit' class='editDialog'>Edit</a>" },

],

initialDataBindDepth: -1,

primaryKey: 'ProviderID',

features: [

{

name: "Selection",

mode: "row",

multipleSelection: false

},

//For Hiding columns

{

name: "Hiding",

columnSettings: [

{

columnKey: "ProviderInternalNum",

allowHiding: true,

hidden: true

},

{ columnKey: "ProviderID",

allowHiding: false,

hidden: false

}

]

},

{

name: 'Paging',

type: 'local',

pageSize: 10,

inherit: true

},

{

name: 'Filtering'

},

//Makes a particular column unmovable

{

name: "ColumnMoving",

columnMovingDialogContainment: "window",

columnSettings: [

{

columnKey: "ProviderID",

allowMoving: false

//Enable: false

}

]

},

//{

// name: "ColumnFixing",

// fixingDirection: "left",

// columnSettings: [

// {

// columnKey: "ProviderID",

// isFixed: true,

// allowFixing: true

// },

// ]

//},

{

name: 'Sorting'

},

{

name: "GroupBy",

columnSettings: [

{

//columnKey: "ProviderTitle",

isGroupBy: true

}

]

},

//Making a particular column nonresizable

{

name: "Resizing",

columnSettings: [

{

columnKey: "ProviderID",

allowResizing: false

}

]

},

],

rowsRendered: function (evt, ui) {

modalMessage = new GridModalMessage(ui.owner);

if (ui.owner.dataSource.dataView().length === 0) {

modalMessage.show("Your search produced no results");

}

},

dataRendered: function(evt, ui) {

//To show the Display all records

$("#GridChkbox").show();

}

});

});

}

});