@(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.FirstName).Template(@<
text
>@item.FirstName</
text
>);
columns.Bound(p => p.MiddleName).Template(@<
text
>@item.MiddleName</
text
>);
columns.Bound(p => p.LastName).Template(@<
text
>@item.LastName</
text
>);
columns.Bound(p => p.DateOfBirth).Template(@<
text
>@item.DateOfBirth</
text
>);
})
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
)
In the MVC definition of the grid, I added
.Events(e=>e.Change("gridChange"))
and then in the script,
function gridChange(){
var grid = $("#grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
alert("Data is: "+ selectedItem.toString());
}
Run, click on row? Alert Data is: [Object object]
If I change it to alert("Data is: "+ selectedItem[0]);
Run, click on row? Alert Data is: undefined. There are 5 items in each row array, need to list them out, looking for any examples on how to do this in MVC, thanks!
Brad
Hi, I am trying to display images in the Grid and nothing I try works. The images are stored on a database and I convert them to a base64 string in the model. If I render the image directly on the page using <img src="data:image/png;base64,@Model.First().Screenshot" /> the image shows up so I don't there is a problem with the model. However, in the grid, my client template renders #=Screenshot# as null. Accessing other properties of the model using #=Name#, for example, renders the proper string. What am I doing wrong?
Here is my view
@model List<ApplicationViewModel>
<img src="data:image/png;base64,@Model.First().Screenshot" />
<div class="container-fluid">
@(Html.Kendo().Grid<ApplicationViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Name);
columns.Bound(c => c.Description);
columns.Bound(c => c.Url);
columns.ForeignKey(c => c.Category, (System.Collections.IEnumerable)ViewBag.cats, "ID", "Category");
columns.Bound(f => f.Screenshot).ClientTemplate("#:Screenshot# <img src='data: image/png; base64,#=Screenshot#' />");
columns.Command(cmd => cmd.Edit());
})
.ToolBar(toolbar =>
{
toolbar.Create();
})
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ApplicationTemplate"))
.HtmlAttributes(new { style = "height:90vh; width:100%" })
.Scrollable()
.Sortable()
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("ApplicationRead", "Admin"))
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.ID).Editable(false);
})
.Create(update => update.Action("CreateApplication", "Admin"))
.Update(update => update.Action("UpdateApplication", "Admin"))
.Destroy(update => update.Action("DestroyApplication", "Admin"))
))
</div>
</body>
</html>
Hello,
I'm trying to setup a specific display format for a DatePicker when using DateInput. The following works fine functionally:
@(Html.Kendo().DatePicker()
.Format("yyyy-MM-dd")
.DateInput()
.Name("dpSitOpenDate")
.HtmlAttributes(new { style = "width:90%"})
)
My issue with this is that when DateInput() is active, it displays: "Year-Month-Day" before any date is entered. I would prefer it to show "yyyy-mm-dd" instead, so that users know exactly what format is expected of them before they start typing.
I know that a DateInput control by itself has the possibility to enter custom Messages which I believe would have the effect I want, as explained in the Localization example of this page:
https://docs.telerik.com/kendo-ui/controls/editors/dateinput/overview
Is it possible to setup those messages on the DateInput that is embedded in the DatePicker? The only parameter that can seemingly be passed to .DateInput() is a Boolean, so I'm not sure how I could set those messages during creation, and I'm not sure how I would access the DateInput via script either. I know I can access the DatePicker itself via $("#dpSitOpenDate").data("kendoDatePicker") for example, but not the DateInput within it.
Thank you!
Hi,
I have a Chart with Line and Column Series, programmatically populated from the Sequel server.
My requirement is to custom color the Column series (those bar which appear on the graph per month wise) based on the values of the Line series.
Any column bar whose value is less then the Line series bar to be shown in one color and the values which are more in another color.
Attached is the graph for reference, Thanks in advance for your support in this regards.
In timeline month view, is it possible to navigate a single day, forward and for example see:
- event from 2017-12-02 - 2018.01.02
I have a Kendo Grid (MVC) that has multiple Columns.
I have a use case where if Column 1 is edited, the value of Column 2 may change server-side. I'm not seeing the modified values in the grid though.
My Update API handles all of this and returns the updated row. But with inline editing, it seems that if I update Column 1, the other columns aren't refreshing after the Update is finished. So I (the user) has to manually refresh the Grid in order to see Column 2 correctly modified.
What am I doing wrong?
StackOverflow thread with same question: https://stackoverflow.com/q/47354235/590774
Feel free to answer anywhere.
I have a kendo grid with inline editing enabled. One of the field is a datetime field and it is configured to be non-editable. After a update(or delete) action is triggered, the millisecond part of the value of the field is lost in the controller. Is there anyway to avoid it?
HI
I found there have a problem about Grid.Pageable() and DataSource.PageSize().
If you set Grid.Pageable(false) and Grid becomes unpageable(this is OK)
but DataSource.PageSize(m) setting still applied (Grid still show m records at once, not all records).
I think when Grid.Pageable(false) and Grid should show all records absolutely, RIGHT ?
@(Html.Kendo().Grid(Model.MyList1)
.Name("MyList1Grid")
.Pageable(pageable => pageable.Enabled(false))
...
.DataSource(dataSource =>
{
dataSource.Ajax()
.PageSize(3)
.ServerOperation(false)
.Model(model => model.Id(m => m.UniqueID))
})
...;
*Telerik DevCraft UI for ASP.NET MVC R2 2017 SP1
Best regards
Chris
Hello,
We used Kendo UI Editor in our MVC project and realized that scroll bar display all the time even message is very short. Our client asked us to display scroll bar only when it is necessary. Does anyone has solution for it? Thanks in advance.