I have a grid that includes the Export to Excel functionality.
I retrieve the grid options via getOptions() and store them to local storage so that I may later restore those settings by using setOptions(). The Export to Excel button is not being displayed after I call setOptions() so I'm assuming this is something I need to manually add to the configuration. However, I'm having a hard time coming up with the syntax. How do I do this?
The relevant configuration of the grid looks like this:
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.AllPages(true)
.FileName("Applications.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Application"))
)
Code to populate the grid options looks like this:
var
options = JSON.parse(gridOptions);
// Now that I have the options how do I add the Excel settings I defined on the
// grid above before calling setOptions()?
grid.setOptions(options);
I have a Menu that has 9 root level items and many children
items under each of them.
I have added tooltips to the items, but I do not want
tooltips for the root items to show up at all.
I am loading the text using the ContentHandler and I have
tried setting the text for the root items to "" and also to null. I
have tried just leaving them out of the JavaScript that I use to set the text.
No matter what I have tried, I get an empty tooltip box
showing next to the root item when I first hover over it.
TIA,
Bob Mathis
Hello, I'm getting very strange behavior on my action buttons on a Kendo Window. I'm currently on UI for ASP.NET MVC 2015.2.805, should I upgrade? ( i see UI for ASP.NET MVC Q1 2016 SP1 has Minimize / maximize events listed, any benefit?)
My setup is, a main view which loads a window, which contents are a kendo scheduler. Here is the razor declaration for the window.
@(Html.Kendo().Window()
.Name("shedulerWindow")
.Title("Scheduler Window")
.Content(@<text>@Html.Action("_EvaultBackupSchedulerPopOut", "Dashboard")</text>)
.Draggable()
.Resizable()
.Width(1285)
.Height(545)
.Position(settings => settings
.Top(178)
.Left(495)
)
.Actions(actions => actions
.Minimize()
.Custom("Maximize")
.Custom("close")
)
.Events(ev => ev
.Close("onClose")
)
)
You'll notice i've started over-writing all of the real close and maximize actions with custom ones, simply because they don't work correctly out of the box; ie.Close never consistently fired my onClose method (50% or less). Maximize and restore were not working correctly and still not.
Now what's happening, when I maximize, I get two restore buttons show up which do not actually work correctly either.
Look at my 'restore code' image of how the HTML renders out.
Look at the restore icons to see what shows up.
columns.Bound(p => p.Reason).Title("Reason")
.ClientTemplate("<
textarea
rows
=
'2'
style
=
'text-overflow:ellipsis; display:block; width:99%; height:100%; font-family:Arial; font-size:12px;'
readonly
=
'readonly'
>#= Reason #</
textarea
>");
@model string
@Html.TextAreaFor(m => m, new { rows = 2, cols = 35, wrap = "hard", @readonly = true, style = "text-overflow:ellipsis; display:block; width:99%; height:100%; font-family:Arial; font-size:12px;" })
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);
}