Hi,
My grid uses Ajax to load its entire content at initial load.Paging/Filtering/Sorting all done locally afterwards. I would like to enable interactive Grouping that mimics as closely as possible the Telerik Windows Forms Grid.

When the user groups on a column, the grid should display initially collapsed groups with as many group headers as fit into the given page size. Ideally, The group headers should also indicate the number of child rows in the group. In addition I should be able to sort the group headers according to the count of members (largest group first).
I had a look at documentation but most samples seem to use the databind event which is as far as I know not fired when the user selects grouping after data load.
I'm a beginner with ASP.NET MVC so I might have missed the obvious.

Thanks and kind regards
Erwin

Hi,

Is there a way to prevent the Scheduler component from restricting its height and using a vertical scrollbar?

I just need it to expand along with the height of its content in the usual HTML manner (preferably while keeping the horizontal scrollbar), but can find no way to do that (the only suggestions I can find here are old references to the OverflowBehavior property of the pre-Kendo version).

Thanks.

Hi Team,

      I was trying to export the diagram to pdf, but it shows error.

Please help.

Razor Code :

Error :

kendo.all.js:52580 Uncaught Error: Cannot output NaN to PDF
    at e (VM4745 kendo.all.min.js:52)
    at VM4745 kendo.all.min.js:52
    at Function.e.withIndent (VM4745 kendo.all.min.js:52)
    at D (VM4745 kendo.all.min.js:52)
    at e (VM4745 kendo.all.min.js:52)
    at Function.e.indent (VM4745 kendo.all.min.js:52)
    at VM4745 kendo.all.min.js:53
    at Function.e.withIndent (VM4745 kendo.all.min.js:52)
    at z.render.render (VM4745 kendo.all.min.js:53)
    at e (VM4745 kendo.all.min.js:52)

Hi,

I'm trying to minimize the height of the listbox because of layout restrictions. Played around with css (beginner here) a little but need help on how I can reduce the spacing between toolbar buttons so that I can further reduce the height  - see attached image?

(Bootstrap 4 styling)

Kind regards

Erwin

I'm brand new to ASP.net core MVC and Telerik, and my first post in the forums is a plea for help getting a demo up and running in VS 2015.   

I downloaded and installed a trial of Telerik's UI for ASP.NET MVC, and opened the Kendo.Mvc.Examples solution.

Immediately, I am now faced with two problems which, despite hours of searching here and elsewhere, cannot be solved without help from the forums.  This doesn't give me much confidence, and has led to hours of frustration.

Problem 1:

The compiler reports that Microsoft.Web.Infrastructure version=1.0.0.0 could not be found.

    Problem 2:

The Sample.mdf database requires Sql Server Express 2012 Localdb.   I have SQL Server 2016 installed.  I even installed SQL Server 2012 express, and it still doesn't let me use the sample.mdf database.

I have a view that has three comboboxes, a submit button and a batch editable grid.

I'm not sure I have it wired up correctly as most items work.  The problem I am having is that my grid is not refreshed after I update.

Steps

1. Call the Index action which returns an empty list to the grid model(to start)

2. Type in a character into the store combobox, which calls an action to populate, and then select one of them

3. Leave the status combobox at Assigned

4. Click the search button

5. Edit the status of one of the items

6. Click save

Save appears to work but my grid should show one less row based on search criteria(as I changed the status of one of them).

Models

[Table("Images")]
    public class SearchResult
    {
        [Key]
        public int ImageId { get; set; }
        public int StatusId { get; set; }
        public string Name { get; set; }
        [Required]
        public string Description { get; set; }
        public int ProjectId { get; set; }
        public int StoreId { get; set; }
    }

    public class Store
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

    public class Project
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

View

@model List<PhotoReviewTelerik.Models.SearchResult>
@{
    ViewBag.Title = "PhotoReview";
}

