Telerik Forums
UI for ASP.NET MVC Forum
7 answers
3.0K+ views
Hi,
I'm very new to Kendo and inthis case, ASP.NET so your help would be appreciated.  I'm creating a web page using ASP.NET MVC4 with an entity framework over a SQL DB to create my Views and Controllers.

I've created a view that uses a Kendo grid thus:

@(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()
    )

This works really well but I would like to add another column that isn't bound to data so that I can insert some buttons for editing, deleting etc.  Ideally I'd like to show a link called 'Edit' that takes the user to another page for editing.

Many Thanks for your help!
Stefan
Telerik team
 answered on 01 Dec 2017
1 answer
344 views

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

Konstantin Dikov
Telerik team
 answered on 01 Dec 2017
2 answers
4.0K+ views

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>

Tomasz
Top achievements
Rank 1
 answered on 30 Nov 2017
2 answers
678 views

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!

Luc
Top achievements
Rank 1
 answered on 30 Nov 2017
1 answer
121 views

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.

 

Alex Hajigeorgieva
Telerik team
 answered on 30 Nov 2017
1 answer
93 views

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

 

Neli
Telerik team
 answered on 30 Nov 2017
5 answers
1.3K+ views

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.

Stefan
Telerik team
 answered on 30 Nov 2017
2 answers
368 views

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?

Zhang
Top achievements
Rank 1
 answered on 30 Nov 2017
3 answers
668 views

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

 

 

Stefan
Telerik team
 answered on 29 Nov 2017
1 answer
112 views

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.

Neli
Telerik team
 answered on 29 Nov 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?