i have a status column in my model which is true or false.
i show this column on telerik grid for mvc when item is true checkbox is checked and while
false is unchecked.
Problem is i want bind custom event to checkbox to toggle item status.
How can bind custom event to checkbox and on check or uncheck update item.
I show in grid view :
columns.Bound(o => o.Status).ClientTemplate("<input type='checkbox'
name='Status' value='<#= Status#>' />");
You can either use jQuery:
$("#Grid").delegate("[name=Status]", "click", function() {
var checkBox = this;
alert(checkBox.checked);
});
or add an onclick attribute to the checkbox:
columns.Bound(o => o.Status).ClientTemplate("<input type='checkbox' name='Status' value='<#= Status#>' onclick='checkboxClicked(this)' />");
function checkboxClicked(checkBox) {
alert(checkBox.clicked);
}
Related
I am working on a Kendo UI grid. I have a grid which contains data from an external source. Also I have a radio button assigned to each row as a template.
How can I make the radio button select when I click a row? Currently, I have to click on the radio button to make it selected.
I'm using a checkbox instead, and here is how I am defining it.
columns.Bound(x => x.IsChecked).ClientTemplate(
"<input name='IsChecked' class='chkBox' type='checkbox'
data-bind='checked: IsChecked' #= IsChecked ? checked='checked' : '' #/>");
And then on click function of the grid
$('#Grid').click(function () {
var gview = $("#Grid").data("kendoGrid");
var selectedItem = gview.dataItem(gview.select());
var bool = selectedItem.IsChecked;
selectedItem.set("IsChecked", (bool) ? 0 : 1);
console.log(selectedItem);
//This is what you need to do to keep the row selected.
gview.tbody.find("tr[data-uid='" + selectedItem.uid + "']")
.addClass("k-state-selected");
})
If you view the selectedItem in the console, you will see that kendo adds a uid property.
So we are findind that uid and adding the k-state-selected class.
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();
}
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 UI MVC grid. One of the properties of the model is bool, so I need to present it in grid as checkbox. By default Kendo UI present it as "true" and "false" values in the column. So you need to first time to click to get checkbox, then second time to click to change value of the combobox. Instead of having default values from grid, I set ClientTemplate, so I got checkbox instead of "true" and "false" values.
c.Bound(p => p.GiveUp)
.Title("Giveup")
.ClientTemplate("<input type='checkbox' id='GiveUp' name='GiveUp' #if(GiveUp){#checked#}# value='#=GiveUp#' />")
.Width(50);
This grid uses batch editing and in-grid editing (GridEditMode.InCell)
.Editable(x => x.Mode(GridEditMode.InCell))
.DataSource(ds => ds.Ajax()
.ServerOperation(false)
.Events(events => events.Error("error"))
.Batch(true)
.Model(model => model.Id(p => p.Id))
.Read(read => read.Action("Orders", "Order").Data("formattedParameters"))))
So what I would like to have is ability for user to click on checkbox and change value of my model, but unfortunately that doesn't work. I can see visually checkbox's value is changed but I don't see red triangle that marks cell as changed, and when I click on add new item button, value from checkbox disappear.
Please advice on what I am doing wrong.
Thanks in advance.
For those who would like to see how full code looks like.
Home.cshtml
#(Html.Kendo().Grid<OrdersViewModel>()
.Name("Orders")
.Columns(c =>
{
c.Bound(p => p.Error)
.Title("Error")
.ClientTemplate("<input type='checkbox' #= Error ? checked='checked': '' # class='chkbx' />")
.HtmlAttributes(new {style = "text-align: center"})
.Width(50);
<script>
$(function() {
$('#Orders').on('click', '.chkbx', function() {
var checked = $(this).is(':checked');
var grid = $('#Orders').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('Error', checked);
});
});
</script>
Basically when you add/remove records from the Grid the red triangles always disappear (or when you sort/page/filter etc), the checkbox is not the problem with the red triangles.
Now for the checkbox if you create a ClientTemplate which is again a checkbox you will need to click one time to put the cell into edit mode (you will see no difference because the editor template is again a checkbox) so you will need to click second time to actually change the value.
What I suggest you as best practice is to use the approach covered here - it is way more faster (less operations for the Grid) and it easier than applying extra logic to handle the two clicks with the approach above.
jqGrid Edit form invoked using Edit button from top toolbar is defined as
grid.navGrid("#grid_toppager", { del: false,add: false,view: true },
{ url: '/Edit',
bSubmit: 'Save',
editCaption: 'Change',
} );
This is used to show data in readonly grid. Pressing submit button does not make sence in this case.
How to remove submit button ?
You can hide Submit button the in the beforeShowForm of the edit form options:
beforeShowForm: function ($form) {
$form.parent().find('#sData').hide();
}