var SelectedDocProperties = [];
var SelectedDoctypes = [];
var SelectedTables = [];
var SelectedJoins = [];
var SelectedGroups = [];
var SelectedConditions = [];
var doctypelist = Array();
var Unibase;
(function (Unibase) {
    let Platform;
    (function (Platform) {
        let DataSources;
        (function (DataSources) {
            let Components;
            (function (Components) {
                class DatalistBuilder extends Platform.Core.BaseComponent {
                    constructor() {
                        super();
                        this.IsWhere = false;
                        this.IsGroupBy = false;
                        this.IsAutoData = true;
                        this.IsInternalDataList = false;
                        this.HasIdentityFilter = false;
                        this.EnableInsideWhere = false;
                        this._datalistManager = DataSources.Managers.DataListManager.Instance();
                    }
                    jsFiles() {
                        return ["platform/datasources/requests/datalist.js", "platform/datasources/infos/datalist.js", "platform/datasources/enums/relationtype.js", "platform/datasources/enums/queryparserenums.js", "platform/datasources/requests/queryparser.js",
                            "platform/datasources/infos/queryparser.js", "platform/datasources/managers/datalistmanager.js", "platform/datasources/components/queryparser/queryparser.js", "platform/datasources/components/queryparser/queryparser.js", "platform/datasources/components/datalistbuilder/customfilters.js", "platform/datasources/components/datalistbuilder/datalistbuilder.template.js"];
                    }
                    cssFiles() {
                        return [];
                    }
                    html(id, containerid) {
                        return `<div class="bl-datalist-builder container-fluid pa-0">
                    <nav class="bl-nav bg-teal text-white bl-nav-left">
                    <div class="header pa-10" id="doctype_header">
                    <span id="doctype_columnheader"class="font-weight-400"><strong>Tables</strong></span>
                    <input type="text" id="txt-doctypesearch" placeholder="Search" class="hidden txt-doctypesearch">
                    <span class="pull-right"id="bt_DoctypeSearch"><i class="fa fa-search"></i></span>
                    <span class="pull-right hidden"id="bt_DoctypeSearchclose"><i class="fa fa-times"></i></span>
                    </div>
                    <div class="col-sm" id="column-container">
                    <div class="bl-dd mt-10" id="nestable2">
                    <ul class="dd-list" id="ul_doctypeList" style="overflow: hidden auto; z-index: 0;"></ul>
                    </div>
                    </div>
                    </nav>
                    <nav id="bl-nav-right-wrap" data-simplebar class="bl-nav bl-nav-right bg-light pa-5 pb-20 simple-scroll-bar">
                    <div id="bl-nav-right"></div>
                    <div class="header">Properties</div>
                    </nav>
                    <div class="datalist-builder-container">
                    <div id="bl-datalist_error"></div>
                    <div class="bg-white shadow-bottom bl-datalist-header">
                    <div class="pull-right">
                    <button class="btn btn-icon mr-5" id="btn-CustomFilters"><i class="fa fa-filter"></i></button>
                    <button class="btn btn-icon mr-5" id="btn-DatalistPreview"><i class="fa fa-eye"></i></button>
                    </div>
                    <div id="tab-container" class="tab-container"></div>
                    </div>
                    <div class="datalist-builder-body bg-white">
                    <div class="tab-content h-100 bg-default">
                    <div id="designer-container" class="tab-pane fade h-50 in active show"><div id="canvas" class="h-50"></div></div>
                    <div id="sql-container" class="tab-pane fade h-50"><textarea class="sql-textarea" style="width:100%;height:100%;"></textarea></div>
                    <div id="storedprocedure-container" class="tab-pane fade h-50"><textarea class="storedprocedure-textarea" style="width:100%;height:100%;"></textarea></div>
                    <div id="datalist_newsql_container_wrapper" class="tab-pane show fade h-100"><div id="bl-datalist_error"></div><div id="newsql_container"></div></div>
                    <div class="table-canvas" id="table-canvas">
                    </div>
                    </div>
                    </div>
                    <div class="footer bg-white"><button id="btn-datalist-builder-close" class="btn-datalistbuilder-close btn btn-secondary btn-sm mr-auto">Close</button>
                    <button id="btn-preview-close" class="btn-datalist_preview-close btn btn-secondary btn-sm mr-auto hidden">Close Preview</button>
                    <button class="btn btn-primary btn-sm" id="btn-SaveDatalist">Save Datalist</button>
                    </div></div></div>`;
                    }
                    loadForm(FormId, Pk_Value, AppConfigurationId, Callback, ElementId) {
                        this.init(Pk_Value);
                    }
                    load(id, containerid, callback) {
                        this._queryParser = Components.QueryParser.Instance();
                        this._customfilters = Components.CustomFilters.Instance();
                        $("#newsql_container").append(this._queryParser.getInitialSelectHtml(false));
                        $("#" + containerid).find(".datalist-builder-body").height($(window).outerHeight() - 100);
                        $("#" + containerid).find(".table-canvas").addClass(containerid + "-table-canvas");
                        $("#" + containerid).find(".table-canvas").addClass("hidden");
                        $("#btn-datalist-builder-close").click(function () {
                            $('#' + containerid).modal('hide');
                            $('#' + containerid).remove();
                            instance._customfilters.customFilters = [];
                        });
                        $("#canvas").css({ "left": "auto", "width": "100%", "overflow-x": "hidden", "height": "100%" });
                        var instance = Unibase.Platform.DataSources.Components.DatalistBuilder.Instance();
                        instance.loadChartIcons();
                        instance.loadTabs(containerid);
                        instance.loadRightNav();
                        instance.loadInstalledApps();
                        let table;
                        Unibase.Platform.Helpers.FileCacheHelper.Instance().loadJsFile('libs/tabulator/js/tabulator.min.js', function () {
                            table = instance.initTable(containerid);
                        });
                        $('#' + containerid).find("#btn-DatalistPreview").click(function () {
                            if (Number($('.DataSourceType').val()) == 0) {
                                $('.datalist-builder-body').add('.chart-metrics').click(function () {
                                    $("#Bizgaze-messageInfo").fadeOut(2000, "swing");
                                });
                                return MessageHelper.Instance().showError("Please select DataSourceType", 'bl-datalist_error');
                            }
                            $("#btn-datalist-builder-close").addClass("hidden");
                            $("#btn-preview-close").removeClass("hidden");
                            if ($("#" + containerid).find("#sql-container").hasClass("show"))
                                instance.load_data(containerid, table);
                            else
                                instance.buildQuery(containerid);
                        });
                        $("#" + containerid).find("#datalist_design").click(function () {
                            $("#" + containerid).find(".sql-textarea").val("");
                            $("#" + containerid).find("#table-container").addClass("hidden");
                        });
                        $('#' + containerid).find("#btn-BuildQuery").click(function () {
                            if ($("#" + containerid).find("#sql-container").hasClass("show")) {
                                $("#" + containerid).find("#table-container").removeClass("hidden");
                                instance.load_data(containerid, table);
                            }
                            else {
                                instance.buildQuery(containerid);
                            }
                        });
                        $('#' + containerid).find("#btn-SaveDatalist").click(function () {
                            instance.saveDataList(containerid);
                        });
                        $("#btn-preview-close").click(function () {
                            if ($("#" + containerid).find("#sql-container").hasClass("show")) {
                                $("#" + containerid).find("#table-container").addClass("hidden");
                                $("#" + containerid).find("#datalist-table").remove();
                                $("#" + containerid).find(".tab-content").removeClass("hidden");
                                $("#btn-preview-close").addClass("hidden");
                                $("#btn-datalist-builder-close").removeClass("hidden");
                                $("#" + containerid).find(".datalist-builder-body").find("#span_error").remove();
                            }
                            else {
                                $("#" + containerid).find("#datalist-table").remove();
                                $("#" + containerid).find(".tab-content").removeClass("hidden");
                                $("#" + containerid).find(".table-container").addClass("hidden");
                                $("#btn-preview-close").addClass("hidden");
                                $("#btn-datalist-builder-close").removeClass("hidden");
                                $("#" + containerid).find(".datalist-builder-body").find("#span_error").remove();
                            }
                        });
                        $("#txt_SelectColumnName").select2({
                            placeholder: 'Select Contact Columns',
                        });
                        $('#' + containerid).find("#bt_DoctypeSearch").click(function () {
                            $('#' + containerid).find("#txt-doctypesearch").removeClass("hidden");
                            $('#' + containerid).find("#doctype_columnheader").addClass("hidden");
                            $('#' + containerid).find("#bt_DoctypeSearchclose").removeClass("hidden");
                        });
                        $('#' + containerid).find("#bt_DoctypeSearchclose").click(function () {
                            $('#' + containerid).find("#txt-doctypesearch").addClass("hidden");
                            $('#' + containerid).find("#doctype_columnheader").removeClass("hidden");
                            $('#' + containerid).find("#bt_DoctypeSearchclose").addClass("hidden");
                            $('#' + containerid).find("#txt-doctypesearch").val('');
                            instance.getDoctypes(containerid, 0);
                        });
                        $('#' + containerid).find(".txt-doctypesearch").unbind("input");
                        $('#' + containerid).find("#txt-doctypesearch").on('input', function () {
                            instance.getDoctypes(containerid, 0);
                        });
                        $("#chk_IsFlatTable").change(function () {
                            if ($("#chk_IsFlatTable").is(":checked") == true) {
                                $("#div_SpName").removeClass("hidden");
                                $("#div_Scheduler").removeClass("hidden");
                            }
                            else {
                                $("#div_SpName").addClass("hidden");
                                $("#div_Scheduler").addClass("hidden");
                            }
                        });
                        $("#chk_Scheduler").change(function () {
                            if ($("#chk_Scheduler").is(":checked") == true) {
                                $("#div_TenureValue").removeClass("hidden");
                                $("#div_TenureType").removeClass("hidden");
                                $("#div_StartingDate").removeClass("hidden");
                            }
                            else {
                                $("#div_TenureValue").addClass("hidden");
                                $("#div_TenureType").addClass("hidden");
                                $("#div_StartingDate").addClass("hidden");
                            }
                        });
                        $("#" + containerid).find("#table-container").addClass("hidden");
                        $("#isAutoData_checkbox").click(function () {
                            if ($('#isAutoData_checkbox').prop('checked') == false) {
                                instance.IsAutoData = false;
                                $('#isAutoData_checkbox').prop('checked', false);
                            }
                            else {
                                instance.IsAutoData = true;
                                $('#isAutoData_checkbox').prop('checked', true);
                            }
                        });
                        $("#iswhere_checkbox").click(function () {
                            if ($('#iswhere_checkbox').prop('checked') == false) {
                                instance.IsWhere = false;
                                $('#iswhere_checkbox').prop('checked', false);
                            }
                            else {
                                instance.IsWhere = true;
                                $('#iswhere_checkbox').prop('checked', true);
                            }
                        });
                        $("#isGroupBy_checkbox").click(function () {
                            if ($('#isGroupBy_checkbox').prop('checked') == false) {
                                instance.IsGroupBy = false;
                                $('#isGroupBy_checkbox').prop('checked', false);
                            }
                            else {
                                instance.IsGroupBy = true;
                                $('#isGroupBy_checkbox').prop('checked', true);
                            }
                        });
                        $("#enableInsideWhere_checkbox").click(function () {
                            if ($('#enableInsideWhere_checkbox').prop('checked') == false) {
                                instance.EnableInsideWhere = false;
                                $('#enableInsideWhere_checkbox').prop('checked', false);
                            }
                            else {
                                instance.EnableInsideWhere = true;
                                $('#enableInsideWhere_checkbox').prop('checked', true);
                            }
                        });
                        $("#hasidentityfilter_checkbox").click(function () {
                            if ($('#hasidentityfilter_checkbox').prop('checked') == false) {
                                instance.HasIdentityFilter = false;
                                $('#hasidentityfilter_checkbox').prop('checked', false);
                            }
                            else {
                                instance.HasIdentityFilter = true;
                                $('#hasidentityfilter_checkbox').prop('checked', true);
                            }
                        });
                        $("#internaldatalist_checkbox").click(function () {
                            if ($('#internaldatalist_checkbox').prop('checked') == false) {
                                instance.IsInternalDataList = false;
                                $('#internaldatalist_checkbox').prop('checked', false);
                            }
                            else {
                                instance.IsInternalDataList = true;
                                $('#internaldatalist_checkbox').prop('checked', true);
                            }
                        });
                        $("#datalist_newsql_container_wrapper").mousedown(this._queryParser.mouseDown.bind(this._queryParser));
                        $("#datalist_newsql_container_wrapper").on("change", this._queryParser.changeEvent.bind(this._queryParser));
                        $("#btn-CustomFilters").click(function () {
                            instance.fileCacheHelper.loadJsFile("libs/querybuilder/query-builder.standalone.min.js", function () {
                                instance.navigationHelper.popup(id, '', Unibase.Platform.DataSources.Components.CustomFilters.Instance(), null, Platform.Helpers.Size.Large);
                            });
                        });
                    }
                    loadDataListForm(iscreate) {
                        var Pk_Value = 0;
                        if (!iscreate) {
                            Pk_Value = Unibase.Themes.Providers.DetailHelper.recordId;
                        }
                        this.init(Pk_Value);
                    }
                    init(Pk_Value = 0) {
                        var _fileCacheHelper = this.fileCacheHelper;
                        _fileCacheHelper.loadCssFile("platform/datasources/components/datalistbuilder/style.datalistbuilder.css", null);
                        _fileCacheHelper.loadCssFile("libs/jquery/ui/jquery-ui.min.css", null);
                        _fileCacheHelper.loadCssFile("libs/tabulator-tables/css/bootstrap/tabulator_bootstrap4.min.css", null);
                        _fileCacheHelper.loadCssFile("libs/querybuilder/query-builder.default.css", null);
                        _fileCacheHelper.loadCssFile("libs/flowy/styles.css", function () {
                            _fileCacheHelper.loadCssFile("libs/flowy/flowy.min.css", function () {
                                _fileCacheHelper.loadJsFile("libs/flowy/flowy.js", function () {
                                    _fileCacheHelper.loadJsFile("platform/datasources/components/datalistbuilder/main.js", function () {
                                    });
                                });
                            });
                        });
                        this.render(Pk_Value, null);
                    }
                    loadInstalledApps() {
                        var url = _appsettings.server_url() + '/apis/v4/unibase/platform/apps/InstalledAppAutocomplete';
                        AutoCompleteHelper.getHelper().Create("#InstalledApp_AutoComplete_DataList", "#hfAutoComplete_InstalledApp", url, null);
                        AutoCompleteHelper.getHelper().Create("#InstalledApp_AutoComplete_DataList", "#hfAutoComplete_InstalledApp", url, null);
                        AutoCompleteHelper.getHelper().Create("#dependecyapps", "#hfAutoCompleteId_dependency", url, null);
                    }
                    render(datalistid, callback) {
                        var instance = this;
                        instance.DataListId = datalistid;
                        this.navigationHelper.popup(datalistid, '', instance, () => {
                            if (datalistid != 0) {
                                Unibase.Platform.DataSources.Managers.DataListManager.Instance().getDataList(datalistid).then((response) => {
                                    var data = response.result;
                                    $("#datalist_sql").click();
                                    $(".sql-textarea").text(data.QueryString);
                                    $(".Datalistname").val(data.DataListName).prop("readonly", true).css("cursor", "not-allowed");
                                    if (data.DataListTypeId == 5) {
                                        $('.option_externalapi').removeClass('hidden');
                                        $(".DatalistType").val(data.DataListTypeId);
                                        $('.DatalistType').attr('disabled', 'true');
                                    }
                                    $(".DatalistType").val(data.DataListTypeId);
                                    $(".DataSourceType").val(data.DataSourceId);
                                    $("#txt_parameters").val(data.Parameters);
                                    $('.TableType').val(data.TableTypeId);
                                    if (data.IsCommon) {
                                        $("#Iscommon_checkbox").prop('checked', true);
                                    }
                                    if (data.InstalledAppId != 0) {
                                        Unibase.Platform.Apps.Managers.AppManager.Instance().getInstallApp(data.InstalledAppId).then(function (appres) {
                                            var res = appres.result;
                                            if (res != "" && res != null) {
                                                $("#InstalledApp_AutoComplete_DataList").append(`<option value="` + res.InstalledAppId + `">` + res.AppTitle + `</option>`);
                                                $("#InstalledApp_AutoComplete_DataList").val(res.InstalledAppId).trigger("change");
                                            }
                                        });
                                    }
                                    Unibase.Platform.DataSources.Managers.DataListManager.Instance().getprimarykey(datalistid).then(function (response) {
                                        if (response.result != null)
                                            $(".PrimaryKeyColumn").val(response.result.ColumnName);
                                    });
                                    if (data.IsAutoData) {
                                        instance.IsAutoData = true;
                                        $('#isAutoData_checkbox').prop('checked', true);
                                    }
                                    else {
                                        instance.IsAutoData = false;
                                        $('#isAutoData_checkbox').prop('checked', false);
                                    }
                                    if (data.IsWhere) {
                                        instance.IsWhere = true;
                                        $('#iswhere_checkbox').prop('checked', true);
                                    }
                                    else {
                                        instance.IsWhere = false;
                                        $('#iswhere_checkbox').prop('checked', false);
                                    }
                                    if (data.IsGroupBy) {
                                        instance.IsGroupBy = true;
                                        $('#isGroupBy_checkbox').prop('checked', true);
                                    }
                                    else {
                                        instance.IsGroupBy = false;
                                        $('#isGroupBy_checkbox').prop('checked', false);
                                    }
                                    if (data.EnableInsideWhere) {
                                        instance.EnableInsideWhere = true;
                                        $('#enableInsideWhere_checkbox').prop('checked', true);
                                    }
                                    else {
                                        instance.EnableInsideWhere = false;
                                        $('#enableInsideWhere_checkbox').prop('checked', false);
                                    }
                                    if (data.HasIdentityFilter) {
                                        instance.HasIdentityFilter = true;
                                        $('#hasidentityfilter_checkbox').prop('checked', true);
                                    }
                                    else {
                                        instance.HasIdentityFilter = false;
                                        $('#hasidentityfilter_checkbox').prop('checked', false);
                                    }
                                    if (data.IsInternalDataList) {
                                        instance.IsInternalDataList = true;
                                        $('#internaldatalist_checkbox').prop('checked', true);
                                    }
                                    else {
                                        instance.IsInternalDataList = false;
                                        $('#internaldatalist_checkbox').prop('checked', false);
                                    }
                                    if (data.EnableInsideWhere) {
                                        instance.EnableInsideWhere = true;
                                        $('#enableInsideWhere_checkbox').prop('checked', true);
                                    }
                                    else {
                                        instance.IsInternalDataList = false;
                                        $('#enableInsideWhere_checkbox').prop('checked', false);
                                    }
                                    if (data.IsFlatTable) {
                                        $('#chk_IsFlatTable').prop('checked', true);
                                    }
                                    else {
                                        $('#chk_IsFlatTable').prop('checked', false);
                                    }
                                    if (data.CustomFilters)
                                        instance._customfilters.customFilters = JSON.parse(data.CustomFilters);
                                    let dynamic = JSON.parse(data.DynamicQuery);
                                    let idDynamic = (dynamic && dynamic.DataListColumns && dynamic.DataListColumns.length || dynamic && dynamic.IsStarSelected) && dynamic.DataListDocTypes.length;
                                    if (idDynamic)
                                        instance._queryParser.bindDynamicQuery(dynamic, false);
                                    else if (data.QueryString && !idDynamic) {
                                        let dynamicQuery;
                                        instance._queryParser.subQueryNumber = 0;
                                        data.QueryString = data.QueryString.replaceAll("\t", " ");
                                        data.QueryString = data.QueryString.replaceAll("\n", " ");
                                        while (data.QueryString.indexOf("  ") != -1)
                                            data.QueryString = data.QueryString.replaceAll("  ", " ");
                                        instance._queryParser.subQueryNumber = 0;
                                    }
                                });
                            }
                        }, Platform.Helpers.Size.ExtraLarge);
                    }
                    loadRightNav() {
                        let html = `<div class="card chart-metrics h-20">
            <div class="card-header"><span class="h5">Properties</span></div>
            <div class="card-body pa-5">
            <div class="form-group">
            <input type="text" class="form-control Datalistname" placeholder="Datalist Name"></input>
            </div>
            <div class="form-group">
            <select class="form-control DatalistType" placeholder="datalist group">
            <option value="0">Select DataListType</option>
            <option value="1" selected>Query</option>
            <option value="2">Provider</option>
            <option value="3">Object</option>Object
            <option value="4">Function</option>
            <option value="5" class="option_externalapi hidden">External Api</option>
            </select>
            </div>
            <div class="form-group">
            <select class="form-control DataSourceType" placeholder="datasource type">
            <option value="0" selected>Select DataSourceType</option>
            <option value="1">Sql</option>
            <option value="2">NoSql</option>
            </select>
            </div>
            <div class="form-group">
            <select class="form-control TableType" placeholder="Tabletype">
            <option value="0" selected>Select Tabletype</option>
            <option value="1">Auto Complete</option>
            </select>
            </div>
            <div class="form-group">
            <select class="form-control" id="InstalledApp_AutoComplete_DataList" placeholder="InstalledApp">
            <option selected>Select InstalledApp</option>
            </select>
            <input type="hidden" id="hfAutoComplete_InstalledApp"  class="hfAutoCompleteId_InstalledApp' form-control value-control" data-isdynamic="true"/>
            </div>
            <!------->
            <div class="form-group">
            <label for="CommonDb_checkbox">
            IsCommon
            </label>
            <div>
            <input type="checkbox" class="chk_Iscommon mr-10" onclick="" id="Iscommon_checkbox">IsCommon
             </div>
            </div>
            <!---end--->
            <div class="form-group">
            <div class="row"><span class="col-sm-6">IsFlatTable</span>
            <label class="switch m-t-sm col-sm-6">
            <input type="checkbox" class="pull-right hidden" id="chk_IsFlatTable">
             <span></span>
            </label></div>
            </div>
            <div class="form-group">
            <label for="isAutoData_checkbox">
            IsAutoData
            </label>
            <div>
            <input type="checkbox" class="chkIsAutoData mr-10" onclick="" id="isAutoData_checkbox" checked="true">IsAutoData
             </div>
            </div>
            <div class="form-group">
            <label for="isWhere_checkbox">
            IsWhere
            </label>
            <div>
            <input type="checkbox" class="chkIsWhere mr-10" onclick="" id="iswhere_checkbox" data-tooltip="true" title="Don't check if where clasue is in subquery">IsWhere
             </div>
            </div>
            <div class="form-group">
            <label for="isGroupBy_checkbox">
            IsGroupBy
            </label>
            <div>
             <input type="checkbox" class="chkisGroupBy mr-10" onclick="" id="isGroupBy_checkbox" data-tooltip="true" title="Check if group by clasue is in subquery">IsGroupBy
             </div>
            </div>
		    <div class="form-group">
            <label for="enableinsideWhere_checkbox">
            Enable Inside WhereClause
            </label>
            <div>
            <input type="checkbox" class="chkenableInsideWhere mr-10" onclick="" id="enableInsideWhere_checkbox">EnableInsideWhere
            </div>
            </div>
            <div class="form-group">
            <label for="hasidentityfilter_checkbox">
            HasIdentityFilter
            </label>
            <div>
            <input type="checkbox" class="chkHasIdentityFilter mr-10" onclick="" id="hasidentityfilter_checkbox">HasIdentityFilter
             </div>
            </div>
            <div class="form-group">
            <label for="isInternalDatalist_checkbox">
            IsInternalDataList
            </label>
            <div>
            <input type="checkbox" class="chkInternalDataList mr-10" onclick="" id="internaldatalist_checkbox">IsInternalDataList
            </div>
            </div>
            <div class="form-group">
            <input type="text" class="form-control PrimaryKeyColumn" placeholder="PrimaryKey ColumnName">
            </div>
            <div class="form-group">
            <label for="txt_parameters">
             Parameters
		    </label>
            <textarea type="text" class="form-control" id="txt_parameters" placeholder="Parameters">                                                        </textarea>
            </div>
            <div class="form-group" id="selectedcolumns"> 
            <div class="floating-label-form-group-with-value" id="SelectColumnName"> 
            <label for="txt_SelectColumnName">Select Contact Columns</label> 
            <select id="txt_SelectColumnName" class="txt_SelectColumnName form-control text-control required" data-isdefault="true"  multiple="multiple" style="width:100%"></select>
            </div>
			</div>
            <div class="form-group hidden" id="div_SpName">
            <input type="text" class="form-control StoredProcedureName"  id="txt_spName" placeholder="StoredProcedure Name"></input>
             </div>
            <div class="form-group hidden" id="div_Scheduler">
            <div class="row"><span class="col-sm-6">Scheduler</span>
            <label class="switch m-t-sm col-sm-6">
            <input type="checkbox" class="pull-right hidden" id="chk_Scheduler">
             <span></span>
            </label></div>
            </div>
            <div class="form-group hidden" id="div_TenureValue">
            <input type="text" class="form-control TenureValue"  id="txt_TenureValue" placeholder="TenureValue"></input>
             </div>
            <div class="form-group hidden" id="div_TenureType">
            <p class="font-14">Tenure Type</p>
            <select id="select_TenureType"class="form-control">
             <option value="0">--Select Tenure Type--</option>
             <option value="1" >Daily</option>
             <option value="2">Years</option>
             <option value="3" >Months</option>
             <option value="4">Days</option>
             <option value="5">Hours</option>
             <option value="6">Minutes</option>
             <option value="7">Seconds</option>
             </select>            
            </div>
            <div class="form-group hidden" id="div_StartingDate">
            <input type="text" class="form-control StartingDate datepicker-input"  id="txt_StartingDate" placeholder="StartingDate"></input>
             </div>
            </div>
            <div class="card-footer"><button class="btn btn-primary btn-wth-icon icon-wthot-bg btn-md" onclick="javascript:Unibase.DataSources.DataLists.DatalistBuilder.Instance().loadDataSourceProviders()"><span class="icon-label"><i class="fa fa-database"></i> </span><span class="btn-text">DataSourcesProviders</span></button></div>
            </div>`;
                        $("#bl-nav-right").html(html);
                    }
                    getOptions(doctypeid, doctypename) {
                        let html = `<div class="card" style="position: initial;height: -webkit-fill-available;"><div class="card-header"> <ul class="nav nav-tabs nav-light">
                    <li role="tablist" class="Active">
                    <a data-toggle="tab" href="#columns-container" class="nav-link active show">Columns</a>
                    <li role="tablist"><a data-toggle="tab" href="#filter-container" class="nav-link">Filter</a></li>
                       </li></ul>
                            </div>
                            <div class="card-body">
                            <div class="tab-content"> <div id="filter-container" class="tab-pane fade in" style="overflow: hidden auto; z-index: 0; height:450px;"><div class="card filter_docproperties"></div>
                            
                            </div>
                             <div id="columns-container" class="tab-pane fade in active show"><ul class="list-group list-group-flush" id="ul_docproperties" style="overflow: hidden auto; z-index: 0; max-height: 450px;"></ul></div></div>
                            </div>
                            <div class="card-footer"><button id="btn-doctypeproperty-close" class="btn-doctype-close btn btn-secondary btn-sm mr-auto">Close</button>
                            <button id="btn-doctypeproperty-save" class="btn-doctype-save btn btn-primary btn-sm pull-right" onclick="javascript:Unibase.DataSources.DataLists.DatalistBuilder.Instance().getSelectedDocProperties(${doctypeid},'${doctypename}')">Apply</button></div>
                            </div>`;
                        this.navigationHelper.popupHtml(html, Platform.Helpers.Size.Large, function (propertycontainer) {
                            $("#btn-doctypeproperty-close").click(function () {
                                $('#' + propertycontainer).modal('hide');
                                $('#' + propertycontainer).remove();
                            });
                        });
                        DatalistBuilder.Instance().getDocProperties(doctypeid);
                    }
                    getDoctypes(containerid, datasourceid) {
                        let doctypename = $("#txt-doctypesearch").val();
                        if (doctypename == "") {
                            doctypename = null;
                        }
                        Unibase.Platform.Helpers.FileCacheHelper.Instance().loadJsFile('platform/datasources/managers/datalistmanager.js', function () {
                            Unibase.Platform.Helpers.FileCacheHelper.Instance().loadJsFile('platform/datasources/components/datalistbuilder/datalistbuilder.template.js', function () {
                                Unibase.Platform.DataSources.Managers.DocTypeManager.Instance().getDoctypeByName(doctypename).then(function (response) {
                                    let html = "";
                                    let data = JSON.parse(response.toString());
                                    for (let i = 0; i < data.length; i++) {
                                        var doctype = data[i];
                                        var template = DataSources.Templates.DatalistBuilder.Instance().loadDocTypeTemplate();
                                        var templateScript = Handlebars.compile(template);
                                        var context = { "DocTypeId": doctype.DocTypeId, "DocTypeName": doctype.DocTypeName, "DocTypeTableName": doctype.DocTypeTableName };
                                        html += templateScript(context);
                                    }
                                    $("#ul_doctypeList").html(html);
                                });
                            });
                        });
                    }
                    getdragelementTemplate(doctypeid, doctypename, doctablename) {
                        let aliasname;
                        let index = doctypelist.findIndex(x => x.DocTypeName === doctypename);
                        if (index > -1) {
                            doctypename = doctypename + "_" + (index + 1);
                            aliasname = doctablename + "_" + (index + 1);
                        }
                        var selecteddoctype = {
                            DocTypeId: Number(doctypeid),
                            DocTypeName: doctypename,
                            DocTableName: doctablename,
                            AliasName: aliasname
                        };
                        let tablename = doctablename;
                        SelectedTables.push(tablename);
                        doctypelist.push(selecteddoctype);
                        let draghtml = `<div class='blockyleft btn ml-10'><i class="fa fa-database"></i>
                        <input type="hidden" name="blockelemtypeid" class="blockelemtypeId" value="{{DocTypeId}}">
                        <p class="blockyname h4" id=${doctypeid}>${doctypename}</p>
                        </div>
                        <div class="blockyright"><span class="badge badge-secondary badge-pill" id="columns_count_${doctypeid}">0</span></div>
                        <div class='blockydiv'></div>
                        <div class='blockyinfo'>${doctypename}<div class="pull-right btn-group border-0 btn-group-xs my-auto mr-10">
                        <button class="btn btn-outline-light" type="button"  onclick="javascript:Unibase.DataSources.DataLists.DatalistBuilder.Instance().loadJoins(${doctypeid},'${doctypename}','${doctablename}')"><i class="fa fa-link"></i></button>
                        <button class="btn btn-outline-light" type="button" onclick="javascript:Unibase.DataSources.DataLists.DatalistBuilder.Instance().getOptions(${doctypeid},'${doctypename}')"><i class="fa fa-list"></i></button>
                        </div></div>`;
                        return draghtml;
                    }
                    selectAllDocProperties() {
                        if ($('input.chk_DocPropertyId_All').is(':checked')) {
                            $(".chk_DocPropertyId").prop("checked", true);
                        }
                        else {
                            $(".chk_DocPropertyId").prop("checked", false);
                        }
                    }
                    getDocProperties(doctypeid) {
                        this.fileCacheHelper.loadJsFile("platform/datasources/managers/datalistmanager.js", function () {
                            this.fileCacheHelper.loadJsFile("platform/datasources/components/datalistbuilder/datalistbuilder.template.js", function () {
                                DataSources.Managers.DocTypeManager.Instance().getDocProperties(doctypeid).then(function (response) {
                                    let html = `<div id="div_docproperty_all" class="text-right mb-10 mr-10"><input type="checkbox" class="chk_DocPropertyId_All" id="chk_DocPropertyId_All" value = "" onchange="Unibase.DataSources.DataLists.DatalistBuilder.Instance().selectAllDocProperties()"> <span id="spn_allDocproperties" class="text-right"> Select All</span></div>`;
                                    var data = JSON.parse(response.toString());
                                    for (let i = 0; i < data.length; i++) {
                                        var docproperties = data[i];
                                        var template = DataSources.Templates.DatalistBuilder.Instance().loadDocPropertyTemplate();
                                        var templateScript = Handlebars.compile(template);
                                        var context = { "DocPropertyId": docproperties.DocPropertyId, "DocPropertyName": docproperties.DocPropertyName, "PropTableName": docproperties.PropTableName };
                                        html += templateScript(context);
                                        html += `</optgroup>`;
                                    }
                                    jQuery("#ul_docproperties").html(html);
                                    DatalistBuilder.Instance().loadQueryBuilderDiv(response);
                                    DatalistBuilder.Instance().editColumns();
                                });
                            });
                        });
                    }
                    columnsCount(doctypeid) {
                        var length = SelectedDocProperties.length;
                        let count = 0;
                        for (let i = 0; i < length; i++) {
                            if (SelectedDocProperties[i].DocTypeId == doctypeid) {
                                count = count + 1;
                            }
                        }
                        $("#columns_count_" + doctypeid).text(count);
                    }
                    editColumns() {
                        if (SelectedDocProperties != null) {
                            for (let i = 0; i < SelectedDocProperties.length; i++) {
                                $("#chk_DocPropertyId_" + SelectedDocProperties[i].DocPropertyId).prop("checked", "true");
                            }
                        }
                    }
                    getSelectedDocProperties(doctypeid, doctypename) {
                        SelectedDoctypes.push(doctypeid);
                        let tablename = $("#doc_tablename").val();
                        $('.li_docproperty').each(function () {
                            if ($(this).find('input:checkbox').prop("checked") == true) {
                                let id = $(this).find('input:checkbox').val();
                                let index = SelectedDocProperties.findIndex(x => x.DocPropertyId === Number(id));
                                if (index < 0) {
                                    let propertyname = $(this).find("#spn_DocpropertyName").text();
                                    var docprop = {
                                        DocPropertyId: Number(id),
                                        DocPropertyName: propertyname,
                                        DocTypeTableName: tablename.toString(),
                                        DocTypeId: doctypeid
                                    };
                                    SelectedDocProperties.push(docprop);
                                }
                            }
                        });
                        DatalistBuilder.Instance().columnsCount(doctypeid);
                    }
                    removeDocProperty(id) {
                        if (SelectedDocProperties.length != 0) {
                            var index = SelectedDocProperties.findIndex(x => x.DocPropertyId === id);
                            SelectedDocProperties.splice(index, 1);
                        }
                    }
                    loadJoins(doctypeid, doctypename, doctablename) {
                        let html = `<div class="card">
                    <div class="card-header"><h5>Joins</h5>
                            </div>
                            <div class="card-body">
                            <div class="" style="overflow: hidden auto; z-index: 0; height:450px;"><div id="joins-container" class="container"><div class="joins_docproperties"><ul class="list-group col-sm-12" id="ul_joins"><li class="list-group-item li_join hidden" id="li_join"></li></ul></div>
                            <div class="joins_table_Container mt-20">
                            <div class= "card hidden" id="card_joins_table">
                            <div class="card-header"><p class="">Selected Joins</p></div>
                            <div class="card-body">
                            <table id="joins_table"  class="table table-bordered"><thead>
                            <th>LeftDocType</th><th>LeftDocTypeColumn</th><th>RightDocType</th><th>RightDocTypeColumn</th><th>JoinType</th><th> </th>
                            </thead><tbody class="joins_table_body"></tbody></table></div>
                            </div>
                            </div></div>
                            </div></div>
                            <div class="card-footer"><button id="btn-joins-close" class="btn-joins-close btn btn-secondary btn-sm mr-auto">Close</button>
                            <button id="btn-joins-save" class="btn-join-save btn btn-primary btn-sm pull-right" onclick="javascript:Unibase.DataSources.DataLists.DatalistBuilder.Instance().GetSelectedJoins(${doctypeid},'${doctypename}')">Apply</button></div>
                            </div>`;
                        this.navigationHelper.popupHtml(html, Platform.Helpers.Size.Large, function (joincontainer) {
                            $("#btn-joins-close").click(function () {
                                $('#' + joincontainer).modal('hide');
                                $('#' + joincontainer).remove();
                            });
                        });
                        DatalistBuilder.Instance().loadJoinsProperties(doctypeid, doctypename, doctablename, 1);
                    }
                    addJoin(doctypeid, doctypename, doctablename, len) {
                        len = len + 1;
                        let html;
                        let i = 1;
                        let leftdocpropId = $('#li_join_' + i).find("#select_docproperties_" + doctypeid + "_" + i + " option:selected").val();
                        let leftdocpropName = $('#li_join_' + i).find("#select_docproperties_" + doctypeid + "_" + i + " option:selected").text();
                        let rightdocpropId = $('#li_join_' + i).find("#select_docproperty_" + i + " option:selected").val();
                        let rightdocpropName = $('#li_join_' + i).find("#select_docproperty_" + i + " option:selected").text();
                        let joinId = $('#li_join_' + i).find("#select_joins_" + i + " option:selected").val();
                        let joinName = $('#li_join_' + i).find("#select_joins_" + i + " option:selected").text();
                        let leftdoctypeid = $('#li_join_' + i).find("#leftdoctypeid_" + i).val();
                        let leftdoctypename = $('#li_join_' + i).find("#leftdoctypename_" + i).text();
                        let rightdoctypeid = $("#li_join_" + i).find("#hf_rightDoctype_" + i).val();
                        let rightdoctypename = $("#li_join_" + i).find("#hf_rightDoctypeName_" + i).val();
                        let rightdoctablename = $("#li_join_" + i).find("#hf_rightDocTableName_" + i).val();
                        var template = DataSources.Templates.DatalistBuilder.Instance().addJoinTemplate();
                        var templateScript = Handlebars.compile(template);
                        var context = {
                            "LeftDocTypeId": doctypeid,
                            "LeftDocTypeName": doctypename,
                            "LeftDocTableName": doctablename,
                            "LeftDocPropertyId": leftdocpropId,
                            "LeftDocPropertyName": leftdocpropName,
                            "RightDocTypeId": rightdoctypeid,
                            "RightDocTableName": rightdoctablename,
                            "RightDocTypeName": rightdoctypename,
                            "RightDocPropertyId": rightdocpropId,
                            "RightDocPropertyName": rightdocpropName,
                            "JoinId": joinId,
                            "JoinName": joinName
                        };
                        html = templateScript(context);
                        $("#card_joins_table").removeClass("hidden");
                        $(".joins_table_body").append(html);
                        $(".btn_joindelete").click(function (e) {
                            let leftid = $(this).closest('tr').find('#leftdocpropid').val();
                            let rightid = $(this).closest('tr').find('#rightdocpropid').val();
                            if (SelectedJoins.length != 0) {
                                let leftindex = SelectedJoins.findIndex(x => x.LeftDocPropertyId === Number(leftid));
                                let rightindex = SelectedJoins.findIndex(x => x.RightDocPropertyId === Number(rightid));
                                if (leftindex != -1 && rightindex != -1) {
                                    if (leftindex == rightindex) {
                                        SelectedJoins.splice(leftindex, 1);
                                        $(this).closest("tr").remove();
                                    }
                                }
                            }
                        });
                    }
                    loadJoinsProperties(doctypeid, doctypename, doctablename, len) {
                        let html = "";
                        var template = DataSources.Templates.DatalistBuilder.Instance().loadJoinDoctypesTemplate(doctypeid, doctypename, doctablename, 1);
                        var templateScript = Handlebars.compile(template);
                        var context = { "DoctypeId": doctypeid, "DoctypeName": doctypename };
                        html += templateScript(context);
                        $(".li_join:last").after(html);
                        DatalistBuilder.Instance().getDocpropertiesForJoins(doctypeid, len);
                        DatalistBuilder.Instance().loadDocTypesDropdown(len);
                    }
                    loadDocTypesDropdown(len) {
                        let html = "<option value='0'>Select</option>";
                        for (let i = 0; i < doctypelist.length; i++) {
                            var result = doctypelist[i];
                            var template = DataSources.Templates.DatalistBuilder.Instance().loadDoctypesDropdownTemplate();
                            var templateScript = Handlebars.compile(template);
                            var context = { "DocTypeId": result.DocTypeId, "DocTypeName": result.DocTypeName, "DocTableName": result.DocTableName };
                            html += templateScript(context);
                        }
                        jQuery("#select_doctypes_" + len).append(html);
                        DatalistBuilder.Instance().editJoins();
                    }
                    editJoins() {
                        if (SelectedJoins.length > 0) {
                            $("#card_joins_table").removeClass("hidden");
                            for (let i = 0; i < SelectedJoins.length; i++) {
                                let html;
                                let leftdocpropId = SelectedJoins[i].LeftDocPropertyId;
                                let leftdocpropName = SelectedJoins[i].LeftDocPropertyName;
                                let rightdocpropId = SelectedJoins[i].RightDocPropertyId;
                                let rightdocpropName = SelectedJoins[i].RightDocPropertyName;
                                let joinId = SelectedJoins[i].JoinTypeId;
                                let joinName = SelectedJoins[i].JoinName;
                                let leftdoctypeid = SelectedJoins[i].LeftDocTypeId;
                                let leftdoctypename = SelectedJoins[i].LeftDocTypeName;
                                let rightdoctypeid = SelectedJoins[i].RightDocTypeId;
                                let rightdoctypename = SelectedJoins[i].RightDocTypeName;
                                let rightdoctablename = SelectedJoins[i].RightDocTableName;
                                let leftdoctablename = SelectedJoins[i].LeftDocTableName;
                                var template = DataSources.Templates.DatalistBuilder.Instance().addJoinTemplate();
                                var templateScript = Handlebars.compile(template);
                                var context = {
                                    "LeftDocTypeId": leftdoctypeid,
                                    "LeftDocTypeName": leftdoctypename,
                                    "LeftDocTableName": leftdoctablename,
                                    "LeftDocPropertyId": leftdocpropId,
                                    "LeftDocPropertyName": leftdocpropName,
                                    "RightDocTypeId": rightdoctypeid,
                                    "RightDocTableName": rightdoctablename,
                                    "RightDocTypeName": rightdoctypename,
                                    "RightDocPropertyId": rightdocpropId,
                                    "RightDocPropertyName": rightdocpropName,
                                    "JoinId": joinId,
                                    "JoinName": joinName
                                };
                                html = templateScript(context);
                                $(".joins_table_body").append(html);
                            }
                        }
                    }
                    getDocPropertiesByDoctypeId(len) {
                        let doctypeid = $("#select_doctypes_" + len + " option:selected").val();
                        let doctypename = $("#select_doctypes_" + len + " option:selected").text();
                        let doctablename = $("#select_doctypes_" + len + " option:selected").attr("data-table");
                        jQuery("#hf_rightDoctype_" + len).val(doctypeid);
                        jQuery("#hf_rightDoctypeName_" + len).val(doctypename);
                        jQuery("#hf_rightDocTableName_" + len).val(doctablename);
                        DataSources.Managers.DocTypeManager.Instance().getDocProperties(doctypeid).then(function (response) {
                            let html = "";
                            var data = JSON.parse(response.toString());
                            for (let i = 0; i < data.length; i++) {
                                var docproperties = data[i];
                                var template = DataSources.Templates.DatalistBuilder.Instance().loadJoinDocPropertiesTemplate();
                                var templateScript = Handlebars.compile(template);
                                var context = { "DocPropertyId": docproperties.DocPropertyId, "DocPropertyName": docproperties.DocPropertyName, "PropTableName": docproperties.PropTableName };
                                html += templateScript(context);
                            }
                            jQuery("#select_docproperty_" + len).append(html);
                        });
                        jQuery("#selected_doctype_" + len).html("<strong>" + doctypename + "</strong>");
                        jQuery("#doctypeproperty_" + len).removeClass("hidden");
                    }
                    getDocpropertiesForJoins(doctypeid, len) {
                        DataSources.Managers.DocTypeManager.Instance().getDocProperties(doctypeid).then(function (response) {
                            let html = "";
                            var data = response.result;
                            for (let i = 0; i < data.length; i++) {
                                var docproperties = data[i];
                                var template = DataSources.Templates.DatalistBuilder.Instance().loadJoinDocPropertiesTemplate();
                                var templateScript = Handlebars.compile(template);
                                var context = { "DocPropertyId": docproperties.DocPropertyId, "DocPropertyName": docproperties.DocPropertyName, "PropTableName": docproperties.PropTableName };
                                html = templateScript(context);
                                $("#select_docproperties_" + doctypeid + "_" + len).append(html);
                            }
                        });
                    }
                    GetSelectedJoins(doctypeid, doctypename, doctablename) {
                        SelectedJoins = [];
                        var joins = {
                            LeftDocPropertyId: 0,
                            LeftDocPropertyName: "",
                            LeftDocTypeId: 0,
                            LeftDocTypeName: "",
                            LeftDocTableName: "",
                            RightDocPropertyId: 0,
                            RightDocPropertyName: "",
                            RightDocTypeId: 0,
                            RightDocTypeName: "",
                            RightDocTableName: "",
                            JoinTypeId: 0,
                            JoinName: ""
                        };
                        $("#joins_table .join-rows").each(function () {
                            let leftdoctypeid = $(this).find("#leftdoctypeid").val();
                            let leftdocpropId = $(this).find("#leftdocpropid").val();
                            let leftdocpropname = $(this).find("#td_leftdocpropname").text();
                            let leftdocName = $(this).find("#td_leftdoctypename").text();
                            let lefttdoctablename = $(this).find("#leftdoctypeid").attr("data-table");
                            let rightdocpropId = $(this).find("#rightdocpropid").val();
                            let rightdocName = $(this).find("#td_rightdoctypename").text();
                            let joinId = $(this).find("#doctype_joinid").val();
                            let joinName = $(this).find("#td_jointype").text();
                            let rightdoctypeid = $(this).find("#rightdoctypeid").val();
                            let rightdoctypename = $(this).find("#td_rightdoctypename").text();
                            let rightdoctablename = $(this).find("#rightdoctypeid").attr("data-table");
                            let rightdocpropname = $(this).find("#td_rightdocpropname").text();
                            joins = {
                                LeftDocPropertyId: Number(leftdocpropId),
                                LeftDocPropertyName: leftdocpropname,
                                RightDocPropertyId: Number(rightdocpropId),
                                RightDocPropertyName: rightdocpropname,
                                JoinTypeId: Number(joinId),
                                JoinName: joinName,
                                LeftDocTypeId: Number(leftdoctypeid),
                                LeftDocTypeName: leftdocName,
                                LeftDocTableName: lefttdoctablename,
                                RightDocTypeId: Number(rightdoctypeid),
                                RightDocTypeName: rightdoctypename,
                                RightDocTableName: rightdoctablename
                            };
                            SelectedJoins.push(joins);
                        });
                    }
                    getConditions() {
                        let qelem;
                        qelem = $('#builder');
                        $("#Conditiontable_Container").empty();
                        var ruleslen = (qelem.queryBuilder('getRules')).rules.length;
                        var Conditiongroups = {
                            GroupId: 0,
                            LogicalOperatorType: "",
                            Conditions: SelectedConditions
                        };
                        var conditions = {
                            DocPropertyId: 0,
                            ConditionValue: "",
                            ConditionType: "",
                            RelationalOperatorType: "",
                            ConditionGroupId: 0,
                        };
                        let conditiongroup = 1;
                        for (let i = 0; i < ruleslen; i++) {
                            if ((qelem.queryBuilder('getRules')).rules[i].rules != null) {
                                var grouplength = (qelem.queryBuilder('getRules')).rules[i].rules.length;
                                conditiongroup = conditiongroup + 1;
                                for (var j = 0; j < grouplength; j++) {
                                    conditions = {
                                        DocPropertyId: (qelem.queryBuilder('getRules')).rules[i].rules[j].id,
                                        ConditionValue: (qelem.queryBuilder('getRules')).rules[i].rules[j].value,
                                        ConditionType: (qelem.queryBuilder('getRules')).rules[i].condition,
                                        RelationalOperatorType: (qelem.queryBuilder('getRules')).rules[i].rules[j].operator,
                                        ConditionGroupId: conditiongroup
                                    };
                                    SelectedConditions.push(conditions);
                                }
                                Conditiongroups = {
                                    GroupId: conditiongroup,
                                    LogicalOperatorType: (qelem.queryBuilder('getRules')).rules[i].condition,
                                    Conditions: SelectedConditions
                                };
                                SelectedGroups.push(Conditiongroups);
                                SelectedConditions = [];
                            }
                            else {
                                conditions = {
                                    DocPropertyId: (qelem.queryBuilder('getRules')).rules[i].id,
                                    ConditionValue: (qelem.queryBuilder('getRules')).rules[i].value,
                                    ConditionType: (qelem.queryBuilder('getRules')).condition,
                                    RelationalOperatorType: (qelem.queryBuilder('getRules')).rules[i].operator,
                                    ConditionGroupId: conditiongroup
                                };
                                SelectedConditions.push(conditions);
                                Conditiongroups = {
                                    GroupId: conditiongroup,
                                    LogicalOperatorType: (qelem.queryBuilder('getRules')).condition,
                                    Conditions: SelectedConditions
                                };
                                SelectedGroups.push(Conditiongroups);
                                SelectedConditions = [];
                            }
                        }
                    }
                    loadQueryBuilderDiv(response) {
                        $("#filter-container").html(`<div id="builder"></div> <button class="btn btn-primary parse-json mt-20" id="btn_ApplyConditions">Apply</button> <div id="result" class="mt-20">  <pre></pre> <div id="Output"></div><div id="Conditiontable_Container" style="overflow-x:auto;"></div> </div>`);
                        this.fileCacheHelper.loadJsFile("libs/querybuilder/query-builder.standalone.js", function () {
                            let qelem;
                            qelem = $('#builder');
                            let filtersArray = [];
                            for (var i = 0; i < response.length; i++) {
                                let element = response[i];
                                filtersArray.push({
                                    id: element.docPropertyId,
                                    label: element.docPropertyName,
                                    type: 'string',
                                    size: 30,
                                    unique: true,
                                    optgroup: element.docTypeName
                                });
                            }
                            if (filtersArray.length == 0) {
                                filtersArray = [
                                    {
                                        id: 'id',
                                        label: 'label',
                                        table: 'table',
                                        type: 'string',
                                        size: 30,
                                        unique: true,
                                    },
                                ];
                            }
                            var options = {
                                allow_empty: true,
                                filters: filtersArray
                            };
                            qelem.queryBuilder(options);
                            $('.parse-json').on('click', function () {
                                console.log(JSON.stringify(qelem.queryBuilder('getRules'), undefined, 2));
                            });
                            $("#builder_group_0").addClass("col-sm-12 mt-20");
                        });
                        $("#btn_ApplyConditions").click(function () {
                            DatalistBuilder.Instance().getConditions();
                        });
                    }
                    loadDataSourceProviders() {
                        let html = DataSources.Templates.DatalistBuilder.Instance().loadDataSourceProviders();
                        this.navigationHelper.popupHtml(html, Platform.Helpers.Size.Auto, function (Datasourcecontainer) {
                            $("#btn-data-source-close").click(function () {
                                $('#' + Datasourcecontainer).modal('hide');
                                $('#' + Datasourcecontainer).remove();
                            });
                        });
                        DatalistBuilder.Instance().getDataSourceProviders();
                    }
                    getDataSourceProviders() {
                        this.fileCacheHelper.loadJsFile("platform/datasources/managers/datalistmanager.js", function () {
                            this.fileCacheHelper.loadJsFile("platform/datasources/components/datalistbuilder/datalistbuilder.template.js", function () {
                                DataSources.Managers.DataListManager.Instance().getDataSourceProviders().then(function (response) {
                                    var data = JSON.parse(response.toString());
                                    let html = "";
                                    for (let i = 0; i < data.length; i++) {
                                        let datasourceprovidername = data[i].DataSourceProviderName;
                                        let datasourceproviderid = data[i].DataSourceProviderId;
                                        var template = DataSources.Templates.DatalistBuilder.Instance().loadDataSourceProvidersTemplate();
                                        var templateScript = Handlebars.compile(template);
                                        var context = { "DataSourceProviderId": datasourceproviderid, "DataSourceProviderName": datasourceprovidername };
                                        html += templateScript(context);
                                    }
                                    jQuery("#div_datasourceproviders").html(html);
                                });
                            });
                        });
                    }
                    bindDataSourceProviderDropdown() {
                        DataSources.Managers.DataListManager.Instance().getDataSourceProviders().then(function (response) {
                            let html = "";
                            var data = JSON.parse(response.toString());
                            for (let i = 0; i < data.length; i++) {
                                var datasourceproviders = data[i];
                                var template = DataSources.Templates.DatalistBuilder.Instance().loadDataSourceProviderDropdownTemplate();
                                var templateScript = Handlebars.compile(template);
                                var context = { "DataSourceProviderId": datasourceproviders.DataSourceProviderId, "DataSourceProviderName": datasourceproviders.DataSourceProviderName };
                                html += templateScript(context);
                            }
                            $("#select_datasourceproviders").append(html);
                        });
                    }
                    getDataSources(dataSourceProviderId, dataSourceProviderName) {
                        let html = `<div class="card" style="position: initial;height:-webkit-fill-available;"><div class="card-header"><span class="pull-right"><a href="javascript:;" onclick="Unibase.DataSources.DataLists.DatalistBuilder.Instance().loadSettings(${dataSourceProviderId},'${dataSourceProviderName}')" title="DatasourceProviderSettings" class="mr-15"><i class="fa fa-cog"></i></a><a href="javascript:;"onclick="Unibase.DataSources.DataLists.DatalistBuilder.Instance().addDataSource(${dataSourceProviderId})" title="Add DataSource"><i class="fa fa-plus"></i></a></span><p class="h5">Data Sources (${dataSourceProviderName})</p> </div>
                            <div class="card-body row h-800" id="div_datasources_${dataSourceProviderId}">
                            </div>
                            <div class="card-footer"><button id="btn-source-close" class="btn-source-close btn btn-secondary btn-sm mr-auto">Close</button></div>
                            </div>`;
                        this.navigationHelper.popupHtml(html, Platform.Helpers.Size.Auto, function (Datasourcecontainer) {
                            $("#btn-source-close").click(function () {
                                $('#' + Datasourcecontainer).modal('hide');
                                $('#' + Datasourcecontainer).remove();
                            });
                        });
                        DatalistBuilder.Instance().bindDataSources(dataSourceProviderId);
                    }
                    bindDataSources(dataSourceProviderId) {
                        this.fileCacheHelper.loadJsFile("platform/datasources/managers/datalistmanager.js", function () {
                            this.fileCacheHelper.loadJsFile("platform/datasources/components/datalistbuilder/datalistbuilder.template.js", function () {
                                this._datalistManager.getDataSources(dataSourceProviderId).then(function (response) {
                                    let html = "";
                                    var data = JSON.parse(response.toString());
                                    for (let i = 0; i < data.length; i++) {
                                        var datasources = data[i];
                                        var template = DataSources.Templates.DatalistBuilder.Instance().loadDataSourceTemplate();
                                        var templateScript = Handlebars.compile(template);
                                        var context = { "DataSourceId": datasources.DataSourceId, "DataSourceName": datasources.DataSourceName, "DataSourceProviderId": datasources.DataSourceProviderId };
                                        html += templateScript(context);
                                    }
                                    jQuery("#div_datasources_" + dataSourceProviderId).html(html);
                                });
                            });
                        });
                    }
                    addDataSource(dataSourceproviderid) {
                        let html = DataSources.Templates.DatalistBuilder.Instance().loadAddDataSourceTemplate(dataSourceproviderid);
                        this.navigationHelper.popupHtml(html, Platform.Helpers.Size.Auto, function (Datasourcecontainer) {
                            $("#btn-addsource-close").click(function () {
                                $('#' + Datasourcecontainer).modal('hide');
                                $('#' + Datasourcecontainer).remove();
                            });
                        });
                        DatalistBuilder.Instance().bindDataSourceProviderDropdown();
                    }
                    saveDataSource(datasourceproviderid) {
                        var postdata = {
                            UserId: $("#div_addDataSource_" + datasourceproviderid).find("#datasource_UserId").val().toString(),
                            Password: $("#div_addDataSource_" + datasourceproviderid).find("#datasource_Password").val().toString(),
                            DataSourceId: Number($("#div_addDataSource_" + datasourceproviderid).find("#datasource_DataSourceId").val()),
                            DataSourceName: $("#div_addDataSource_" + datasourceproviderid).find("#datasource_DataSourceName").val().toString(),
                            UserDeviceId: $("#div_addDataSource_" + datasourceproviderid).find("#datasource_UserDeviceId").val().toString(),
                            DataSourceProviderId: Number($("#div_addDataSource_" + datasourceproviderid).find("#select_datasourceproviders option:selected").val()),
                        };
                        this.fileCacheHelper.loadJsFile("platform/datasources/managers/datalistmanager.js", function () {
                            DataSources.Managers.DataListManager.Instance().saveDataSource(postdata).then(function (response) {
                                if (response != null) {
                                    return response;
                                }
                            });
                        });
                    }
                    editDataSource(datasourceid, datasourceproviderid) {
                        DatalistBuilder.Instance().addDataSource(datasourceproviderid);
                        $("#addDataSource_title").text("Edit DataSource");
                        DataSources.Managers.DataListManager.Instance().getDataSource(datasourceid).then(function (response) {
                            var dataSource = response.result;
                            $("#div_addDataSource_" + datasourceproviderid).find("#datasource_DataSourceId").val(dataSource.dataSourceId);
                            $("#div_addDataSource_" + datasourceproviderid).find("#datasource_UserId").val(dataSource.userId);
                            $("#div_addDataSource_" + datasourceproviderid).find("#datasource_Password").val(dataSource.password);
                            $("#div_addDataSource_" + datasourceproviderid).find("#datasource_DataSourceName").val(dataSource.dataSourceName);
                            $("#div_addDataSource_" + datasourceproviderid).find("#datasource_UserDeviceId").val(dataSource.userDeviceId);
                            $("#div_addDataSource_" + datasourceproviderid).find("#select_datasourceproviders").val(dataSource.dataSourceProviderId);
                        });
                    }
                    loadSettings(dataSourceproviderId, dataSourceproviderName) {
                        let html = `<div class="card" style="position: initial;height:-webkit-fill-available;"><div class="card-header"><p class="h5">Settings (${dataSourceproviderName})</p></div>
                            <div class="card-body row" id="div_dataSourceprovidersettings_${dataSourceproviderId}">
                            <div class="form-group col-md-4"><label>SettingName</label><input type="hidden" class="form-control datasourceprovider_SettingId"/ value="0"><input type="text" class="form-control datasourceprovider_SettingName"/></div>
                            <div class="form-group col-md-4"><label>Value</label><input type="text" class="form-control datasourceprovider_SettingValue"/></div>
                            <div class="form-group col-md-4"><label>DataSourceProvider</label><select class="form-control datasource_DataSourceProviderId"></select></div>
                            </div>
                            <div class="card-footer"><button id="btn-settings-close" class="btn-settings-close btn btn-secondary btn-sm mr-auto">Close</button><button id="btn-settings-save" class="btn-settings-save btn btn-primary btn-sm" onclick="Unibase.DataSources.DataLists.DatalistBuilder.Instance().saveDataSourceSetting()">Save</button></div>
                            </div>`;
                        this.navigationHelper.popupHtml(html, Platform.Helpers.Size.Auto, function (Datasourcecontainer) {
                            $("#btn-settings-close").click(function () {
                                $('#' + Datasourcecontainer).modal('hide');
                                $('#' + Datasourcecontainer).remove();
                            });
                        });
                        this.bindDataSourceProviderDropdownInSettings();
                    }
                    saveDataSourceSetting() {
                        var postdata = {
                            SettingId: Number($(".datasourceprovider_SettingId").val()),
                            SettingName: $(".datasourceprovider_SettingName").val().toString(),
                            SettingValue: Number($(".datasourceprovider_SettingValue").val().toString()),
                            DataSourceProviderId: Number($(".datasource_DataSourceProviderId  option:selected").val()),
                        };
                        this.fileCacheHelper.loadJsFile("platform/datasources/managers/datalistmanager.js", function () {
                            DataSources.Managers.DataListManager.Instance().saveDataSourceSetting(postdata).then(function (response) {
                                if (response != null) {
                                    return response;
                                }
                            });
                        });
                    }
                    bindDataSourceProviderDropdownInSettings() {
                        this._datalistManager.getDataSourceProviders().then(function (response) {
                            let html = "";
                            var data = JSON.parse(response.toString());
                            for (let i = 0; i < data.length; i++) {
                                var datasourceproviders = data[i];
                                var template = DataSources.Templates.DatalistBuilder.Instance().loadDataSourceProviderDropdownTemplate();
                                var templateScript = Handlebars.compile(template);
                                var context = { "DataSourceProviderId": datasourceproviders.DataSourceProviderId, "DataSourceProviderName": datasourceproviders.DataSourceProviderName };
                                html += templateScript(context);
                            }
                            $(".datasource_DataSourceProviderId").append(html);
                        });
                    }
                    buildQuery(containerid) {
                        $("#" + containerid).find(".tab-content").addClass("hidden");
                        $("#" + containerid).find(".table-container").addClass("hidden");
                        $("#" + containerid).find("#datalist-table").remove();
                        var buildData = {
                            DocProperties: SelectedDocProperties,
                            DocTypeIds: SelectedDoctypes,
                            DocTables: doctypelist,
                            ConditionGroups: SelectedGroups,
                            DataListJoins: SelectedJoins,
                            QueryString: null,
                            datalistid: this.DataListId
                        };
                        this.fileCacheHelper.loadJsFile("platform/datasources/managers/datalistmanager.js", function () {
                            this._dataListManager.buildQuery(buildData).then(function (response) {
                                let data = JSON.parse(response.result);
                                if (response != null) {
                                    $("." + containerid + "-table-canvas").addClass("hidden");
                                    $("#" + containerid).find("#table-container").find("#datalist-table").remove();
                                    let html;
                                    if (data.QueryData.error == null) {
                                        html = `<table id="datalist-table"><thead><tr>`;
                                        for (let i = 0; i < data.QueryData.columns.length - 1; i++) {
                                            html += `<th>` + data.QueryData.columns[i].toString() + `</th>`;
                                        }
                                        ;
                                        html += `</thead><tbody>`;
                                        for (let i = 0; i < data.QueryData.rows.length - 1; i++) {
                                            let temp = data.QueryData.rows[i];
                                            html += `<tr>`;
                                            for (let j = 0; j < temp.length - 1; j++) {
                                                html += `<td>` + temp[j].toString() + `</td>`;
                                            }
                                            html += `</tr>`;
                                        }
                                        ;
                                        html += `</tbody></table>`;
                                        $("#" + containerid).find(".datalist-builder-body").append(html);
                                        var table1 = new Tabulator("#datalist-table", {});
                                        var width = $("#" + containerid).find(".datalist-builder-body").height() - 49 + "px";
                                        console.log(width);
                                        table1.setHeight(width);
                                    }
                                    else {
                                        html = `<span id="span_error">` + data.QueryData.error + `</span>`;
                                        $("#" + containerid).find(".datalist-builder-body").append(html);
                                    }
                                }
                            });
                        });
                    }
                    saveDataList(containerid) {
                        var instance = this;
                        let QueryTypeId = 2;
                        let isflattable = 0;
                        let scheduler = 0;
                        this._queryParser.ErrorThrown = false;
                        let datalistname = $("#" + containerid).find(".Datalistname").val();
                        $('.datalist-builder-body').add('.chart-metrics').click(function () {
                            $("#Bizgaze-messageInfo").fadeOut(2000, "swing");
                        });
                        let DataListTypeId = Number($("#" + containerid).find(".DatalistType").val());
                        let DataSourceId = Number($("#" + containerid).find(".DataSourceType").val());
                        if (datalistname == '') {
                            return MessageHelper.Instance().showError("Please provide DatalistName", 'bl-datalist_error');
                        }
                        if (DataListTypeId == 0) {
                            return MessageHelper.Instance().showError("Please select DataListType", 'bl-datalist_error');
                        }
                        if (DataSourceId == 0) {
                            return MessageHelper.Instance().showError("Please select DataSourceType", 'bl-datalist_error');
                        }
                        let TableName = 'FT_' + datalistname;
                        let dynamicQuery = this._queryParser.generateDynamicQuery($("#main_query"));
                        let QueryString = $("#" + containerid).find(".sql-textarea").val();
                        if ($("#" + containerid).find("#datalist_design").hasClass("active")) {
                            QueryTypeId = 1;
                            let QueryString = ``;
                        }
                        if ($("#chk_IsFlatTable").is(":checked") == true) {
                            isflattable = 1;
                        }
                        if ($("#chk_Scheduler").is(":checked") == true) {
                            scheduler = 1;
                        }
                        let customfilters = "";
                        if (instance._customfilters.customFilters.length != 0)
                            customfilters = JSON.stringify(instance._customfilters.customFilters);
                        var QueryData = {
                            DocProperties: SelectedDocProperties,
                            DocTypeIds: SelectedDoctypes,
                            DocTables: doctypelist,
                            ConditionGroups: SelectedGroups,
                            DataListJoins: SelectedJoins,
                            QueryString: null,
                            datalistid: this.DataListId
                        };
                        var postData = {
                            DataListId: Number(instance.DataListId),
                            DataListName: datalistname.toString(),
                            DataListTypeId: DataListTypeId,
                            DataSourceId: DataSourceId,
                            TableTypeId: Number($("#" + containerid).find(".TableType").val()),
                            IsCommon: $("#Iscommon_checkbox").is(":checked"),
                            QueryString: QueryString.toString(),
                            QueryTypeId: QueryTypeId,
                            IsFlattable: Boolean(isflattable),
                            StoredProcedureName: $("#" + containerid).find("#txt_spName").val().toString(),
                            FlatTableName: TableName,
                            TenureValue: Number($("#" + containerid).find("#txt_TenureValue").val()),
                            TenureTypeId: Number($("#" + containerid).find("#select_TenureType option:selected").val()),
                            Query: QueryData,
                            ContactColumns: $("#txt_SelectColumnName").val().toString(),
                            IsWhere: instance.IsWhere,
                            IsInternalDataList: instance.IsInternalDataList,
                            HasIdentityFilter: instance.HasIdentityFilter,
                            Parameters: $("#txt_parameters").val().toString().trim(),
                            FromDate: Unibase.Platform.Helpers.DateTimeHelper.Instance().formatLocalDateformat(new Date(), "YYYY/MM/DD"),
                            ToDate: Unibase.Platform.Helpers.DateTimeHelper.Instance().formatLocalDateformat(new Date(), "YYYY/MM/DD"),
                            PrimaryKeyColumn: $(".PrimaryKeyColumn").val().toString(),
                            DynamicQuery: dynamicQuery,
                            CustomFilters: customfilters,
                            IsAutoData: instance.IsAutoData,
                            InstalledAppId: isNaN(Number($("#InstalledApp_AutoComplete_DataList option:selected").val())) == true ? 0 : Number($("#InstalledApp_AutoComplete_DataList option:selected").val()),
                            IsGroupBy: instance.IsGroupBy,
                            EnableInsideWhere: instance.EnableInsideWhere,
                            IsFromUI: true,
                        };
                        Unibase.Platform.Helpers.FileCacheHelper.Instance().loadJsFile('/platform/datasources/managers/datalistmanager.js', function () {
                            Unibase.Platform.DataSources.Managers.DataListManager.Instance().saveDataList(postData).then(function (response) {
                                if (response.status === Unibase.Data.Status.Success) {
                                    instance._customfilters.customFilters = [];
                                    $('#' + containerid).modal('hide');
                                    $('#' + containerid).remove();
                                    return MessageHelper.Instance().showSuccess(response.message, 'bl-datalist_error');
                                    ;
                                }
                                else {
                                    return MessageHelper.Instance().showError(response.errors.join(","), 'bl-datalist_error');
                                }
                            });
                        });
                    }
                    initTable(containerid) {
                        var autoNumFormatter = function (cell) {
                            var row = cell.getRow();
                            var rowIndex = row.getPosition(false);
                            return (rowIndex + 1);
                        };
                        let table = new Tabulator("." + containerid + "-table-canvas", {
                            columns: [
                                { title: "", formatter: autoNumFormatter, frozen: true, minWidth: 40, width: 40 },
                                { title: "Name", field: "name" },
                                { title: "Age", field: "age" },
                                { title: "Gender", field: "gender" },
                                { title: "Height", field: "height" },
                                { title: "Favourite Color", field: "col" },
                                { title: "Date Of Birth", field: "dob" },
                                { title: "Cheese Preference", field: "cheese" },
                            ],
                            layout: "fitColumns"
                        });
                        return table;
                    }
                    load_data(containerid, table) {
                        var query = $("#" + containerid).find(".sql-textarea").val();
                        var queryinfo = {
                            DocProperties: null,
                            DocTypeIds: null,
                            DocTables: null,
                            ConditionGroups: null,
                            DataListJoins: null,
                            QueryString: query.toString(),
                            datalistid: this.DataListId
                        };
                        var iscommon = $("#Iscommon_checkbox").is(":checked");
                        var datasourceid = Number($(".DataSourceType").val());
                        var datalistid = this.DataListId;
                        if ($("#" + containerid).find("#sql-container").hasClass("show")) {
                            if (query != null && query != "" || $(".DatalistType").val() == 5) {
                                Unibase.Platform.Helpers.FileCacheHelper.Instance().loadJsFile('/platform/datasources/managers/datalistmanager.js', function () {
                                    if ($(".DatalistType").val() == 5) {
                                        Unibase.Platform.DataSources.Managers.DataListManager.Instance().getdatafromapi(datalistid).then(function (response) {
                                            if (response.result != null) {
                                                Unibase.Platform.DataSources.Components.DatalistBuilder.Instance().loadresponse(containerid, response.result);
                                            }
                                        });
                                    }
                                    else {
                                        Unibase.Platform.DataSources.Managers.DataListManager.Instance().getTable(query.toString(), iscommon, datasourceid).then(function (response) {
                                            if (response != null) {
                                                Unibase.Platform.DataSources.Components.DatalistBuilder.Instance().loadresponse(containerid, response.result);
                                            }
                                        });
                                    }
                                });
                            }
                            else {
                                alert("Please Enter a Query");
                            }
                        }
                        else {
                            $("." + containerid + "-table-canvas").removeClass("hidden");
                            var tableData = [
                                { id: 1, name: "sr", age: "12", gender: "male", height: 1, col: "red", dob: "", cheese: false },
                                { id: 2, name: "May", age: "1", gender: "female", height: 2, col: "blue", dob: "14/05/1982", cheese: true },
                                { id: 3, name: "sr", age: "12", gender: "male", height: 1, col: "red", dob: "", cheese: false },
                                { id: 4, name: "May", age: "1", gender: "female", height: 2, col: "blue", dob: "14/05/1982", cheese: true },
                                { id: 5, name: "sr", age: "12", gender: "male", height: 1, col: "red", dob: "", cheese: false },
                                { id: 6, name: "May", age: "1", gender: "female", height: 2, col: "blue", dob: "14/05/1982", cheese: true },
                                { id: 7, name: "sr", age: "12", gender: "male", height: 1, col: "red", dob: "", cheese: false },
                                { id: 8, name: "May", age: "1", gender: "female", height: 2, col: "blue", dob: "14/05/1982", cheese: true },
                                { id: 9, name: "sr", age: "12", gender: "male", height: 1, col: "red", dob: "", cheese: false },
                                { id: 10, name: "May", age: "1", gender: "female", height: 2, col: "blue", dob: "14/05/1982", cheese: true },
                                { id: 11, name: "sr", age: "12", gender: "male", height: 1, col: "red", dob: "", cheese: false },
                                { id: 12, name: "May", age: "1", gender: "female", height: 2, col: "blue", dob: "14/05/1982", cheese: true },
                                { id: 13, name: "sr", age: "12", gender: "male", height: 1, col: "red", dob: "", cheese: false },
                                { id: 14, name: "May", age: "1", gender: "female", height: 2, col: "blue", dob: "14/05/1982", cheese: true },
                                { id: 15, name: "sr", age: "12", gender: "male", height: 1, col: "red", dob: "", cheese: false },
                                { id: 16, name: "May", age: "1", gender: "female", height: 2, col: "blue", dob: "14/05/1982", cheese: true },
                                { id: 17, name: "sr", age: "12", gender: "male", height: 1, col: "red", dob: "", cheese: false },
                                { id: 18, name: "May", age: "1", gender: "female", height: 2, col: "blue", dob: "14/05/1982", cheese: true },
                                { id: 15, name: "sr", age: "12", gender: "male", height: 1, col: "red", dob: "", cheese: false },
                                { id: 16, name: "May", age: "1", gender: "female", height: 2, col: "blue", dob: "14/05/1982", cheese: true },
                                { id: 17, name: "sr", age: "12", gender: "male", height: 1, col: "red", dob: "", cheese: false },
                                { id: 18, name: "May", age: "1", gender: "female", height: 2, col: "blue", dob: "14/05/1982", cheese: true },
                            ];
                            table.setData(tableData);
                            var width = $("#" + containerid).find("#table-container").height() - 49 + "px";
                            console.log(width);
                            table.setHeight(width);
                        }
                    }
                    loadresponse(containerid, data) {
                        for (let i = 0; i < data.columns.length; i++) {
                            var Columns = data.columns;
                        }
                        $("#txt_SelectColumnName").select2({
                            placeholder: 'Select Contact Columns',
                            data: Columns,
                        });
                        $("#" + containerid).find(".tab-content").addClass("hidden");
                        $("#" + containerid).find(".table-container").addClass("hidden");
                        $("#" + containerid).find("#datalist-table").remove();
                        $("." + containerid + "-table-canvas").addClass("hidden");
                        $("#datalist-table").remove();
                        let html;
                        if (data.error == null) {
                            html = `<table id="datalist-table"><thead><tr>`;
                            for (let i = 0; i < data.columns.length; i++) {
                                html += `<th>` + data.columns[i].toString() + `</th>`;
                            }
                            ;
                            html += `</thead><tbody>`;
                            for (let i = 0; i < data.rows.length; i++) {
                                let temp = data.rows[i];
                                html += `<tr>`;
                                for (let j = 0; j < temp.length; j++) {
                                    if (temp[j] == null) {
                                        temp[j] = "null";
                                    }
                                    html += `<td>` + temp[j].toString() + `</td>`;
                                }
                                html += `</tr>`;
                            }
                            ;
                            html += `</tbody></table>`;
                            $("#" + containerid).find(".datalist-builder-body").append(html);
                            var table1 = new Tabulator("#datalist-table", {});
                            var width = $("#" + containerid).find(".datalist-builder-body").height() - 49 + "px";
                            console.log(width);
                            table1.setHeight(width);
                        }
                        else {
                            html = `<span id="span_error">` + data.error + `</span>`;
                            $("#" + containerid).find(".datalist-builder-body").append(html);
                        }
                        $("#btn-preview-close").click(function () {
                            if ($("#" + containerid).find("#sql-container").hasClass("show")) {
                                $("#" + containerid).find("#table-container").addClass("hidden");
                                $("#" + containerid).find("#datalist-table").remove();
                                $("#" + containerid).find(".tab-content").removeClass("hidden");
                                $("#btn-preview-close").addClass("hidden");
                                $("#btn-datalist-builder-close").removeClass("hidden");
                                $("#" + containerid).find(".datalist-builder-body").find("#span_error").remove();
                            }
                            else {
                                $("#" + containerid).find("#datalist-table").remove();
                                $("#" + containerid).find(".tab-content").removeClass("hidden");
                                $("#" + containerid).find(".table-container").addClass("hidden");
                                $("#btn-preview-close").addClass("hidden");
                                $("#btn-datalist-builder-close").removeClass("hidden");
                                $("#" + containerid).find(".datalist-builder-body").find("#span_error").remove();
                            }
                        });
                    }
                    loadChartIcons() {
                        let html = `<button class="btn btn-icon btn-icon-circle btn-icon-style-3"><i class="fa fa-bar-chart-o"></i></button><button class="btn btn-icon btn-icon-circle btn-icon-style-3"><i class="fa fa-building"></i></button><button class="btn btn-icon btn-icon-circle btn-icon-style-3"><i class="fa fa-filter"></i></button>`;
                        $("#bl-nav-chart").html(html);
                        $("#bl-nav-chart").height($("#chart-container").height());
                    }
                    loadTabs(containerid) {
                        let html = `<ul class="nav nav-tabs nav-light">
                    <li role="tablist" class="Active">
                    <a data-toggle="tab" href="#designer-container" id="datalist_design" class="nav-link active show">Design</a>
                    </li>
                    <li role="tablist"><a data-toggle="tab" href="#sql-container" id="datalist_sql" class="nav-link">SQL</a></li>
                    <li role="tablist"><a data-toggle="tab" href="#storedprocedure-container" id="datalist_storedprocedure" class="nav-link">StoredProcedure</a></li>
                    <li role="tablist"><a data-toggle="tab" href="#datalist_newsql_container_wrapper" id="datalist_tab_newsql" class="nav-link">New Sql</a></li>
                    </ul>`;
                        $("#" + containerid).find("#tab-container").html(html);
                    }
                    loadChartToggleButtons() {
                        let html = `<ul class="nav nav-pills"><button id="btnRefresh" class="btn btn-primary"><i class="fa fa-refresh"></i><span> Refresh</span></button><button class="btn btn-icon ml-5"><i class="fa fa-bar-chart-o"></i></button><button class="ml-5 btn btn-icon"><i class="fa fa-filter"></i></button></ul>`;
                        $("#tab-container").after(html);
                    }
                    loadTableToggleButtons() {
                        let html = `<ul class="nav nav-pills"><button id="btnRefresh" class="btn btn-primary"><i class="fa fa-refresh"></i><span> Refresh</span></button><button class="ml-5 btn btn-default"><i class="fa fa-cog"></i><span> Settings</span></button></ul>`;
                        $("#lbl-record-count").after(html);
                    }
                    static Instance() {
                        if (this.instance === undefined) {
                            this.instance = new DatalistBuilder();
                        }
                        return this.instance;
                    }
                }
                Components.DatalistBuilder = DatalistBuilder;
            })(Components = DataSources.Components || (DataSources.Components = {}));
        })(DataSources = Platform.DataSources || (Platform.DataSources = {}));
    })(Platform = Unibase.Platform || (Unibase.Platform = {}));
})(Unibase || (Unibase = {}));