Hi,

I'm developping an ASP.NET MVC application using Kendo UI v2014.1.415.  Some of the Kendo controls are not rendering properly in Release mode. I check the the css bundle I found the following :
/* Minification failed. Returning unminified contents.
(27,35175): run-time error CSS1030: Expected identifier, found '.'
(27,35182): run-time error CSS1031: Expected selector, found ')'
(27,35182): run-time error CSS1025: Expected comma or open brace, found ')'
*/

Here is the code from my bundle config :

 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"));

            //Kendo UI - Begin
            const string VersionKendo = "2014.1.415";
            const string KendoScriptFolder = "~/Scripts/kendo/" + VersionKendo + "/";
            const string KendoCssFolder = "~/Content/kendo/" + VersionKendo + "/";

            bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
                KendoScriptFolder + "kendo.all.min.js",
                KendoScriptFolder + "cultures/kendo.culture.en-US.min.js",
                KendoScriptFolder + "cultures/kendo.culture.fr-FR.min.js",
                KendoScriptFolder + "kendo.aspnetmvc.min.js"
                ));

             bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
                KendoCssFolder + "kendo.common.min.css", 
                KendoCssFolder + "kendo.metro.min.css",
                KendoCssFolder + "kendo.default.mobile.min.css"));
            
            // Clear all items from the default ignore list to allow minified CSS and JavaScript files to be included in debug mode
            bundles.IgnoreList.Clear();

            // Add back the default ignore list rules sans the ones which affect minified files and debug mode
            bundles.IgnoreList.Ignore("*.intellisense.js");
            bundles.IgnoreList.Ignore("*-vsdoc.js");
            bundles.IgnoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
            //Kendo UI - End          

            BundleTable.EnableOptimizations = true;

How can I fix this?

Hi Guys,

I am using the Combobox and it is giving me a javascript error. I have made sure JQuery is only included once and other Kendo controls are working.

Razor Code
@(Html.Kendo().ComboBox()
                            .Name("Projects")
                            .DataTextField("ProjectName")
                            .DataValueField("ProjectID")
                            .HtmlAttributes(new { style = "width:200px" })
                            .Filter("contains")
                            .AutoBind(false)
                            .MinLength(3)
                            .DataSource(source =>
                            {
                                source.Read(read => { read.Action("GetProject", "VMS"); }).ServerFiltering(true);
                            })) 

Controller Code
public JsonResult GetProject([DataSourceRequest] DataSourceRequest request)
        {
            var model = _db.Project.ToList();
            var result = model.ToDataSourceResult(request, r => new
            {
                ProjectID = r.ID,
                ProjectName = r.Name,
            });
            return Json(result, JsonRequestBehavior.AllowGet);
        }

JSON from fiddler
{"Data":[{"ProjectID":1,"ProjectName":"Project 1"},{"ProjectID":2,"ProjectName":"Project 2"},{"ProjectID":3,"ProjectName":"Project 3"}],"Total":3,"AggregateResults":null,"Errors":null}

Chrome error
Uncaught TypeError: undefined is not a function kendo.all.min.js:11
ct.extend.success kendo.all.min.js:11
b.isFunction.i jquery-1.9.1.js:7223
n.success kendo.all.min.js:11
c jquery-1.9.1.js:7341
p.fireWith jquery-1.9.1.js:7403
k jquery-1.9.1.js:9597
r

Thanks
Andrew

Hi,

I am using "resizable:true" in Kendo Grid, but only filterable columns can be re-sized. Non-filterable (with "filterable:false") columns can't be re-sized. I have searched it on Kendo forums, but apparently no solution.

Regards
Zaheer

Hi I have a kendo grid in my partial view.
And I have bind a model as the grid data source. And mention that my grid don't have a Read method. Instead of read method I have use the model.
Here is my view..
@model Project.MVC.Areas.Razor.Models.CustomerListModel

<div id="dvResultGrid">
@(Html.Kendo().Grid<Portal.Application.BoundedContext.ScreenPop.Dtos.Customer>(Model.CustomerList)
.Name("grdWindowResults")

.Columns(columns =>
{
columns.Bound(x => x.Name1).Visible(true);
columns.Bound(x => x.Name2).Visible(true);
columns.Bound(x => x.ContactName);
columns.Bound(x => x.BillingAddress1);
})
.Pageable()
.Sortable(x => x.Enabled(false))
.Scrollable(x => x.Height("auto"))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
.Reorderable(reorder => reorder.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.PageSize(5)
.Model(model =>
{
model.Id(p => p.CustomerId);

})
)
)
</div>
And what I have to do is, I need to do server-side paging for my grid. How can I do that with out a read method. Is there any option?

