The grid and popup work fine except the values I enter in create mode do not get passed back to my controller. Looking at the JS Console shows no errors. Monitoring the create process in Fiddler also shows no values being passed, although my form elements do show.

While debugging, the model in my controller is empty.

Here's the grid definition:

@(Html.Kendo().Grid<MyApp.Domain.Entities.TaktInterruptionViewModel>()
.Name("Interruptions")
.Columns(columns =>
    {
        columns.Bound(i => i.TaktInterruptionId).Hidden().IncludeInMenu(false);
        columns.Bound(i => i.DateCreated).Title("Date").Width(75).Format("{0:d}");
        columns.Bound(i => i.ActionCount).Title("Actions").Width(50).Hidden(true);
        columns.Bound(i => i.MeetingType).Title("Meeting   Type").Width(100).Hidden(true);
        columns.Bound(i => i.AreaName);
        columns.Bound(i => i.TypeName);
        columns.Bound(i => i.Responsible);
        columns.Bound(i => i.Description).Width(300);
        columns.Bound(i => i.Interruption).Width(75).Hidden(true);
        columns.Bound(i => i.TaktMissed).Title("Missed").Width(75);
    })
.ClientDetailTemplateId("ActionsTemplate")
.ToolBar(toolbar => toolbar.Create().Text("Add Interruption"))
.Editable(edit => edit.Mode(GridEditMode.PopUp).TemplateName("Create").Window(w => w.Title("Interruption").Name("addInterruption").Modal(true)))
.DataSource(datasource => datasource.Ajax()
    .Model(model => model.Id(p => p.TaktInterruptionId))
    .ServerOperation(false)
    .PageSize(5)
    .Create(create => create.Action("Create", "Home"))
    .Read(read => read.Action("GetInterruptions", "Home")))
.Groupable()
.Pageable()
.Sortable()
.Filterable()
.ColumnMenu()
.Selectable(s => s.Mode(GridSelectionMode.Multiple))
.Reorderable(reorder => reorder.Columns(true))
.Resizable(resize => resize.Columns(true))
.Events(events => events.Change("displayChart"))
)

My create editor template is as follows:

@model MyApp.Domain.Entities.TaktInterruptionViewModel
@{
    ViewBag.Title = "Index";
}

<div class="span-14" style="padding: 10px;">
    @Html.ValidationSummary(true)
    <hr class="space" />
    <div>
        @Html.LabelFor(model => model.DateCreated)<br />
        @(Html.Kendo().DatePicker().Name("DateCreated").Value(DateTime.Today))
        <br />
        @Html.ValidationMessageFor(model => model.DateCreated, null, new { style =    "color:red;" })
    </div>
    <hr class="space" />
    <div class="span-7">
        @Html.LabelFor(model => model.AreaId)<br />
        @(Html.Kendo().DropDownListFor(model => model.AreaId)
            .Name("AreaId")
            .HtmlAttributes(new { style = "width:200px" })
            .OptionLabel("Select Area...")
            .DataTextField("AreaName")
            .DataValueField("AreaId")
            .DataSource(source =>
                {
                    source.Read(read =>
                        {
                            read.Action("GetAreas", "Area");
                        });
                })
         )
        <br />
        @Html.ValidationMessageFor(model => model.AreaId)
    </div>
    <div class="span-6">
        @Html.LabelFor(model => model.TaktInterruptionTypeId)<br />
        @(Html.Kendo().DropDownListFor(model => model.TaktInterruptionTypeId)
            .Name("TaktInterruptionTypeId")
            .HtmlAttributes(new { style = "width: 200px" })
            .OptionLabel("Select Type...")
            .DataTextField("TypeName")
            .DataValueField("TaktInterruptionTypeId")
            .DataSource(source =>
                {
                    source.Read(read =>
                        {
                            read.Action("GetTypes", "Area").Data("filterTypes");
                        }).ServerFiltering(true);
                })
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("AreaId")
         )
        <br />
        @Html.ValidationMessageFor(model => model.TaktInterruptionTypeId, null, new { style = "color:red;" })
    </div>
    <hr class="space" />
    <div class="span-11">
        @Html.LabelFor(model => model.Description)<br />
        @Html.TextAreaFor(model => model.Description, new { @class = "multi-line" })
        <br />
        @Html.ValidationMessageFor(model => model.Description, null, new { style = "color:red;" })
    </div>
    <hr class="space" />
    <div class="span-5">
        @Html.LabelFor(model => model.Interruption)<br />
        @(Html.Kendo().NumericTextBox().Name("Interruption").Format("#.0").Value(0))
        <br />
        @Html.ValidationMessageFor(model => model.Interruption)
    </div>
    <div class="span-6">
        @Html.LabelFor(model => model.TaktMissed)<br />
        @(Html.Kendo().NumericTextBox().Name("TaktMissed").Format("#.0").Value(0))
        <br />
        @Html.ValidationMessageFor(model => model.TaktMissed)
    </div>
    <hr class="space" />
    <div>
        @Html.LabelFor(model => model.Responsible)<br />
        @Html.EditorFor(model => model.Responsible, new { @class = "k-input k-textbox" })
        <br />
        @Html.ValidationMessageFor(model => model.Responsible, null, new { style = "color:red;" })
    </div>
    <hr class="space" />
    <hr class="space" />
