In Kendo Master Detail Grid (jquery) is there a way to update a field in the parent row if no child records exist?

Question

I have a Kendo Master/Detail grid (jquery) that expands all rows to reveal any child records upon page load to provide a grid with a set of default data. However, not all of the rows returned when expanded have child elements to display. I currently have a link provided in a column of the master row, the link is coded using a template:

{
  
  template: `"<a class='_kwJISSearch' style='color:blue; text-decoration:underline; cursor: pointer;'>Edit Case Assignment</a>",`
  width: "100px"
}

What I would like to know if I can change the text and what the link is pointing to on the master row if no child elements are returned? I have provided my code below, where I create the columns for the master first, then create the grid with a data-bound, lastly, I coded the detail:

function loadSearchGrid() {
    searchOriginalColumnList = [
        {
            field: "CaseYear",
            title: "Case Year",
            type: "number",
            width: "100px"
        },
        {
            field: "CaseNumber",
            title: "Case Number",
            width: "100px"
        },
        {
            field: "Full_Style",
            title: "Style",
            template: "<a href='/Cases/Views/CaseItems/ViewDocket?cy=#=CaseYear#&cn=#=CaseNumber#' target='_blank' style='color: blue; text-decoration:underline' ># if(Full_Style == null || Full_Style == '' ) {# N/A #} else{ #  #:Full_Style#  #} # </a>",
            width: "250px"
        },
        {
            field: "DispInfo",
            title: "Disp Info",
            width: "175px"
        },
        {
            field: "Max_OA",
            title: "OA Date",
            format: "{0:MM/dd/yyyy}",
            width: "100px"
        },
        {
            field: "Max_Conf",
            title: "Conf Date",
            format: "{0:MM/dd/yyyy}",
            width: "120px"
        },
        {
            field: "Evote_Info",
            title: "Evote",
            template: "<a href=" + apiUrl +"JISReports/JIS_eVOTE&P_CASEYEAR=#=CaseYear#&P_CASENUMBER=#=CaseNumber#&rs:Command=Render' target='_blank' style='color:blue; text-decoration:underline;  cursor: pointer;' ># if(Evote_Info == 'TRUE') {# Evote Info #} else{ #  #} # </a>",
            width: "100px"
        },
        {
            field: "Ap_T_Related",
            title: "Related Case",
            //format: "{0:MM/dd/yyyy}",
            width: "120px"
        },
        {
            field: "Lead",
            title: "Lead",
            //format: "{0:MM/dd/yyyy}",
            width: "100px"
        },
        {
            field: "Not_Lead",
            title: "Not Lead",
            //format: "{0:MM/dd/yyyy}",
            width: "100px"
        },
        {
            //field: "Ap_T_Related",
            //title: "Related Case",
            //format: "{0:MM/dd/yyyy}",
            template: /*"# if( getDetailGrids() == null ) {# Case Not Assigned #} else{# <a class='_kwJISSearch' style='color:blue; text-decoration:underline; cursor: pointer;'>Edit Case Assignment</a>#}#",//*/"<a class='_kwJISSearch' style='color:blue; text-decoration:underline; cursor: pointer;'>Edit Case Assignment</a>",
            width: "100px"
        },

    ];
    
    
    var searchGridSavedColumns = utils.getGridSavedColumns(searchOriginalColumnList, config.gridSettingsKeys.jisSearch);
    
    
    grid = $("#grid").kendoGrid({
        dataSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: localRoutes.searchUrl,
                    dataType: "json",
                    method: "POST",
                    data: function () {
                        model = {
                            PanelType: viewModel.get("selectedPanelType"),
                            DispFinalInfo: viewModel.get("selectedFinalDisp"),
                            AssgnComp: viewModel.get("selectedAssignComp"),
                            ShowComm: viewModel.get("selectedShowComm"),
                            SortResult: viewModel.get("selectedSortResult"),
                            Assignment_Select: viewModel.get("selectedAssgnTypes"),
                            Assignment_For: viewModel.get("selectedSuiteMate"),
                            SearchCY: viewModel.get("caseYear"),
                            SearchCN: $('#caseNumber').val(),
                            Style: viewModel.get("style"),
                            
                        };
                        return model;

                    }
                }
            },
            error: function (e) {
                $.unblockUI();
            },
            pageSize: 50,
            schema: {
                model: {
                    id: "CaseUaId",
                    fields: {
                        CaseUaId: { type: "string" },
                        PanelTypes: { type: "string" },
                        FinalDisp: { type: "string" },
                        AssignComp: { type: "string" },
                        ShowComm: { type: "string" },
                        SortResult: { type: "string" }
                    }
                },
            },
        }),
        pageable: {
            refresh: true,
            pageSizes: [20, 50, 100, 500]
        },
        toolbar: ["excel"],
        editable: false,
        groupable: true,
        selectable: true,
        filterable: true,
        columnMenu: true,
        scrollable: true,
        reorderable: true,
        resizable: true,//setting to allow column headers to be resizeable
        autoBind: false,
        sortable: {
            mode: "multiple",
            allowUnsort: true
        },
        toolbar: kendo.template($("#toolbar").html()),
        excel: {
            fileName: "JIS Search.xlsx",
            allPages: true
        },
        //Second set of code for Master Detail
        detailInit: detailInit,
        dataBound: function (e) {
            this.expandRow(this.tbody.find("tr.k-master-row"));//.first());                
            
          
        },
        columns: (!!searchGridSavedColumns) ? searchGridSavedColumns : searchOriginalColumnList,
        

    }).data("kendoGrid");
    ///Code to set the column headers as tooltips
    grid.thead.kendoTooltip({
        filter: "th",
        content: function (e) {
            var target = e.target;
            return $(target).text();
        }
    });

    $("#grid").on("click", "._kwJISSearch", function (e) {
        e.preventDefault();
        var ca = grid.dataItem($(e.currentTarget).closest("tr"));
        var win = $("#_kwJISSearch").data("kendoWindow");
        win.title();
        win.content("");
        win.refresh("/JIS/JISAssignment" +
            "?cy=" + ca.CaseYear +
            "&cn=" + ca.CaseNumber);
        win.center().open().maximize();
    });

    searchGridSettingsViewModel = utils.createGridSettingsVM("Search Grid Settings", "grid", config.gridSettingsKeys.jisSearch, "gridSettingsTmpl", "gridSettingsDialog", true, true, true, true, 20);

    kendo.bind($("#grid").find(".k-grid-toolbar"), searchGridSettingsViewModel);

    searchGridLoaded = true;

    
}//end assignment grid creation



