Telerik Forums
UI for ASP.NET MVC Forum
2 answers
1.5K+ views

I am trying to use Kendo Grid in a razor view.
I have reference for the required css and js files in bundle.config:

bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
               "~/Content/kendo/kendo.common.min.css",
               "~/Content/kendo/kendo.common-bootstrap.min.css",
               "~/Content/kendo/kendo.bootstrap.min.css"
               ));
            bundles.Add(new ScriptBundle("~/Scripts/kendo/js").Include(
                    "~/Scripts/kendo/jquery.min.js",
                    "~/Scripts/kendo/kendo.all.min.js",
                    "~/Scripts/kendo/kendo.aspnetmvc.min.js"
                ));

In the View I have this:

@using Kendo.Mvc.UI;
@using Kendo.Mvc.Extensions;

@model WebApplication.Models.TMS_Categories

@{
    ViewBag.Title = "Index";
}



<h2>Index</h2>

<div class="container">
    <div class="row">

        @(Html.Kendo().Grid<WebApplication.Models.TMS_Categories>()
                                    .Name("CategoriesGrid")
                                    .Selectable()
                                            .Columns(columns =>
                                            {
                                                columns.Bound(c => c.ID).Width(50);
                                                columns.Bound(c => c.PrimaryCategoryName).Title("P Name").Width(100);
                                                columns.Bound(c => c.SecondaryCategoryName).Title("S Name").Width(100);
                                                columns.Bound(c => c.PrimaryDescription).Title("Primary Desc").Width(100);
                                                columns.Bound(c => c.SecondaryDescription).Title("Secnd Desc").Width(100);
                                                columns.Bound(c => c.Code).Width(100);
                                                columns.Bound(c => c.OrganizationID).Title("OrgID").Width(100);
                                                columns.Bound(c => c.CreatedBy).Width(100);
                                                columns.Bound(c => c.CreatedDate).Width(100);
                                                columns.Bound(c => c.UpdatedBy).Width(100);
                                                columns.Bound(c => c.UpdatedDate).Width(100);
                                                columns.Bound(c => c.IsDeleted).Width(100);
                                                columns.Bound(c => c.IsActive).Width(100);
                                                columns.Bound(c => c.IsDefault).Width(100);
                                                columns.Bound(c => c.CompanyID).Width(100);
                                                columns.Bound(c => c.CategoryType).Width(100);
                                                columns.Command(command =>
                                                {
                                                    command.Edit();
                                                    command.Destroy();
                                                }).Width(200);

                                            })
                                    .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .Model(model =>
                                        {
                                            model.Id(cat => cat.ID);
                                            model.Field(cat => cat.ID).Editable(false);
                                        }
                                        )
                                        .Read(read => read.Action("GetAllCategories", "Categories"))
                                      .Update(update => update.Action("UpdateCategory", "Categories"))
                                      .Create(create => create.Action("Addcategory", "Categories"))
                                      .Destroy(destroy => destroy.Action("DeleteCategory", "Categories"))

                                        )
                                   .ToolBar(toolbar => toolbar.Create())
                                   .Editable(editable => editable.Mode(GridEditMode.InLine))
                                    .Sortable()
                                    .Selectable()
                                    .Pageable(pageable =>
                                    {
                                        pageable.Refresh(true);
                                        pageable.PageSizes(true);
                                    })
        )
    </div>
</div>

When I run the code on chrome I get an error in console and data is not bound with grid only column names are shown but not any data row is showing :

 

Uncaught TypeError: jQuery(...).kendoGrid is not a function
    at HTMLDocument.<anonymous> (Index:54)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.K (jquery.min.js:2)

and also when i click Add New Record button I get the data in this form:

 

{"Data":[{"ID":1,"PrimaryCategoryName":"a","SecondaryCategoryName":"b","PrimaryDescription":"dsa","SecondaryDescription":"fewf","Code":"123","OrganizationID":1,"CreatedBy":1,"CreatedDate":"\/Date(1562439600000)\/","UpdatedBy":1,"UpdatedDate":"\/Date(1562439600000)\/","IsDeleted":false,"IsActive":true,"IsDefault":false,"CompanyID":2,"CategoryType":3},{"ID":2,"PrimaryCategoryName":"f","SecondaryCategoryName":"g","PrimaryDescription":"ddsf","SecondaryDescription":"gfh","Code":"434","OrganizationID":3,"CreatedBy":3,"CreatedDate":"\/Date(1562439600000)\/","UpdatedBy":3,"UpdatedDate":"\/Date(1562439600000)\/","IsDeleted":true,"IsActive":false,"IsDefault":false,"CompanyID":1,"CategoryType":2}],"Total":2,"AggregateResults":null,"Errors":null}

 

Any body here to help me?

salama
Top achievements
Rank 1
Iron
Iron
 answered on 07 Jan 2022
0 answers
9 views

https://www.telerik.com/forums/implement-dropdown-tree-co

 

I need to add default values for dropdown tree

After clicking of create button on above sample provided code

 