</div>

<script type="text/javascript">
    function filterTypes() {
        return {
        AreaID: $("#AreaId").val()
        };
    }
</script>

And my controller create method is:

[HttpPost]
    public ActionResult Create([DataSourceRequest] DataSourceRequest request, MyApp.Domain.Entities.TaktInterruptionViewModel taktInterruption)
    {
        try
        {
            if (ModelState.IsValid)
            {
                // code removed for brevity
            }

            return Json(ModelState.ToDataSourceResult());
        }
        catch(Exception ex)
        {
            
	    // code removed for brevity
        }
}

If I remove my editor template from the equation and allow Kendo to do the popup, the information is passed to my controller; however, I want to control the layout of the popup and I also have cascading drop-downs (that work), thus the editor template.

My question is why aren't my values that I enter in the popup being passed to my controller?

Hi,

I have a grid where amongst other columns, I have two columns which are related - in the first column I select from a list of available options and based on the value selected here, I want to apply a filter to a foreign key column elsewhere in the grid.

So for example if I have a column for "Company ID" with values [1, 2, 3, 4,5] and an FK column "Category", the values bound to the "Category" column are ID/Text pairs for all possible categories, but I'd like to filter that down based on a 3rd "CompanyID" value.

It seems that no matter how I configure the FK column, the underlying data source only ever has the ID/Text values so any attempt at filtering it down based on the CompanyID column doesn't work. Even if my bound values/remote data source returns objects with the required fields for filtering, they get dropped when the FK dropdown list's data source is created.

Is something this even possible to achieve with the grid? If so any pointers would be much appreciated.

I have a grid that's filterable. Each column has a funnel in the header. I can filter by adding a filter value to column1 and Column2. Data is filtered correctly. However when I clear filter value on Column1 and click filter, column2's filter value is also cleared. If I clear the value from Column1 but use the filter button from column2, then column2's value is used to correctly filter the data.

Does the grid NOT check the presence of filter values on all columns before filtering data? Is this a bug? 

Hello everybody,

im trying to achieve that the dropdown filter list in my grid takes the size from it's biggest option.

I found other explanations for different situations and none of those worked for me.

I have a MVC Grid with a ForeignKey Column, that is filtered with a dropdown of enum values.

x.ForeignKey(b => b.Status, Model.OrderGapStatus).Filterable(f => f.Cell(c => c.Template("statusFilter"))).Title(Localizer.Lang_Status).ClientTemplate("#: StatusName #");

And a js handler trying to set the width to "auto". But it doesn't work :/

<script type="text/javascript">
    function statusFilter(element) {
       // what do i need to do here?
    }
</script>

Help would be really appreciated 😃

Have a good day & happy coding

Nils

Hi Team,

I have a Kendo MVC Grid. i need to apply responsive design to grid.

am trying to apply but not achieved. please resolve my issue.

here i want to show columns in all widths.

Please apply changes in my solution only.  am deleted kendo scripts version 2020.3.1118 in attached rar file.

if you unable to rar my file then please provide me a  sample example kendo grid mvc with more than 10 columns.

I have a ListView control, and I need to call a partial view to render part of the template contents.  This can't be passed via the ListView data source, as its a more expensive query, and should only be called for the records shown on the current page.

I have tried the code below, but it only gets called once, passing in an empty parameter.

<script type="text/x-kendo-tmpl" id="template">
    <div>
    <p>#=Name#  <span>@Html.Action("ReportTags", "Search", new { reportKey = "#=ReportKey#" })</span></p>
    </div>
</script>

I need the functionality offered by the LoadContentFrom method in the tabstrip, but as part of the template.

I tried looking at the databound event, but this only gets called once per page, not per record.

Thanks

NB: I have to say the change to the forums makes it harder to browse for solutions by control, which is something I found useful.

