I have two classes Category and Product and I want to expend products when users click a category node on the treeview.

My View is as follows:

    <h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<div class="row">
    <div class="col-md-3">
        <label class="k-label-top">TreeView</label>
        @(Html.Kendo().TreeView().Name("treeview")
        .DataSource(datasource => datasource
                            .Read(read => read.Action("Categories", "Categories"))
            ).DataTextField("Name")
        )
    </div>
    
</div>

 

Controller

        public ActionResult Categories(int? id)
        {
            var model = db.Categories
                .Where(p => p.Id == id.Value || p.Id == null)
                .Select(p => new {
                    id = p.Id,
                    Name = p.Name,
                    hasChildren = p.Products.Any()
                });
            return this.Json(model, JsonRequestBehavior.AllowGet);
        }

Categories Class

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace EmployeeTreeView.Models
{
    public class Category
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public virtual ICollection<Product> Products { get; set; }
    }
}

 

Products Class
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace EmployeeTreeView.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public virtual Category Category { get; set; }
        public int CategoryId { get; set; }
    }
}

 When I remove the where clause in the controller the parent node just loops over and over again, but no child nodes are displayed.

I have a checkbox (chkRecurring) in the custom editor of the scheduler. I need to show/hide a div (divRecurring) clicking the checkbox. I wrote jquery click event but it doesn't work. And it doesn't throw any error in firebug or any other browser console.

 

 

 

 

Thanks

I am having a play around with the grid.  I have implemented the following example where batch update/create/delete from this post kendo-grid-batch-incell-save-changes-with-single-trigger-for-create-update-destroy.  This works nicely where I get the rows being created/updated/deleted.

However, if I need to do some custom server side validation in a save event before the changes are committed - if there are any errors, is it possible to return the errors and set them back in the grid supposing my save send handler is:

With controller method:

At the minute I show a popup message to the user which reads success - but I haven't got any code in place currently to do the validate until I find something concrete to put in place.

Ideally I want to set cell style of errors in the grid if possible back in the browser - ie red background colour if the cell contains an error. 

Is there a way to manually set error messages in the grid (client side) and highlight the error cells from an external ajax post?

Thanks

Andez

 

Hello,

 I need to format some cell in export excell with kendo mvc grid. I use the export in this way :

.Index.cshtml :

 .ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("Export.xlsx")
.ForceProxy(true)
.Filterable(true)
.AllPages(true)
.ProxyURL(Url.Action("ExcelSave", "CieAssistant"))
)

 Controller :

public ActionResult ExcelSave(string contentType, string base64, string fileName)
{
var fileContents = Convert.FromBase64String(base64);
return File(fileContents, contentType, fileName);
}

 

How i can update format of cell in the controller function "ExcelSave" ?!

 

Thanks,

I am new to Telerik MVC and JavaScript and jQuery.

Here is my issue:

I have two ListViews on my page:

  @(Html.Kendo().ListView(Model.ProfessionalsNotInGroup.Lines).Name("staffNotInGroupList").TagName("div").HtmlAttributes(new { style = "height: 580px; overflow: auto;" }).ClientTemplateId("groupTemplate").Selectable(selectable => selectable.Mode(ListViewSelectionMode.Multiple)).Navigatable().DataSource(ds => ds .Sort(sort =>{ sort.Add(f => f.Proname);}).Model(m =>{ m.Id(f => f.Userguid); m.Field(f => f.Proname);})).Deferred())

 

AND

  @(Html.Kendo().ListView(Model.ProfessionalsInGroup.Lines).Name("staffInGroupList").TagName("div").HtmlAttributes(new { style = "height: 580px; overflow: auto;" }).ClientTemplateId("groupTemplate").Selectable(selectable => selectable.Mode(ListViewSelectionMode.Multiple)).Navigatable().DataSource(ds => ds .Sort(sort =>{ sort.Add(f => f.Proname);}).Model(m =>{ m.Id(f => f.Userguid); m.Field(f => f.Proname);})).Deferred())

 

The template for the ListViews:

 <script type="text/x-kendo-tmpl" id="groupTemplate"><div class="staff"><span>#: Proname#</span></div>

I have a button that moves items from one ListView to Another:

