Is any way to hide grid if datasource is empty?
Hello gerasha2,
I recommend you using the approach suggested by Angel Todorov in the forum post below:
https://es.infragistics.com/community/forums/f/ignite-ui-for-javascript/68274/grid---no-items-text/346033#346033
You can choose headerRendering event because it is raised earlier (thus you can avoid rendering the grid before hiding it)
https://www.igniteui.com/help/notfound?aspxerrorpath=/help/api/2012.1/ui.iggrid#events
To hide the grid you can use "ui-iggrid". This class is applied to the top container element
https://www.igniteui.com/help/api/2019.1/ui.iggrid#theming
Take a look at the code snippet below :
[code]<style type="text/css"> .hiddenGrid { visibility: hidden; display: none; }</style><script type="text/javascript"> $("#grid1").live("iggridheaderrendering", function (event, args) { if (args.owner.dataSource.dataView().length === 0) { $(".ui-iggrid").addClass("hiddenGrid"); } });
</script>[/code]
Let us know if you need further assistance.
How do you hide the grid in MVC as the OP asked instead of client-side?
Hi guys,I'd propose checking if the grid's source data exists (or has more than zero items - whichever you prefer) and if it doesn't, simply skip the grid altogether like so:
@if (Model != null) { @(Html.Infragistics().Grid(Model) .ID("Grid1") .AutoGenerateColumns(false) .AutoGenerateLayouts(false) .LoadOnDemand(false) //.DataSourceUrl(Url.Action("GetData")) .AutoCommit(true) .Height("600px") .Columns(column => { column.For(virtualMachine => virtualMachine.VirtualMachineId).HeaderText("Virtual Machine ID").DataType("string").Width("150"); column.For(virutalMachine => virutalMachine.DeveloperId).HeaderText("Developer ID").DataType("number").Width("100"); column.For(virtualMachine => virtualMachine.OperatingSystem).HeaderText("Operating System").DataType("string").Width("300px"); }) .PrimaryKey("VirtualMachineId") .Features(feature => { feature.Selection(); }) .DataBind().Render() ) } else { <div>No grid to display</div> }
I've attached an MVC project that illustrates my idea - you can see the implementation in the NoDataForGrid.cshtml view page.Hope this is what you're looking for.Cheers!
Thanks Borislav, not sure about OP, but I need to have the grid hidden on load, but able to show and databind client-side later.
Hi Josh,
I've attached an updated version of the MVC project to my current reply - you can see the new proposal there.Basically this is the code:
<body> <div> @(Html.Infragistics().Grid(Model) .ID("Grid1") .AutoGenerateColumns(false) .AutoGenerateLayouts(false) .LoadOnDemand(false) //.DataSourceUrl(Url.Action("GetData")) .AutoCommit(true) .Height("600px") .Columns(column => { column.For(virtualMachine => virtualMachine.VirtualMachineId).HeaderText("Virtual Machine ID").DataType("string").Width("150"); column.For(virutalMachine => virutalMachine.DeveloperId).HeaderText("Developer ID").DataType("number").Width("100"); column.For(virtualMachine => virtualMachine.OperatingSystem).HeaderText("Operating System").DataType("string").Width("300px"); }) .PrimaryKey("VirtualMachineId") .Features(feature => { feature.Selection(); }) .DataBind().Render() ) </div> <script type="text/javascript"> $("#Grid1").live("iggriddatabound", function (evt, ui) { if (ui.owner.dataSource._data.length == 0) $(ui.owner.element).igGrid("container").hide(); else if ($(ui.owner.element).igGrid("container").is(":hidden")) $(ui.owner.element).igGrid("container").show(); }); $("#giveDataToTheGridButton").live("click", function () { $("#Grid1").igGrid("option", 'dataSource', '/Chaining/GetData'); $("#Grid1").igGrid("option", 'dataSourceType', 'remoteUrl'); $("#Grid1").igGrid("dataBind"); }); </script> <br /> <input type="button" id="giveDataToTheGridButton" value="Bind the igGrid to some data!" /> </body>
@(Html.Infragistics().Grid(Model) .ID("Grid1") .AutoGenerateColumns(false) .AutoGenerateLayouts(false) .LoadOnDemand(false) //.DataSourceUrl(Url.Action("GetData")) .AutoCommit(true) .Height("600px") .Columns(column => { column.For(virtualMachine => virtualMachine.VirtualMachineId).HeaderText("Virtual Machine ID").DataType("string").Width("150"); column.For(virutalMachine => virutalMachine.DeveloperId).HeaderText("Developer ID").DataType("number").Width("100"); column.For(virtualMachine => virtualMachine.OperatingSystem).HeaderText("Operating System").DataType("string").Width("300px"); }) .PrimaryKey("VirtualMachineId") .Features(feature => { feature.Selection(); }) .DataBind().Render() ) </div> <script type="text/javascript"> $("#Grid1").live("iggriddatabound", function (evt, ui) { if (ui.owner.dataSource._data.length == 0) $(ui.owner.element).igGrid("container").hide(); else if ($(ui.owner.element).igGrid("container").is(":hidden")) $(ui.owner.element).igGrid("container").show(); }); $("#giveDataToTheGridButton").live("click", function () { $("#Grid1").igGrid("option", 'dataSource', '/Chaining/GetData'); $("#Grid1").igGrid("option", 'dataSourceType', 'remoteUrl'); $("#Grid1").igGrid("dataBind"); }); </script> <br /> <input type="button" id="giveDataToTheGridButton" value="Bind the igGrid to some data!" /> </body>