I am working with a Kendo grid on my MVC webapp. The grid is bound by data passed to the View. An event currently exists to load another grid when a row is selected/clicked on. I have been tasked with adding a column that contains a checkbox based on a boolean value from the record in the dataset. Until this point, everything is working.
My question is, how can I add an event to whenever the checkbox is checked and unchecked while keeping the event fro when a row is selected? That is, if the user clicks on the row, I still want it to load the other grid based on the selected row, but if the user clicks on the checkbox in the row, I want it call a function to toggle the value and update the database (essentially call function changeFlag). As a test, I put an alert() call in the function which runs when a row is selected, but the function never fires if I check/uncheck the checkbox.
I have some exposure to MVC, but Telerick/Kendo are completely new for me. Any ideas, tips, or guidance would be greatly appreciated.
Hello
I currently have an kendo grid with PDF export functionality, I am trying to add in the facilities to add a line header text to the exported PDF and have tried using both a grid header text box and a javascript alert on button click, however when I try to do this either the application tries to export indefinitely, or the header text is not included. Can anyone suggest where I may be going wrong with this?
View code:
@(Html.Kendo().Grid<Planner.Models.GetTaskList_Result1>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.DateCreated).Title("Date Created").Format("{0:dd/MM/yy}").Width(120);
columns.Bound(p => p.TaskNo).Title("TaskNo").Width(90);
columns.Bound(p => p.TaskDescription).Title("Task").Width(200);
columns.Bound(p => p.PriorityText).Title("Priority").Width(90);
columns.Bound(p => p.AreaText).Title("Area").Width(140);
columns.Bound(p => p.QS1).Title("Quality Statement").Width(150);
columns.Bound(p => p.KA1).Title("KLOE Area 1").Width(150);
columns.Bound(p => p.KC1).Title("KLOE Characteristic 1").Width(200);
columns.Bound(p => p.KA2).Title("KLOE Area 2").Width(150).Hidden(true);
columns.Bound(p => p.KC2).Title("KLOE Characteristic 2").Width(150).Hidden(true);
columns.Bound(p => p.KA3).Title("KLOE Area 3").Width(150).Hidden(true);
columns.Bound(p => p.KC3).Title("KLOE Characteristic 3").Width(150).Hidden(true);
columns.Bound(p => p.KA4).Title("KLOE Area 4").Width(150).Hidden(true);
columns.Bound(p => p.KC4).Title("KLOE Characteristic 4").Width(150).Hidden(true);
columns.Bound(p => p.KA5).Title("KLOE Area 5").Width(150).Hidden(true);
columns.Bound(p => p.KC5).Title("KLOE Characteristic 5").Width(150).Hidden(true);
columns.Bound(p => p.LeadAssigned).Title("Lead Assigned").Width(120);
columns.Bound(p => p.SupportAssigned).Title("Support Assigned").Width(150);
columns.Bound(p => p.DateDue).Title("Date Due").Format("{0:dd/MM/yyyy}").Width(120);
columns.Bound(p => p.StatusText).Title("Status").Width(120);
})
.Resizable(resize => resize.Columns(true))
.Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.Events(events =>
{
events.Change("onChange");
events.PdfExport("GetHeaderText");
})
.Sortable()
.ToolBar(toolBar =>
{
toolBar.Template(
@<Text>
<b class="FloatRight SearchTopMarginExtra">Search by Task Description/Staff: </b>
<input type="search" id="searchbox" class="SearchRight SearchTopMargin" />
<b class="FloatRight">Date From:</b>
<input type="date" id="DateFrom" />
<b class="FloatRight">Date To:</b>
<input type="date" id="DateTo" />
<button id="clearFiltersButton" class="k-button">Clear Filters</button>
||
<a class="k-button k-button-icontext k-grid-pdf" href="\#"><span class="k-icon k-i-pdf"></span>Export to PDF</a>
<b class="float-right">Title on PDF:</b>
<input type="text" id="PDFTitle" />
</Text>);
})
.Pdf(pdf => pdf
.AllPages()
.AvoidLinks()
.PaperSize("A4")
.Scale(0.45)
.Landscape()
.Margin("2cm", "1cm", "1cm", "1cm")
.TemplateId("page-template")
.FileName("Active tasks " + DateTime.Today.ToString("d") + ".pdf")
.ProxyURL(Url.Action("Pdf_Export_Save", "Grid"))
)
.Scrollable(scrollable => scrollable.Enabled(true).Height("600px"))
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.DataSource(datasource => datasource
.Ajax()
.Filter(filters =>
{
filters.Add(f => f.Completed).IsEqualTo(false);
})
.Sort(sort => sort.Add("DateDue").Ascending())
.Model(model => model.Id(p => p.TaskNo))
.Read(read => read.Action("Tasks_Read", "TaskList"))
)
.Pageable(pageable => pageable
.Enabled(false))
.Events(e => e.DataBound("onDataBound"))
)
Relevant javascript and template:
<script type="text/javascript">
$(document).ready(function () {
$("#PDFTitle").keyup(function SetViewData() {
var val = $("#PDFTitle").val();
var text = document.getElementById('customHeaderText');
text.val() = val.val();
})
});
</script>
<script type="x/kendo-template" id="page-template">
<div class="page-template">
<div class="header">
#: customHeader #
@Html.Label("", new { id = "customHeaderText" })
</div>
<div class="footer">
<div style="float: right">Page #: pageNum # of #: totalPages #</div>
</div>
</div>
</script>
<script type="text/javascript">
function GetHeaderText(e) {
var customHeader = prompt('Please enter a title for the PDF');
}
</script>
Hi there!
I would like to customize the header of GanttChart timeline, like
if it is WeekView, "2023/2" in 1st line and "1" , "8" (← it will be the first day of week) in 2nd line or
if it is MonthlyView, "2023/Q1" in 1st line and "2", "3" (← it will be the month number like "2" means Feburay) in 2nd line.
let me know how should I customize to that.
I think that I should use "Views.MonthView.MonthHeaderTemplate" function, but I have no idea how I used it.
I found this API from this following link, but I can't get detail info because it had died.
ASP.NET MVC Gantt - API Reference - Telerik UI for ASP.NET MVC
Could you please share me if there is any link in which explaination for gantt API info, how to use or which parameter should be passed.
I have a grid that has a column that should only be shown if a user selects an option on the view (default is set to hidden).
Is there a standard way to toggle the visibility of a column dynamically via javascript?
Hello everyone,
I have a clientfootertemplate in a subcolumn and I want to show something in my column but when I do this the colspan is 3 instead of 1 so instead of 1 column he takes 3 columns.
Can someone help me with this?
Hi,
When I add .OpenOnClick(true) to my menu and I click on the menu to display the submenu, the page reloads automatically.
Do I need to add another instruction to prevent the page reloading? What's the problem?
Thank's in advance.
Ignacio
I'm using EditorTemple to populate dropdown while in edit mode. I have my editor template in the Views/Shared/EditorTemplates folder.
But when I press the Edit button it does nothing and shows a simple text box instead of a dropdown.
Here's my code of Grid:
@(Html.Kendo().Grid<object>()
.Name("Grid")
.AutoBind(true)
//.Events(ev => ev.Filter("setGridFilters").DataBound("setAutoFitColumn"))
.Columns(columns =>
{
columns.AutoGenerate(true);
columns.Bound("status").Title("Lead Status").Width(100).EditorTemplateName("LeadStatusList")
.Filterable(a=>a.Multi(true).Search(true).BindTo(new[] {
new{
status="None"
},
new{
status="Initial Call Scheduled"
},
new{
status="Working"
},
new{
status="Nurturing"
},
new{
status="Unqualified"
},
new{
status="Qualified"
}
}));
columns.Bound("ownerId").Title("Owner").Width(100).Filterable(a => a.Multi(true).Search(true).DataSource(ds => ds.Custom()
.Type("aspnetmvc-ajax")
.Transport(transport =>
transport.Read(read => read.Action("", "", new { field = "ownerId" }))
)
.Schema(schema => schema
.Data("names")
)));
columns.Bound("eventBookedC").ClientTemplate("<div title='#= title #'>#:getEventStatus(eventBookedC) #</div>").Title("Event Booked").Width(70)
.Filterable(a => a.Multi(true).Search(true).BindTo(new[] {
new{
eventBookedC="Null"
},
new{
eventBookedC="True"
},
new{
eventBookedC="False"
}
}));
columns.Command(command => { command.Edit();}).Width(150);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Filterable()
.Scrollable(sc => sc.Endless(true))
.Groupable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.ToolBar(e =>
{
e.Search();
e.Custom().Text("Create New").HtmlAttributes(new { id = "btnCreateNew", @class = "btn btn-primary" });
})
.Pageable(p => p.Numeric(false).PreviousNext(false).Refresh(true))
.Events(events => events
.Sort("onSorting")
.Filter("onFiltering")
.Group("onGrouping")
.Page("onPaging")
.GroupCollapse("onGroupCollapse")
.GroupExpand("onGroupExpand")
.DataBound("onDataBound")
.ColumnReorder("onColumnReordering")
.Edit("edit")
)
.DataSource(dataSource => dataSource
.Custom()
.Type("aspnetmvc-ajax")
.PageSize(500)
.ServerPaging(true)
.ServerFiltering(true)
.ServerSorting(true)
.ServerGrouping(true)
.Transport(transport =>
{
transport.Read(read => read.Action("", ""));
transport.Update(update => update.Action("", ""));
}
)
.Schema(schema => schema
.Data("data")
.Total("total")
.Model(m=>m.Id("id"))
)
)
)
Here's my editor template -> LeadStatusList.cshtml:
@using Kendo.Mvc.UI
@model AzranHawkins.Models.Lead
@(Html.Kendo().DropDownListFor(x => x.Status)
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "None",
Value = "None"
},
new SelectListItem() {
Text = "Initial Call Scheduled",
Value = "Initial Call Scheduled"
},
new SelectListItem() {
Text = "Working",
Value = "Working"
},
new SelectListItem() {
Text = "Nurturing",
Value = "Nurturing"
},
new SelectListItem() {
Text = "Unqualified",
Value = "Unqualified"
},
new SelectListItem() {
Text = "Qualified",
Value = "Qualified"
}
})
.Value("1")
.HtmlAttributes(new { style = "width: 100%" })
)
I also tried
Html.Kendo().DropDownList().Name("Status") instead of Html.Kendo().DropDownListFor(x => x.Status)
Hi,
?EGood Day,
I am new to kendo ui and we are having an issue due to the upgrade of Jquery (1.x.x->3.6.0). The issue is "Syntax error, unrecognized expression: .field-validation-valid[data-valmsg-for=], .field-validation-error[data-valmsg-for=]" once the validation on the screen fires. Correct me if I am wrong, kendo ui should not be dependent on any Jquery versions. We are also checking if we need to change the validation process instead of using the said kendo validator. We are still hoping that there is still a way to fix this issue.
Below is the kendo version we are currently using.
Kendo Version: 2012.3.1114.340
Platform: ASP.NET MVC
Found the cause _findMessageContainer it is on the kendo.web.js, will just comment this to fix the issue
Hi all,
I started working with Blazor few weeks ago and recently got introduced to Telerik UI for Blazor so I started making a CRUD to learn.
After coding the update function I tested the app and got this error when I tried to update a register:
The instance of entity type 'Familia' cannot be tracked because another instance with the same key value for {'CodiFamilia'} is already being tracked.
To solve that I added "AsNoTracking" to the Entity Framework Core query located in "ReadList", it worked the first time but the app crashed after the second update. Afterwards I implemented an alternative solution which consists on finding the object by its ID and updating every parameter one by one which worked since it's not using the same object.
I'm wondering if there is any way to implement a functional update which resembles the first solution because the second one is pretty bad if there are many parameters to update azarshagle.
Thanks in advance.
Simple question: what NuGet files and namespaces contain the "ToPagedList" methods?
Detail:
New to Telerik, new to these Forums, but thrilled they are here. I have what SHOULD be a simple question...
Web Application written 4 years ago using Telerik ASP.NET MVC (I think) and Telerik Kendo (I think). The 2017 App is running in production, but I need to make changes in the code (new feature stuff). Meanwhile, the guy who wrote it is no longer here - there is no one left who has touched it. Undocumented, of course. And we have moved from Visual Studio 2017 to Visual Studio 2019.
So I am trying to get the application to build pretty much "as is" so I can tinker with it and see how it works, and figure out exactly where I need to make changes. First build had 274 errors, then 64 errors... now down to 1 error in two places in one class; a reference to "ToPagedList" which is a method apparently used to pluck a specified page or pages from a result set for rendering (in a Grid?). Virtually all of that was uninstalling and reinstalling NuGet files because somehow they lost their initialization in the app files. So, plenty of places I could have gone awry.
"ToPagedList" works on a View derivative class; but apparently I am not including the proper Telerik references and libraries to get these two references to "ToPagedList" to resolve. Probably have some class confusion as well (something referencing Microsoft instead of Telerik).
The first of the two errors, other is basically identical in the same class:
Severity Code Description Project File Line Suppression State
Error CS1061 'IQueryable<IncidentDetailView>' does not contain a definition for 'ToPagedList' and no accessible extension method 'ToPagedList' accepting a first argument of type 'IQueryable<IncidentDetailView>' could be found (are you missing a using directive or an assembly reference?) QCWeb D:\QCWeb\QCWeb\Controllers\ReportController.cs 248 Active
Line 248 looks like:
return View(tickets.ToPagedList(pageNumber, pageSize));
where tickets is an instantiation of the "IQueryable<IncidentDetailView>",
and IncidentDetailView is partial class that contains the Entity Framework record field definitions for a database pseudo-table (query results).
If I could figure out which Telerik library that this method is defined in, I can probably work back to get other references properly aligned as well (ever the optimist). I am just not having much luck searching the Telerik documentation for class method lists and descriptions, nor am I having much luck playing library roulette. Any ideas? Thanks!!