I have a grid child template that consists of a data source and several charts referencing that data source. It is a mystery to me how you are supposed to reference the 'data' context in different scenarios.
After much trial and error I got the url and filter value on the data source to resolve successfully.
But with these nothing seems to work...
The 'name' attribute on kendo-datasource just renders literally as 'ds-${data.DeviceId}'
Same with the 'datasource-id' attributes on the charts.
Tried variants on wrapping in @() but am getting nowhere. Very confusing and seems the only documentation is this example:
Integration with Grid in ASP.NET Core Template Component Demo | Telerik UI for ASP.NET Core
<grid-detail-template>
<kendo-datasource name="ds-${data.DeviceId}" type="DataSourceTagHelperType.Ajax" server-filtering="true" is-in-client-template="true">
<transport>
<read url="@Html.Raw("/Devices/Diagnostics/${data.DeviceId}?handler=Read")" type="post" data="forgeryToken" />
</transport>
<filters>
<datasource-filter logic="and">
<filters>
<datasource-filter field="DeviceId" operator="eq" value="@("${data.DeviceId}")"></datasource-filter>
<datasource-filter field="LogDate" operator="gt" value="@DateTime.Today.AddMonths(-1)"></datasource-filter>
</filters>
</datasource-filter>
</filters>
<schema>
<model>
<fields>
<field name="DeviceId" type="number" />
<field name="LogDate" type="date" />
</fields>
</model>
</schema>
</kendo-datasource>
<kendo-chart name="memChart" theme="Bootstrap" datasource-id="ds-${data.DeviceId}">
</kendo-chart>
In the latest release, 23.1.4, a Date time picker with the DateInput option set fails to be initialized with a jQuery error "s is not a constructor".
This occurs in my code and when using the example from the demo pages https://demos.telerik.com/aspnet-core/datepicker/basic-usage
TagHelper:
<kendo-datepicker name="monthpicker" date-input="true" format="MMMM yyyy" value="DateTime.Now" start="CalendarView.Year" depth="CalendarView.Year" name="monthpicker" style="width: 100%" title="monthpicker"> </kendo-datepicker>
HtmlHelper:
@(Html.Kendo().DatePicker() .Name("monthpicker") .Start(CalendarView.Year) .Depth(CalendarView.Year) .Format("MMMM yyyy") .Value("November 2011") .DateInput() .HtmlAttributes(new { style = "width: 100%", title = "monthpicker" }) )
Both of the above fail to be initialized with the same error. JQuery version 3.3.1 is being used in this case.
Gordon
Hi, Recently I started migrating a .Net MVC project with Kendo to .Net Core MVC. Most of the things went smooth but I'm badly stuck on one thing.
Below is my code where I have a Kendo tabstrip that has three tabs. The last two has Html.Partial in their Content which is working fine. The First one has @RenderSection("HomeTab", false) which I can't get to work. Doesn't RenderSection work with .Net Core MVC?
I have tried removing all of my code and tried just adding a test div inside this section but nothing works. If I move the content of my HomeTab section to another view and try Html.Partial it works but RenderSection doesn't. The tabstrip is inside a Layout page and the content of the HomeTab section is in a different view that also have other sections that are rendering completely fine. I'm badly stuck in this and need help please.
section id="main" class="PageSection">
@(Html.Kendo().TabStrip()
.Name("tabstrip")
.Events(events => events
.Select("onTabSelected")
.Activate("onTabActivated")
.ContentLoad("onTabContentLoaded")
.Error("onTabError")
)
.Animation(animation =>
{animation.Enable(false);})
.Items(tabstrip =>
{
if (!ViewBag.isOffline)
{
tabstrip.Add().Text("Home")
.HtmlAttributes(new { id = "hometabid" })
.Selected(true)
.ImageUrl(Url.Content("~/Content/Images/HomeTabIcon.png")).ImageHtmlAttributes(new { id = "hometabimgid" })
.Content(@<text>
@RenderSection("HomeTab", false)
</text>).ContentHtmlAttributes(new { @style = "overflow: auto;" });
}
tabstrip.Add().Text("Lead Search")
.HtmlAttributes(new { id = "LeadSearchtabid" })
.Selected((bool)ViewBag.isOffline).ContentHtmlAttributes(new { @style = "overflow: auto;" })
.ImageUrl(Url.Content("~/Content/Images/search-lead-icon.png")).ImageHtmlAttributes(new { id = "leadsearchtabimgid" })
.Content(@<text>
@Html.Partial("LeadSearching")
</text>);
if (ViewBag.isOffline)
{
tabstrip.Add().Text("VoiceMail")
.HtmlAttributes(new { id = "vmtabid" })
.Selected(false)
.ImageUrl(Url.Content("~/Content/Images/HomeTabIcon.png")).ImageHtmlAttributes(new { id = "hometabimgid" })
.Content(@<text>
@Html.Partial("VoiceMail")
</text>).ContentHtmlAttributes(new { @style = "overflow: auto;" });
}
}))
@RenderBody()
<div id="dvNotification"></div>
</section>
Hello, I've tried to search online and in this forum for this, but I've not found anything useful.
How can the header row for Grids be made resizable?
Currently all our grids have resizable columns, but sometimes texts are very long which make the header very high, for this cases we need that users are able to resize the header vertically.
Thanks in advance
I am using a drop down list in column template inside a grid..I could save sucessfully but when i click on edit the dropdown losses its bind.Can any one help with what i am missing
<kendo-dropdownlist name="Team"
datatextfield="Team"
datavaluefield="TeamID" data-bind="value:Team">
<datasource>
<transport>
<read url="@Url.Action("Teams_Read", "Grid")" />
</transport>
</datasource>
</kendo-dropdownlist>
i chnaged name of the dropdown to the value of what i wante dto bind but it didnt work.
HI
I have a grid with row reorder enabled in bootstrap 4 pop up modal.
I can drag the row but cannot drop the row to another position., It works outside of modal.
Can I know is there anything extra to set or need a hack to allow the dropping of row to reorder them?
My code below:
Note: Datasource is set on document ready script.
<div class="modal fade" id="ServiceDetailModal" role="dialog" aria-labelledby="ServiceDetailModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">This is my grid:
@(Html.Kendo().Grid<Project>()
.Name("ProjectsGrid")
.Columns(columns =>
{
columns.Bound(p => p.ProjectName)
.ClientTemplate("<a href=/Directory/project/${Id} target=_blank>${ProjectName}</a>")
.Width(180);
columns.Bound(p => p.ProjectManager).Width(230)
.ClientTemplate("#=data.ProjectManager?.Name#")
.EditorTemplateName("WorkingEmployee")
.Sortable(s => s.Compare("(a, b) => compareManager(a, b)"));
columns.Bound(p => p.IsActive)
.Width(180)
.ClientTemplate("#: IsActive ? 'Yes' : 'No' #");
})
.ToolBar(toolbar =>
{
toolbar.Save();
toolbar.Search();
})
.Search(s =>
{
s.Field(e => e.IsActive);
s.Field(e => e.ProjectName, "contains");
})
.Sortable()
.Editable(GridEditMode.InCell)
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Field(p => p.ProjectManager).DefaultValue(
ViewData["defaultProjectManager"] as User);
model.Field(p => p.ProjectName).Editable(false);
})
.Read("Projects_Read", "Directory")
.Update("Projects_Update", "Directory")
))
With "s.Field(e => e.ProjectName, "contains");" it throws:
Uncaught TypeError: e.charAt is not a function kendo.all.js:2114
Without this, it runs correctly.
Additional question
Also, I would like to know how to search for value of bool variable. The variable is shown as yes, no words. When I search for no, it should show me records where value is false. How to implement this?
I'm trying to add a RadioGroupFor control to a Toolbar control as a templated item but am getting a JS error related to the generated client template.
Here is the template definition:
<script id="ApproveOrDenyTemplate" type="text/x-kendo-template">
@(Html.Kendo().RadioGroupFor(model => model.ApproveOrDeny)
.Layout(RadioGroupLayout.Horizontal)
.HtmlAttributes(new { style = "display: inline-flex; vertical-align: top;" })
.LabelPosition(RadioGroupLabelPosition.After)
.Items(i =>
{
i.Add().Label("Approve").Value("Approve");
i.Add().Label("Deny").Value("Deny");
})
.Events(e => e.Change("changeApproveOrDeny"))
.ToClientTemplate()
)
</script>
Here is the Toolbar templated item entry:
items.Add() .TemplateId("ApproveOrDenyTemplate") .Hidden(!Model.ShowApprovalRadioGroup);
VM48:1 Uncaught SyntaxError: Unexpected token '<'
kendo.syncReady(function(){jQuery("\#ApproveOrDeny").kendoRadioGroup({"change":changeApproveOrDeny,"items":[{"label":"Approve","value":"Approve"},{"label":"Deny","value":"Deny"}],"value":"Approve","layout":"horizontal","labelPosition":"after"});});<\/script>
I've got a page which contains a dozen tabs, each of which has their own ViewComponent. Each ViewComponent has many datepicker controls.
I have a situation where I need to disable almost all of them, except on one tab, based on the user's role.
What are some ways to do this in one fell swoop, rather than setting .Enable(false) on each individual datepicker in markup?
Bonus: there are some regular old <input type="text">'s on these forms as well. Those are easy enough to disable with JQuery, but JQuery doesn't work on the datepickers, because while the text portion is read-only, the popup button displaying a calendar still works and can change the value of the text box.
Thanks so much for any ideas!
I am using AspNet Core MVC 7
I am trying to create a custom HTML helper outside of a razor view. I am using the IHtmlHelper in this scenario and unfortunately outside of a razor view I cannot do something like this:
var uploader = _helper.Kendo().Upload()
.Name("uploadFiles")
.Multiple(true)
.HtmlAttributes(new { style = "margin: 15px 0 5px 0;" });
Compilation error:
Error CS1061 'IHtmlHelper' does not contain a definition for'Kendo'
and no accessible extension method 'Kendo' accepting a first argument of
type'IHtmlHelper' could be found (are you missing a using directive or an assembly reference?)