<h2>PhotoReview</h2>
<form method="get" action="@Url.Action("Search")" data-pr-ajax="true" data-pr-target="#searchResults">
    <div class="demo-section k-content">
        <h4>Projects</h4>

        @(Html.Kendo().ComboBox()
            .Name("projects")
            .DataTextField("Name")
            .DataValueField("Id")
            .Placeholder("Select Project")
            .Filter("contains")
            .AutoBind(false)
            .MinLength(1)
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetProjects", "PhotoReview");
                })
                .ServerFiltering(true);
            })
        )
        <div class="demo-hint">Hint: type at least three characters. For example "pro".</div>
    </div>
    <div class="demo-section k-content">
        <h4>Stores</h4>

        @(Html.Kendo().ComboBox()
            .Name("stores")
            .DataTextField("Name")
            .DataValueField("Id")
            .Placeholder("Select Store")
            .Filter("contains")
            .AutoBind(false)
            .MinLength(1)
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetStores", "PhotoReview");
                })
                .ServerFiltering(true);
            })
        )
        <div class="demo-hint">Hint: type at least three characters. For example "sto".</div>
    </div>
    @(Html.Kendo().ComboBox()
        .Name("status")
        .BindTo(new List<string>() {
          "Assigned",
          "Reviewed"
        })
        .SelectedIndex(0)
        .Suggest(true)
    )
    <div>
        @(Html.Kendo().Button()
            .Name("primaryTextButton")
            .HtmlAttributes(new { type = "submit", @class = "k-primary" })
            .Content("Search"))

    </div>
</form>
@(Html.Kendo().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ImageId).Title("ImageId");
            columns.Bound(p => p.StatusId).Title("Status");
            columns.Bound(p => p.Name).Title("Name");
            columns.Bound(p => p.Description).Title("Description");
            columns.Bound(p => p.ProjectId).Title("ProjectId");
            columns.Bound(p => p.StoreId).Title("StoreId");
        })
        .ToolBar(toolbar =>
        {
            toolbar.Save().SaveText("Save").CancelText("Cancel"); // The "save" command saves the changed data items.
        })
        .HtmlAttributes(new { style = "height: 550px;" })
        .NoRecords()
        .Pageable(pageable => pageable
            .Input(true)
            .Numeric(false)
            )
        .Sortable()
        .Scrollable(scr => scr.Height(430))
        .Filterable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Events(events => events.Error("error_handler"))
            //.Events(events =>
            //{
            //    events.RequestEnd("onRequestEnd"); //I've added this
            //})
            .Batch(true)
            .Model(model =>
            {
                model.Id(i => i.ImageId); // Specify the property which is the unique identifier of the model.
                model.Field(i => i.ImageId).Editable(false); // Make the ImageId property not editable.
                model.Field(i => i.Name).Editable(false); //
                model.Field(i => i.ProjectId).Editable(false);
                model.Field(i => i.StoreId).Editable(false);
            })
            .PageSize(20)
            .ServerOperation(false)
            .Update(update => update.Action("Update", "PhotoReview").Data("additionalData"))
            //.Read(read=>read.Action("Search", "PhotReview").Data("additionalData"))
            )
        .Editable(editable => editable.Mode(GridEditMode.InCell))

)
<script>
    function additionalData() {
        return {
            Project: getUrlParameter('projets'),
            Store: getUrlParameter('stores'),
            Status: getUrlParameter('status')
        };
    }
    function getUrlParameter(sParam) {
        var sPageURL = decodeURIComponent(window.location.search.substring(1)),
            sURLVariables = sPageURL.split('&'),
            sParameterName,
            i;

        for (i = 0; i < sURLVariables.length; i++) {
            sParameterName = sURLVariables[i].split('=');

            if (sParameterName[0] === sParam) {
                return sParameterName[1] === undefined ? true : sParameterName[1];
            }
        }
    };
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
    //function onRequestEnd(e) {
    //    if (e.type === "update") {
    //        var grid = $('#Grid').data('kendoGrid');
    //        grid.dataSource.read();
    //    }
    //}
