I getting increasingly frustrated with the effort required to get Telerik/Kendo products to do anything other than look pretty in useless ineffective demos.
The DatePicker is beyond a joke.
I've been buggered by this all day today.
I've got a Kendo grid in an MVC razor page running in AJAX mode with create and update actions calling a controller.
I've also got click-happy users that want to double-click the "update" button and are causing duplicate calls to the data service. I've tried various things, including disabling the buttons on RequestStart and RequestEnd but a double click continually reposts data.
The following code disables both the update and cancel button. inserting the k-state-disabled class and removing the action class replacing it with a dummy class. When the data request is done the classes are restored.
Is there a better solution than this:
.DataSource(ds=>ds
.Ajax()
//Brevity
.Events(events => events.Error("onValidationError"))
.Events(events => events.RequestStart("prs_RequestStart"))
.Events(events => events.RequestEnd("prs_RequestEnd"))
.Read(read => read.Action("ReadCreateProductVMs", "API", new { id = Model.Id }))
.Create(create => create.Action("CreateProductVM", "API"))
.Update(update => update.Action("UpdateProductVM", "API"))
))
<
script
>
function prs_RequestStart(e) {
var grid = $("#Grid");
grid.find(".k-grid-update").addClass("k-state-disabled").addClass("qmims-noUpdate").removeClass(".k-grid-update");
grid.find(".k-grid-cancel").addClass("k-state-disabled").addClass("qmims-noCancel").removeClass(".k-grid-cancel");
}
function prs_RequestEnd(e) {
var grid = $("Grid");
grid.find(".k-grid-noUpdate").removeClass("k-state-disabled").removeClass("qmims-noUpdate").addClass("k-grid-update");
grid.find(".k-grid-noCancel").removeClass("k-state-disabled").removeClass("qmims-noCancel").addClass("k-grid-cancel");
}
</
script
>
Hello, I'm trying to create a date range picker for a column in a kendo grid that will also use the datepicker UI. Running into a lot of issues here.
I have a JSON file that I am using as a datasource. I'm converting each date string into a date object.
Sorting seems to work on this column, but I'm having issues with any kind of gte/lte operators, they don't seem to work at all.
This is the config I have for the specific column, I'm not very familiar with Kendo and haven't found a forum that uses Kendo grid with pure javascript that utilizes a date range picker on just one column. Any help would be much appreciated, thanks!
{
field: '["Status Date"]',
title: "Status Date",
type: "date",
format: "{0: MM/dd/yyyy}",
filterable: {
operators: {
string: {
lt: "Is before",
gt: "Is after"
}
},
ui: function(element) {
element.kendoDatePicker({
format: "{0: MM/dd/yyyy}",
});
},
extra: true,
messages: {
"info": "Show items between dates:"
}
}
}
hi,
i can get the group footer to show, but the total client footer. below is the code. any ideas? thanks.
@(Html.Kendo().Grid<ClientReporting.ViewModels.Reports.VolumeViewModel>
()
.Name("ReportGrid")
.Columns(columns =>
{
columns.Bound(o => o.Firm).Width(130).Locked(true);
columns.Bound(o => o.Collat).Width(70);
columns.Bound(o => o.UserName).Width(100).Title("User");
columns.Bound(o => o.Product).Title("Product Type").Width(110);
columns.Bound(o => o.Symbol).Title("Symbol").Width(100);
columns.Bound(o => o.Volume).Title("Amount (USD)").Width(150).Format("{0:n0}")
.ClientGroupFooterTemplate("Sub-total: #= kendo.toString(sum, \"n2\")#")
.ClientFooterTemplate("Period Total: #= kendo.toString(sum, \"n2\")#");
})
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("RevenueReport.xlsx")
.Filterable(true)
.AllPages(true)
.ProxyURL(Url.Action("ExcelExportSave", "ReportGrid"))
)
.Sortable()
.AllowCopy(true)
.ColumnMenu()
.Groupable(group => group.ShowFooter(true))
.Resizable(resize => resize.Columns(true))
.Scrollable(scrollable => scrollable.Virtual(true))
.Scrollable(s => s.Height("500px"))
.Filterable(filterable => filterable
.Extra(true)
.Operators(operators => operators
.ForNumber(n => n.Clear()
.IsEqualTo("Is Equal To")
.IsGreaterThan("Is Greater Than")
.IsGreaterThanOrEqualTo("Is Greater Than Or Equalt To")
.IsLessThan("Is Less Than")
.IsLessThanOrEqualTo("Is Less Than Or Equal To")
)
.ForDate(d => d.Clear()
.IsEqualTo("Is Equal To")
.IsGreaterThan("Is Greater Than")
.IsGreaterThanOrEqualTo("Is Greater Than Or Equal To")
.IsLessThan("Is Less Than")
.IsLessThanOrEqualTo("Is Less Than Or Equal To"))
)
)
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Row)
)
.AutoBind(false)
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Model(model =>
{
model.Id(p => p.Firm);
model.Field(p => p.Collat).Editable(false);
model.Field(p => p.UserName).Editable(false);
model.Field(p => p.Product).Editable(false);
model.Field(p => p.Symbol).Editable(false);
model.Field(p => p.Volume).Editable(false);
})
.Read(read => read.Action("Volume", "ReportGrid")
.Data("GetGridData"))
.Group(groups =>
{
groups.Add(model => model.Firm);
groups.Add(model => model.Collat);
groups.Add(model => model.UserName);
groups.Add(model => model.Product);
groups.Add(model => model.Symbol);
})
.Aggregates(aggregates =>
{
aggregates.Add(model => model.Volume).Sum();
})
.Events(events => events.Error("onError").Change("onChange"))
))
Is there any plugin or provision for End user can build a query and generate a Chart.
Example: My application have a list of master items, i can select master item and make a project. Consider i have 20 master items in which 5 projects are InProgress, 5 are Completed projects and 10 items Not started a Project yet. Based on this i want to draw a pie chart or a bar chart.
I have a grid (EditPersonnelRolesGrid) with a column holding a dropdownlist for a training role. For each row on this list the dropdownlist will hold different values.
I use an EditorTemplate (GridPersonnelRoles) to render the dropdownlist. The dropdown list has a Datasource.Read() where it passes the training exercise id to the controller which then passes back the relevant select list of training roles. The exercise id is stored as a column on EditPersonnelRolesGrid. A JavaScript function (getParentId) tries to get this information from the grid row. This code was adapted from other threads regarding the same problem. However this javascript function always returns the first row of grid values regardless of what row is selected. I would appreciate any help.
EditPersonnelRoles.cshtml:
@model IEnumerable<PersonnelRoleEditorModel>
@using Mallon.IReport.Models
@Html.Hidden(
"ID"
, (object)ViewBag.DrillReport)
@Html.Hidden(
"exID"
, (object)ViewBag.ExerciseID)
@Html.Hidden(
"TrainingEventID"
, (object)ViewBag.TrainingEventID)
@Html.Hidden(
"personID"
, (object)ViewBag.PersonID)
<table style=
"width:100%"
>
<tr>
<td>
<div class=
"list rounded"
>
@(Html.Kendo().Grid<PersonnelRoleEditorModel>()
.Name(
"EditPersonnelRolesGrid"
)
.Editable(editable => editable.Mode(GridEditMode.InLine).Enabled(
true
))
.AutoBind(
true
)
.Columns(columns =>
{
columns.Bound(r => r.PersonnelId).Hidden();
columns.Bound(r => r.ExerciseAllocationId).Hidden();
columns.Bound(r => r.ExerciseName).Title(
"Exercise"
);
columns.ForeignKey(r => r.RoleOid, (System.Collections.IEnumerable)ViewBag.Roles,
"Value"
,
"Text"
)
.EditorTemplateName(
"GridPersonnelRoles"
)
.Title(
"Exercise"
)
.Width(200);
columns.Command(command => { command.Edit(); }).Width(172);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.PersonnelId);
model.Field(p => p.ExerciseName).Editable(
false
);
})
.Events(e =>
{
e.Error(
"handleAjaxError"
);
})
.Update(update => update.Action(
"UpdateExerciseRoles"
,
"DrillAttendance"
))
.Read(read => read.Action(
"ReadPersonnelRoles"
,
"DrillAttendance"
).Data(
"getPersonnelRolesValues"
))
))
</div>
</td>
</tr>
</table>
GridPersonnelRoles.cshtml:
@model object
@(Html.Kendo().DropDownListFor(m => m)
.DataValueField(
"Value"
)
.DataTextField(
"Text"
)
.DataSource(ds => ds.Read(read => read.Action(
"GetDropDownRolesList"
,
"DrillAttendance"
).Data(
"getParentId"
)))
)
Javascript:
function
getParentId() {
var
target = $(event.currentTarget);
var
row = $(target).closest(
"tr"
);
var
grid = $(target).closest(
"[data-role=grid]"
).data(
"kendoGrid"
);
var
dataItem = grid.dataItem(row);
return
{ exerciseId: dataItem.ExerciseAllocationId };
}
Controller code:
public JsonResult GetDropDownRolesList(string exerciseId)
{
ExerciseAllocation ea = DbSession.Get<ExerciseAllocation>(
new
Guid(exerciseId));
SelectList Roles = SelectListHelper.TrainingEventRoles(DbSession, ea.Exercise, ea.Role);
return
Json(Roles, JsonRequestBehavior.AllowGet);
}
Trying to figure out how to select all items in a multiselect after reading the data.
@(Html.Kendo().MultiSelect()
.Name("Benchmarks")
.DataValueField("ID")
.DataTextField("BenchmarkName")
.Events(e => e.DataBound("selectAllBenchmarks"))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetBenchmarksForPeriodOfEntry", "Reporting")
.Data("filterPeriodOfEntry");
});
})
.AutoClose(true)
.HtmlAttributes(new { style = "width: 240px" })
)
my "selectAllBenchmark" function fires but then I don't know how to loop through the datasource and select each item in the datasource.
Hey all...
I'm trying to figure out something that's either probably pathetically simple and is for some reason just eluding me or it's not possible and I've pulled all this hair out for nothing...
I know that when you just add the .Filterable property onto a column it adds the nifty little filter onto it that's pretty awesome out of box. The one small over-site IMHO is that it is not a distinct list and is not sorted. I haven't seen any options to enable these sort of things...and I've been reading posts from others looking for this sort of functionality...and they've been told it's not there yet.
So what I want to do is to pass the Grid's DataSource into a controller action as an argument using the .Data off the .Read in the .Filterable's .DataSource...then inside that controller action I'd use a Linq query to return a sorted distinct list.
The reason I want to do that is I want to avoid having to make another call across the wire to get all those record when I already had them in the grid...it should be more performant IMHO. :)
So is this possible and I'm just missing it? I'm using Razor so I'd appreciate any examples to be in that format, but I'll take any help in any format I can get. :)
Hello,
Can you use the detail template to display a partial view thats loaded by ajax ?
I currently have a div outside of the grid that is loaded when you click a line in the grid , but it would be smarter if it just opened up a detail and displayed the partial view there in.
Any ideas on how to do that ?
Regards,
Emil