Hey guys,
I already found other forum threads about grids tied to a dictionary. Unfortunately all the cases are very complicated (for me), so that I have to create a new thread with a really basic case to understand.
https://www.telerik.com/forums/dictionary-keys-binding
So I have a view without a model containing a grid like this:
@(Html.Kendo().Grid<Dictionary<string, int>>()
.Name("gridStatus")
.Columns(columns =>
{
columns.Template(c => c.Keys.ElementAt(0).Title("Name"));
columns.Template(c => c.Values.ElementAt(0).Title("Count"));
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("RetrieveData", "Settings"))
)
)
With this code I already can fill my grid with "data". But the rows of my grid are empty till now. But when I expect 3 datasets in my dictionary, I have 3 rows in my grid. So I think, that I'm near the solution. I think the columns.Template() functionality isn't implemented correctly. Do I have to create somethink like a template.cshtml to actually use a template? Or can I implement the "template" inline?
Can anyone help me?
Hello, I am using the Telerik Kendo UI MVC Gantt control and want to display multiple tasks on one row.
As far as I know, this is not supported in Gantt control without doing some hacking in css and javascript.
What I am currently trying out is to use UnderScore.Js to group my data and then adjust the vertical
displacement by setting the css top property. I am loading multiple tasks for each employee into the Gantt and
I want to get these tasks on one line. In addition, I have to hide the rows that then will not show any data anymore.
My business requirement is to make the Gantt display more compact.
I am hooking into the OnDataBound client-side event of Gantt control and the code below contains commented code
to try to patch the Gantt view. Problem now is that the adjustment does not look good aligned. The data is not aligned well,
trying to hide the rows in the Gantt control does not help. In addition, the code is way to slow as the jQuery code is far too slow.
I got about 4-500 rows in my Gantt control. The javascript code below contains the commented code where I have tried to adjust
the Gantt control to support Multiple tasks on a row.
Is there any elegant and easy way to do this?
function onDataBound() {
//debugger;
var gantt = this;
// var ganttasks = [];
// gantt.element.find(".k-task").each(function (e) {
// //debugger;
// var taskuid = $(this).attr("data-uid");
// var dataItem = gantt.dataSource.getByUid(taskuid);
// ganttasks.push({ uid: taskuid, ganttask: dataItem });
// });
////underscore js used below
// var that = this;
// var gantt = that;
var ganttdatasource = $("#gantt").data('kendoGantt').dataSource.data();
_.chain(ganttdatasource).sortBy('EmployeeName').groupBy('PrsPersonId').sortBy('start').each(function (g) {
var gindxgantt = 0;
var isBigona = false;
_.each(g, function (gi) {
if (gi.PrsPersonId === 9050) {
//debugger;
isBigona = true;
}
//debugger;
if (_.first(g).uid === gi.uid) {
//this is the first row in the group, start a runner indexing variable
}
if (_.first(g).uid !== gi.uid) {
//This is not the first item, hide the row itself and move task in the gantt up a given set of pixels
//debugger;
//var ganttselector = "div[data-uid=" + gi.uid + "]:first";
//$("[data-uid=" + gi.uid + "][class != k-task]").parent().parent().css("display", "block");
//$("[data-uid=" + gi.uid + "][class != k-task]").parent().parent().css("height", "1px");
//$("[data-uid=" + gi.uid + "][class != k-task]").parent().parent().first().css("background", "yellow");
//$("[data-uid=" + gi.uid + "][class != k-task]").parent().parent().css("padding", "0px");
//$("[data-uid=" + gi.uid + "][class != k-task]").parent().parent().css("margin", "0px");
//var ganttverticaldisplacement = (-32 * gindxgantt) + "px";
//$(ganttselector).css("top", ganttverticaldisplacement);
//if (isBigona) {
// $(ganttselector).css("background-color", "red");
//}
//var ganttrowselector = "tr[data-uid=" + gi.uid + "]";
//if (gindxgantt >= 1) {
// $(ganttrowselector).remove();
//}
}
gindxgantt++;
});
});
}
@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.ProductId).Groupable(false);
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
columns.Bound(p => p.Quantity);
columns.Bound(p => p.Tax);
columns.Bound(p => p.Total).ClientTemplate("#= calculate() #");
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Editable(e=>e.Mode(GridEditMode.InCell))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Products_Read", "Product"))
.PageSize(20)
.Model(model =>
{
model.Id(p => p.ProductId);
model.Field(p => p.ProductName);
model.Field(p => p.UnitPrice);
model.Field(p => p.Quantity);
model.Field(p => p.Tax);
})
))
<
script
type
=
"text/javascript"
>
function calculate(e) {
var result = p.UnitPrice * p.Quantity * p.Tax;
return result;
}
</
script
>
Hello,
How can I check availability from a date on server-side ?
thank you .Manu
Question:
Page A , i'm using kendo grid with hashtag for display output then i use ajax to acquire data from another page which also kendo grid too then load data into kendo window inside Page A, but I stuck with invalid template due to another page also use hash characters to display value too, and if i use escape hash then i can't get value from it , what should i do ?
Hello There,
I have a resource in my Scheduler and there is the option DataColorField where I can give every Option in the list a specific color.
I'm trying to do the same but with a DropDownListFor in my CustomEditorTemplate.
Thanks in Advance . .
Hello,
When the grid is in edit mode, pressing the ENTER key cancels the edit mode. Each row has several columns of text fields and the upload button (Kendo upload control) is on the last column.
With the Navigatable option, I can tab on each column to edit the text and when I tab into the upload button column and hit enter to upload files, the edit mode is gone and no pop-up window to select files. This behavior is the same with text fields; if I hit the enter key, the fields are closed (not open for edit).
How do I fix this? It's the grid that doesn't allow the upload control to use the enter key to launch it. Only the mouse CLICK can launch the upload button but I need the upload button to work with the enter key as well.
Below are the options of the grid:
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.Events(e => e.FilterMenuInit("filterMenuInit")) <== I tried this but not working
.Navigatable()
function filterMenuInit(e) {
if (e.field == "PdfFileUpd") { <== I used the browser debugging tool and found this the ID of upload button
e.container.find("input").keydown(function (e) {
if (e.keyCode === 13) {
$(this).focus().trigger('click');
}
});
}
}
Below is the columns in the Grid for the upload option:
columns.Bound(p => p.PdfFileUrl).EditorTemplateName("PdfFileUrl").Title("My File").ClientTemplate("Upload").Sortable(false).Filterable(false);
Other than that, the grid works fine. Does anyone know how I can make the Enter key to work normally in edit mode?
Thank you.
I have a Grid and was wondering if there is a way to use the standard CRUD screens from the MVC application. The reason for this is I have the screens and I like using them as I have them already. I wanted to use inline editing but I never could get a way to get the drop down list to show up correctly. If not, is there an easy way to being up an Edit and Create Screen? I just want an easy way edit (and also create) a record.
Thanks for any help.
Hello,
I currently have an ASP.NET MVC application that is primarily composed of a hierarchical grid and custom edit templates. I want to display a simple error page to indicate a failed database operation to the user.
I tried a standard approach adding the following to the Web.Config file:
<customErrors mode="On"></customErrors>
I also added the following attribute at the beginning of my controller classes:
[HandleError(ExceptionType = typeof(DbUpdateException), View = "Error")]
The error page, Error.cshtml is located in the Views/Shared directory of the application.
I cannot get this to work. I can't even view the error page in the browser. I get a 404 error when I right click on the file and select view in browser.
Are there any general error handling guidelines for Telerik UI for ASP.NET MVC? I looked, but couldn't find anything fairly recent. If any such guidelines / documentation exists, where would I find it?
Thanks