Styling your Kendo grid in ASP.NET MVC with custom CSS styling

I am facing a challenge with displaying two kendo grids side by side on a single view page. To modify the CSS style of a kendo grid using ASP.NET, I typically use:

.HtmlAttributes(new { style="width:50%"})

However, when attempting to change more than one character in the style attribute, such as trying to add "float:right", the following code does not work:

.HtmlAttributes(new { style="width:50% , float:right"})

or 

.HtmlAttributes(new { style="width:50%"+ "float :right"})

I'm seeking a solution for this issue and wondering if there is an easier way to modify the CSS of the kendo grid, perhaps utilizing JavaScript or other methods?

Thank you.

cssasp.netasp.net-mvckendo-uikendo-grid

Answer №1

Create a HTML table with one row and two columns (50% each), then in each cell, define a div that will function as the Kendo grid.

<div class="T0" id="L0">

<table class="tg">
 <tr>
  <th class="tg-031e">

      @(Html.Kendo().Grid<dynamic>()
.Name("GonfigGrid")
.Columns(columns =>
{
    foreach (System.Data.DataColumn c in Model.GridConfig.Columns)
    {
        columns.Bound(c.ColumnName).EditorTemplateName("String");
    }
})
.DataSource(dataSource => dataSource
    .Ajax()
    .Events(events => events.Error("error_handler"))
    .Model(model =>
    {
        foreach (System.Data.DataColumn column in Model.GridConfig.Columns)
        {
            model.Field(column.ColumnName, column.DataType);
            model.Id("Id");
        }
    })
    .Read(read =>

        read.Action("ConfigGeneric", "Configuration")
    )
))
</th>
<th class="tg-031e">


  @(Html.Kendo().Grid<dynamic>()
  .Name("StatusGrid")
  //.HtmlAttributes(new { style="width:50%;" })
    .Columns(columns =>
  {
    foreach (System.Data.DataColumn c in Model.GridStatus.Columns)
    {
        columns.Bound(c.ColumnName).EditorTemplateName("String");
    }
  })
.DataSource(dataSource => dataSource
    .Ajax()
    .Events(events => events.Error("error_handler"))
    .Model(model =>
    {
        foreach (System.Data.DataColumn column in Model.GridStatus.Columns)
        {
            model.Field(column.ColumnName, column.DataType);
            model.Id("Id");
        }
    })
    .Read(read =>

        read.Action("StatusGeneric", "Configuration")
    )
))
  </th>
   </tr>
  </table>


 </div>


<style>

  .tg  {border-collapse:collapse;
      border-spacing:0;
      width:100%;padding:0px;
      border-left:none;}
    .tg td{font-family:Arial, 
           sans-serif;font-size:14px;
                      padding:5px 5px 5px 0px;
                      overflow:hidden;
                      vertical-align:top;}
    .tg th{font-family:Arial, 
           sans-serif;
       font-size:14px;
       font-weight:normal;
       padding:5px 0px 5px 5px;
       overflow:hidden;
       vertical-align:top;}

 </style>

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 invoking a JavaScript function from a GridView Selected Index Changed event

In my current setup where I have a User Control within an Aspx Page and using Master Page, there's a GridView in the User Control. My goal is to trigger a javascript function when the "Select" linkbutton on the Gridview is clicked. Initially, I succe ...

javascriptjqueryasp.netmaster-pagesscriptmanager

Which is more effective: coding with just plain JavaScript and CSS, or utilizing frameworks?

As a student, is it more beneficial to focus on utilizing pure JavaScript & CSS or frameworks? And which approach is best suited for the professional field? ...

javascriptcssframeworks

Adjust the position of a textarea on an image using a slider

Currently, I am exploring how to creatively position a textarea on an image. The idea is to overlay the text on the image within the textarea and then use a slider to adjust the vertical position of the text as a percentage of the image height. For instanc ...

javascripthtmlcss

in Vue.js, extract the style of an element and apply it to a different element

Currently, I am using VUE.js 2 in my project. Here is my website's DOM structure: <aside :style="{height : height()}" class="col-sm-4 col-md-3 col-lg-3">...</aside> <main class="col-sm-8 col-md-9 col-lg-9" ref="userPanelMainContents" ...

javascriptjqueryhtmlcssvue.js

Maintaining the original size of the fill texture when resizing a path in SVG

I have created an SVG pattern using the following code: <svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="circles-1_4" patternUnits="userSpaceOnUse" width="10" height="10"> & ...

