Hi,

I am trying to build a grid that has a detail template displaying child records. One of the columns in the grid (both the main grid and sub-grid) should display a dropdown menu. This is all mostly straightforward but I have a couple of issues/questions.

1. The properties of the child objects do not seem to be available within the context of the detail template. How can I access those properties?

2. I cannot seem to figure out how to add the dropdown menu in the grid column. I've tried to apply examples from the demos but keep getting errors like "Invalid Template" when attempting to use a client template or "Cannot convert lambda expression" when I try to use a foreach loop to add submenu items.

Product: Telerik MVC UI

Version: 2016.2.714

 

Please take a look at the attached sample solution and point me in the right direction. (I could not add the Content and Scripts folders as they cause me to exceed the 2MB upload limit; however those folder are out of the box Telerik MVC UI scaffolded so I hope you can add them). Also see the Razor View code below.

@{
    ViewBag.Title = "Home Page";
}
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-18 col-md-12">
@(Html.Kendo().Grid<TelerikMvcApp1.Models.Shop>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(e => e.ShopId).Width(110);
            columns.Bound(e => e.ShopName);
            columns.Template(@<text></text>).ClientTemplate(
                Html.Kendo().Menu()
                    .Name("menu_#=ShopId#")
                    .Items(menu =>
                    {
                        menu.Add().Text("Pay Affiliates").Items(nested =>
                        {
                            // How does one loop through the affiliates here?
                            nested.Add()
                                .Text("[How to get affiliate name here]?");
                               // .Action("ActionName", "ControllerName", new { ShopId = "#=ShopId#", AffiliateId = "#=AffiliateId#" });
                                });

                        })
                    .ToClientTemplate().ToHtmlString()
                );
        })
        .Sortable()
        .Pageable()
        .Scrollable()
        .ClientDetailTemplateId("affiliates-template")
        .HtmlAttributes(new { style = "height:600px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(6)
            .Read(read => read.Action("Shops_Read", "Grid"))
        )
        .Events(events => events.DataBound("dataBound"))
)
      </div>
    </div>
</div>
<script id="affiliates-template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<TelerikMvcApp1.Models.Affiliate>()
            .Name("grid_#=ShopId#") // template expression, to be evaluated in the master context
            .Columns(columns =>
            {
                columns.Bound(o => o.AffiliateId).Width(110).ClientTemplate(" \\#= AffiliateId \\#"); ;
                columns.Bound(o => o.AffiliateName).ClientTemplate(" \\#= AffiliateName \\# promotes \\#= ShopName \\#");
            })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .Read(read => read.Action("Affiliates_Read", "Grid", new { ShopId = "#=ShopId#" }))
            )
            .Pageable()
            .Sortable()
            .ToClientTemplate()
    )
</script>
<script>
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>

Requirements
Telerik Product and Version	Kendo
Supported Browsers and Platforms	IE
Components/Widgets used (JS frameworks, etc.)

Hello Telerik Team,

 

We are looking for a Kendo-MVC control equal to the below link:-

http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_firstlook/defaultcs.aspx

we need to overlay on another control same like the above example. we have already seen the Kendo slider which does not fit into our requirement.

 

Please let us know ASAP.

I'm studying the example at http://demos.telerik.com/aspnet-mvc/sortable/sortable-panels for implementing drag and drop dashboard components, and in that example I notice the area to drag is the whole panel as opposed to just the title bar.  This precludes the use of links in the panel themselves.  How would this be modified to only allow dragging by the title bar of the individual panels, thus allowing links inside the actual panel to remain clickable?

In my template,the code like this:

<script type="text/x-kendo-template" id="template">
    <div id="details-container">
        <p>内容：</p>
       <div id="div_con">@Html.Raw("#=Content#")</div>
    </div>
</script>

#=Content# and the result like this:

内容：
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<span style="color:#333333;font-family:SimSun, 'Microsoft YaHei', sans-serif;font-size:16px;line-height:32px;text-indent:32px;">木屑颗粒机是生物质燃料颗粒形成机系例产品中的优质产品代表之一，，它不仅帮助我们解决了一些农村废弃的玉米秸秆、棉花秸秆、稻草秸秆、木糠、木粉、木屑、花生壳、稻壳等这些农作物的外壳面临着存放难的问题。</span><p style="margin-bottom:0px;padding:0px;text-indent:32px;line-height:1.8;color:#333333;font-family:SimSun, 'Microsoft YaHei', sans-serif;font-size:16px;"></p><p style="margin-bottom:0px;padding:0px;text-indent:32px;line-height:1.8;color:#333333;font-family:SimSun, 'Microsoft YaHei', sans-serif;font-size:16px;">对于木屑颗粒机设备本身而言。</p>

 

How to resolve it?

To whom so ever it may concern,

I have a kendo grid and I have a filter on the column header like the one shown in the attached .

the page loads, the grid populates with data. After the page loads successfully with the grid and the data, When I am trying to type some characters in column header filter to search, for each character I type, going to server call (I mean its calling controller action method every time). I don't want this round trip to happen for every character provide in filter. Is there any way to not call server as data is already the grid and when I type any character in box, it just filters using the grid data rather than doing round trip.