function detailInit(e) {
    $("<div/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            //type: "odata",
            transport: {
                read: {
                    url: localRoutes.searchAssgnUrl,
                    dataType: "json",
                    method: "POST",
                    data: {
                        cy: e.data.CaseYear,
                        cn: e.data.CaseNumber,
                        showHis: viewModel.get("selectedAssignComp"),
                        caseY: viewModel.get("caseYear"),
                        caseN: viewModel.get("caseNumber")                            
                    }
                }
            },
            serverPaging: true,
            serverSorting: true,
            serverFiltering: true,
            pageSize: 10,
            filter: { field: "Case_Ua_Id", operator: "eq", value: e.data.CaseUaId }
        },
        scrollable: false,
        sortable: true,
        pageable: true,            
        
        columns: [
            //{ field: "CaseUaId", width: "110px" },
            {
                field: "UserName", title: "User Name",
                template: "# if(AssignEndDate == 'Incomplete' ) {# <span style='color:red; font-weight: bold'> #:UserName# </span> #} else{ #  #:UserName#  #} # ",
                width: "70px"
            },
            {
                field: "ReasonDesc", title: "Reason Desc",
                template: "# if(ReasonDesc == 'EXPEDITED' || ReasonDesc == 'WALK' ) {# <span style='color:red; font-weight: bold'> #:ReasonDesc# </span> #} else{ #  #:ReasonDesc#  #} # ",
                width: "70px"
            },
            { field: "AssignBeginDate", title: "Begin Date", width: "70px" },
            {
                field: "AssignEndDate", title: "End Date",
                template: "# if(Status_Code == 'PENDINGREVIEW' ) {# #:AssignEndDate# <span style='color:blue; font-style: italic'> (Pending Review) </span> #} else{ #  #:AssignEndDate#  #} # ",
                width: "70px"
            },
            { field: "DueDate", title: "Due Date", width: "70px" },
            { field: "AssignForLocID", title: "Assignment For", width: "100px" },
            { field: "AssignedByLocID", title: "Assigned By", width: "100px" },
            { field: "Comments", title: "Comments", width: "110px" },
            
        ]
    });

    
   
}//end Case Assignment Detail Grid

Answer 1

You can use JavaScript code inside a template, e.g.:

template: "<a class='_kwJISSearch' style='color:blue; text-decoration:underline; cursor: pointer;'># if (data.childrenProperty && data.childrenProperty.length) { ##Edit Case Assignment## } else { ##No children text here ## } #</a>",

Assuming your master row has an array property for children.