I have a table, that I need to freeze the header.
Is there a option to freeze the header, without set Scrollable?
When I set the Scrollable, the header begin freeze. But, after this, when I group any column, the width of the rows change.
I have a common auto complete control that I use on two different pages. The AutoComplete control is populated with the same data set as a Kendo Grid on the page. Both pages have filters by which users can filter the data in the Kendo Grid (using built in Kendo Filter functionality). We don't want superfluous results to show up in the AutoComplete therefore we reset the AutoComplete dataset to match the newly filtered dataset of the Kendo Grid. To accomplish this we use the .setDataSource method of the AutoComplete control (see code below). The AutoComplete control works well within page A after the new data source is set. However, the AutoComplete does not work within Page B. When a user types in criteria into the AutoComplete in Page B the popup never shows, not even to say "NO DATA FOUND". No error is shown within the Browser Developer tools either. When I interrogate the control I see that the data set is in fact applied correctly. I see the correct number of items. In fact after typing in some value to the AutoComplete control on Page B when I interrogate the dataSource I see that the view property of the dataSource is populated with the correct filtered items (i.e. if I type in "asse" into the AutoComplete then I see only two items in the view with "Asset" in their name). However, the pop up still doesn't show up. When I interrogate the popup I see nothing in its view. It seems like the pop up is just lying dead in the water for Page B. I have tried many things to figure out why. Does anyone have a suggestion for something to look into?
//prepare Kendo Filters for Kendo Grid
var siteFilters = buildSiteMenuFilters(result.data);
//apply Kendo Filters to Kendo Grid
menuGridDataSource = $("#MenuGrid").data("kendoGrid").dataSource;
menuGridDataSource.filter(siteFilters);
//get filtered dataset from Kendo Grid
var allData = menuGridDataSource.data();
var query = new kendo.data.Query(allData);
//create variable to store filtered results
saveMenu = [];
//convert filtered dataset from Kendo Grid into an array of objects that match the AutoComplete control Instantiation
filteredList = query.filter(siteFilters).data;
filteredListLength = filteredList.length;
for (var i = 0; i < filteredListLength; i++) {
saveMenu.push({ Id: filteredList[i].Id, Name: filteredList[i].Name, LongName: filteredList [i].LongName, uid: filteredList[i].LongName })
}
//set the AutoComplete control data source to match the new filtered list
var menuSearchAutoComplete = $("#menuSearch").data("kendoAutoComplete");
menuSearchAutoComplete.setDataSource(removeHtmlTags(saveMenu));
Hi I would like to develop a user management screen using Telerik grid having one drop down column from which user can able select the role. But when user selecting any role from dropdown its not getting bind in backend. Please find attached code below.
Role.cshtml (Its under ..\Views\Shared\EditorTemplates)
@model IT_GRCData_Service.ViewModel.RoleOptionViewModel
@(Html.Kendo().DropDownList().Name("roleOption")
.DataTextField("PortalRoleName")
.DataValueField("PortalRoleId")
.DataSource(d => d
.Read(r => r.Action("Index", "Role"))
)
.ValuePrimitive(true)
.AutoBind(true)
)
RoleControler.cs
public class RoleController : Controller
{
private GRCPortalEntities db = new GRCPortalEntities();
public JsonResult Index()
{
var roleOption = db.PORTAL_ROLE.Select(s => new RoleOptionViewModel
{
PortalRoleId = s.PORTAL_ROLE_ID,
PortalId = s.PORTAL_ID,
PortalRoleName = s.PORTAL_ROLE_NAME,
PortalRoleDescription = s.PORTAL_ROLE_DESCRIPTION,
IsActive = s.IS_ACTIVE
});
roleOption = roleOption.Where(r => r.IsActive);
return this.Json(roleOption, JsonRequestBehavior.AllowGet);
}
}
RoleOptionViewModel.cs
public class RoleOptionViewModel
{
public int PortalRoleId { get; set; }
public int PortalId { get; set; }
public string PortalRoleName { get; set; }
public string PortalRoleDescription { get; set; }
public bool IsActive { get; set; }
}
Above are used for dropdown template..
Below are used for grid design..
UseManagementViewModel.cs
public class UserManagementViewModel
{
public string Guid { get; set; }
public string UserName { get; set; }
public string PwCPreferredEmail { get; set; }
public int PortalUserId { get; set; }
public bool IsActive { get; set; }
[UIHint("Role")]
public RoleOptionViewModel RoleOptionViewModelProperty { get; set; }
}
UserManagement\Index.cshtml
@using IT_GRCData_Service.ViewModel;
@{
ViewBag.Title = "User Management";
}
<div class="panel panel-danger">
<div class="panel-heading">
<div class="panel-title" style="font-size: 14px; ">
<b style="padding-right:50px">User Management</b>
</div>
<div style="float:right; font-size: 85%; position: relative; top:-10px">help?</div>
</div>
<div class="panel-body">
@(Html.Kendo().Grid<UserManagementViewModel>()
.Name("gridUserManagement")
.Columns(columns =>
{
columns.Bound(c => c.UserName).Title("User Name");
columns.Bound(c => c.PwCPreferredEmail).Title("Preferred Mail");
columns.Bound(c => c.Guid).Title("User Guid");
columns.Bound(c => c.RoleOptionViewModelProperty).ClientTemplate("#: RoleOptionViewModelProperty.PortalRoleName #").Title("Role");
columns.Bound(c => c.IsActive).Title("Is Active").ClientTemplate("<input type='checkbox' #= IsActive ? checked='checked' :'' # />");
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.ToolBar(t => t.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model =>
{
model.Id(p => p.PortalUserId);
model.Field(p => p.UserName).Editable(false);
model.Field(p => p.Guid).Editable(false);
model.Field(p => p.PwCPreferredEmail).Editable(false);
//model.Field(p => p.RoleOptionViewModelProperty).Editable(true);
model.Field(p => p.RoleOptionViewModelProperty).DefaultValue(ViewData["roleOption"] as IT_GRCData_Service.ViewModel.RoleOptionViewModel);
})
.PageSize(20)
.Create(update => update.Action("EditingPopup_Create", "Scoring"))
.Read(read => read.Action("User_Read", "UserManagement"))
.Update(update => update.Action("User_Update", "UserManagement"))
.Destroy(update => update.Action("EditingPopup_Destroy", "Scoring"))
)
)
</div>
<script type="text/javascript">
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);
}
}
</script>
UserManagementController .cs
public class UserManagementController : Controller
{
private GRCPortalEntities db = new GRCPortalEntities();
// GET: UserManagement
public ActionResult Index()
{
ViewData["roleOption"] = db.PORTAL_ROLE.Select(s => new RoleOptionViewModel
{
PortalRoleId = s.PORTAL_ROLE_ID,
PortalId = s.PORTAL_ID,
PortalRoleName = s.PORTAL_ROLE_NAME,
PortalRoleDescription = s.PORTAL_ROLE_DESCRIPTION,
IsActive = s.IS_ACTIVE
}).First();
return View();
}
public ActionResult Editing_Popup()
{
return View();
}
public ActionResult User_Read([DataSourceRequest] DataSourceRequest request)
{
try
{
var userListQuery = db.PORTAL_USER.AsQueryable();
userListQuery = userListQuery.Where(s => s.PORTAL_USER_ROLE.PORTAL_ROLE_ID > 0);
var userList = userListQuery.Select(p => new UserManagementViewModel
{
UserName = p.UNIQUE_NAME,
Guid = p.USER_GUID,
PwCPreferredEmail = p.PWC_PREFERRED_EMAIL,
IsActive = p.IS_ACTIVE,
PortalUserId = p.PORTAL_USER_ID,
RoleOptionViewModelProperty = new RoleOptionViewModel
{
PortalRoleId = p.PORTAL_USER_ROLE.PORTAL_ROLE.PORTAL_ROLE_ID,
PortalId = p.PORTAL_USER_ROLE.PORTAL_ROLE.PORTAL_ID,
PortalRoleName = p.PORTAL_USER_ROLE.PORTAL_ROLE.PORTAL_ROLE_NAME,
PortalRoleDescription = p.PORTAL_USER_ROLE.PORTAL_ROLE.PORTAL_ROLE_DESCRIPTION,
IsActive = p.PORTAL_USER_ROLE.PORTAL_ROLE.IS_ACTIVE
}
});
var userListResult = userList.ToDataSourceResult(request);
return Json(userListResult);
}
catch (Exception ex)
{
return Json(ex.Message);
}
}
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult User_Update([DataSourceRequest] DataSourceRequest request, UserManagementViewModel userObj)
{
if (userObj != null && ModelState.IsValid)
{
userObj.RoleOptionViewModelProperty //Data not binding with dropdown selection change
}
return Json(new[] { userObj }.ToDataSourceResult(request, ModelState));
}
}
In User_Update dropdown selection change not bunding with old data. Its holding with new data
No errors but the chart is not showing. The model has two "series" that are IEnumerable of objects that have properties for category, value and color. The model is filled properly and if I don't try to use Ajax via DataSource / action and just load the object and set the Series it works fine. Meaning I load an object <FlowsInOutChartData> inout in the top of a Razor page and then set the series via .Series(series => ... series.Donut(inout.InFlows) .Name("In Flows") etc. chart works fine. Want to load via Ajax so the page comes back immediately (the chart takes a few seconds to load due to database calculation delay).
I think the problem is in the series func<>
series.Donut(d => d.InFlows, null)
.Name("In Flows");
But not sure what I'm doing wrong.
@(Html.Kendo().Chart<WAPDBBusiness.Charts.FlowsInOutChartData>() .Name("chart") .ChartArea(chartArea => chartArea .Background("transparent")) .Title(title => title .Text("Cash Flows") .Position(ChartTitlePosition.Bottom) ) .Legend(legend => legend .Visible(false) ) .SeriesDefaults(series => series.Donut().StartAngle(150) ) .DataSource(dataSource => dataSource .Read(read => read.Action("CashInOutChartData", "PracticeAnalytics")) //Specify the action method and controller names. ) .Series(series => { series.Donut(d => d.InFlows, null) .Name("In Flows"); }) .Series(series => { series.Donut(d => d.OutFlows, null) .Name("Out Flows"); }) )
Controller:
public ActionResult CashInOutChartData() { var data = new WAPDBBusiness.Charts.CashFlowsInOutChart().GetFirmAnalyticsFlowsByQuarter(loginInfo.FirmID, 1, loginInfo.FirmID, true);
return Json(data, JsonRequestBehavior.AllowGet); }
Model:
public class FlowsInOutChartData { public IEnumerable<FlowInOutChartItem> InFlows { get; set; } public IEnumerable<FlowInOutChartItem> OutFlows { get; set; } } public class FlowInOutChartItem { public int? myYear { get; set; } public int? myQtr { get; set; } public decimal Total { get; set; } public decimal PercentOfTotal { get; set; } /// <summary> /// Used by Telerik Donut Chart /// </summary> public string category { get { return "Q" + myQtr.ToString() + " " + myYear.ToString(); } } /// <summary> /// Used by Telerik Donut Chart /// </summary> public decimal value { get { return PercentOfTotal; } } /// <summary> /// Used by Telerik Donut Chart /// </summary> public string color { get; set; } }
I need to customize only some tooltips not all the tooltips. Can this be done? (For instance change the background color of some tooltips)
I tried to add HtmlAttributes but they are ignored.
I tried to use a div for the content but the telerik is adding a padding to the tooltip content and instead of having an uniform background color I get a big border and a background in a different color.
I also tried to set a negativ margin to my div but the padding is done not to the parent but the parent of the parent of the content
I do not want to modify all the tooltips (Setting the padding to 0 it would mean that I have to add all the other tooltips in a div where I set padding back).

Hallo everyone,
I'm trying to connect my Test_DataBase To the Scheduler so i did everything what Vladimir IIiev in the Clip did
https://www.telerik.com/forums/simple-working-example-of-scheduler-fetching-information-from-sql#_2OZsTOj7EaZuGz0GQ0UhQ
but this is an old version of telerik
So actually i can't do anything READING CREATING UPDATING AND DELETING ! No CRUD operation working completely right for me
so can you please show me in a new clip if it is possible ..
OR A NEW BASIC EXAMPLE FOR A C#.NET MVC SCHEDULER CONNECTION WITH A DATABASE READING CREATING UPDATING AND DELETING
i need to know if i should buy this tool or not !


Hi,
I have added a Search Panel for the grid. But when I click on the input text, it causes the postback. I haven't entered anything yet and merely placing cursor causes the postback. Here is the snippet.
Appreciated your help!
@(Html.Kendo().Grid<AAMVA.Website.OnlineMemberDirectory.Models.MemberViewModel>() .Name("grid") .Columns(columns => { columns.Bound(p => p.Name).Width("12%").ClientTemplate("<span class='content'>#=Name#</span>").Filterable(false); columns.Bound(p => p.Organization).ClientTemplate("<span class='content'>#=Organization#</span>").Filterable(false); columns.Bound(p => p.EmailAddress).Width("19%").ClientTemplate("<span class='content'>#=EmailAddress#</span>").Filterable(false); }) .Filterable() .Pageable(pageable => pageable .Refresh(true) .PageSizes(true) .ButtonCount(5)) .Sortable() .Scrollable() .ToolBar(t => t.Search()) .HtmlAttributes(new { style = "height:700px;" }) .NoRecords("No Members to display") .DataSource(dataSource => dataSource .Ajax() //.ServerOperation(false) // Paging, sorting, filtering, and grouping will be done client-side. .PageSize(10) .Read(read => read.Action("People", "Search")) ) .Events(e => e .DataBound("onDataBound") ) )function onDataBound() { var filter = this.dataSource.filter(); var highlightedItems = $('.highlighted'); highlightedItems.each(function () { var span = this; var text = span.textContent; span.parentNode.replaceChild(document.createTextNode(text), span); }); if (filter && filter.filters.length) { var values = []; iterateFilters(filter, values); highlight(values) }} function iterateFilters(expression, collection) { if (expression.filters) { $.each(expression.filters, function (_, filter) { iterateFilters(filter, collection); if (filter.value) { collection.push(filter.value) } }); } }function highlight(values) { $('#grid td .content').each(function () { var originalValue = $(this).text(); var lowerValue = originalValue.toLocaleLowerCase(); // values = values.map(x => x.toLocaleLowerCase()); values = values.map(function (x) { return x.toLocaleLowerCase(); }); var flag = false; var newValues = []; values.forEach(function (x) { //if (lowerValue.includes(x)) { if(lowerValue.indexOf(x) > -1) { flag = true; newValues.push(x) } }) newValues; if (flag) { //var indexes = newValues.map(x => lowerValue.indexOf(x)); var indexes = newValues.map(function (x) { return lowerValue.indexOf(x); }); //var lengths = newValues.map(x => x.length); var lengths = newValues.map(function (x) { return x.length; }); var substring = "("; indexes.forEach(function (x, i) { substring += originalValue.substring(x, x + lengths[i]); if (i != lengths.length - 1) { substring += "|"; } }); substring += ")" var re = new RegExp(substring, 'g'); var newValue = $(this).text().replace(re, function (x) { return "<span class='highlighted'>" + x + "</span>" }); $(this).html(newValue) } })}