csssvgbase64scalefill

Utilizing spans to adjust the formatting of text within list items

When it comes to shaping text inside li elements, I've encountered a few issues. One of the problems is that the float-right divs aren't floating to the top right corner but instead leaving a space at the top. Additionally, the text isn't &a ...

htmlcsscss-float

I am encountering a horizontal scroll bar despite setting the width to 100%

I am just starting out as a beginner in web development. I decided to create a webpage to practice my HTML and CSS skills. However, when I set the width of all elements to 100%, I noticed that I am getting a horizontal scroll bar. I have tried troubleshoot ...

javascripthtmlcss

Issue with Tailwind CSS table header alignment not properly aligning to the right

Currently, I am facing an issue with tailwindcss where the headers in my table are not following the text-right / text-left / text-center directives. If you want to see the problem yourself, here's a link to the fiddle: https://jsfiddle.net/3u2jgqoc/ ...

htmlcsstailwind-csstext-alignment

Modify the design of the button in the CSS code

I am facing an issue with the layout of the Visible Columns button and unable to standardize it like the buttons above using CSS enter image description here The code snippet for the Visible Columns button is as follows: import React, { useState, useEffe ...

javascripthtmlcssreactjs

Using ASP.NET to validate a radiobutton list using JavaScript, followed by invoking a C# function

After experiencing some errors, I have refined my question to better articulate my objective. By revising the logic of my previous issue - where no text appeared in a pop-up dialog triggered by a C# script utilizing a JavaScript method - I present my updat ...

c#javascriptasp.net

Issue with Custom CSS Class Not Displaying Correctly

I have implemented some unique CSS styles on a group of posts. You can view the site here. Upon inspecting the CSS classes of the posts, you will notice that the last two classes are .floats and .colThree. .colThree is being applied correctly with no issu ...

csshtml

Searching for a tailor-made Regular expression tailored for model validation in MVC?

In my MVC.net 4 web application development, I am looking to create a regular expression for password validation that meets the following criteria: Should be between 6-32 characters in length. Must include at least one lowercase letter. Must include at l ...

asp.netregexasp.net-mvc

Angular single page application with a sleek, user-friendly navigation bar for easy browsing

I have been attempting to solve the issue at hand without much success. As a newcomer to web development, I have been working on creating a basic app using angularjs and bootstrap. My pages are fairly sparse, consisting only of a few inputs and buttons t ...

javascripthtmlcssangularjstwitter-bootstrap

`Problem with CSS in Firefox, functions properly in Chrome`

Can someone please check to see if they can find what I'm overlooking? It's working perfectly in Chrome 10 but not in Firefox 4. The aim is for it to look like an iPhone keyboard. http://jsfiddle.net/pfqdr/ UPDATE: http://jsfiddle.net/pfqdr/6/ ...

htmlcssfirefoxgoogle-chrome

Aligning characters according to Unicode standards

I'm looking to showcase a Unicode character at the center of a button. Below is the code snippet: <div class="col-xs-1"> <button class="btn btn-tool"> <span></span> </button> </div> span:before { ...

htmlcssunicode

Tips for incorporating fading text and a CTA into your content block

I am looking to protect the full content of my blog posts and allow access only to subscribed members. I want readers to see just a glimpse of the article before it disappears, prompting them to take action with a Call to Action (CTA) like in the fading te ...

javascripthtmlcssblogs

Guide to Incorporating a Marker into an SVG Blinking Rectangular or Circular Border Image on Google Maps

I have a link that points to a specific location on Google Maps using latitude and longitude: http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png Now, I am looking to add a blinking border to this marker link. Is there a way to achieve this ...

javascripthtmlcssimagephotoshop

How come I can't see this on my display?

I'm facing an issue with this particular HTML snippet not displaying when I view the file in Chrome or any other browser. Below is the code: <!DOCTYPE html> <html> <head> <title> # <title& ...

htmlcsshtml-tablemenubar

Accessibility considerations for anchor tags with no content

Currently on our website, there is a component that utilizes an <a> tag with a background image set by the following CSS: a.class-name::after { content: url('image.png'); } The anchor tag itself has no visible content (appears as < ...

htmlcssaccessibilityanchor

Struggling to achieve proper alignment for a series of div tags

I have implemented a code block to read in an image pixel by pixel and display it as a series of div tags arranged in a table-like fashion. The code is mostly inspired by a comment on PHP.net (http://www.php.net/manual/en/function.imagecolorat.php). This i ...

phpcsshtmlpixel