Navigating the complexities of applying CSS exclusively to child grids within Kendo Angular may seem challenging at first

This image illustrates the grid layout

I have created an angular UI using kendo that features a nested grid. I am trying to apply CSS specifically to the child grid without affecting the parent grid. However, no matter what CSS I write, it ends up being applied to both grids. How can I achieve this?

The structure of the grid is as follows:

Row 1
   row 1
   row 2
Row 2
    row 1
Row 3
    row 1

This is what I have attempted:

::ng-deep .k-grid td {
    padding: 8px !important;
}

HTML:

<div class="monitorGrid container-fluid pt-2 pr-0 pl-0">
  <kendo-grid [data]="gridData" [resizable]="true">
    <kendo-grid-column [width]="140" field="shipmentAutoId" title="Shipment Auto Id"></kendo-grid-column>
    <kendo-grid-column field="shipmentName" [width]="550" title="Shipment Name"></kendo-grid-column>
    <kendo-grid-column field="shipmentStatusId" hidden="hidden" title="Shipment Status Id"></kendo-grid-column>
    <kendo-grid-column field="statusName" [width]="140" title="Shipment Status"></kendo-grid-column>
    <kendo-grid-column field="pdfCount" [width]="90" title="PDF count"></kendo-grid-column>
    <kendo-grid-column field="downloadDate" [width]="140" title="Download Date"></kendo-grid-column>
    <kendo-grid-column field="deliveryDate" [width]="180" title="Shipment Delivery Date"></kendo-grid-column>
    <ng-template let-dataItem kendoGridDetailTemplate>

      <kendo-grid class="childGrid" [data]="dataItem.processing" [resizable]="true">
        <kendo-grid-column field="processingId" [width]="110" title="Processing Id">
        </kendo-grid-column>
        <kendo-grid-column field="documentName" [width]="520" title="Document Name">
        </kendo-grid-column>
        <kendo-grid-column field="insuranceCoId" hidden="hidden" title="Insurance Co Id">
        </kendo-grid-column>
        <kendo-grid-column field="insuranceCoName" [width]="145" title="Insurance Co Name">
        </kendo-grid-column>
        <kendo-grid-column field="templateId" hidden="hidden" title="Template Id">
        </kendo-grid-column>
        <kendo-grid-column field="templateName" title="Template Name"></kendo-grid-column>
        <kendo-grid-column field="sparteId" hidden="hidden" title="Sparte Id">
        </kendo-grid-column>
        <kendo-grid-column field="sparte" [width]="70" title="Sparte"></kendo-grid-column>
        <kendo-grid-column field="gevoId" hidden="hidden" title="Gevo Id"></kendo-grid-column>
        <kendo-grid-column field="gevo" [width]="90" title="Gevo"></kendo-grid-column>
        <kendo-grid-column field="totalPages" [width]="100" title="Total Pages">
        </kendo-grid-column>
      </kendo-grid>

    </ng-template>
  </kendo-grid>

</div>

Expected outcome: Apply styling such as color and padding width only to the Child grid.

Actual outcome: The CSS affects all elements within the grid.

cssangularkendo-grid

Answer №1

Have you considered creating a CSS rule specifically for your child grid elements?

