Изменение размера столбцов сетки кендо для соответствия фильтрам - PullRequest
Новая
       15

Изменение размера столбцов сетки кендо для соответствия фильтрам

0 голосов
/ 25 января 2019

У меня есть сетка кендо с операторами фильтра.проблема в том, что фильтры выходят за пределы сетки и приводят к тому, что они выглядят обрезанными там, где заканчивается столбец.Вот изображение:

Grid

Код: 

<div id="gridDiv">
@(Html.Kendo().Grid<Website.Models.VisitModel.VisitGridModel>()
        .Name("grid")
        .ToolBar(toolbar =>
        {
            toolbar.Custom().Text("Create").Action("AddPatient", "Patient").HtmlAttributes(new { @class = "k-primary k-button" });
        })
        .Columns(column =>
        {
            column.Bound(c => c.DateS);
            column.Bound(c => c.PreScreening);
            column.Bound(c => c.Screening);
            column.Bound(c => c.ReadyMadeReaders);
            column.Bound(c => c.EyeExam);
            column.Bound(c => c.Glasses);
            column.Bound(c => c.Contacts);
            column.Bound(c => c.RetinalGrading);

        })
        .Events(e =>
        {

        })
        .Sortable()
        .Scrollable()
        .Selectable()
        .Resizable(resize => resize.Columns(true))
        .Reorderable(reorder => reorder.Columns(true))
        .NoRecords("No data")
        //.ClientDetailTemplateId("template")
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .Filterable(f => f.Operators(o => o.ForString(fs => fs.Clear().Contains("Contains").StartsWith("Start With").EndsWith("End with").IsEqualTo("Is equal to").IsNotEqualTo("Is not equal to"))))
        .Pageable(page => page
        .Refresh(true)
        .ButtonCount(5)
        .PageSizes(new string[] { "5", "10", "20", "100", "All" })
        )
        .DataSource(dataSource => dataSource
        .Ajax()
        .ServerOperation(true)
        .Sort(s =>
        {
            s.Add(a => a.ID).Ascending();
        })
        .Model(model =>
        {
            model.Id(i => i.ID);
        })
        .Read("ReadAllVisits", "EyeTestReport")
        .Events(events => events.Error("Shared.onGridDataSourceError").RequestEnd("Shared.onGridRequestEnd"))
        )
)

Как получить столбцы длябыть нужного размера?

Ответы [ 2 ]

0 голосов
/ 28 января 2019

Я обнаружил, что вам просто нужно переопределить стилизацию кендо в собственном файле стиля страницы или теге стилизации. как это: 

.k-grid-header .k-header:first-child {
border-left-width: 0;
width: 50% !important; 
}

Экран:

screen

0 голосов
/ 25 января 2019 
 column.Bound(c => c.DateS).Width(150);
 column.Bound(c => c.PreScreening).Width(150);
 column.Bound(c => c.Screening).Width(150);

попробуйте добавить ширину к границе столбца, и смотрите, решит вашу проблему ...

...