Hello,
Is it possible to change dynamically the Image (in ImageUrl) in my Tabstip?
May I use JScript?
Regards,
Bruno

I am using the Kendo.EditorFor() control to display editors as I loop through a List of objects. I have server-side validation in play and when I submit the form, it correctly identifies that the fields are not filled in. However, the appropriate classes are not added to any of the HTML elements that are returned back to the browser, and therefore there is no visual indicator of which editor(s) have not been filled in.

Here's a copy of my HTML:

    @using (Html.BeginForm("SaveSelfAssessment", "Accreditation", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" }))
    {
        @Html.ValidationSummary(false, "The following errors occurred:", new { @class = "error_box" })
    
        <input type="hidden" id="Id" name="Id" value="@Model.Id" />
        <input type="hidden" id="StartingId" name="StartingId" value="@Model.StartingId" />
        
        for (int i=0; i<Model.ApplicationSelfAssessments.Count; i++)
        {
            @Html.HiddenFor(m => m.ApplicationSelfAssessments[i].Id)
            @Html.HiddenFor(m => m.ApplicationSelfAssessments[i].Type)

            <div class="@Model.ApplicationSelfAssessments[i].Type">
            @if (Model.ApplicationSelfAssessments[i].Type == "supplementalinformation")
            {
                <h2>Supplemental Information</h2>
            }
                @Html.Raw(Model.ApplicationSelfAssessments[i].Text)
            </div>
        
            if (Model.ApplicationSelfAssessments[i].Type == "question")
            {
                <div>@(Html.Kendo().EditorFor(m => m.ApplicationSelfAssessments[i].Answer)
                          .Encode(false)
                          .Tools(tools => tools
                                  .Clear()
                                  .Bold()
                                  .Italic()
                                  .Underline()
                                  .InsertUnorderedList()
                                  .InsertOrderedList()
                                  .Indent()
                                  .Outdent()
                            )
                        )
                </div>
            }
        }
        
        <p>
            <input type="button" class="k-button k-button-icontext" value="Previous" onclick="window.location = '@Model.PreviousUrl';" />
            <input type="submit" class="k-button k-button-icontext" value="Next" />
        </p>
    }

And my model contains the following Validate method:

        public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
        {
            if (Type == SelfAssessmentType.Question.ToString().ToLower() && String.IsNullOrWhiteSpace(Answer))
            {
                yield return new ValidationResult("Answer is required", new [] { "Answer" });
            }
        }

If I turn the editor into a textarea, the input-validation-error class is added to the textarea. Is there a way I can get this to work using the Kendo.EditorFor tool?

Thank you,

Rachael

I just installed Q1 2014 of the MVC controls.  Ran the wizard to update my project and received no errors. (the app was previously running Q2 2013)
When I run the app the grids do not render correctly, and the Html.Kendo().Menu() gives the error:
​
Error: Object doesn't support property or method 'kendoMenu'

Dan

I use AutoComplete in grid column
But i can't send AutoComplete value to server
Please help me.

Hi guys,

I simply modified the last version of samples (grid/index.chtml), in order to test a grouping configuration as described in documentation.
But the Groups property does not exist.
Here the code below:

@model Kendo.Mvc.Examples.Models.HeaderTemplateViewModel
@{using (Html.BeginForm())
  {          
    @(Html.Kendo().Grid(Model.Products)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Template(@<text>
                     <input name="selectedProducts" type="checkbox" title="select product" value="@item.ProductID"
                     @{
                         if (Model.SelectedProducts.Any(p => p.ProductID == item.ProductID))
                         {
                            @("checked=checked")
                         }
                     }/>
                    </text>)
                .HeaderTemplate(@<text>
                        <input id="selectAllProducts" type="checkbox" title="select all"
                          @{
                              if (Model.SelectedProducts.Any())
                              {
                                @("checked=checked")
                              }
                           } />
                    </text>)
                .Width(50)
                .HtmlAttributes(new { style = "text-align:center" })
                .HeaderHtmlAttributes(new { style = "text-align:center" });
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitPrice);
            columns.Bound(p => p.UnitsInStock);
        })
        .Pageable()
                                      .Groupable(grouping => grouping
                                            .Groups(groups =>
                                            {
                                                groups.Add(p => p.ProductName);
                                            })
                                      )
    )
    <p>
        <button class="k-button">
            Display selected products</button>
    </p>    
  }   
}

Version: 2014.1.528.545 Dev

Thanks for helping

Hi everyone.
I have question
I created four grids on one page.

        And I have controller with four actions

But It does not work.

Is it possible to implement this variant?