This is what I have used in the grid.

            .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
            .Filterable()
            //.Sortable()
            .Resizable(rsb => rsb.Columns(true))
            //.ColumnMenu(c=>c.Sortable(false).Filterable(true))
            //.Reorderable(r => r.Columns(true))
            .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("GetAllSiteReleases", "Dashboard").Data("SetFilter"))
            .ServerOperation(false)

Can I get any help on this.

 

 

Currently, we have a chart situated within an ASP.NET MVC view without a title. When a user clicks an export button on the view, the chart is successfully created, however, business owners require the tile in the exported image. Is there any way to add a title to the chart prior to exporting it, or add one to the MVC chart and not display it in the view, just in the export?  I've tried the following without success:

 

Any help or guidance would be greatly appreciated!

<script type="text/x-kendo-template" id="template">
    <div id="details-container">
        <p>标题：#=Title#</p>
        <p>内容：#=Content#</p>
        <p>状态：#=Passstatus#</p>
        <p>提交人：#=SendPerson#</p>
        <p>提交时间：#=SendDate#</p>
        <div class="demo-section k-content wide">
            @(Html.Kendo().ListView<txlcinfo.EnSystem.ViewModels.QuImgsViewModel>()
                .Name("imglistView")
                .TagName("div")
                .ClientTemplateId("img_template")
                .DataSource(dataSource =>
                {
                    dataSource.Read(read => read.Action("img_Read", "UserDiscuss", new { sid = "#=ID#" }));
                    dataSource.PageSize(3);
                })
                .Pageable()
            )
        </div>
    </div>
</script>

That's my code,but it has problem,like this:

Uncaught Error: Invalid template:'
    <div id="details-container">
        <p>标题：#=Title#</p>
        <p>内容：#=Content#</p>

        



        <p>状态：#=Passstatus#</p>
        <p>提交人：#=SendPerson#</p>
        <p>提交时间：#=SendDate#</p>
        <div class="demo-section k-content wide">
            <div id="imglistView"></div><div class="k-pager-wrap" id="imglistView_pager"></div><script>
