Datagrid Filtering not responsive #405

andreannr · 2023-10-16T12:08:04Z

andreannr
Oct 16, 2023

Hey, im just using blazorbootstrap for my .net maui project.
I have problems when using datagrid, especially the filter section like the attached image.
Can you help me to fix this problem?

Thanks

gvreddy04 · 2023-10-16T17:20:49Z

gvreddy04
Oct 16, 2023
Maintainer

@andreannr Thank you for trying BlazorBootstrap. Please share a sample code or GitHub repo to reproduce the issue.

1 reply

andreannr Oct 17, 2023
Author

there is my code for datagrid

 <div class="col-lg-12 form-group">
    <Grid TItem="ListReservasi" class="table table-hover table-bordered table-striped" FiltersRowCssClass="bg-secondary text-white bg-opacity-25 border-bottom-0" HeaderRowCssClass="bg-secondary text-white border-bottom-0" Data="reservasi" AllowFiltering="true" AllowPaging="true" PageSize="10" AllowSorting="true" Responsive="true">
        <GridColumn TItem="ListReservasi" HeaderText="Tanggal" PropertyName="tservice_dateonly" SortKeySelector="item => item.tservice_dateonly" Filterable="true">
             @String.Format("{0:dd/MM/yyyy}", context.tservice_dateonly)
        </GridColumn>
        <GridColumn TItem="ListReservasi" HeaderText="Jam" PropertyName="tservice_timeonly" SortKeySelector="item => item.tservice_timeonly" Sortable="false" Filterable="false" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.Center">
             @String.Format("{0:HH:00}", context.tservice_timeonly)
        </GridColumn>
        <GridColumn TItem="ListReservasi" HeaderText="Nama" PropertyName="tservice_nama" SortKeySelector="item => item.tservice_nama" Sortable="false" Filterable="true">
            @context.tservice_nama
        </GridColumn>
        <GridColumn TItem="ListReservasi" HeaderText="No Telp" PropertyName="tservice_notelp" @Style="width:100%" SortKeySelector="item => item.tservice_notelp" Sortable="false" Filterable="false">
            @context.tservice_notelp
        </GridColumn>
        <GridColumn TItem="ListReservasi" HeaderText="Merk" PropertyName="car_name" SortKeySelector="item => item.car_name" Sortable="false" Filterable="false">
            @context.car_name
        </GridColumn>
        <GridColumn TItem="ListReservasi" HeaderText="Tipe" PropertyName="cartype_name" SortKeySelector="item => item.cartype_name" Sortable="false" Filterable="false">
            @context.cartype_name
        </GridColumn>
        <GridColumn TItem="ListReservasi" HeaderText="Service" PropertyName="service_name" SortKeySelector="item => item.service_name" Sortable="false" Filterable="false">
            @context.service_name
        </GridColumn>
        <GridColumn TItem="ListReservasi" HeaderText="Total" PropertyName="tservice_total" SortKeySelector="item => item.tservice_total" Filterable="false" HeaderTextAlignment="Alignment.Center" TextAlignment="Alignment.End">
            @String.Format("{0:N2}", context.tservice_total)
        </GridColumn>
    </Grid>
</div>

gvreddy04 · 2023-10-17T09:27:54Z

gvreddy04
Oct 17, 2023
Maintainer

@andreannr Can you share the wwwroot/index.html file changes?

1 reply

andreannr Oct 17, 2023
Author

This is my index.cshtml
btw my project is .NET MAUI Blazor with net7.0 framework
Thanks

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
<link href="_content/Blazor.Bootstrap/Blazor.Bootstrap.bundle.scp.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>ServiceCar</title>
    <base href="/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" /> 
    <link href="css/app.css" rel="stylesheet" />
    <link href="ServiceCar.styles.css" rel="stylesheet" />
</head>

<body>

    <div class="status-bar-safe-area"></div>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js" autostart="false"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <!-- Add chart.js reference if Chart components are used in the application. -->
    <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>
    <script src="_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js"></script>
</body>

</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Datagrid Filtering not responsive #405

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Datagrid Filtering not responsive #405

andreannr Oct 16, 2023

Replies: 2 comments · 2 replies

gvreddy04 Oct 16, 2023 Maintainer

andreannr Oct 17, 2023 Author

gvreddy04 Oct 17, 2023 Maintainer

andreannr Oct 17, 2023 Author

andreannr
Oct 16, 2023

Replies: 2 comments 2 replies

gvreddy04
Oct 16, 2023
Maintainer

andreannr Oct 17, 2023
Author

gvreddy04
Oct 17, 2023
Maintainer

andreannr Oct 17, 2023
Author