add icon to dropdown nested grid

[SerdarParticipant]

hello How do I add an icon to the dropdown nested grid?
..Where should I add initrowdetails? thank you

example image
https://ibb.co/3d6jS8H
<span class='curvingRightArrow'>⤷</span>

.curvingRightArrow {
    font-size: 50px;
    position: absolute;
    left: 5px;
    top:1px;
    z-index: 1044;
    color: #335D84;
    content: "\2937";
}

CODE

  // 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' },
            ],
            id: 'ADDRESS_ID',
            localdata: detailData
        }
        var detailAdapter = new $.jqx.dataAdapter(detailSource);
        if (grid != null) {

            grid.jqxGrid({
                source: detailAdapter,
                width: "100%",
                height: '500px', 
                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: 220, 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 }, 
            ]
        }); 

[SerdarParticipant]

and last question.. How can I increase the height? nested grid not full showing

thank you
https://ibb.co/cF5Ln41

[SerdarParticipant]

I’am sory the answer is simple
rowdetailsheight: 500
thanks

[adminKeymaster]

Hi Serdar,

As for the icon, it will need to be an additional HTML element added to the Grid and such logic is unfortunately not supported.

Best regards,
Peter Stoev

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

[SerdarParticipant]

hello i found the solved..took me 4 days

https://ibb.co/XfP834g

.curvingRightArrow {
    font-size: 50px;
    position: inherit;
    left: 1px;
    top: -4px;
    z-index: 992321312321312;
    color: #335D84; 
}

//global variable
var rowCount = 0;

    $('#GridMark').on('rowexpand', function (event) {
        event.preventDefault();
        event.stopImmediatePropagation();
      
        var index = $('#GridMark').jqxGrid('getrowboundindex', event.args.rowindex);
        var rowdata = $('#GridMark').jqxGrid('getrowdata', index);
        var rows = $("#GridMark").jqxGrid("getdatainformation");
        for (var ri = 0; ri < rows.rowscount; ri++) {
            if (ri != index) {
                $('#GridMark').jqxGrid('unselectrow', ri);
                $("#GridMark").jqxGrid("hiderowdetails", ri);
            }
        } 
        rowCount = 1;
        $('#GridMark').jqxGrid('selectrow', index);
        initrowdetails(index, false, $('#GridMark'), rowdata);
    
    });

$("#GridMark").on('rowcollapse', function (event) {
    event.preventDefault();
    event.stopImmediatePropagation();
    $("#GridMark").jqxGrid('clearselection');
    $(".curvingRightArrow").remove();  
});

  var initrowdetails = function (index, parentElement, gridElement, record) {
         
        var detailGrid = new Array();
        if (rowCount > 0) {

            var id = record.MARK_ID.toString();
            detailData = GetModelsForMark(id);

            setTimeout(function () {
                $("#grid" + index).addClass("grid")
                var grid = $("#grid" + index);
               
                nestedGrids[index] = grid;

                var detailSource = {
                    datafields: [
                        { name: 'MODEL_ID', type: 'int' },
                        { name: 'MODEL_CODE', type: 'string' },
                        { name: 'MODEL_NAME', type: 'string' }
                    ],
                    id: 'MODEL_ID',
                    localdata: detailData
                }
                var detailAdapter = new $.jqx.dataAdapter(detailSource);
                if (grid != null) {

                    grid.jqxGrid({
                        source: detailAdapter,
                        width: "100%",
                        height: '400px',
                        pagerrenderer: pagerrenderer,
                        columnsresize: true,
                        columnsreorder: true,
                        altrows: true,
                        showToolbar: false,
                        pageable: true,
                        enabletooltips: true,
                        showstatusbar: true,
                        groupable: true,// GRUP
                        theme: "arctic",
                        statusbarheight: 40,
                        autowidth: false,
                        pagesize: 50,
                        keyboardnavigation: true,
                        virtualmode: false,// BUNU AKTİF ETME
                        enablehover: true,
                        showaggregates: false, // dip SAYFA SAYISI      
                        showgroupaggregates: false,
                        renderstatusbar: function (statusbar) {
                            statusbar.empty().append('<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>')
                        },

                        filterable: true,
                        showfilterrow: true,
                        rendergridrows: function () {
                            detailAdapter.records;

                        },
                        columns: [
                            {
                                text: '', sortable: false, filterable: false, editable: false,
                                groupable: false, draggable: false, resizable: false,
                                datafield: 'ROW_NUMBER', 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: 'MODEL KODU', columntype: 'textbox', datafield: 'MODEL_CODE', width: "48%" },
                            { text: 'MODEL ADI', columntype: 'textbox', datafield: 'MODEL_NAME', width: "50%" },
                        ]
                    });

                    $("#grid" + index).on("groupschanged", function (event) {
                        if (event.args.groups.length > 0) {
                            $("#grid" + index).jqxGrid('hidecolumn', 'ROW_NUMBER');

                        }
                    });

                    var localizationobj = {};
                    localizationobj.pagergotopagestring = "Sayfaya Git:";
                    localizationobj.pagershowrowsstring = "Satırı Göster:";
                    localizationobj.pagerrangestring = " Arasında ";
                    localizationobj.pagernextbuttonstring = "Sonraki";
                    localizationobj.pagerpreviousbuttonstring = "Önceki";
                    localizationobj.sortascendingstring = "Artarak Sırala";
                    localizationobj.sortdescendingstring = "Azalarak Sırala";
                    localizationobj.sortremovestring = "Sıralama Kaldır";
                    localizationobj.groupbystring = "Bu Kolonu Grupla";
                    localizationobj.groupremovestring = "Grupları Kaldır";
                    localizationobj.groupsheaderstring = "Gruplamak İstediğiniz Kolonu Buraya Sürükleyip Bırakın";
                    localizationobj.firstDay = 1;
                    localizationobj.percentsymbol = " %";
                    localizationobj.currencysymbol = " ₺";
                    localizationobj.currencysymbolposition = "Önce";
                    localizationobj.decimalseparator = ",";
                    localizationobj.thousandsseparator = ".";
                    var days = {
                        names: ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"],
                    };
                    localizationobj.days = days;
                    var months = {
                        names: ["Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran", "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık", ""],
                    };
                    localizationobj.emptydatastring = "Kayıt Yok";

                    $("#grid" + index).jqxGrid('localizestrings', localizationobj);

                    var element = $("<div id='expandPage'></div>");
                    var label = $("<div style='font-size: 11px; bold; float: left;'></div>");
                    label.appendTo(element);
                    var datainfo = $("#grid" + index).jqxGrid('getdatainformation');
                    var paginginfo = datainfo.paginginformation;
                    var count = paginginfo.pagenum == 0 ? 1 : paginginfo.pagenum;
                    paginginfo.pagescount = paginginfo.pagescount == 0 ? 1 : paginginfo.pagescount;

                    $("#grid" + index + " #pageCount").text("Sayfa: " + paginginfo.pagescount + "/" + count);
                    $("#grid" + index + " #pageCount").show();
                }
                $("#row"+index+"GridMark").append("<span class='curvingRightArrow'>⤷</span>")  

            })
            rowCount = 0;
        }

    }

[Author]

Posts