I have a telerik grid which uses inline editing.
Something I found it does which is quite annoying is when I start editing a row some of the columns resizes, the delete button dissapears and a 'cancel' button appears next to the edit button in the edit buttons column.
This is what it looks like:
This is how the grid is being created:
<%
Html.Telerik().Grid<myapp.Date>("dates")
.Name("MyGrid")
.Pageable()
.Sortable()
.Filterable()
.Groupable()
.DataKeys(keys => keys.Add(c => c.id))
.DataBinding(dataBinding =>
{
dataBinding.Ajax()
.Select("_SelectAjaxEditing", "Dates")
.Insert("_InsertAjaxEditing", "Dates")
.Update("_SaveAjaxEditing", "Dates")
.Delete("_DeleteAjaxEditing", "Dates");
})
.ToolBar(commands => commands.Insert())
.Columns(columns =>
{
columns.Bound(o => o.name);
columns.Bound(o => o.date1);
columns.Command(commands => commands.Edit());
columns.Command(commands=> commands.Delete());
})
.Editable(editing => editing.Mode(GridEditMode.InLine))
.Render();
%>
It is the normal way how Telerik Grid behaves.
You can make those columns hidden, if don't need them.
Or may be you can try to use InCell edit mode.
Related
I've just started using Telerik, to speed up some of my development, however I'm stuck trying to bring up a normal MVC Details page from a Grid Component.
All I want, is a select button to send the user to something like /Person/Details/5
The reason why I want a separate page (rather than a popup) is that some of the data relationships are complex, and it's better experience that these are displayed in it's own page, rather than a popup.
My model has a few objects, that's why you see the p.person.Title type setup below.
#(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(p => p.person.Title).Width(100);
columns.Bound(p => p.person.Firstname);
columns.Bound(p => p.person.Firstname);
columns.Bound(p => p.person.Surname);
columns.Bound(p => p.person.ABN).Width(210);
columns.Bound(p => p.person.PracticeCode);
columns.Bound(p => p.currentform);
columns.Command(command => { command.Edit(); });
columns.Command(command => { command.Destroy(); });
columns.Command(command => { command.Select(); });
})
.Sortable()
.ToolBar(commands => commands.Create())
.Editable(editable => editable.Mode(GridEditMode.PopUp))
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(p => p.person.personkey))
.Create(create => create.Action("Create", "Person"))
.Read(read => read.Action("Details", "Person" ))
.Update(update => update.Action("Update", "Person"))
.Destroy(destroy => destroy.Action("Destroy", "Person"))
The grid itself is working fine, however, when someone selects the "Select" button, I want them to go to the /Person/Details/{id} page. Telerik is almost doing it right, it's sending the user to
/Person/Details?grid-mode=select&person.personkey=11 (I actually want /Person/Details/11 )
So, I noticed that the "Read" method has a few different signatures to enable route values, but I just can't seem to rig it up to get the right route values.
I've tried....
.Read(read => read.Action("Details", "Practitioner", p => p.practitioner.drkey ))
and combinations of, but I just can't seem to get the right route value in there.
How do I correctly specify the right route values ?
I ended by solving this with a Template.
Not exactly the outcome I was looking for, but close enough at this stage.
columns.Bound(p => p.person.pkey).Template(#<text>
#Html.ActionLink("Details" , "Details" , new { id = #item.person.pkey })
</text>);
The trick is that a traditional MVC razor action is placed inside a Telerik Template.
It also removed the need for the .Select and .Read rows.
Good day,
I have a list which is having elements, based on that list the grid will be obtained. I've a requirement of changing the order of elements in that list. So when i change the order of list and run the report, the grid is obtaining with the order of before list but not with the newly changed order.
Here is the list:
#Html.ListBox("multiselect_to", Model.AvailableColumnsList, new { #class = "form-control bdr_rad_3", size = "8", multiple = "multiple" })
Here is the Kendo Grid code:
#(Html.Kendo().Grid<Entrada.CustomerPortal.UI.Models.JobReport>()
.Name("JobReportGrid")
.ToolBar(tools => tools.Pdf())
.Pdf(pdf => pdf
.AllPages()
.FileName("Kendo UI Grid Export.pdf")
.ProxyURL(Url.Action("Excel_Export_Save", "JobReports")))
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.AllPages(true)
.FileName("Kendo UI Grid Export.xlsx")
.ProxyURL(Url.Action("Excel_Export_Save", "JobReports")))
.ColumnMenu()
.Columns(columns =>
{
columns.Bound(p => p.JobNumber)//.Title("Job <br/> Number")
.Width(colWidth["Job Number"])
.ClientTemplate("<a class='jobReportGridJN' jnum='#=JobNumber#'>" + "#=JobNumber#" + "</a>"+
#" #if(STAT== true) {# <span><img src='" + Url.Content("~/Images/stat-icon.png") + "'> </span>#}#");
columns.Bound(p => p.DictatorID);
columns.Bound(p => p.JobType);//.Title("Job <br/> Type");
columns.Bound(p => p.DeviceGenerated)//.Title("Device <br/> Generated")
.Width(colWidth["Device Generated"]);
columns.Bound(p => p.AppointmentDate)//.Title("Appointment <br/> Date")
.Width(colWidth["Appointment Date"])
.Format(colFormat["Appointment Date"]);
columns.Bound(p => p.InProcess)//.Title("In <br/> Process")
.Width(colWidth["In Process"])
.Format(colFormat["In Process"]);
columns.Bound(p => p.EditingComplete)
.Width(colWidth["Editing Complete"])
.Format(colFormat["Editing Complete"]);
columns.Bound(p => p.JobStatus);//.Title("Job <br/> Status");
columns.Bound(p => p.MRN);
columns.Bound(p => p.Patient);
})
.Groupable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single)
.Type(GridSelectionType.Row))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read
.Action("JobSearchPaginationGrid", "JobReports")
.Data("residentsReadData"))
.Events(events => events.Error("error_handler"))
.PageSize((int)ViewData["PageSize"])
.Group(group => group.Add<string>((string)TempData["GridGroupBy"]))
.ServerOperation(true)
)
.Pageable(pager => pager.Messages(Info => Info.Empty("No Results Found")))
.Sortable()
.Resizable(resize => resize.Columns(true))
.Scrollable().Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
)
Image for Kendo UI grid columns before changing the order of list of elements
Image for List after changing the order
So, Can i reorder the Grid columns based on that list elements after changing the order of list?
It would be more helpful, if anyone answer quickly.
Thanks,
Sai
Haven't tried this myself but after a minute of googling there seems to be 2 steps involved in the process of achieving this if I understand it correctly:
First you have to set reorderable to true for the grid
.Reorderable(reorder => reorder.Columns(true))
http://demos.telerik.com/aspnet-mvc/grid/column-reordering
Reordering the columns programatically at list change event:
var grid = $("#JobReportGrid").data("kendoGrid");
grid.reorderColumn(newOrderIndex, grid.columns[currentIndex]);
http://docs.telerik.com/KENDO-UI/api/javascript/ui/grid#methods-reorderColumn
I have a Kendo UI Grid which displays some data. But now i need to add a delete option, so rows can be deleted as well. But how does this work?
I have added a Destroy method to the Grid. But that's just so it knows what Action to call.
How can i add a delete icon for each row for example to the grid? Or how does this normally work in a Kendo Grid?
This is the code i have so far:
#(Html.Kendo().Grid<DescriptorWithResource>()
.Name("grid")
.PrefixUrlParameters(false)
.Columns(columns =>
{
columns.Bound(x => x.Code).Title(Html.GetResource(KnownComponent, "ManagedDescriptorCode")).Width(250);
columns.Bound(x => x.Description).Title(Html.GetResource(KnownComponent, "ManagedDescriptorDescription")).Width(500);
})
.Pageable(pager => pager.Info(true)
.Refresh(false)
.PageSizes(false)
.PreviousNext(false)
.Numeric(false)
.Enabled(true)
.Messages(m => m.Display(#Html.GetResource(KnownComponent, "Label_TotalRecordsResource"))))
.Scrollable(scrollable => scrollable.Virtual(true))
.Selectable(selectable => selectable.Enabled(false))
.Events(e => e.DataBound("window.KendoExtensions.bindHoverEffect"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(50)
.Events(e => e
.RequestStart("window.Management.onDataSourceBinding")
.Error("window.Management.onDataSourceError"))
.Read(read => read.Action("ResultData", "Management"))
.Destroy(destroy => destroy.Action("DeleteRow", "Management"))) // <-- Added
)
You need to declare it via the Command builder.
columns => columns.Command(cmd=>cmd.Destroy())
You can add a html template for that particular column for each rows. In the html template you can have a button or link for the delete. ON CLICK of this button/link you can call your action.
template: '<input type="button" data-id=ID value="Delete" class="popupbutton" id="delButton" onclick="javascript:CheckAck(this);" id="Delete" /><br/>
When the system is slow the telerik grid shows the 2 empty rows along with one row which contains "ready" text.Please suggest me how to resolve this.
Thanks,
Megha
First of all you can hide your grid on load,
#(Html.Telerik().Grid(Model)
.Name("myGrid")
.Columns(columns =>
{
columns.Bound(o => o.OrderID).Width(100);
columns.Bound(o => o.ContactName).Width(200);
columns.Bound(o => o.ShipAddress);
columns.Bound(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120);
}).ClientEvents(events => events.OnDataBound("GridOnDataBound"))
......
......
).HtmlAttributes(new {style = "display: none"})
then using onDatabound event you can show your grid when the process finishes
<script>
function GridOnDataBound() {
$('#myGrid').show();
}
</script>
Using Telerik MVC3 grid, C#, .Net 2010;
I have a grid in my razor view:
#(Html.Telerik().Grid<ProductListItem>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.Current.Name).Sortable(true).Filterable(false).Width(150);
columns.Bound(o => o.Categories).Sortable(true).Filterable(false).Width(200);
//other column bindings...
})
.DataBinding(dataBinding => dataBinding.Ajax().Select(Model.GridAjaxRequestAction.ActionName, Model.GridAjaxRequestAction.ControllerName))
.Pageable(settings => settings.Total(Model.TotalRow))
.EnableCustomBinding(true)
.Sortable()
.Filterable()
What i want to do is setting Category column of grid as multiline.
There may be many Category for a Product so the Category cells in grid should be like;
Category0
Category1
Category2
I tried to Join category values with System.NewLine and and assign this values to ProductListItem.Categories property. It does not change. The text is still single line.
Thanks in advance.
Thank you #nekno. I came up with this solution in my case. Sorry to not respond in a while.
in view model:
this.Categories = String.Join("<br>", entity.Categories.Select(o => o.Current.Name));
in view:
columns.Bound(o => o.Categories).ClientTemplate("<#= Categories #>")
If it's easy where you tried to do the join with NewLine, try "<br />" instead of System.NewLine.
Otherwise, what is the data type of your ProductListItem.Categories property? If it's a List<String> or some other IEnumerable, you could use a template column instead of a bound column. You use item to reference the current ProductListItem in the template:
#(Html.Telerik().Grid<ProductListItem>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.Current.Name).Sortable(true).Filterable(false).Width(150);
columns.Template(
#<text>
#String.Join("<br />", item.Categories)
</text>)
.Sortable(true).Filterable(false).Width(200);
//other column bindings...
})
.DataBinding(dataBinding => dataBinding.Ajax().Select(Model.GridAjaxRequestAction.ActionName, Model.GridAjaxRequestAction.ControllerName))
.Pageable(settings => settings.Total(Model.TotalRow))
.EnableCustomBinding(true)
.Sortable()
.Filterable()
Another option might be to make a table in the template column, and leave your ProductListItem.Categories as a List, e.g., this.Categories = entity.Categories.Select(o => o.Current.Name).ToList();
#(Html.Telerik().Grid<ProductListItem>()
.Name("Grid")
.Columns(columns =>
{
columns.Bound(o => o.Current.Name).Sortable(true).Filterable(false).Width(150);
columns.Template(
#<text>
<table border=0>
#foreach(var category in item.Categories){
<tr><td>#category</td></tr>
}
</table>
</text>)
.Sortable(true).Filterable(false).Width(200);
//other column bindings...
})
.DataBinding(dataBinding => dataBinding.Ajax().Select(Model.GridAjaxRequestAction.ActionName, Model.GridAjaxRequestAction.ControllerName))
.Pageable(settings => settings.Total(Model.TotalRow))
.EnableCustomBinding(true)
.Sortable()
.Filterable()