jQuery(function(){jQuery("#imglistView").kendoListView({"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Admin/UserDiscuss/img_Read?sid=#=ID#"},"prefix":""},"pageSize":3,"page":1,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"ID":{"type":"string"},"imgpath":{"type":"string"}}}}},"template":kendo.template(jQuery('#img_template').html()),"pageable":{"autoBind":false,"buttonCount":10,"messages":{"display":"显示条目 {0} - {1} 共 {2}","empty":"没有可显示的记录。","page":"页","of":"共 {0}","first":"首页","previous":"前页","next":"后页","last":"末页","refresh":"刷新","morePages":"更多页"},"pagerId":"imglistView_pager"}});});
' Generated code:'var $kendoOutput, $kendoHtmlEncode = kendo.htmlEncode;with(data){$kendoOutput='\n    <div id="details-container">\n        <p>标题：'+(Title)+'</p>\n        <p>内容：'+(Content)+'</p>\n\n        \n\n\n\n        <p>状态：'+(Passstatus)+'</p>\n        <p>提交人：'+(SendPerson)+'</p>\n        <p>提交时间：'+(SendDate)+'</p>\n        <div class="demo-section k-content wide">\n            <div id="imglistView"></div><div class="k-pager-wrap" id="imglistView_pager"></div><script>\n\tjQuery(function(){jQuery("';imglistView").kendoListView({"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Admin/UserDiscuss/img_Read?sid=;$kendoOutput+='=ID';"},"prefix":""},"pageSize":3,"page":1,"total":0,"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"fields":{"ID":{"type":"string"},"imgpath":{"type":"string"}}}}},"template":kendo.template(jQuery(';$kendoOutput+='img_template\').html()),"pageable":{"autoBind":false,"buttonCount":10,"messages":{"display":"显示条目 {0} - {1} 共 {2}","empty":"没有可显示的记录。","page":"页","of":"共 {0}","first":"首页","previous":"前页","next":"后页","last":"末页","refresh":"刷新","morePages":"更多页"},"pagerId":"imglistView_pager"}});});\n';}return $kendoOutput;'

Hi,

I'm trying to use a grid with resizable height so it uses 100% no matter the resolution used, and so far I could replicate the examples given by the Telerik support when working on a HTML single page, but when trying to use the same approach in a MVC master layout + view,I can't make it work.

These are the examples I followed:
http://docs.telerik.com/kendo-ui/controls/layout/splitter/how-to/expand-splitter-to-100-height
http://jsfiddle.net/dimodi/4eNu4/33/ (from a forum question)

Also, I'm trying to make the grid in razor style, not via script like the examples, but somehow I'm not able to do it.

I'm linking for download (the MVC projects weights too much to attach) the 2 working standalone projects I made for testing purposes, the one in HTML works fine and the one with MVC pattern doesn't when resizing the browser window.

https://drive.google.com/open?id=0B4xs_h7M8cSXT016d3JPRV9LR1k (HTML)
https://drive.google.com/open?id=0B4xs_h7M8cSXcUZwTE94MWw0MW8 (MVC)

Could you help me please? 

Thanks in advance.

I have written code for so many grids. But this one grid is giving me trouble. Not sure what the problem is. Its a basic master table grid with read/create/delete. Read and Delete get called but for some reason create and update don't get invoked. Any ideas?

 

View file Code:

@using Kendo.Mvc.UI;
@{
ViewBag.Title = "Import FileNames";
}
<h4>Maintain Import FileNames</h4>
@(Html.Kendo().Grid<CaseManagement.Models.ImportFileModel>()
.Name("importFileGrid")
.Columns(columns =>
{
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
columns.ForeignKey(p => p.InventoryType, (System.Collections.IEnumerable)ViewData["InventoryTypeList"], "InventoryCode", "Title").HeaderTemplate("<b>Inventory</b>").Width(150);
columns.Bound(o => o.FileName).Title("File Name");
//columns.Bound(o => o.importId);
//columns.Bound(o => o.InventoryType);
})
.ToolBar(toolbar =>
{
toolbar.Template(@<text>
<div class="toolbar">
<div style="float: right;">
<a class="k-button k-button-icontext k-grid-add" href="#"><span class="k-icon k-add"></span>Add new row</a>
</div>
</div>
</text>);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
//.Events(events => events.DataBound("onImportFileGridDataBound"))
.HtmlAttributes(new { style = "width: 1000px;" })
.Scrollable()
.Sortable()
.Groupable()
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100000)
.Model(model =>
{
model.Id(p => p.importId);
//model.Field(p => p.ImportFileId).DefaultValue("");
})
.Read(read => read.Action("ImportFile_Read", "ImportFile"))
.Create(create => create.Action("ImportFile_Create", "ImportFile"))
.Update(update => update.Action("ImportFile_Update", "ImportFile"))
.Destroy(destroy => destroy.Action("ImportFile_Destroy", "ImportFile"))
)
)
<script type="text/javascript">
function onImportFileGridDataBound() {
this.table.find(".k-grid-edit").hide();
}
</script>

 

Controller code:

public class ImportFileController : Controller
{
public ImportFileController()
{
ViewData["InventoryTypeList"] = InventoryType.GetInventoryTypes().Select(t => new InventoryType
{
InventoryCode = t.InventoryCode,
Title = t.Title,
DisplayOrder = t.DisplayOrder
}).OrderBy(t => t.DisplayOrder);
}
public ActionResult ImportFileName()
{
return View();
}
public ActionResult ImportFile_Read([DataSourceRequest]DataSourceRequest request)
{
return Json(GetImportFiles().ToDataSourceResult(request));
}
private static IEnumerable<ImportFileModel> GetImportFiles()
{
List<ImportFile> objList;
objList = ImportFile.GetImportFileAll();
int ctr = 1;
List<ImportFileModel> modelList = new List<ImportFileModel>();
foreach(ImportFile item in objList)
{
ImportFileModel m = new ImportFileModel();
m.importId = ctr;
m.InventoryType = item.InventoryType;
m.FileName = item.FileName;
modelList.Add(m);
ctr++;
}
return modelList;
//return objList.Select(obj => new ImportFileModel
//{
// importId =
// ImportFileId = obj.InventoryType + "_" + obj.FileName,
// InventoryType = obj.InventoryType,
// FileName = obj.FileName,
//});
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ImportFile_Create([DataSourceRequest] DataSourceRequest request, ImportFileModel model)
{
if (model != null && ModelState.IsValid)
{
var obj = new ImportFile();
CopyModelToObject(model, obj);
obj.Insert();
}
return Json(new[] { model }.ToDataSourceResult(request, ModelState));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ImportFile_Update([DataSourceRequest] DataSourceRequest request, ImportFileModel model)
{
if (model != null && ModelState.IsValid)
{
var obj = new ImportFile();
CopyModelToObject(model, obj);
//obj.Save();
}
return Json(new[] { model }.ToDataSourceResult(request, ModelState));
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult ImportFile_Destroy([DataSourceRequest] DataSourceRequest request, ImportFileModel model)
{
if (model != null)
{
var obj = new ImportFile();
CopyModelToObject(model, obj);
//obj.Delete();
}
return Json(new[] { model }.ToDataSourceResult(request, ModelState));
}
private void CopyModelToObject(ImportFileModel model, ImportFile obj)
{
obj.InventoryType = model.InventoryType;
obj.FileName = model.FileName;
obj.RecordAddedBy = User.Identity.Name.Substring(User.Identity.Name.IndexOf(@"\") + 1);
}
}

Hi, I need help.

I'm working with asp.net Core 1.0 RC1 and the Telerik UI for ASP.NET MVC Q2 2016 with latest .714 patch

I would like to pass the content of an editor to my controller when clicking on a button without use of a model.

My View

My controller

As you can see I pass parameters using the "asp-route..." razor syntax feature of asp.net core.

But I don't find any way to use the right syntax for passing the content of the editor in the "strValue" parameters of the push button.

Any help will be very appreciated.

Best regards.