Mahesh
Top achievements
Rank 1
Iron
 asked on 07 Jan 2022
1 answer
14 views

A security scan caught security vulnerabilities on several javascript files included with ASP.NET MVC version 2021.3.1109:

[1] kendo 2021.3.1109 kendo.dataviz.map.min.js

"The application's tileTitle:this._tileTitle}},wrapIndex:function embeds untrusted data in the generated output with location, at line 26"

[2] kendo 2021.3.1109 kendo.data.min.js

"The application's e},destroyed:function embeds untrusted data in the generated output with wrapAll, at line 26"

[3] kendo 2021.3.1109 kendo.aspnetmvc.min.js

"The application's !function embeds untrusted data in the generated output with href, at line 25"

[4] kendo 2021.3.1109 kendo.mobile.min.js

"The application's r.rightElement=n embeds untrusted data in the generated output with inArray, at line 35"

Can I safely exclude these files from my project?

Thanks.

Georgi
Telerik team
 updated answer on 06 Jan 2022
1 answer
11 views

I have configured an Upload control as an Async Single File (multiple = false) upload as shown below.  When I drag-n-drop multiple files (e.g., three files) into the drop zone, one of the files is uploaded. Which of the files gets uploaded seems a bit random. It's confusing to the users that they can drop multiple files and only one gets uploaded.

I thought I could could check the event parameter passed into the Upload or Success events to see if e.files length is greater than one and if it is, do a e.preventDefault() and display a warning message. However, the e.files contains only one of the files that were dropped (e.g., I drop three files and the e.files.length is one). How do I determine if multiple files were dropped?

@(Html.Kendo().Upload()
      .Name("attachments")
      .Multiple(false)
      .ShowFileList(true)
      .Async(async => async.Save("Save", "Upload").AutoUpload(true))
      .Events(events => events.Error("onError").Success("onSuccess").Upload("onUpload").Select("onSelect")))
            
Yanislav
Telerik team
 answered on 31 Dec 2021
1 answer
13 views

The kendo Grid Column datatype is string

columns.Bound(c => c.StartDate).Title("Start date").Format("{0: dd/MM/yyyy}").Filterable(f => f.Cell(c =>c.ShowOperators(false).Operator("contains").SuggestionOperator(FilterType.Contains)));

I am able to change the datatype of the Kendo Grid column from string to Date.

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

    {

        model.Id(p => p.ID);

       model.Field("StartDate", typeof(DateTime));

 })

 

but the issue i am facing is, if the value of the string like "23/03/2020" or "15/06/2021", then no value will be displayed in the cell of the "StartDate" column of the Grid.

please help me to resolve the issue.

 

Eyup
Telerik team
 answered on 30 Dec 2021
1 answer
18 views

Hi,

as I see in the following demo it says it is loading the partial views in Tabs, not a Main View:

https://demos.telerik.com/aspnet-mvc/tabstrip/ajax

In the example they loaded different partial views in tabs like,  ajaxContent1.html, ajaxContent1.html, ajaxContent1.html.

Q1. But can I load same partial view (ajaxContent1.html) in 3 different tabs?

Q2. Can I load View other than Partial View in a Tab?

Yanislav
Telerik team
 answered on 29 Dec 2021
1 answer
18 views

I'm following this video tutorial:

https://learn.telerik.com/learn/course/external/view/elearning/3/telerik-ui-for-aspnet-mvc


My application does not appear to be rendering Kendo CSS properly. 

