opening the detail grid, the checkboxes disappear

[SerdarParticipant]

hello When I open the detail grid, the checkboxes disappear
thank you

https://ibb.co/wNSrRg8
https://ibb.co/fqHfTbx

function GridStore() {
     
    data =
    {
        localdata: [],
        datatype: "json",
        contentType: 'application/json; charset=utf-8',
        async: false,
        id: 'STORE_ID',
        datafields:
            [
                { name: 'STORE_ID', type: 'int' },
                { name: 'STORE_CODE', type: 'string' },
                { name: 'STORE_NAME', type: 'string' },
                { name: 'IS_LOCKED', type: 'bool' },
                { name: 'IS_DEFAULT', type: 'bool' },
                { name: 'OFFICE_ID', type: 'string' },
                { name: 'OFFICE_NAME', type: 'string' },
                { name: 'IN_STORE_AMOUNT', type: 'number' },
                { name: 'OUT_STORE_AMOUNT', type: 'number' },
                { name: 'ADDRESS_ID', type: 'string' },
                { name: 'ADDRESS_DETAIL_ID', type: 'string' },
                { name: 'PROVIDER_ID', type: 'number' },
            ],
    };

    localStorage.removeItem('GridStore_Properties');
    localStorage.setItem('GridStore_Properties', JSON.stringify(data));
    var adapter = new $.jqx.dataAdapter(data, {
        autoBind: true
    });

    // DETAIL GRID
    var nestedGrids = new Array();
    var detailData = [];
    var id;
    var initrowdetails = function (index, parentElement, gridElement, record) {

        var detailGrid = new Array();

        var id = record.ADDRESS_ID.toString();
        var detailData = GetAddress(id);
        var grid = $($(parentElement).children()[0]);
        nestedGrids[index] = grid;

        var detailSource = {
            datafields: [
                { name: 'COUNTRY', type: 'string' },
                { name: 'CITY', type: 'string' },
                { name: 'TOWN', type: 'string' },
                { name: 'DISTRICT', type: 'string' },
                { name: 'NEIGHBORHOOD', type: 'string' },
                { name: 'ADDRESS_TYPE', type: 'string' },
                { name: 'NEIGHBORHOOD', type: 'string' },
                { name: 'ADDRESS_ID', type: 'int' },
                { name: 'ADDRESS', type: 'string' },
                { name: 'IS_LOCKED', type: 'bool' },
                { name: 'IS_DEFAULT', type: 'bool' },
            ],
            id: 'ADDRESS_ID',
            localdata: detailData
        }
        var detailAdapter = new $.jqx.dataAdapter(detailSource);
        if (grid != null) {

            grid.jqxGrid({
                source: detailAdapter,
                width: "100%",
                rowsheight: 35,
                theme: "energyblue",
                columns: [
                    {
                        text: '', sortable: false, filterable: false, editable: false,
                        groupable: false, draggable: false, resizable: false,
                        datafield: '', columntype: 'number', width: '2%',
                        cellsrenderer: function (row, column, value) {
                            return "<div style='font-size: 15px;margin: 4px;position: relative;text-align: center;'>" + (value + 1) + "</div>";
                        }
                    },
                    { text: 'İL', datafield: 'CITY', width: "20%" },
                    { text: 'İLÇE', datafield: 'TOWN', width: "20%" },
                    { text: 'SEMT', datafield: 'DISTRICT', width: "20%" },
                    { text: 'MAHALLE', datafield: 'NEIGHBORHOOD', width: "20%" },
                    { text: 'AÇIK ADRES / AÇIKLAMA', datafield: 'ADDRESS', width: "18%" }
                ]
            });
        }
    }

    var pagerrenderer = function () {

        var element = $("<div id='ankaToolbar_GridStore' class='ankaToolbar' style='position:fixed;width: 440px; height: auto;'></div>");

        var leftButton = $("<div class='toolTipElements formElement' data-tooltip='" + HellpTitle + "'  aria-label='Önceki Sayfa' data-balloon-blunt aria-label='No animation!' data-balloon-pos='down' style='padding: 1px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
        leftButton.find('div').addClass('fa fa-chevron-left icon-white');
        leftButton.width(36);
        leftButton.jqxButton();

        var rightButton = $("<div class='toolTipElements formElement' data-tooltip='" + HellpTitle + "'  aria-label='Sonraki Sayfa' data-balloon-blunt aria-label='No animation!' data-balloon-pos='down' style='padding: 1px; margin: 0px 3px; float: left;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
        rightButton.find('div').addClass('fa fa-chevron-right icon-white');
        rightButton.width(36);
        rightButton.jqxButton();

        var saveButton = $("<div class='toolTipElements formElement' data-tooltip='" + HellpTitle + "'  aria-label='Grid Ayarlarını Kaydet' data-balloon-blunt aria-label='No animation!' data-balloon-pos='down' style='padding: 1px; float: left;height:29px;'><div style='margin-left: 9px; width: 16px; height: 16px;'></div></div>");
        saveButton.find('div').addClass('fa fa-save saveGrid icon-white');
        saveButton.width(36);
        saveButton.jqxButton();

        leftButton.appendTo(element);
        rightButton.appendTo(element);
        saveButton.appendTo(element);

        var label = $("<div style='font-size: 11px; bold; float: left;'></div>");
        label.appendTo(element);
        rightButton.click(function () {
            $("#GridStore").jqxGrid('gotonextpage');
            var datainfo = $("#GridStore").jqxGrid('getdatainformation');
            var paginginfo = datainfo.paginginformation;
            var count = paginginfo.pagenum == 0 ? 1 : paginginfo.pagenum + 1;
            $("#GridStore #pageCount").text("Sayfa: " + paginginfo.pagescount + "/" + count);
            $("#GridStore #pageCount").show();
        });

        leftButton.click(function () {
            $("#GridStore").jqxGrid('gotonextpage');
            var datainfo = $("#GridStore").jqxGrid('getdatainformation');
            var paginginfo = datainfo.paginginformation;
            var count = paginginfo.pagenum == 0 ? 1 : paginginfo.pagenum + 1;
            $("#GridStore #pageCount").text("Sayfa: " + paginginfo.pagescount + "/" + count);
            $("#GridStore #pageCount").show();
        });

        return element;
    }
    var renderer = function (row, column, value) {
        return '<span style="margin-left: 4px; margin-top: 9px; float: left;">' + value + '</span>';
    }

    $("#GridStore").jqxGrid(
        {
            source: adapter,
            width: "100%",
            height: '750px',
            rowdetails: true,
            rowsheight: 35,
            initrowdetails: initrowdetails,
            rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 450, rowdetailshidden: true },
            pagerrenderer: pagerrenderer,
            
            ready: function () {

            },
            columns: [
                {
                    text: '', sortable: false, filterable: false, editable: false,
                    groupable: false, draggable: false, resizable: false,
                    datafield: '', columntype: 'number', width: '2%',
                    cellsrenderer: function (row, column, value) {
                        return "<div style='font-size: 15px;margin: 4px;position: relative;text-align: center;'>" + (value + 1) + "</div>";
                    }
                },
                { text: 'DEPO KODU', filtertype: 'input', columntype: 'textbox', datafield: 'STORE_CODE', width: "30%", cellsalign: 'left', cellsrenderer: renderer },
                { text: 'DEPO ADI', filtertype: 'input', columntype: 'textbox', pinned: false, datafield: 'STORE_NAME', width: "31%", cellsalign: 'left', cellsrenderer: renderer },
                { text: 'KİLİTLİ', datafield: 'IS_LOCKED', columntype: 'checkbox', filtertype: 'bool', width: "5%", cellsalign: 'center', cellsrenderer: renderer },
                { text: 'VARSAYILAN', datafield: 'IS_DEFAULT', columntype: 'checkbox', filtertype: 'bool', width: "5%", cellsalign: 'center', cellsrenderer: renderer },
                { text: 'ŞUBE', columntype: 'textbox', datafield: 'OFFICE_NAME', width: "27%", cellsalign: 'left', cellsrenderer: renderer }, 
            ]
        }); 

    var contextMenu = $("#StoreMenu").jqxMenu({ width: 200, autoOpenPopup: false, mode: 'popup' });

    $("#GridStore").on('contextmenu', function () {
        return false;
    });

    $("#StoreMenu").on('itemclick', function (e) {
        e.preventDefault();
        e.stopImmediatePropagation();

        var args = e.args;
        
        if ($.trim($(args).text()) == "Güncelle") {
              
            $(".jqx-menu").hide();
          
            var customFocus = 'NoFocus';
            var rowindex = $("#GridStore").jqxGrid('getselectedrowindex');
            var row = $("#GridStore").jqxGrid('getrowdata', rowindex);

            var count = GetObjectLength(row);
            if (count > 0) {
                row["Address"] = [];
                var address = GetAddress(row.ADDRESS_ID);

                if (address.length > 0)
                    row["Address"] = address;
            }

            var STORE_ID = null;
            if (ElementValuesCheck(row))
                STORE_ID = row.STORE_ID;

            var customFocus = 'NoFocus';
            var parameters = [];
            var hdnElements = [];
            hdnElements.push(
                {
                    "ROW_ID_hdn": null,
                    "PAGE_ID_hdn": "Store",
                    "PROVIDER_ID_hdn": STORE_ID,
                    "TABLE_DB_ID_hdn": null,
                    "TABLE_DB_hdn": null,
                    "TABLE_DB_COLUMN_hdn": null,
                    "PAGE_GRID_ID_hdn": null,
                    "STORE_ID_hdn": STORE_ID
                });

            parameters.push(
                {
                    "PATH": "/Commercial/Store/StoreModal",
                    "MODAL_ID": "StoreModal",
                    "OLD_PAGE_FOCUS": null,
                    "MODAL_DATA_SET_FUNCTION": "StoreModalSetValues",
                    "DATA": row,
                    "OLD_PAGE_KEYS": "StoreModalLoadKeys",
                    "OLD_PAGE_GRID": null,
                    "HDN": hdnElements
                });

            CallModalPage(parameters); 
        }
        else if ($.trim($(args).text()) == "Sil") {
            var row = $("#GridStore").jqxGrid('getrowdata', rowindex);
            var id = row.STORE_ID;
            if (row.STORE_NAME == 'Merkez Depo' || row.STORE_NAME == 'Şube Depo') {
                var dialog = bootbox.dialog({
                    title: "UYARI",
                    message: "<label>Sistem Tarafından Tanımlı Depolar Silinemez<label>",
                    size: 'small',
                    locale: 'tr',
                    onEscape: true,
                    buttons: {
                        ok: {
                            label: 'Tamam',
                            className: 'btn-default',
                            callback: function (result) {

                                runKey = false;
                            }
                        }
                    }, onEscape: function (result) {
                        return false;
                    }
                });
                setTimeout(function () {
         $(".modal-header button").remove(); $(".bootbox .modal-footer button").addClass("closePage"); $(".bootbox").attr("data-activepage", true).addClass("page");$(".bootbox .modal-footer").addClass("modal-footerFit");
                });
            }
            else if (!ElementValuesCheck(id)) {
                var dialog = bootbox.dialog({
                    title: "UYARI",
                    message: "<label class='control-label'>Depo ID si Alınamadı</label>",
                    size: 'small',
                    locale: 'tr',
                    onEscape: true,
                    buttons: {
                        ok: {
                            label: 'Tamam',
                            className: 'btn-default',
                            callback: function (result) {
                                runKey = false;
                            }
                        }
                    }, onEscape: function (result) {
                        return false;
                    }
                });
                setTimeout(function () {
                    $(".bootbox .-footer").addClass("-footerFit"); $(".-header button").remove(); $(".bootbox .-footer button").addClass("closePage"); $(".bootbox").attr("data-activepage", true).addClass("page");
                });
            }
            else {
                bootbox.confirm({
                    message: "<label class='control-label'>Kaydı Silmek İstediğinize</br>Eminmisiniz ?</label>",
                    size: 'small',
                    locale: 'tr',
                    title: "UYARI",
                    buttons: {
                        confirm: {
                            label: 'Evet',
                            className: 'btn-success btn'
                        },
                        cancel: {
                            label: 'Hayır',
                            className: 'btn-delete '
                        },
                    },
                    callback: function (result) {
                        var page = $(".page").attr("id"); $('#' + page).attr("data-activepage", true);
                        if (result) {

                            var status = DeleteStore(id);

                            if (JSON.parse(status)) {
                                var dialog = bootbox.dialog({
                                    title: "Başarılı",
                                    message: "<label>Kayıt Silindi</label>",
                                    size: 'small',
                                    locale: 'tr',
                                    onEscape: true,
                                    buttons: {
                                        cancel: {
                                            label: "Kapat",
                                            className: 'btn-info btn-primary',
                                            callback: function () {
                                                var rowid = $("#GridStore").jqxGrid('getrowid', rowindex);
                                                $("#GridStore").jqxGrid('deleterow', rowid);
 
                                                var data = GetStores();
                                                if (ElementValuesCheck(data)) {
                                                    var gridProperties = localStorage.getItem("GridStore_Properties") != undefined
                                                        ? $.parseJSON(localStorage.getItem("GridStore_Properties")) : null;
                                                    localStorage.removeItem('datasource');

                                                    localStorage.setItem("datasource", JSON.stringify(data));
                                                    var statusBar = '<div style="grid-template-columns: 94% 6%;" class="action-wrapper-comboGrid">' +
                                                        '<div id="expandPage">Kayıt: ' + data.length + '</div><span style="margin: 10px;" id="pageCount">Sayfa: 1/1</span></div>';

                                                    GridDynamicDataSet("#GridStore", gridProperties, data, statusBar, "id ");
                                                }
                                                else {
                                                    data = [];

                                                    var gridProperties = localStorage.getItem("GridStore_Properties") != undefined
                                                        ? $.parseJSON(localStorage.getItem("GridStore_Properties")) : null;
                                                    localStorage.removeItem('datasource');

                                                    localStorage.setItem("datasource", JSON.stringify(data));
                                                    var statusBar = '<div style="grid-template-columns: 94% 6%;" class="action-wrapper-comboGrid">' +
                                                        '<div id="expandPage">Kayıt: ' + data.length + '</div><span style="margin: 10px;" id="pageCount">Sayfa: 1/1</span></div>';

                                                    GridDynamicDataSet("#GridStore", gridProperties, data, statusBar, "id ");

                                                }
                                                runKey = false;
                                            }
                                        },
                                    }
                                });
                                setTimeout(function () {
                                    $(".bootbox .-footer").addClass("-footerFit"); $(".-header button").remove(); $(".bootbox .-footer button").addClass("closePage"); $(".bootbox").attr("data-activepage", true).addClass("page");
                                });
                            }
                            else {
                                var dialog = bootbox.dialog({
                                    title: "UYARI",
                                    message: "<label>Kayıt Silinemedi </br>Hata LOG landı</br>Lütfen Destek Birimini Arayın</label>",
                                    size: 'small',
                                    locale: 'tr',
                                    onEscape: true,
                                    buttons: {
                                        cancel: {
                                            label: "Kapat",
                                            className: 'btn-info btn-primary',
                                            callback: function () {

                                                runKey = false;
                                            }
                                        },
                                    }
                                });
                                setTimeout(function () {
                                    $(".bootbox .-footer").addClass("-footerFit"); $(".-header button").remove(); $(".bootbox .-footer button").addClass("closePage"); $(".bootbox").attr("data-activepage", true).addClass("page");
                                });
                            }

                        }
                        else {
                            runKey = false;
                        }
                    }
                });
                setTimeout(function () {
                    $(".bootbox .-footer").addClass("-footerFit"); $(".-header button").remove(); $(".bootbox .-footer button").addClass("closePage"); $(".bootbox").attr("data-activepage", true).addClass("page");
                });
            }
            $(".jqx-menu").hide();
        }
    });

    $("#GridStore").on('rowclick', function (event) {
        if (event.args.rightclick) {
            $("#GridStore").jqxGrid('selectrow', event.args.rowindex);
            var scrollTop = $(window).scrollTop();
            var scrollLeft = $(window).scrollLeft();
            contextMenu.jqxMenu('open', parseInt(event.args.originalEvent.clientX) + 5 + scrollLeft, parseInt(event.args.originalEvent.clientY) + 5 + scrollTop);
            $("#StoreMenu").show();
            return false;
        }
    });
}

[adminKeymaster]

Hi Serdar,

In the provided code, custom rendering is added to the checkbox columns via a function called renderer in the code. You need to remove that code.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[SerdarParticipant]

hello admin;
I think you are saying these but yes I know I put them wrong but when I removed them my problem did not go away
IS_LOCKED,IS_DEFAULT

var detailSource = {
            datafields: [
                { name: 'COUNTRY', type: 'string' },
                { name: 'CITY', type: 'string' } 
                 etc....

                { name: 'IS_LOCKED', type: 'bool' },
                { name: 'IS_DEFAULT', type: 'bool' },

[ivanpeevskiParticipant]

Hi Serdar,

Please make sure you have removed cellsrenderer from the two checkbox columns.

You can see in the example here, that the code you send us will work if you have removed the property from the two columns:
https://jsfiddle.net/v9rnkdga/

It is possible that the browser has cached the JS file and that is why you didn’t see any changes.

Best regards,
Ivan Peevski
jQWidgets Team
https://www.jqwidgets.com/

[SerdarParticipant]

thank you

[Author]

Posts