The column headers are not horizontally scrolling with the data and I need to fix it so it does. This is what I have to capture data from a .NET data table:

 

@if (Model != null)
{
 
    @(Html.Kendo().Grid(Model)
                .Name("Grid")
                .Columns(columns =>
                {
                    foreach (System.Data.DataColumn column in Model.Columns)
                    {
                        var c = columns.Bound(column.ColumnName);
                        if(column.ColumnName.Equals("Quarter"))
                        {
                            c.Width(100);
                        }
                        else
                        {
                            c.Width(100);
                        }
                    }
                })
                .Pageable()
                .Sortable()
                .Filterable()
                .Scrollable()
                //.Groupable()
                .DataSource(dataSource => dataSource
                    .Ajax()
                 .Model(model =>
                 {
                     //var id = Model.PrimaryKey[0].ColumnName;
                     foreach (System.Data.DataColumn column in Model.Columns)
                     {
                         var field = model.Field(column.ColumnName, column.DataType);
                         field.Editable(false);


                     }
                 })
                 //.Read(read => read.Action("Read", "QuickQuery"))
                 )
        )

Hi there,

I am using Kendo UI for ASP.NET MVC.

I am interested in using the Drawer as a side menu, but I can't seem to find a way to have it expanded by default when the page loads.  Is this possible?

 

Hi

I am building a scheduler edit dialog partialview, and in it i have 2 radio buttons. One of them has the .checked(true) parameter and yet its not checked, and when i check one of them with the mouse, the "The Type field is required" validation error tooltip shows up, and will not... f... go away without using the browser's console to add display:none; to it. (not a solution).

Searching for "remove validation tooltip" gives me nothing, and i have limited time to perfect this project.

My ISchedulerEvent model has an Enum called Type, and the creation of the radio button is done like this:

can someone please help?

Hi

I am trying to create a vertical grouping based on the data from our db.

The usecase is to show a continuous event spanning whatever start and end time, for each Room (the duplicate is a db issue so nevermind that). So i dont want the time rows, and would like to remove them permanently. 

I attached some screenshot of what i want it to look like (ish), also done with telerik schedule, but in WPF. 

And an image of what my attempt looks like in mvc.

Heres my mvc razor code:

The data finally comes out and it creates the rows (except for the colors), and adds them to the correct resource group's all day row.. But all the rows with time needs to go away, because its simply not needed for this particular scheduler view.

Can you please help?

Schedule works correctly in Opera and Edge browsers, but behaves inappropriately in Google Chrome.

Follow images of behavior.

 

 

Hi,

i'm trying to use server pagination (as done for grids) with TreeList component. As i saw on component documentation, the pagination is only done for client side but this, for performance problems,  is not good for us..

Is there a way to make it work for this component as done for Grid (like on this https://demos.telerik.com/aspnet-mvc/grid/serverbinding?Grid-sort=&Grid-page=4&Grid-pageSize=10&Grid-group=&Grid-filter=)

 

Many thanks

Stefano

Hey,

i've got kendo grid with filter row, i'm trying to hook-up all filter inputs to custom kendoAutoComplete(...) components.

Every column definition:

Template function definition:

Controller:

All i'm able to send to the controller now is parameter "field". How do i send value entered to one of many autocompletes when i don't know the specific autocomplete instance?

I need to fill a word document with information from the database, and then show it in the editor

Hi guys,

Is it possible to show different value between 2 bars (series) on top of them?

like red text in the picture 

 

I explored https://demos.telerik.com/aspnet-mvc/bar-charts but I have no luck.

I'm using ASP.Net.

Please give me some advice.

Thank you,

S.

 

I have strange behavior from the Kendo MVC grid (version R2 2021) when used in a Sitefinity Widget (Sitefinity version 13.3.7600).  The grid appears to not bind properly to the datasource in any browser except Internet Explorer 11.  I've tried Firefox (89.0), Chrome (91.0.4472.77) and Edge (91.0.864.41). For some reason Internet Explorer works.

Originally I was thinking it had to do with some of the Kendo .js scripts and/or .css files not being loaded before the bind operation, but as a test I added a refresh button and set AutoBind(false). The Controller, Model and View code work just fine in my standalone test application but when the same code is used in a Sitefinity Widget the data won't appear.

The Controller's action method is being called (I set a breakpoint) and returning what appears to be properly formatted JSON data. I have tried switching the grid to bind on a <dynamic> (instead of my specific class) and using the .Model() syntax, I have even tried different Models, including some without a List<> and just 6 separate decimal properties to see if it was a problem using a collection (it wasn't).

In each case all the test code I try **works in Internet Explorer** and not any other major browser.

*NOTE: My Widgets are all in their own separate assembly (which is why you'll see the ControllerToolboxItemAttribute). That .csproj is included in my Sitefinity solution.*

The following is an example of what I'm using:

**Model Classes (Mvc\Models)**
```
namespace MyWidget.Mvc.Models
{
    public class MyRateClass
    {
        public string Maturity { get; set; }
        public List<decimal> Rates { get; set; }
    }

}
```
```
namespace MyWidget.Mvc.Models
{
    public class MyRatesViewModel
    {
        public int MaxTiers { get; set; }
        public string Message { get; set; }
    }

}
```

**Controller (Mvc\Controllers)**
```
using MyWidget.Mvc.Models;
using System.Collections.Generic;
using System.Web.Mvc;
using Kendo.Mvc.UI;
using Kendo.Mvc.Extensions;
using Telerik.Sitefinity.Mvc;

namespace MyWidget.Mvc.Controllers
{
    [ControllerToolboxItem(Name = "MyWidget.Mvc.Controllers.Rates", SectionName = "CustomWidgets", Title = "My Broken Widget")]
    public class RatesController : Controller
    {
        public ActionResult Index()
        {
            MyRatesViewModel vm = new MyRatesViewModel() {
                MaxTiers = 6, Message = "Broken"
            };
            
            return View(vm);
        }

        public ActionResult RetrieveRates([DataSourceRequest] DataSourceRequest request)
        {
            // Mock Data
            List<MyRateClass> reportRates = new List<MyRateClass>()
            {
                new MyRateClass() { Maturity = "1", Rates = new List<decimal>() { 0, 0, 0, 0, 0, 0 } },
                new MyRateClass() { Maturity = "2", Rates = new List<decimal>() { 0.07453M, 0.0623M, 0, 0, 0, 0 } }
            };

            DataSourceResult dsResult = reportRates.ToDataSourceResult(request);

            return Json(dsResult, JsonRequestBehavior.AllowGet);
        }
    }
}
```

**View (Mvc\Views\Rates)** - Verison using .AutoBind(false)

*NOTE: The links that begin with "kendoui/" are all pointing to files in my Sitefinity/ResourcePackages directory. They do load properly. I have also tried them as embledded resources in my Widget assembly and they work that way as well.*
```
@using MyWidget;
@using MyWidget.Mvc.Models;
@using Kendo.Mvc.UI;
@using Kendo.Mvc.Extensions;
@using Telerik.Sitefinity.Frontend.Mvc.Helpers;
@using Telerik.Sitefinity.Modules.Pages;

@model MyRatesViewModel

@Html.StyleSheet(Url.WidgetContent("kendoui/styles/kendo.common.min.css"), "head", false)
@Html.StyleSheet(Url.WidgetContent("kendoui/styles/kendo.default.min.css"), "head", false)
@Html.StyleSheet(Url.WidgetContent("kendoui/styles/kendo.bootstrap-v4.min.css"), "head", false)
@Html.Script(ScriptRef.JQuery, "head") <!-- required for Kendo to work -->
@Html.Script(Url.WidgetContent("kendoui/js/jszip.min.js"), "head") <!-- required for Excel Exports to work -->
@Html.Script(Url.WidgetContent("kendoui/js/kendo.all.min.js"), "head") <!-- required for Kendo MVC to work -->
@Html.Script(Url.WidgetContent("kendoui/js/kendo.aspnetmvc.min.js"), "head") <!-- required for Kendo MVC to work -->
<div class="row">
    <div class="col-12">
        <div>
            <table style="overflow: auto; border-collapse: collapse; width: 100%; max-width: 600px;">
                <tr>
                    <td style="border-right: #aca899 1px solid; border-top: #aca899 1px solid; border-left: #aca899 1px solid;">
                        <p>@Model.Message</p>
                    </td>
                </tr>
            </table>
        </div>
        @(Html.Kendo().Grid<MyWidget.Mvc.Models.MyRateClass>()
            .Name("rategrid")
            .AutoBind(false)
            .Columns(columns =>
            {
                columns.Bound(p => p.Maturity);

                for (int i = 0; i < Model.MaxTiers; i++)
                {
                    var tier = i + 1;

                    columns.Template(p => { }).ClientTemplate(string.Format("#=kendo.toString(Rates['{0}'], \"0.00\")#", i)).Title(string.Format("Tier {0}", tier));
                }
            })
            .ToolBar(toolbar =>
            {
                toolbar.Excel();
            })
            .Selectable(selectable => selectable
                .Mode(GridSelectionMode.Multiple)
                .Type(GridSelectionType.Row))
            .AllowCopy(true)
            .DataSource(dataSource => dataSource
                .Ajax()
                .ServerOperation(false)
                .PageSize(25)
                .Read(read => read.Action("RetrieveRates", "Rates"))
            )
        )
    </div>
</div>
<input type="button" onclick="myfunction ()" value="Load Grid">

<script type = "text/javascript">
    function myfunction() {
        var grid = $("#rategrid").data("kendoGrid");
        grid.dataSource.read();
        grid.refresh();
    }  
```

Clicking "Load Grid" will properly refresh the empty grid and cause it to display 2 rows when used in IE 11. The fact that this works in IE 11 and not in any other is a real head scratcher. Any assistance is appreciated!