::ng-deep .childGrid td {
    padding: 8px !important;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Mastering the art of styling with SASS

The introductory guide suggests: When it comes to integrating the Kendo UI theme into your project, there are numerous approaches available. One recommended method is utilizing Webpack along with its Sass loader, enabling the customization of the Kendo UI ...

angularkendo-ui-angular2

Dependency on Angular's HTTP service inside a component

I've been experimenting with loading data from a static JSON file as part of my journey to learn angular templating. After some searching online, I came across a few examples. However, I want to steer clear of implementing a service until I have a be ...

angular

Arranging divs parallelly while incorporating components within

Striving to create a layout with 3 divs side by side in an HTML document, my initial attempt resulted in this: https://i.stack.imgur.com/CpdLX.png However, I encountered an issue where the div would shift down whenever text or other objects were added: ...

htmlcss

(Material UI version 5) Custom global style enhancements

One of the examples in MUI is the Global style overrides: const theme = createTheme({ components: { // Name of the component MuiButton: { styleOverrides: { // Name of the slot root: { // Some CSS fontSize ...

cssreactjsmaterial-ui

How can I resolve the issue of "Errors detected in your package-lock.json" in NGRX?

I encountered some problems while trying to set up my Angular project in an NX workspace with NGRX and running it through Jenkins. After running npm install, I started getting errors. Has anyone else experienced errors like these after executing: nx updat ...

angularnpmngrxpackage.json

Switching a conditional className to a styled component

Currently, I am in the process of converting my project from plain CSS to styled components using styled-components. So far, I have successfully converted all of my components except for one. I have looked at various examples on Stack Overflow but none of ...

javascriptcssreactjsmaterial-uistyled-components

Surrounding the text with background color

My H1 text is in a div that spans multiple lines due to the fixed width of the div. I am looking to set the background color to only appear behind the actual text of the H1, without extending into empty space at the end of each line. In addition, I also n ...

htmlcss

Tips for modifying the background color of an individual page in Ionic 3 and above

https://i.stack.imgur.com/t2mDw.pngI am just starting with Ionic and I'm attempting to modify the CSS of a single page by changing the background color to something different, like green, for example. I know that I can make global changes, but in this ...

javascriptangularionic-framework

What are the ways to incorporate the width property in @media queries within CSS?

I've been struggling to set the width inside @media in my code, but it's not working as expected. Here is what I have tried: mat-toolbar { app-toolbar-left { width: 35%; } app-toolbar-right { width: 22%; } } @me ...

cssresponsive-designmedia-queries

How can you retrieve the value of a CSS file in Javascript and CSS?

Imagine there is an element with the class .selector. This class defines its style. Once the page has finished loading, some JavaScript code is executed - the specifics are not important. What matters is that the CSS properties have set the object's ...

javascriptjquerycss

Autocomplete feature seems to be functioning properly in the online demonstration, while it does not seem

I can see that the autocomplete feature is working in the example provided, but it's not functioning properly in my attempt. What could be causing this issue? <!doctype html> <html lang="en"> <head> <meta charset="utf-8> & ...

javascriptjquerycssjquery-ui

When a <dl> element is nested within an <ol>, it will be rendered as a list format

I'm facing an issue with my CSS that affects how different browsers render definition lists embedded within ordered lists. In IE10, the list displays as expected - a bulleted list inside the ordered list without affecting the numbering. However, Firef ...

htmlcssgoogle-chrome

Getting the id of a single object in a MatTable

I'm currently working on an angular 8 application where I've implemented angular material with MatTableDatasource. My goal is to retrieve the id from the selected object in my list: 0: {id: "e38e3a37-eda5-4010-d656-08d81c0f3353", family ...

javascriptangulartypescriptangular-material

Sharing content on an Angular 4/5 webpage

I find myself in a situation where I am required to share a link to my web application with a client, and they will be submitting a form on my webpage. This application has been developed using Angular 5. Despite searching online for a solution, I have not ...

angularpostangular5form-submitform-data

Discovering the process of iterating through values from multiple arrays of objects and applying them to a new response in Angular 8

Received the following data from an API response: const apiResponse = { "factoryId": "A_0421", "loss": [ { "lossType": "Planned Stoppage Time", "duration": ...

javascriptangulartypescriptangular8

Clicking on text within a DIV using jQuery

How can I use jQuery to show an "alert" when text inside a DIV is clicked, excluding images and other tags? The texts are contained within various DIVs along with images and tags. Is there a way to achieve this using jQuery? Check out the jsFiddle example ...

jquerycsshtmlselect

Trigger an event in Angular 2 and send it to the main application component

I need to trigger an event from a component that serves as the starting point of my application. This particular component manages a websocket connection and I must send a message, hence the need to trigger this event. The bootstrap component only contain ...

angularangular2-routingeventemitter

CSS in flexbox nested with no overflow utilized

I have created a basic "table" layout using flexbox. I want to implement horizontal scrolling for a specific part of the table by using overflow-x property. When you look at the provided code snippet, you'll notice that the CSS styles are only visib ...

htmlcssflexbox

Safari is truncating the box-shadow of an element enclosed within a button

I'm struggling with a button that has an element inside receiving a box-shadow: button { padding: 0; border: 0; margin: 0; overflow: visible; -webkit-appearance: none; background: white; } .shadow { display: inline-block; vertical- ...

csssafaribox-shadow

Creating a three-column layout with position fixed in the center

I'm struggling with achieving a maximum width of 400px for the entire set of three columns and centering them. ---------------------------------------------------- | | | |----------------------------- ...

htmlcss