Reply To: add icon to dropdown nested grid

[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;
        }

    }