Here is my BundleConfig.cs

    public class BundleConfig
    {
        // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles)
        {
            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 https://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"));

            bundles.Add(new ScriptBundle("~/bundles/kendojs").Include(
                        "~/Scripts/kendo/2021.3.1207/kendo.all.min.js",
                        "~/Scripts/kendo/2021.3.1207/kendo.aspnetmvc.min.js"));

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

            bundles.Add(new StyleBundle("~/Content/kendocss").Include(
                      "~/Content/kendo/2021.3.1207/kendo.default-v2.min.css"));

            bundles.Add(new StyleBundle("~/Content/dashboardcss").Include(
                "~/Content/styles/dashboard.css"));

            bundles.Add(new StyleBundle("~/Content/backlogcss").Include(
                "~/Content/styles/backlog.css"));

            bundles.Add(new StyleBundle("~/Content/detailcss").Include(
                "~/Content/styles/detail.css"));
        }

 

Here is the head tag in my _Layout.cshtml:


<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RPS Project Tracker</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/Content/kendocss")
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("styles", required: false)
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")

    @Scripts.Render("~/bundles/kendojs")

    @Html.Kendo().DeferredScripts()
    @RenderSection("scripts", required: false)
</head>

Here's some examples of the errors in my UI:

in /Backlog/{id}/Details view, my DropDownListFor has no styling attributes:

 

On the Dashboard and Backlog pages, my buttons have broken styling:

Inside DevTools, I'm getting the following error:

 

Any help sorting this out is greatly appreciated.

 

 

Eyup
Telerik team
 answered on 29 Dec 2021
1 answer
20 views

Hello,

part of my code with filter looks like this:

    @(Html.FilterSectionFor<ItemViewModel, ItemFilter>(vm => vm.Filter, gridId)
          .Portlet(Lang.Filters)
          .LabelEditorValidatorFor(m => m.Filter.Id)
          .LabelEditorValidatorFor(m => m.Filter.CreateDateTimeFrom)
          .LabelEditorValidatorFor(m => m.Filter.CreateDateTimeTo)
          .LabelEditorValidatorFor(m => m.Filter.Model)
          )

 

And Model is dictionary

Whether it is possible to select two options and filter the results for those two options?

Eyup
Telerik team
 answered on 27 Dec 2021
1 answer
20 views

Hey Guys,

We upgraded our website to Telerik.UI.for.AspNet.Core 2021.3.1207. There are a lot pages in the site where an additional kendoDialog is loaded via ajax. In the dialog - there are textboxes with duplicated IDs (on purpose) as in the outer screen (for example id="Reference").

The issue is that - the texbox in the dialog is not initialized - it is rendered as simple <input /> (without  parent span) and the value in the outer screen became the same as the value from the dialog. My guess is that in version 2021.3.1207 all textboxes are initialized when the page is loaded (maybe for permanence) and they are refereed via ID.

Outer page:

@Html.Kendo().TextBoxFor(model => model.Reference).HtmlAttributes(new { @class = "form-control-x", @onchange = "window.page1.onFormChange();" })

kendoDialog - textbox not rendered with kendo html tags and styling

@Html.Kendo().TextBoxFor(model => model.Reference).HtmlAttributes(new { @class = "", @onchange = "window.page2.onFormChange();" })

Outer page after the content in kendoDialog is loaded - the value for Reference is the one from the dialog.

We have a lot of screens build in the same way. I know that this is not valid HTML, but we do not use <form action="something"></form> to save the fields. We are using ajax and all inputs are refereed by containderId and controld.

As this is blocking issue, any advice will be appreciated.
Thanks in advance.

Mihaela
Telerik team
 answered on 27 Dec 2021
1 answer
15 views

Good day I am using a Kendo Grid on one of my applications. The Grid is defined like below. Editing of data is done via a popup that started from the _EditRoute action. Data for the grid is bound serverside via _SelectRouteData but users can apply their own filter to the Data via the header column since we have .Filterable() enabled on the Grid. Currently the state of that filter is lost when context passes back to the main grid after an update on the the Popup Screen as we call grid.rebind() in Javascript to refresh data in the Grid Post update.

Is there an easy way to persist the state of the ClientSide filter?

I have tried saving and reapplying the filter in Javascript like this

var filter = grid.dataSource.filter(); grid.rebind(); grid.dataSource.filter(filter);

but this still loses the filter after grid.rebind()


Any help would be greatly appreciated.

Best Regard
Wilhelm Erxleben

@(Html.Telerik().Grid(Model)
                                .Name("RouteManagement")
                                .DataKeys(keys => keys.Add(r => r.RouteID))
                                .ColumnContextMenu()
                                .Columns(columns =>
                                {
                                    columns.Bound(r => r.RouteID).Title("Route ID").Width(40).Hidden(true).IncludeInContextMenu(false);
                                    columns.Command(commands =>
                                        commands.Custom("editRoute")
                                            .Text("Edit Route")
                                            .ButtonType(GridButtonType.Image)
                                            .DataRouteValues(route => route.Add(r => r.RouteID).RouteKey("routeId"))
                                            .Ajax(true)
                                            .Action("_EditRoute", "RouteData")

                                    ).Width(50).IncludeInContextMenu(false);

                                    columns.Bound(r => r.AccountNo).Title("Account No")
                                    columns.Bound(r => r.ConsumerNo).Title("Consumer No")
                                    columns.Bound(r => r.DivertCodes).Width(105);


                                })
                                .DataBinding(dataBinding => dataBinding.Ajax()
                                    .Select("_SelectRouteData", "RouteData"))
                                .Sortable()
                                .Selectable()
                                .Filterable()
                                .Resizable(resizing => resizing.Columns(true))

                                .Scrollable(scroll => scroll.Height("410px"))
                                .ClientEvents(events => events
                                                .OnLoad("onLoad").OnDataBinding("BindValues")
                                                .OnRowSelect("onRouteRowSelected")
                                                .OnRowDataBound("onRouteRowDataBound")
                                                .OnComplete("onRouteComplete"))
        )




Eyup
Telerik team
 answered on 24 Dec 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Richard
Top achievements
Rank 2
Iron
Iron
Iron
Bernd
Top achievements
Rank 3
Iron
Iron
Iron
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
CHIHPEI
Top achievements
Rank 1
Iron
Iron
Iron
Top users last month
Richard
Top achievements
Rank 2
Iron
Iron
Iron
Bernd
Top achievements
Rank 3
Iron
Iron
Iron
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
CHIHPEI
Top achievements
Rank 1
Iron
Iron
Iron