function addStaffToGroup(e) {var lvStaffNotInGroupList = $("#staffNotInGroupList").data("kendoListView");var StaffSelections = lvStaffNotInGroupList.select();var lvStaffInGroupList = $("#staffInGroupList").data("kendoListView");for (i = 0; i < StaffSelections.length; i++){ lvStaffInGroupList.dataSource.add(lvStaffNotInGroupList.dataItem(StaffSelections[i])); lvStaffInGroupList.refresh(); lvStaffNotInGroupList.dataSource.remove(lvStaffNotInGroupList.dataItem(StaffSelections[i])); lvStaffNotInGroupList.refresh();}}

The problem being whenever I remove or add items to the ListViews and call refresh() the ListViews are not being sorted alphabetically.​​​

How do I achieve this please?

Thank you.​

Hello,

I think I may have a found a bug with how a Grid is displaying data after I've added a record to the table it's bound to.  The meat of the problem is in the javascript I'm using to call dataSource.read() after I've added the record.  My first attempt looked as follows:

Notice how I'm passing the parameter via the URL...then calling dataSource.read().  This works just fine and the grid updates with the new record...however I felt this looked "hacky" so I wanted to update it to use the data object in the ajax call....which looks like the following: 

 

notice here how I'm passing the parameter into the data object for the ajax call, then the same as before calling dataSource.read().  The difference being is in this case, the grid does NOT add the new row.

 

When I look at the database, the record gets added regardless to how the parameter is passed into the ajax call.

When I look at the fiddler traces from the read calls:

• parameter passed via URL - The fiddler trace includes the new record
• parameter passed via data - The fiddler trace does NOT include the new record even though the database shows it's there.

I've no idea why this is happening, but it repro's 100% of the time.  Is this a bug?  If not can someone explain to me why it's not?  I have another view where I don't have a choice and I have to pass the parameters via the data object...so I need to get it solved eventually or I'm going to be blocked.

Here's the rest of my source files for context:

Controller:

View with working javascript block:

Hello! I have a model whose foreign key references itself. To provide some more context, I have a table in my database called "Categories", and this table may contain categories or sub-categories, depending on whether they have a reference to a "Non-sub-category" or not.

 

Having this into account, I am using a grid that contains a foreign key, as the following:

 

 The behaviour I desire is to add lines to this table and have the "ForeignKey" dropdown automatically updated. So for instance, if I add a category "Animal", when I am creating a new sub-category (e.g. a "Cat") I want to see already displayed "Animal" in my dropdown. I also want to be able to have an "Empty value" on the dropdown (like a placeholder), so I can indicate that the new category is a "Primary category" (i.e. a non-sub-category). I understand that the "ForeignKey" data is statically bound, and the only way I have right now to display the newly inserted data is to force a reload on the page.

 

Is not there any workarounds to update my "ForeignKey" dropdown on a grid change (Create or Edit)?

 Regards,

Manuel

 

Hi.  I'm trying to run very simple validation for the grid inline edit function. 

 - GridEditMode.InLine

 - Server binding

 - Trying to add "onsubmit" attribute to the "GridForm" form element (it does not work)

Or does DataAnnotation based validation works for this case?  If so, please let me know any sample code for that.  I could only see AJAX version or non-grid version.

Below is my cshtml file:

@using Kendo.Mvc.UI;
@using Kendo.Mvc.Extensions;
@model WebApp.Features.Vendor.Index.Result
@{
    ViewBag.Title = "Vendor Management";
}
<div class="jumbotron">
    <div id="clientsDb">
        @Html.ValidationDiv()
        @(Html.Kendo().Grid((IEnumerable<PayBy.WebApp.Features.Vendor.UiController.Vendor>)Model.Vendors)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.VendorName).Title("Name").Width(30);
            columns.Bound(c => c.IsInternal).Title("Internal").Width(30);
            columns.Bound(c => c.AccountName).Title("Account").Width(50);
            columns.Command(commands => commands.Edit()).Width(30);
        })
        .ToolBar(toolbar => toolbar.Create().Text("Add"))
        .Sortable()
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .HtmlAttributes(new { style = "height: 480px;" })
        .Scrollable()
        .DataSource(dataSource => dataSource
            .Server()
            .Model(model =>
            {
                model.Id(p => p.Id);
                model.Field(f => f.AccountName).Editable(false);
            })
            .Create("Update", "Vendor")
            .Update("Update", "Vendor")
            .Sort(sort => sort.Add("VendorShortName").Ascending())
        )
        )
    </div>
