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();
}
Related
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.
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();
});
I search for data and then bind to my grid. In the grid's databound event, I change the row background color according to the cell's value. This works OK. But when I click the Edit button in the grid and then click the Cancel button, the grid no longer has the background color set. I tried to call the databound event in the Cancel event, but it does not work. How do I prevent the Cancel Event from changing my grid color?
grid
#(Html.Kendo().Grid(Model)
.Name("mygrid")
.Events(e=>e.DataBound("dataBound"))
.Columns(columns =>
{
columns.Bound(p =>p.StudentName).Title("StudentName");
columns.Command(command =>
{
command.Edit().UpdateText("Edit");
command.Destroy().Text("Delete");
}).Width(160);
})
.Editable(editable => editable.Mode(GridEditMode.PopUp)
.TemplateName("SudentEditor")
.Window(configurator=>configurator.Width(500)
.Title("EditStudent")))
.Scrollable()
.Events(events=>events.Cancel("onCancel"))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model =>
{
model.Id(p => p.Id);
})
.Read(read => read.Action("GetStudentForGrid", "Student"))
.Create(create=>create.Action("CreateSudent","Equipment"))
.Update(update => update.Action("UpdateStudent", "Student"))
.Destroy(destory=>destory.Action("DestroyStudent","Student"))
.Events(events => events.Error("error_handler"))
))
databound event
//change grid color
function dataBound(e) {
$("#mygrid tbody tr").each(function(i) {
$(this).find("td:lt(9)").css("backgroundColor", '#000000');
});
}
cancel event
//I try to call preventDefault event and close the PopUp window
//,but the background is still grey
function onCancel(e) {
//e.preventDefault();
//e.container.parent().css("display", "none");
// e.sender.clearSelection();
dataBound();
}
Just refresh the grid in the cancel event. It will fire the onDataBound event again. I had the same issue and resolved it like this:
function onCancel(e) {
$("#GridName").data("kendoGrid").refresh();
}
//change grid color
function dataBound(e) {
$("#mygrid tbody tr").each(function(i) {
$(this).find("td:lt(9)").css("backgroundColor", '#000000');
});
}
You can use grid.cancelRow() in the cancel enent,and then refresh the grid.
If you don't want to refresh the grid but run code after the event has finished instead, you can use a setTimeout() in the cancel event.
function onGridCancel(e){
setTimeout(function() {
colorMyRowsBeutifully();
}, 0);
}
See this answer from Telerik:
https://www.telerik.com/forums/grid-cancel-event
I also ran into this problem and the solutions from above didn't work for me.
But I found another solution that did the trick, to use the Edit event of the Grid to attach event handler to the Deactivate event of the Window.
Grid events:
.Events(e => {
e.DataBound("onDataBound");
e.Edit("onEdit");
})
Grid event handlers:
function onDataBound(e) {
//Conditional formatting on DataBound
formatGridRows();
}
function onEdit(e) {
//Bind deactivate event to the Popup window
e.container.data("kendoWindow").bind("deactivate", function () {
formatGridRows();
})
}
function formatGridRows() {
$("#Grid tbody tr").each(function () {
grid = $("#Grid").data("kendoGrid");
dataItem = grid.dataItem($(this));
//Conditionally format the current row
if (dataItem.Discontinued) {
$(this).find(":nth-child(3):first").css("background", "red");
}
})
}
Here's the source:
http://www.telerik.com/forums/cancel-popup-clears-grid-background-color
I am using Kendo Grid to sorting table data. I want an event which fire after sorting is completed. i want like below code.
$("#innergrid").kendoGrid({
sortable: true,
Aftersorting : function(event) { alert('sorting is done') }
});
You can use the change event of the dataSource (will be created automatically when you init the grid). Check this: http://jsbin.com/buten/1/edit
I am not sure is there any event which can be triggered after sorting but you can do this
********************Grid************************
#(Html.Kendo().Grid<>()
.Name("CompanyServicesGrid")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => e.RequestEnd("onRequestEnd"))
)
**************************Javascript********************
function onRequestEnd(e)
{
if (e.type == "read"){
if(e.sender_sort=="ColumnName")
alert("sorting is done")
}
}
have a look at this as well
onRequestEnd-Link
OnComplete-Link
I am using a Kendo-grid with inline editing Let's call this Grid3. The Grid is displaying a list of items from a referenced property of the page's view model. When an item on the grid has been saved, I would like to invoke a complete page refresh (or a refresh two other grids, Grid1 and Grid2 on the page). The reason is that when an items has been updated in the grid, values displayed in other grids are affected.
Any ideas?
Call datasource.read() at those grids you want to refresh.
$("#grid3").kendoGrid({
dataSource : dataSource,
save: function(e) {
grid1.dataSource.read();
grid2.dataSource.read();
}
}
Alternatively place the grid.datasource.read() call into your datasource complete.
var dataSource = new kendo.data.DataSource({
transport: {
update: {
complete: function (jqXhr, textStatus) {
grid1.dataSource.read();
grid2.dataSource.read();
}
}
}
});
This can be accomplished using the RequestEnd event.
The Kendo Grid declaration would have something like:
.DataSource(datasource => datasource
.Ajax()
.Model(model => model.Id(fi => fi.Id))
.Read(read => read.Action("Buildings_ReadForecast", "Plan", new {buildingId = Model.BuildingID}))
.Events(events => events.Error("error_handler"))
.Events(events => events.RequestEnd("OnRequestEnd_Grid"))
Then create the javascript method like:
function OnRequestEnd_Grid(e) {
if (e.type === "update") {
var forecastgrid = $('#ForecastGrid').data('kendoGrid');
var planGrid = $('#PlanGrid').data('kendoGrid');
planGrid.dataSource.read();
forecastgrid.dataSource.read();
}
}
That's it!