Hello, 

 @(Html.Kendo().Grid<DigitConvForm.Web.Models.DossierViewModel>()
            .Name("Dossiers")
            .Columns(columns =>
            {
                columns.Bound(c => c.Id_Inscription     );
                columns.Bound("Nom").ClientTemplate("#=Civilite# #=Nom# #=Prenom#");
                columns.Bound(c => c.Libelle            );
                columns.Bound(c => c.DateDebut          ).Format("{0:dd/MM/yyyy}");
                columns.Bound(c => c.DateFin            ).Format("{0:dd/MM/yyyy}");
                columns.Bound(c => c.CDV  ).ClientTemplate("<span id = 'badge_#=CDV#' class='badgeTemplate'></span>").Width(80);
                columns.Bound(c => c.LibelleEntreprise  );
                columns.Bound(c => c.Code_Financement   );
                columns.Bound(c => c.CodeDepartement    );
                columns.Bound(c => c.ContactEcole       );
                columns.Bound(c => c.Gestionnaire);
                columns.Bound(c => c.GestDosAdmin       );
                columns.Bound(c => c.StatutDosAdmin     );
            })
            .ToolBar(toolbar =>
            {
                toolbar.Excel();
                toolbar.Pdf();
                toolbar.Search();
            }).Excel(excel => excel.AllPages(true))
            .Height(700)
            .Pageable(pageable => pageable
               .Input(true)
               .Numeric(false)
             )
            .Navigatable().Mobile()
            .Sortable()
            .Scrollable()
            .Resizable(r => r.Columns(true))
            .Reorderable(r => r.Columns(true))
            //.Filterable()
            .Events(e => e.DataBound("onDataBound"))
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(false)
                .PageSize(500)
                .AutoSync(false)
                .ServerOperation(true)
                .Events(events => events.Error("error_handler"))
                .Model(model =>
                {
                    model.Id(p => p.Id_Inscription);
                    model.Field(p => p.Civilite         ).Editable(false);
                    model.Field(p => p.Nom              ).Editable(false);
                    model.Field(p => p.Prenom           ).Editable(false);
                    model.Field(p => p.Libelle          ).Editable(false);
                    model.Field(p => p.DateDebut        ).Editable(false);
                    model.Field(p => p.DateFin          ).Editable(false);
                    model.Field(p => p.LibelleEntreprise).Editable(false);
                    model.Field(p => p.Code_Financement ).Editable(false);
                    model.Field(p => p.CodeDepartement  ).Editable(false);
                    model.Field(p => p.ContactEcole     ).Editable(false);
                    model.Field(p => p.GestDosAdmin     ).Editable(false);
                    model.Field(p => p.StatutDosAdmin   ).Editable(false);
                    model.Field(p => p.Gestionnaire     ).Editable(false);
                })
                .Read("GetAllFolders", "RechercheDossiers")

$.ajax({
            url: '@Url.Action("GetFiltredFolders", "RechercheDossiers")',
            type: "Post",
            data: { nom, prenom, dateDebut: dateD, dateFin: dateF, sAnticipee, pFormations, financements, gestionnaires },
            traditional: true,
            dataType: 'json',
            async: true,
            success: function (result) {
                searchResults = result;
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert('failed')
            },
            timeout: 30000,
            cache: false
            
        }).done(function () {
            var dataSource = new kendo.data.DataSource({ data: searchResults });
            var grid = $('#Dossiers').data("kendoGrid");
            dataSource.read().then(function () {
                $('#Dossiers').data('kendoGrid').refresh();
            });
            var pageSi = grid.dataSource._pageSize
            grid.setDataSource(dataSource);
            grid.dataSource.query({ page: 1, pageSize: pageSi });
            //grid.refresh();
        });

[HttpPost]
        public async Task<JsonResult> GetFiltredFolders(DateTime? dateDebut, DateTime? dateFin,
            bool sAnticipee, string nom, string prenom, string financements, string pFormations, string gestionnaires)
        {
            string departments = Session["department"].ToString();

            List<Dossier> dossiers = await _conventionDeFormationService.LoadFoldersByAccess(departments, dateDebut, dateFin,
             sAnticipee, nom, prenom, financements, pFormations, gestionnaires);

            return Json(dossiers, JsonRequestBehavior.AllowGet);

        }

Hi Team,

I am using the kendo grid of the UI for ASP.NET MVC, and the height of the grid gets shorter on initial render of the grid. Once I click on anyone of the columns of the grid, it gets to its actual height assigned in the grid.

Please find the attached screenshot and let me know if I am doing anything wrong.

As you can see, in the first screen shot, the grid is shorter, and in the second screenshot, the grid has its actual height. 

Please get back to me team as soon as you can. I really appreciate your help. 

How to define the paperSize in the onPDFExport function? Currently getting the error unknown paperSize. Variable width is the total width of all of the columns in the grid, and it is not undefined.

Current code:

    function onPDFExport(e) {
        var grid = $("#CustomerOrderYearlyAllGrid").data("kendoGrid");
        var width = 0;
        for (var i = 0; i < this.columns.length; i++) {
            this.autoFitColumn(i);
            width = width + this.columns[i].width;
        }

        debugger;
        var CustomerID = $("#CustomerID").data('kendoDropDownList');
        var selectedCustomerName = CustomerID.text();
        grid.options.pdf.fileName = selectedCustomerName + " Summary (Yearly).pdf";
        grid.options.pdf.paperSize = (width + "px","500px");


    }