I have a model with an enum as a data type on a property.  In the grid I want to show an image representation for this enum.  Whats the best way to do this?

I've tried using the ClientTemplate to do this.  I'm not sure what I need.  I have tried the following without success:

This has errors in the razor page.  I had the all the text wrapped in quotes and used + to concatenate them. 

The question is, I have an enum as a value, but I want to display an image - which is a custom glyph icon on the span.  What is the best way to implement this?

Thanks

Andez

Hi.  I have 2 screen with a Telerik MVC grid.  First one is for Orders and second one for OrderDetails.  I use server binding.

The first one works fine.  It shows Orders data in the grid.  Each row has a Details button and when I click on the button, the second screen shows up with the OrderDetails data of the Order data you selected  in the grid.  Here each row has a Edit button that is supposed to perform inline editing.

At this point, the URL is http://myweb.com/Order/Details/123.  123 is the OrderId in the Orders table.

The problem happens when I click on Edit button for the row data.  It does a GET request with OrderDetailId automatically.  The page expects OrderId not OrderDetailId.

So, at this point, the page expects http://myweb.com/Order/Details/##OrderId## but the grid does http://myweb.com/Order/Details/##OrderDetailId##.

How should I handle this case?  Could I manage what URL format the grid uses for the Edit button?

Hi,

 I am trying to create a grid with one column to return a result similar to your example here: http://demos.telerik.com/kendo-ui/grid/rowtemplate.  I am using the server-side RowTemplate code such as...

            @(Html.Kendo().Grid(Model.Results)
                .Name("Components")
                .RowTemplate(grid =>
                    @<text>
                    <tr>
                        <td>
                            ID: @item.ComponentID<br>

                            Name: @item.Name

                            ... etc
                        </td>
                    </tr>
                    </text>
                )

            .DataSource(d => d.Ajax().ServerOperation(false))
            .Pageable(pageable => pageable
                .Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
            )

 I am basing my code on this example:

@model IEnumerable<Product>@(Html.Kendo().Grid(Model).Name("grid")

    .RowTemplate(grid => @<text><div>Product Name: @product.ProductName</div><div>Units In Stock: @product.UnitsInStock</div></text>))

​The output completely ignores the rowFormat and prints every field in the model object as a separate column (see attached photo).

I have tried almost everything - client templates, etc.  Nothing stops every column from being displayed.

 Any ideas would be appreciated.

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: