or
1 answer
75 views
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.
1 answer
141 views
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>
1 answer
71 views
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?
0 answers
60 views
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?
0 answers
74 views
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)
Zack
Top achievements
Rank 1
Rank 1
updated question
on
09 Jul 2022
1 answer
223 views
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!!
Ivan Danchev
Telerik team
answered
on
29 Nov 2021
0 answers
195 views
Try to use the Drag and Drop to reorder the rows.
I'm stuck in an error that I'm not figuring out.
The error: Uncaught TypeError: Cannot read property 'insert' of undefined
The line: grid.datasource.insert(newIndex, dataItem );
I'm sure the datasource has data, since the "console.log(dataItem)" returns the object model
var Material = new kendo.data.Model.define({
id: "NR_position",
fields: {
NR_position: { type: "number" },
CD_Material: { type: "number" },
NM_Material: { type: "string" }
}
});
var Controller = {
dataSource: {
ListMat: new kendo.data.DataSource({
transport: { read: { url: matList, type: "POST" } },
model: Material,
dataType: "json",
url: "data/person.json"
})
},
init: function () {
var grid = $("#grdMatOrder").kendoGrid({
dataSource: Controller.dataSource.ListMat,
columns: [
{ field: "NR_position", title: "Order" },
{ field: "CD_Material", title: "Code" },
{ field: "NM_Material", title: "Name" }
]
}).data("kendoGrid");
grid.table.kendoSortable({
filter: ">tbody >tr",
hint: function (element) {
var table = $('<tr colspan=4" class="placeholder></ tr>'), hint;
table.append(element.clone());
table.css("opacity", 0.7)
return table;
},
change: function (e) {
var skip = grid.dataSource.skip(),
oldIndex = e.oldIndex + skip,
newIndex = e.newIndex + skip,
data = grid.dataSource.data(),
dataItem = grid.dataSource.getByUid(e.item.data("uid"));
console.log(dataItem)
grid.dataSource.remove(dataItem);
grid.datasource.insert(newIndex, dataItem );
}
});
}
};
$(document).ready(function () {
Controller.init();
});