</script>

@Html.ValidationSummary(false, "", new { @class = "text-danger" })

Controller

using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using PhotoReviewTelerik.Models;
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace PhotoReviewTelerik.Controllers
{
    public class PhotoReviewController : Controller
    {
        private PhotoReviewTelerikDb db = new PhotoReviewTelerikDb();
        // GET: PhotoReview
        public ActionResult Index()
        {
            var model = new List<SearchResult>();
            return View("PhotoReview", model);
        }

        public ActionResult Search(int? projects, int? stores, string status)
        {
            int tempStatus = 0;
            if (status == "Assigned")
                tempStatus = 0;
            else
                tempStatus = 1;
            
            var model = db.SearchResults.ToList();
            model = model.Where(p => p.StatusId == tempStatus).ToList();
            if (projects.HasValue)
                model = model.Where(p => p.ProjectId == (int)projects).ToList();
            if (stores.HasValue)
                model = model.Where(p => p.StoreId == (int)stores).ToList();

            return View("PhotoReview", model);
        }

        public ActionResult Update([DataSourceRequest]DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<SearchResult> results, SearchCriteria criteria)
        {
            // Will keep the updated entitites here. Used to return the result later.
            var entities = new List<SearchResult>();
            if (ModelState.IsValid)
            {
                using (var db = new PhotoReviewTelerikDb())
                {
                    foreach (var result in results)
                    {
                        // Create a new Product entity and set its properties from the posted ProductViewModel.
                        var entity = new SearchResult
                        {
                            ImageId = result.ImageId,
                            StatusId = result.StatusId,
                            Name = result.Name,
                            Description = result.Description,
                            ProjectId = result.ProjectId,
                            StoreId = result.StoreId
                        };
                        // Store the entity for later use.
                        entities.Add(entity);
                        // Attach the entity.
                        db.SearchResults.Attach(entity);
                        // Change its state to Modified so Entity Framework can update the existing product instead of creating a new one.
                        db.Entry(entity).State = EntityState.Modified;
                        // Or use ObjectStateManager if using a previous version of Entity Framework.
                        // northwind.ObjectStateManager.ChangeObjectState(entity, EntityState.Modified);
                    }
                    // Update the entities in the database.
                    db.SaveChanges();
                }
                //redirect to search
                return RedirectToAction("Search", new { projects = criteria.Project, stores = criteria.Store, status = criteria.Status });
            }
            else
            {
                //return View("PhotoReview", results);
                return Json(entities.ToDataSourceResult(request, ModelState, result => new SearchResult
                {
                    ImageId = result.ImageId,
                    StatusId = result.StatusId,
                    Name = result.Name,
                    Description = result.Description,
                    ProjectId = result.ProjectId,
                    StoreId = result.StoreId
                }));
            }
        }

        public JsonResult GetStores(string text)
        {
            text = text.Trim();
            if(!string.IsNullOrEmpty(text))
            {
                var model = db.Stores.ToList();
                model = model.Where(s => s.Name.ToLower().Contains(text.ToLower())).ToList();
                return Json(model, JsonRequestBehavior.AllowGet);
            }
            return Json(new List<Store>(), JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetProjects(string text)
        {
            text = text.Trim();
            if (!string.IsNullOrEmpty(text))
            {
                var model = db.Projects.ToList();
                model = model.Where(s => s.Name.ToLower().Contains(text.ToLower())).ToList();
                return Json(model, JsonRequestBehavior.AllowGet);
            }
            return Json(new List<Project>(), JsonRequestBehavior.AllowGet);
        }
    }
}

I noticed that the TreeView widget is behaving totally different when using BindTo(myViewModel.GroupList) versus using DataSource(<calling an action on a controller>). The problem: when using DataSource all additional fields like "Expanded" or "HtmlAttributes" are ignored by the TreeView widget so the TreeView looks different depending on which way I use it.

myViewModel.GroupList is a List<TreeViewItemModel>, the action on my Controller returns a JsonResult(List<TreeViewItemModel>,...). In fact both are exactly the same lists.

The code for DataSource is as follows:

Any idea why this happens?

Regards
Heiko

Hi Team,

             I have a simple MVC diagram, which works on Chrome but throws error on Internet Explorer. I do not have a clue. Please find the code below in Razor View. Please help.

It says onDataBound is undefined and cannot find property bringIntoView.

@model dotGrantsApps.Areas.Maintenance.Models.WorkflowViewModel
@using Kendo.Mvc.UI
@{
    ViewBag.Title = "Workflow Chart";
    @Html.Hidden("hdnWorkflowId", Model.OtcId);
}

@(Html.Kendo().Diagram()
                                    .Name("workflowOverviewDiagram")
                                    .DataSource(dataSource => dataSource
                                    .Read(read => read.Action("GetWorkflowStopData", "WorkflowMaintenance", new { area = "Maintenance", workflowDefinitionId = Model.OtcId }))
                                    .Model(m => m.Children("Items"))
                                    )
                                    .Editable(false)
                                    .Layout(l => l
                                                .HorizontalSeparation(400)
                                                .VerticalSeparation(200)
                                                .Type(DiagramLayoutType.Tree).Subtype(DiagramLayoutSubtype.Down)
                                    )
                                    .ShapeDefaults(sd => sd.Visual("visualTemplate"))
                                    .ConnectionDefaults(cd => cd
                                        .EndCap("ArrowEnd")
                                        .Stroke(s => s
                                        .Color("#979797")
                                        .Width(2)
                                    )
                                    )
                                    .ZoomRate(0)
                                    .Selectable(false)
                                    .Events(events => events.DataBound("onDataBound"))

)

<script>
        function visualTemplate(options) {
            var dataviz = kendo.dataviz;
            var g = new dataviz.diagram.Group();
            var dataItem = options.dataItem;
            var layout = new dataviz.diagram.Layout(new dataviz.diagram.Rect(0, 0, 210, 75), {
                alignContent: "center",
                spacing: 4
            });
            g.append(new dataviz.diagram.Rectangle({
                width: 210,
                height: 75,
                stroke: {
                    width: 0
                },
                fill: {
                    gradient: {
                        type: "linear",
                        stops: [{
                            color: "#133781"
                        }]
                    }
                }
            }));
            g.append(layout);
            var texts = dataItem.WorkflowStopName.split(" ");
            for (var i = 0; i < texts.length; i++) {
                layout.append(new dataviz.diagram.TextBlock({
                    text: ' ' + texts[i],
                    color: "#fff"
                }));
            }
            layout.reflow();
            return g;
        }
        function onDataBound() {
            this.bringIntoView(this.shapes);
        }
    </script>

Hi there,

I'm using kendo PanelBar with foreach for the nested contents, here is the code:

<div class="col-lg-12">
                @(Html.Kendo().PanelBar()
                .Name("OrganizerTour")
                .ExpandMode(PanelBarExpandMode.Multiple)
                .HtmlAttributes(new { style = "" })
                .Items(panelbar =>
                {
                    foreach (var result in Model)
                    {
                        panelbar.Add().Text("Organizer: " + @result.organizerName).Expanded(true)
                            .Items(tour =>
                            {
                                tour.Add().Expanded(true).Content(@<div class="panel-content">
                                    <div class="row dashboard-grid">
                                        @RenderGrid(result.Result)
                                    </div>
                                </div>);
                            });
                    }
                })
                )
            </div>

When each PanelBar is expanded, there are two arrows showing (see attached) - it's fine when collapsed.

How can I remove the bottom arrow? Or is it something wrong with the codes above?