Hello,

I am using an aspnetcore Grid and I noticed that the style of the edit form is different from the rest of the site.

For information, my site is setup to use the telerik bootstrap 4 style with custom colors (used the Telerik Theme Builder)

The problem I experience seems related to the classes used in my site versus the demo. In the demo (https://demos.telerik.com/aspnet-core/grid/editing-popup), the control classes all use a k- prefix. "k-textbox" "k-input" "k-numerictextbox". On my site, the classes are text-box single-line only. When I manually change them to k-textbox for example, the css applies and is displayed properly.

Did I configure something improperly for the classes used to be different from the demo?

Any help would be appreciated!

Hi Everyone,

I am trying to set the Kendo Grid with Group by specific column by default, so I have used the code snippet as shown below:

@(Html.Kendo().Grid<StudentRecord>().Name("Grid")

.Groupable()

.Sortable()

.GroupPaging(true)

.Group(x => x.Add(y => y.StartYear))

And I realised it always displays the StartYear groups in ascending order by default.

Please advise how I could set the StartYear groups to sort in descending order by default.

Thank you.

I am using the new System.Text.Json in asp.net core and I noticed that the grid does not bind to the model when using the new .net Core Json library.  If I use Newtonsoft.Json the bind binding works fine.

 public void ConfigureServices(IServiceCollection services)
        {
            services.AddAuthentication(IISDefaults.AuthenticationScheme);
            services.AddKendo();
            services.AddControllersWithViews();

//.AddNewtonsoftJson(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
        }

 @(Html.Kendo().Grid<TestModel>()

        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.email);
            columns.Bound(e => e.username);
        })
    
    .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(100)
            .Read(read => read.Action("Read", "home"))
        )
        )

Model

public class TestModel
    {
       
        public string archiveGuid { get; set; }
        public string orgUid { get; set; }
        public string orgName { get; set; }
        public string orgExtRef { get; set; }
        public string userUid { get; set; }
        public string username { get; set; }
        public string email { get; set; }
       
    }

Here is what is returned with NewtonSoft JSON.  I also noticed that D in the data response sent is capitalized when using Newtonsoft.json.  Any ideas?  It could be due to the contract resolver not being set when we are using the System.Text.Json as posted here https://www.telerik.com/forums/grid---binding-doesn't-work but I don't think there is a contract resolver option for the System.Text.Json.

So I have a grid, with a template for the command buttons.  The reason I have the template, is I'm not allowing in-line editing, and the "edit" button will take the user to a detail page where they get access to the full model record.  

I also have a "delete" button, but I can't figure out how to perform the delete from the template.  I tried what I've seen in others and attempt to get the closest "tr" and then call "removerRow", but that did not work.  

I'm trying to define a grid where the first column is a checkbox and the 2nd has a large font bound to "name" with a small font below it showing the "description".  I'd appreciate a working example.

This is NOT working:

Style

I'm failing somewhere in my load of a TreeList.  I added a simple error handler like this:

However, this doesn't give me any clue as to what object type is there to pull the message from.  What is the recommended way of doing Error Handling with this control that will give me some actionable information?

Thanks, Joel

I've implemented PDF export functionality with a Grid. I'm trying to set the column width (auto)  for one of columns of the report that gets generated because the some values in the column of the report are being truncated, or not seen in the PDF. I've tried

/* doesn't work */

 .k-pdf-export colgroup > col {
        width: auto !important;
    }

/* doesn't work */

.k-pdf-export colgroup > col:nth-child(2) {           
            word-wrap: break-word; 
        }

/* makes the column as large as the report, completely useless */

 .k-pdf-export colgroup > col:nth-child(2) {
            width: 100% !important;            
        }

/* this works!  But I don't want to hard code in a value */

 .k-pdf-export colgroup > col:nth-child(2) {
            width: 200px  !important;
           
        }

Attached is the same grid header displays on Chrome and Edge browser. 

Is there a way to force the header not to display C... in Chrome?

var RHCenterOverFlow = "text-align:center; font-size:10px; font-weight:bold; padding:0.5px; overflow:visible; white-space:normal";

                        columns
                        .Bound(c => c.Class)
                        .Title("Class")
                        .HeaderHtmlAttributes(new { style = RHCenterOverFlow })
                        .Width(40)
                        .MinResizableWidth(40);

Thanks.

I am populating a grid with dynamic data. I would like to center all but the left column horizontally. The left column should be left-aligned. I've looked at some examples and have not been able to get it to work. My code follows the pattern below. Where/how can I center align all columns that are not the one with the name "LeftMostColumn?" I've mocked up a couple of places where I think this might happen. Please advise. Thanks!