I have a MVC Kendo UI Grid as follows
#(Html.Kendo().Grid<SomeViewModel>()
.Name("someGrid")
.ToolBar(toolbar =>
{
toolbar.Create().Text("Add Entry");
toolbar.Save();
})
.Columns(columns =>
{
columns.Bound(p => p.Name).ClientTemplate(#"<input type='radio' name='SomeradioName'> #= Name # </input>");
columns.Bound(p => p.DateCreated).Format("{0:dddd dd MMMM yyyy}");
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Events(e => e.DataBound("onDataBound"))
.Events(e => e.Edit("onDataEdit"))
.Selectable(selectable => selectable.Enabled(true).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.Scrollable()
.Filterable()
.HtmlAttributes(new {style = "height:200px;"})
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Batch(false)
.Events(events => events.Error("onError"))
.Model(model =>
{
model.Id(s => s.Id);
model.Field(s => s.Name).Editable(true);
model.Field(s => s.DateCreated).Editable(false);
})
.Read(read => read.Action(...))
.Create(create => create.Action(...))
.Update(create => create.Action(...))))
I want to disable In cell editing for already added entries.
So, couple of things I tried
Approach# 1:
<script>
function onDataEdit(e) {
if (!e.model.isNew()) {
var grid = this;
grid.closeCell();
}
}
</script>
Apparently this breaks the radio button selection event (.change event) which is wired up in OnDataBound.closeCell screws it up and change event no longer gets fired up
Approach# 2:
In OnDataEdit event do
$("#Name").attr("readonly", true);
This is also fine but again Change event is no longer fired on radio button click until the Cancel changes command is clicked.
Approach# 3
There seems to be another way of doing it by disabling enable as given in this link here: http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit
if (!e.model.isNew()) {
// Disable the editor of the "id" column when editing data items
var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
numeric.enable(false);
}
How do I do something similar in my case ? Couldn't get data resolved.
Any other ways ?
Update
Approach# 4
e.container.find("input[name=Name]").each(function () { $(this).attr("disabled", "disabled") });
var grid = this;
grid.cancelChanges();
This does not break the change event. However, the experience is not that great. If adding new record, if the user presses any other row the changes are canceled. They have to add new record and either hit Save or click anywhere except grid rows
You can make the columns readonly on edit, using Approach 3
function edit(e) {
if (e.model.isNew() == false) {
$('[name="Name"]').attr("readonly", true);
}
}
Also, your template doesnt have an id=Name, hence I doubt below will work for you. Instead find by name attribute as above
$("#Name").attr("readonly", true);
Refer this link for more information
I have chosen approach 4 which I updated. IF anyone has any better ideas feel free to share.
Related
I have the following grid with a date picker:
#(Html.Kendo().Grid<ScheduleViewModel>()
.Name("ScheduleGrid")
.AutoBind(true)
-
)
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Columns(columns =>
{
columns.Bound(s => s.Name).Title("Schedule").Filterable(true).Width(150).HtmlAttributes(new { style = "text-align: left" });
columns.Bound(s => s.StartTime).Width(100).Title("Start Time").ClientTemplate((
#Html.Kendo().DatePicker()
.Name("StartTimePicker")
.Value("#=StartTime#")
//.Format("{0:dd/MM/yyyy}")
.ToClientTemplate()).ToHtmlString());
columns.Bound(s => s.Enabled).Width(100).ClientTemplate("<input type='checkbox' #=Enabled ? checked='checked' : '' # class='sda-checkbox' />").HtmlAttributes(new { #class = "text-center" });
columns.Command(command => command.Custom("Save").Click("saveSchedules")).Width(80).HtmlAttributes(new { #class = "text-center" });
})
However, the date picker doesn't display correctly. Instead it is just a text box. What am I doing wrong?
EDIT (and I also switched to use a Time Picker instead of a Date Picker):
I did as #FrozenButcher suggested, but this still doesn't work. This is what happens now:
Bring up page and you get this, which does not LOOK like a Time Picker, but is. No clock icon, and you can't see the value:
Click in the box and you get this:
Obviously you can now see the time, but no clock icon.
Finally, click in the Time Picker on the second line and you get this:
Any help in resolving this is greatly appreciated.
You have to ensure unique ids for your inputs, wrapper for datepicker is defined through the name property.
change it to a dynamic name .Name("StartTimePicker"+ lineNumber)
I have a Kendo MVC hierarchy grid. My example is simplified for readability.
#(Html.Kendo().Grid<LeagueViewModel>(Model.Leagues)
.Name("grid_#=LeagueTypeId#")
.Columns(columns => { })
.ToolBar(toolbar =>
{
toolbar.Create().Text("Add New League(Window)");
})
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.TemplateName("LeagueEdit")
.Window(w =>
{
w.Position(p => p.Top(200)); // position not working, need to center more vertically
w.Width(800);
}
)
)
.Events(e => e.Edit("leagueEdit"))
.DataSource(dataSource => dataSource
.Server()
.Model(model =>
{
model.Id(p => p.LeagueID);
model.Field(l => l.strSportId).DefaultValue("#=SportId#"); // set default value with parent grid data
model.Field(l => l.strLeagueTypeId).DefaultValue("#=LeagueTypeId#"); // set default value with parent grid data
}
)
.Read(read => read.Action("Bound_League_Read", "Configuration", new { _leagueTypeId = "#=LeagueTypeId#" }))
.Create(create => create.Action("League_Create", "Configuration"))
)
)
Here is my javascript event handler. When observing the e.model object from the handler after the create button is clicked i have the default values i set earlier with in the grid with DefaultValue("#=ParentProperty#").
function leagueEdit(e) {
// setting these with default value on model,
// had to have string variants to pass over because template expression syntax
e.model.SportId = parseInt(e.model.strSportId);
e.model.LeagueTypeId = parseInt(e.model.strLeagueTypeId);
}
LeagueEdit.cshtml
When my popup template opens, the model has no data. How do i get data into the model? I have elements in the popup editor that need the values from the parent grids.
<p>sport: #Model.SportId</p> <!-- value does not carry over -->
<p>leaguetype: #Model.LeagueTypeId</p> <!-- value does not carry over -->
In your Edit event try to find the control in popup using its Id and set the value. For example in the below code am finding a datepicker inside my popup and setting its value to the model property.
function LeagueEditEdit(e) {
var val1 = e.container.find("input[name=CallDate]").data("kendoDatePicker");
val1.value($('#CallDate').attr('value'));
e.model.CallDate = val1._value;
}
i found a couple examples on how to do this, and none of them are working for me.
Here is my Telerik MVC grid:
#(Html.Kendo().Grid<PlayerStatsViewModel>()
.Name("PlayerStats")
.Columns(columns =>
{
columns.Bound(o => o.PlayerId);
columns.Bound(o => o.FirstName);
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.PlayerId))
.Read(read => read.Action("PlayerStats_Read_Bound", "Contest").Data("getPlayerId"))
).AutoBind(false)
)
Open modal with my grid
I set autobind(false) which prevents page load. After a user clicks a link i open a modal with my grid, and need to pass in a parameter.
// open modal
$(document).on("click", "#openStatsModal", function () {
playerId = $(this).data('id'); // get parameter from click
loadPlayerStats();
});
function getPlayerId() {
return {
playerId: playerId
}
}
Make ajax call?
My click method works and i get my player id. Then i try and make my grid call.
function loadPlayerStats() {
var grid = $("#PlayerStats").data("playerStats");
alert(grid); // returns undefined
//grid.ajaxRequest(); this didnt work either
grid.dataSource.read(); // Cannot read property 'dataSource' of undefined
}
Action method
Never gets called unless i turn off autobind
public ActionResult PlayerStats_Read_Bound([DataSourceRequest]DataSourceRequest request, int playerId)
{
// some code
return Json(result)
}
Just try:
var grid = $("#PlayerStats").data("kendoGrid");
and then:
grid.dataSource.read();
How can i restrict users from deleting the already saved items in the Multi select widget. Users should not be able to delete existing values but can add or remove the new values.
The solution i tried was on databound remove the delete icon like below. It gets deleted but comes back after the call executes the databound method.
Any ideas?
onDataBound: function (e) {
e.preventDefault();
$(e.sender.tagList).find("li span.k-delete").remove();
}
This is the code in the view which calls the above js function on databound
#(Html.Kendo().MultiSelectFor(x => x.Documents)
.DataTextField("Description")
.DataValueField("Code")
.Placeholder("Select Attachment...")
.AutoBind(false)
.DataSource(source => source.Read(read => read.Action("GetCustomerDocuments", "CustomerRequest")).ServerFiltering(true))
.HtmlAttributes(new {style = "width:400px;"})
.Events(e => e.DataBound("onDataBound"))
)
Have your tried applying the same method on the change event as on the databound event?
Razor:
.Events(e => e.Change("onChange"))
Javascript:
onChange: function (e) {
e.preventDefault();
$(e.sender.tagList).find("li span.k-delete").remove();
}
So this is my grid and what I need is to have it hidden when the page is rendered and to show it when I click the search Button. Any ideas??
#Html.WebCore().LinkButton(ButtonType.Zoeken, cssClass: "myZoekenButton")
#(Html.Kendo().Grid<AanvragenZoekenViewModel.ZoekResultaat>()
.Name("Grid")
.Columns(columns =>
{
...
columns.Bound(zoekResultaat => zoekResultaat.Opmerkingomschrijving).ClientTemplate("#= Opmerkingomschrijving#").Hidden(Model.DossierLijst);
})
...
.AutoBind(false)
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Events(e => e.Error("onErrorhandling"))
.Model(model =>
{
})
.Read(read => read.Action(MVC.Dashboard.ActionNames.ReadItems, MVC.Dashboard.Name).Data("onReadAdditionalData"))
.PageSize(500)
)
)
Kendo grid doesn't have HIDE/SHOW property. You need to do this in JQuery.
At run time, kendo grid will convert it into DIV tag.
you need to hide/show DIV tag in jquery.
(Div id will be name of grid )
Hide grid on page Load
$(document).ready(function() {
$( "#Grid" ).hide();
});
Show grid on button click
$('#button').click(function(){
$('#Grid').show();
});