New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Grid Checkbox auto select #112

Closed
tyjing opened this Issue Jul 20, 2017 · 13 comments

Comments

Projects
None yet
2 participants
@tyjing

tyjing commented Jul 20, 2017

The checkbox in grid table will auto tick without selecting anything after the table is loaded.
Not very sure how is it going to.
Please help to solve it urgently

@atatanasov

This comment has been minimized.

Show comment
Hide comment
@atatanasov

atatanasov Jul 21, 2017

Owner

Could you provide code sample that I can use to replicate the issue

Owner

atatanasov commented Jul 21, 2017

Could you provide code sample that I can use to replicate the issue

@tyjing

This comment has been minimized.

Show comment
Hide comment
@tyjing

tyjing Jul 21, 2017

Below is the code sample :)

<head>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/checkbox.min.css" rel="stylesheet" />
    <link href="~/Content/grid/grid.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.11.1.js"></script>
    <script src="~/Scripts/checkbox.min.js"></script>
    <script src="~/Scripts/grid/grid.min.js"></script>
</head>
<body>
    <div class="col-xs-12"> 
         <table id="ItemGrid"></table> 
    </div>

    <script>
var gridItem;
$(document).ready(function () {
        gridItem = $('#ItemGrid').grid({
            primaryKey: 'ItemId',
            dataSource: '/Admin/GetItemList',
            uiLibrary: 'bootstrap',
            selectionType: 'multiple',
            selectionMethod: 'checkbox',
            columns: [
                { field: 'No', width: 32 },
                { field: 'ItemId', sortable: true, hidden: true },
                { field: 'ItemCode', title: 'Item Code', sortable: true },
                { field: 'ItemName', title: 'Item Name', sortable: true },
                { field: 'ItemSpec', title: 'Item Spec', sortable: true },
                { field: 'DateAdded', title: 'Date Added', sortable: true },
            ],
            pager: { limit: 10, sizes: [10, 15, 20, 50, 100] },
        });
    });
    </script>
</body>

tyjing commented Jul 21, 2017

Below is the code sample :)

<head>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/checkbox.min.css" rel="stylesheet" />
    <link href="~/Content/grid/grid.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.11.1.js"></script>
    <script src="~/Scripts/checkbox.min.js"></script>
    <script src="~/Scripts/grid/grid.min.js"></script>
</head>
<body>
    <div class="col-xs-12"> 
         <table id="ItemGrid"></table> 
    </div>

    <script>
var gridItem;
$(document).ready(function () {
        gridItem = $('#ItemGrid').grid({
            primaryKey: 'ItemId',
            dataSource: '/Admin/GetItemList',
            uiLibrary: 'bootstrap',
            selectionType: 'multiple',
            selectionMethod: 'checkbox',
            columns: [
                { field: 'No', width: 32 },
                { field: 'ItemId', sortable: true, hidden: true },
                { field: 'ItemCode', title: 'Item Code', sortable: true },
                { field: 'ItemName', title: 'Item Name', sortable: true },
                { field: 'ItemSpec', title: 'Item Spec', sortable: true },
                { field: 'DateAdded', title: 'Date Added', sortable: true },
            ],
            pager: { limit: 10, sizes: [10, 15, 20, 50, 100] },
        });
    });
    </script>
</body>
@atatanasov

This comment has been minimized.

Show comment
Hide comment
@atatanasov

atatanasov Jul 22, 2017

Owner

We fixed that in the new development version. You can find the new build at https://github.com/atatanasov/gijgo/tree/master/dist

Owner

atatanasov commented Jul 22, 2017

We fixed that in the new development version. You can find the new build at https://github.com/atatanasov/gijgo/tree/master/dist

@tyjing

This comment has been minimized.

Show comment
Hide comment
@tyjing

tyjing Jul 22, 2017

Thank you so much @atatanasov
You have save my life :)

tyjing commented Jul 22, 2017

Thank you so much @atatanasov
You have save my life :)

@tyjing

This comment has been minimized.

Show comment
Hide comment
@tyjing

tyjing Jul 24, 2017

Hey @atatanasov i just realized that the updated version caused the pagination not function well.
Besides that, I added my own filter selection in the table, after i filtered the option, the checkboxes are automatically checked.

tyjing commented Jul 24, 2017

Hey @atatanasov i just realized that the updated version caused the pagination not function well.
Besides that, I added my own filter selection in the table, after i filtered the option, the checkboxes are automatically checked.

@atatanasov

This comment has been minimized.

Show comment
Hide comment
@atatanasov

atatanasov Jul 24, 2017

Owner

Could you send me a screenshot in order to see what is wrong with the pagination? Could you send me your code in order to see how the checkboxes are getting checked?
If you use modular build you have to add the dropdown when you are using pagination. This could be the issue.

Owner

atatanasov commented Jul 24, 2017

Could you send me a screenshot in order to see what is wrong with the pagination? Could you send me your code in order to see how the checkboxes are getting checked?
If you use modular build you have to add the dropdown when you are using pagination. This could be the issue.

atatanasov pushed a commit that referenced this issue Jul 25, 2017

Atanas Atanasov
refixed #112.
added improvements in the datepicker.
@atatanasov

This comment has been minimized.

Show comment
Hide comment
@atatanasov

atatanasov Jul 25, 2017

Owner

I think that I fixed your issues. Could you get the latest version from https://github.com/atatanasov/gijgo/tree/master/dist and try again.

Owner

atatanasov commented Jul 25, 2017

I think that I fixed your issues. Could you get the latest version from https://github.com/atatanasov/gijgo/tree/master/dist and try again.

@tyjing

This comment has been minimized.

Show comment
Hide comment
@tyjing

tyjing Jul 25, 2017

