Hide grid MVC | Infragistics Forums

190

Hide grid MVC

Herman posted over 12 years ago

Is any way to hide grid if datasource is empty?

6279

Suggested Answer

[Infragistics] Borislav Traykov posted over 12 years ago in reply to Josh

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>

I'm on the verge of saying that this is a more of a consulting-type of question, rather than a support/advice-asking one, but I'll let it slide this time.

PS: Please do me a favor and give the full meaning of abbreviations such as OP when you post them - it's caused my brain to throw an exception until I understood that it stood for Original Poster. I'd be so bold as to say that I'm not the only one who's not that forum-slang-savvy :).
Thanks in advance!

t70490-MVC-2nd.version.zip

1845

Josh posted over 12 years ago in reply to [Infragistics] Borislav Traykov

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.
Cancel
Reply

Cancel

6279

[Infragistics] Borislav Traykov posted over 12 years ago in reply to Josh

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!

t70490-MVC.zip

1845

Josh posted over 12 years ago in reply to [Infragistics] Tsvetelina Georgieva

How do you hide the grid in MVC as the OP asked instead of client-side?
Cancel
Reply

Cancel
19693

Suggested Answer
[Infragistics] Tsvetelina Georgieva posted over 12 years ago

Hello gerasha2,

I recommend you using the approach suggested by Angel Todorov in the forum post below:

https://ko.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.
Cancel
Reply

Reject Answer

Cancel