</div>
<div class="row">
</div>
<script>
    var form = $('#GridForm');
    if (form != null) {
        form.attr('onsubmit', 'return ValidateForm();');
    }
    function ValidateForm()
    {
        alert('validate');
        if ($('#VendorName').val().length == 0) {
            alert('[Name] Required field.');
            return false;
        }
        if ($('#VendorName').val().length > 256) {
            alert('[Name] Maximum 256 letters.');
            return false;
        }
        return true;
    }
</script>

Hi,

I have a Kendo Grid that I am building dynamically from a `System.Data.DataTable`. I am having issues trying to lock the columns.

I am setting a few columns to locked based on their title as you will see in my code. The boolean check is coming back as true or false where expected and that value is correctly being set in the `.Locked()` property. But the grid is not locking that column, nor is it giving me the `Lockable` option in the column menu.

Please see my code below:

       @model MvcProject.UnitOfWork.ViewModels.Reports.FacilityEquipmentDistributionVm


       @(Html.Kendo().Grid<dynamic>()
       .Name("resultsGrid")
                       .Columns(columns =>
                            {
                                columns.Group(group => group
                                    .Title("Facility Equipment Distribution Report : Date run - " + DateTime.Now.ToShortDateString())
                                    .Columns(header =>
                                    {
                                       
                                        foreach (System.Data.DataColumn column in Model.CombinedTable.Columns)
                                        {
                                            string title = "";
                                            bool showColumn;
                                            
                                            if (Model.ColumnTitles.TryGetValue(column.ColumnName, out title))
                                            {
                                                
                                            }
                                            else
                                            {
                                                title = column.ColumnName;
                                            }

                                            if (Model.ColumnsToShow.TryGetValue(column.ColumnName, out showColumn))
                                            {

                                            }
                                            else
                                            {
                                                showColumn = false;
                                            }

                                            bool lockColumn = (title == "PropertyRef" || title == "PropertyName" || title == "Address" || title == "Prefix" || title == "Floor");
                                            
                                           header.Bound(column.ColumnName)
                                                .Title(title)
                                                .Visible(showColumn)
                                                .Locked(lockColumn)
                                                .Lockable(true)
                                                .Width(title.Length * 8);

                                        }

                                    })
                                );
                            })

                        .HtmlAttributes(new { style = "height: 900px;" })
                            .Pageable(p => p
                                .ButtonCount(5)
                                .PageSizes(true)
                                .Refresh(true)
                            )

                            .Scrollable(s => s.Height("auto").Enabled(true))
                            .Sortable()
                            .Reorderable(reorderable => reorderable.Columns(true))
                            .Filterable()
                            .Groupable()
                            .ColumnMenu()
                            .Resizable(r => r
                                .Columns(true)
                            )
                                .Excel(excel => excel
                                    .FileName("Facility Equipment Distribution.xlsx")
                                    .Filterable(true)
                                    .ProxyURL(Url.Action("_GridExportSave", "Reports"))
                                    .AllPages(true)
                                )
                            .DataSource(d => d
                                .Ajax()
                                
                                .Read(read => read.Action("_FacilityEquipmentDistributionResults_Read", "Reports").Data("Genesis.Reports.Space.Search.getPaginationData"))
                                    .ServerOperation(true)
                                    .PageSize(20)
                                )
                                .ToolBar(tools =>
                                {
                                    tools.Pdf();
                                    tools.Excel();
                                })
        //PDF removed for now until it is patched
                                .Pdf(pdf => pdf
                                     .AllPages()
                                    .FileName("FacilityEquipmentDistribution.pdf")
                                    .ProxyURL(Url.Action("_GridExportSave", "Reports"))
                                )
                                //.Events(events => events.DataBound("Genesis.Reports.Space.Search.loadTT"))

)

Any help would be much appreciated.

Kind Regards,
Gareth

Is there a demo of how to connect a chart to the selected row(s) of a grid?  Basicly I have a grid and when the user selects a row(s) I want to have the selected data update a chart on the page.

Thanks,

Erik