@atatanasov
The solution above solved the checkbox issues but the pagination is still unable to filter the result.
error5

tyjing commented Jul 25, 2017

@atatanasov
The solution above solved the checkbox issues but the pagination is still unable to filter the result.
error5

@atatanasov

This comment has been minimized.

Show comment
Hide comment
@atatanasov

atatanasov Jul 27, 2017

Owner

I downloaded the latest build from https://github.com/atatanasov/gijgo/tree/master/dist (I have a changes last days) and everything works fine. Could you download everything again and try again. You could be with old version of the dropdown.js and .css.
You can also exclude dropdown.js and .css and you grid is going to use a native browser dropdown where you are not going have such issues.

Owner

atatanasov commented Jul 27, 2017

I downloaded the latest build from https://github.com/atatanasov/gijgo/tree/master/dist (I have a changes last days) and everything works fine. Could you download everything again and try again. You could be with old version of the dropdown.js and .css.
You can also exclude dropdown.js and .css and you grid is going to use a native browser dropdown where you are not going have such issues.

@tyjing

This comment has been minimized.

Show comment
Hide comment
@tyjing

tyjing Jul 27, 2017

@atatanasov can you please tell me which is the .css and .js file i need to import to my project?
Currently i only input grid.css, grid.js, gijgo.css, gijgo.js, dropdown.js and dropdown.css.
But i get the following error in the console.
image

tyjing commented Jul 27, 2017

@atatanasov can you please tell me which is the .css and .js file i need to import to my project?
Currently i only input grid.css, grid.js, gijgo.css, gijgo.js, dropdown.js and dropdown.css.
But i get the following error in the console.
image

@atatanasov

This comment has been minimized.

Show comment
Hide comment
@atatanasov

atatanasov Jul 27, 2017

Owner

You can use just gijgo.js gijgo.css and jquery and that's all. If you use modular build you need to add core.js core.css and every component like grid with js and css file separately. Gijgo.js combine all components (grid, tree, etc.) Into one js file. It is up to you

Owner

atatanasov commented Jul 27, 2017

You can use just gijgo.js gijgo.css and jquery and that's all. If you use modular build you need to add core.js core.css and every component like grid with js and css file separately. Gijgo.js combine all components (grid, tree, etc.) Into one js file. It is up to you

@tyjing

This comment has been minimized.

Show comment
Hide comment
@tyjing

tyjing Jul 28, 2017

@atatanasov is there any sequence for your js?


<script src="~/Scripts/jquery-1.11.1.min.js"></script>
            <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/respond.min.js"></script>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/font-awesome.min.css" rel="stylesheet" />
        <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <link href="~/Content/main.css" rel="stylesheet" />
    <link href="~/Content/sb-admin-2.css" rel="stylesheet" />
    <link href="~/Content/metisMenu.min.css" rel="stylesheet" />
    <link href="~/Content/sweetalert.css" rel="stylesheet" />
    <link href="~/Content/jquery.bootgrid.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link href="~/Content/gijgo.min.css" rel="stylesheet" />
    <link href="~/Content/datepicker.css" rel="stylesheet" />
    <script src="~/Scripts/sb-admin-2.min.js"></script>
    <script src="~/Scripts/metisMenu.min.js"></script>
    <script src="~/Scripts/sweetalert.min.js"></script>
    <script src="~/Scripts/jquery.bootgrid.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="~/Scripts/jquery.maskedinput.min.js"></script>
    <script src="~/Scripts/gijgo.min.js"></script>
    <script src="~/Scripts/moment.min.js"></script>
    <script src="~/Scripts/bootstrap-datepicker.js"></script>

this is my current imported .js and .css
the pagination still not function

tyjing commented Jul 28, 2017

@atatanasov is there any sequence for your js?


<script src="~/Scripts/jquery-1.11.1.min.js"></script>
            <script src="~/Scripts/bootstrap.min.js"></script>
        <script src="~/Scripts/respond.min.js"></script>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/font-awesome.min.css" rel="stylesheet" />
        <script src="~/Scripts/modernizr-2.6.2.js"></script>
    <link href="~/Content/main.css" rel="stylesheet" />
    <link href="~/Content/sb-admin-2.css" rel="stylesheet" />
    <link href="~/Content/metisMenu.min.css" rel="stylesheet" />
    <link href="~/Content/sweetalert.css" rel="stylesheet" />
    <link href="~/Content/jquery.bootgrid.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link href="~/Content/gijgo.min.css" rel="stylesheet" />
    <link href="~/Content/datepicker.css" rel="stylesheet" />
    <script src="~/Scripts/sb-admin-2.min.js"></script>
    <script src="~/Scripts/metisMenu.min.js"></script>
    <script src="~/Scripts/sweetalert.min.js"></script>
    <script src="~/Scripts/jquery.bootgrid.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="~/Scripts/jquery.maskedinput.min.js"></script>
    <script src="~/Scripts/gijgo.min.js"></script>
    <script src="~/Scripts/moment.min.js"></script>
    <script src="~/Scripts/bootstrap-datepicker.js"></script>

this is my current imported .js and .css
the pagination still not function

@atatanasov

This comment has been minimized.

Show comment
Hide comment
@atatanasov

atatanasov Jul 28, 2017

Owner

The order of the files doesn't matter. Could you compare your code with our ASP.NET examples where we use the latest gijgo.js and the pagination works fine. Here is the code: https://github.com/atatanasov/gijgo-asp-net-examples

Owner

atatanasov commented Jul 28, 2017

The order of the files doesn't matter. Could you compare your code with our ASP.NET examples where we use the latest gijgo.js and the pagination works fine. Here is the code: https://github.com/atatanasov/gijgo-asp-net-examples

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment