SearchBuilder Extension Not Working Proper when Using on Content (Child) Page in Asp.Net Webforms

ravinbhl

Description of problem: SearchBuilder Causing a strange problem when Using in Content Page (MasterPage/Child Page) of an Asp.Net Webforms, it's working as expected when using in a standalone webform (ASPX page) But When Using it on a Content (Child) Page of Master Page, when I Click on Logical And/Or Button it Reloads the form and all conditions reset, whereas it working absolutely fine when using on a standalone ASPX Page. Below is the JavaScript code that I am using, the same code working well when using on a standalone page. and I am using ClientId Mode=Static for the Gridview/repeater control. even in the case of HTML Table taken from the examples it causing issues when using on Content Page. Below is the Javascript code I am using.

<script> 
        $(document).ready(function () {   
        var table =  $('#gvBooking').DataTable({    
                filter: true,
            keys: false,
                scrollX:true,
                 scrollY:"275px",
        scrollCollapse: true,
                colReorder: true,
                ordering: true,   
                stateSave:true,
                pagingType: "full_numbers",
                pageLength: 50,
                lengthMenu: [
            [10, 25, 50, 100, -1],
            ['10 rows', '25 rows', '50 rows', '100 rows', 'Show all']
        ],
                dom: 'Bfrtip',
                language: {
            searchBuilder: {
                button: 'Filter',
            }
        },
                buttons: [ 'pageLength', 'searchBuilder', {
                extend: 'excelHtml5',
                
           footer: false,
                exportOptions: {
                    columns: ':visible' }
            }, {
                    extend: 'colvis',
                    collectionLayout: 'fixed two-column',
                    prefixButtons: ['colvisRestore'],                      
                    columnText: function (dt, idx, title) {
                        return (idx + 1) + ': ' + title;
                    }
                },
                 {
                        text: 'Import From Excel',                       
                        action: function (e,dt, node, config) {
                            $('#ExcelImport').modal('show');
                        }
                    }
            ]
        });});      
    </script>

It's Causing the Same issue even when using basic configuration as below.

    <script> 
$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Qlfrtip'
    });
});
</script>

.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

ravinbhl

thanks @colin , i am new to this forum,so was not aware about the same, in future i will keep this in mind, when posting any question.

The issue resolved when i am trying to make a new project to provide the link for the page, since its a dotnet project. Seems like the other javascript/jquery files was doing the problem. Issue was in some other JS files which were confliting.

Thanks