How to add Checked Column in Kendo Grid - asp.net-mvc

#model IEnumerable<Pardon.Models.ViewModel.StudendsShowCreatAddViewModel>
<h2>#ViewBag.Title</h2>
#(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(model => model.ISSelected).Template(#<text></text>).ClientTemplate("<input type='checkbox' #= ISSelected ? checked='checked':'' # class='chkbx' />");
//columns.Bound(model => model.ISSelected)///Bound(model => model.ISSelected)
//.ClientTemplate("<input type='checkbox' #= ISSelected ? checked='checked' : '' # disabled='enabled' ></input>");
columns.Bound(model => model.CoursesSystem_ID).Visible (false);
columns.Bound(model => model.per_Name);
columns.Bound(model => model.per_Family);
columns.Bound(model => model.stu_ID).Visible (false);
})
.ToolBar(toolbar =>
{
toolbar.Custom().Action("CreateStudents", "CoursesSystem", new {_StudendsShowCreatAddViewModel = #Model }).Text("ثبت");
}
)
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.DataSource(dataSource => dataSource
.Server()
)
)
<script>
$(function() {
$('#grid').on('click', '.chkbx', function() {
var checked = $(this).is(':checked');
var grid = $('#grid').data().kendoGrid;
var dataItem = grid.dataItem($(this).closest('tr'));
dataItem.set('ISSelected', checked);
});
});
</script>
I tried the above column properties Boolean ==>Isselected to checked Column and Editable and it didn't work.
For example, such as Photo

You're trying to add a client template showing a checkbox. I take a slightly different approach setting CSS classes so that when the row is not being edited I'll show a tick or cross depending upon the underlying value, then when the cell is clicked to start editing the checkbox is displayed. Optionally you can add additional CSS so the tick is coloured green and the cross red.
columns.Bound(a => a.ISSelected)
.ClientTemplate("<i class='fa fa-lg #: ISSelected ? 'fa-check' : 'fa-times' #'></i>")
.HtmlAttributes(new { #class = "text-center" })
.Title("Is Selected");
The above is using Font Awesome classes by the way.

Related

ASP.NET MVC kendo grid make selective columns editable

I have a kendo grid with asp.net core mvc project. I have 7 columns but I only need two of them to be editable.
Need both the client template columns to be editable other than that everything is non editable
#(Html.Kendo().Grid<InvoiceLineViewModel>()
.DefaultSettings(gridSettings1, Localizer)
.Columns(columns =>
{
var clientTemplate1 = $#"<select class='selectpicker'>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
";
columns.Bound(c => c.InvoiceLineReason).ClientTemplate(clientTemplate1).Width(75).Title("Reason").Width(30);
var clientTemplate = $#" <input type='text' class='form-control' asp-for='InvcAmt' />";
columns.Bound(c => c.Note).ClientTemplate(clientTemplate).Width(75).Title("Reason").Width(30);
columns.Bound(c => c.Type).Title("Type").Width(15);
columns.Bound(c => c.Part).Title("Part").Width(30);
columns.Bound(c => c.Unit).Title("Unit").Width(20);
columns.Bound(c => c.Quantity).Title("Quantity").Width(10);
}
).Editable(editable => editable.Mode(GridEditMode.InCell))
)
Wire into the edit event in javascript, and conditionally set the column attr to readonly = true.
Like this:
.Events(events => events.Edit("edit"))
.
<script type="text/javascript">
function edit(e) {
if (e.model.isNew() == false) {
$("#column1").attr("readonly", true);
}
}
</script>
See:
http://www.adambumgardner.com/blog/2015/12/17/make-a-read-only-column-in-kendo-ui-grid-edit-mode

Kendo Grid command.custom url

I am trying to get command.custom to work with a url. i have command.Custom("Tasks"); and it creates the button like it should. But i can't figure out how to get it to point to this url ../../OBClientSetupTasks/Index/#item.SetupID
I tried to make it do a .action and click through the controller and view but it returns a not supported exception
command.Custom("Tasks").Action("Index", "OBClientSetup");
I also can't seem to identify #item.SetupID . item is usually from a foreach, but in this case I don't see where a foreach would go.
EDIT:
Adding full grid
#(Html.Kendo().Grid<XXX_2_0_OBOE.OpenAccess.OBClientSetup>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(obcs => obcs.ProfileName);
columns.Bound(obcs => obcs.Default).ClientTemplate("#= Default ? 'Yes' : 'No' #");
columns.Bound(obcs => obcs.EEFinalize).ClientTemplate("#= EEFinalize ? 'Yes' : 'No' #");
columns.Bound(obcs => obcs.AllowOutsideCodes).ClientTemplate("#= EEFinalize ? 'Yes' : 'No' #");
columns.Bound(obcs => obcs.Completed).ClientTemplate("#= Completed ? 'Yes' : 'No' #");
columns.Command(command =>
{
command.Custom("Tasks").Action("Index", "OBClientSetup", new { SetupID = Model.SetupID });
command.Edit();
command.Destroy().HtmlAttributes(new { #class = "onboard-delete " });
});
})
.ToolBar(toolbar =>
{
toolbar.Template(#<text>
<div class="toolbar">
<div class="row">
<div class="col-md-3 pull-right">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></span>
<input type="text" class="form-control" id='FieldFilter' placeholder="Search Profile Name">
</div>
</div>
</div>
</div>
</text>);
})
.HtmlAttributes(new { #class = "table-responsive" })
.Groupable()
.Pageable()
.Sortable()
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("OB2_ClientProfiles", "OB"))
.PageSize(5)
.Update(update => update.Action("EditingInline_Update", "OB"))
.Destroy(update => update.Action("EditingInline_Destroy", "OB"))
.Model(model => model.Id(obcs => obcs.SetupID))
)
)
The Model
public partial class OBClientSetup
{
private int _setupID;
public virtual int SetupID
{
get
{
return this._setupID;
}
set
{
this._setupID = value;
}
}
The idea is so they can click a button and be sent to OBClientSetupTasks/Index/1 or whatever their ID is
To use the Grid's model that way you'll probably need something like this:
Create a JavaScript function to handle the click event. Here you can grab the SetupID. I don't know what you're controller's action is going, but there are a few options.
If you want to change to the Index page, do something like this:
<script>
function SetupTasks(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
window.location.href = '#Url.Action("Index", "OBClientSetup")' + "/" + dataItem.SetupID;
}
</script>
Or, execute some ajax request like this:
<script>
function SetupTasks(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
windows.location.href = '#Url.Action("Index", "OBClientSetup")',
type: "POST",
dataType: "json",
data: { SetupID: dataItem.SetupID },
success: function (data) {
// Handle return value
}
});
}
</script>
In your grid specify your command button like this:
command.Custom("Tasks").Click("SetupTasks");

Get Checked Rows[Selected Rows] from kendo Grid

Here is My grid, When Checkbox is Selected I want to pass the CheckBox Checked/Not Checked Value to Controller. When accessing in the controller model is not persisting the Checkbox value. Can you please guide me acheiving it.
My View :
#using(#Html.BeginForm("RequisitionApply", "Requisition", FormMethod.Post, new { approvalReason = Model, #id = "addExpenseItem" }))
{
#(Html.Kendo().Grid<ZCW.MVC.ViewModels.ManagerRequisitionSearchListViewModel>()
.Name("ManagerRequisitionApprovalGrid")
.DataSource(dataSource => dataSource
.Ajax()
.Events(e => e.RequestEnd("GetPaginationDisplay"))
.PageSize(25)
.Read(read => read.Action("GetDetails", "List").Type(HttpVerbs.Get))
//.Update(update => update.Action("Apply", "List").Type(HttpVerbs.Post))
.ServerOperation(true)
)
.Columns(columns =>
{
//RequistionName(ID)
columns.Bound(p => p.FirstName).ClientTemplate("#=FirstName#<a href='" + Url.Action("GetResource", "List", new { NameID = "#=NameID#"}) + "'>(#=NameID#) </a>").Title(#Html.LocalizedText("ID")).HtmlAttributes(new { #class = "alignleft" });
//Location
columns.Bound(p => p.Location)
.Title(#Html.LocalizedText("Location")).HtmlAttributes(new { #class = "alignleft" });
// Accept Header
columns.Template(p => p.Accept).Title("")
.HeaderTemplate("<i class='icon-ok gicn tooltips' data-original-title='Approve' data-placement='top'></i><br><div class='checker'><span><input id='selectallApprove' class='chkboxApprove' type='checkbox' onclick='ToggleChkBoxApprove(this.checked);' #= Accept ? checked='checked' : '' # /></span></div>")
.ClientTemplate("<span> <input id='checkbox' onclick='grdChkBoxClick(this); ' class='chkboxApprove' type='checkbox' name='remember' /></span>")
.HeaderHtmlAttributes(new { #class = "aligncenter" })
.HtmlAttributes(new { #class = "textaligncenter" });
//Decline Header
columns.Template(p => p.Decline).Title("")
.HeaderTemplate("<i class='icon-remove ricn tooltips' data-original-title='Decline' data-placement='top'></i><br><div class='checker'><span> <input id='selectallDecline' class='chkboxDecline' type='checkbox' onclick='ToggleChkBoxDecline(this.checked);' #= Decline ? checked='checked' : '' # /></span></div>")
.ClientTemplate("<span> <input id='checkbox1' onclick='grdChkBoxClick(this); ' class='chkboxDecline' type='checkbox' name='remember'/></span>")
.HeaderHtmlAttributes(new { #class = "aligncenter" })
.HtmlAttributes(new { #class = "textaligncenter" });
})
.AutoBind(true)
.Sortable()
.EnableCustomBinding(true)
)
<div class="pull-right">
<button type="submit" id="Apply" class="submitbtn" style="border: 0px none;"><i class="greenbtn"></i>#GlobalResourceHelper.GetGlobalResource(ResourceFiles.ButtonsResources, "BTN_APPLY")</button>
</div>
}
MyController :
public ActionResult Apply(ResourceViewModel ApprovalList)
{
// I'm not getting Checkbox Checked or not in ApprovalList
}
You have to do this.
columns.Bound(x => x.IsChecked).ClientTemplate(
"<input name='IsChecked' class='chkBox' type='checkbox'
data-bind='checked: IsChecked' #= IsChecked ? checked='checked' : '' #/>");
//check document ready
var grid = $("#Grid").data("kendoGrid");
grid.tbody.on("change", ".chkBox", function (e) {
var row = $(e.target).closest("tr");
var item = grid.dataItem(row);
//item.set("IsChecked", $(e.target).is(":checked") ? 1 : 0);
kendo.bind(this,item);//this line or above line will handle this
});
Post the Grid using an ajax call and send the Grid's data.
var gridData = $("#Grid").data("kendoGrid");
//AJAX etc...
data: JSON.stringify(gridData.dataSource.view()),

Redirect when Edit a Kendo UI grid with ASP .NET MVC

I want to add a redirection to another page when I click on the "Edit" button with a Kendo UI grid with ASP .NET MVC.
Here is the base code:
#(Html.Kendo().Grid<ViewModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(x => x.Id);
columns.Bound(x => x.Name);
columns.Bound(x => x.Field1);
columns.Command(commands =>
{
commands.Edit();
commands.Destroy();
})
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(x => x.Id))
.Read(read => read.Action("Read", "Home"))
.Update(update => update.Action("Edit", "Home"))
.Destroy(destroy => destroy.Action("Destroy", "Home"))
)
)
I tried to use the HTML attributes but it doesn't work:
commands.Edit().HtmlAttributes(new { #class = "edit" });
Then, I tried to add a custom edit (via commands.Custom(...) but unfortunately it is just for .Server() data binding.
I can do it with a client template but I really would like to use the default button proposed by Kendo UI:
columns.Template(#<text></text>)
.ClientTemplate(
"<a href='" + Url.Action("Edit", "Home") + "/#=Id#'>Edit</a>");
Do you have any other idea?
Thanks in advance.
You should be able to use custom commands, even with an Ajax datasource. I just tested this locally with the following code to make sure it will still work.
Code from view:
<script type="text/javascript">
function redirectTest(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
alert(dataItem.Name);
}
</script>
#(Html.Kendo().Grid<ViewModel>()
.Name("testing")
.Columns(columns =>
{
columns.Bound(x => x.Id);
columns.Bound(x => x.Name);
columns.Command(command => command.Custom("Edit").Click("redirectTest"));
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("ReadAction", "ControllerName"))
)
)
Source: Custom command demo
If you want to redirect to another page with accepts a parameter then use this method.
#(Html.Kendo().Grid<AGridViewModel>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.Id)
columns.Bound(p => p.Name);
columns.Command(command => command.Custom("View Details").Click("showDetails"));
})
<script type="text/javascript">
function showDetails(e) {
e.preventDefault();
var d = this.dataItem($(e.currentTarget).closest("tr"));
//alert("Selected item ID is:" + d.Id);
window.location.href = "#Url.Action("action", "controller")?id=" + d.Id;
}
</script>
You could add a custom ClientTemplate on the Name column, instead, and remove your columns.Command button altogether, where they simply click the name to edit it, and you pass in your object's ID to the new page like this:
columns.Bound(x => x.Name).ClientTemplate("<a href=/SomeViewFolder/Index?id=${id} target=_blank>${Name}</a>");

how to get key row selected in kendo ui grid

i write this code for create Grid with kendo Ui in asp.net mvc
#(Html.Kendo().Grid(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.Id).Groupable(false).Visible(false);
columns.Bound(p => p.BrandName);
columns.Bound(p => p.BrandAbbr);
columns.Bound(p => p.SrcImage);
columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
})
.ToolBar(toolbar =>
{
toolbar.Custom().Action("Create","Users").Text("add");
}
)
.Groupable()
.Pageable()
.Sortable()
.Scrollable()
.Filterable()
.HtmlAttributes(new {style = "height:500px;"})
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple)
.Type(GridSelectionType.Row))
.DataSource(dataSource => dataSource
.Server()
.Model(model => model.Id(item => item.Id))
))
i want when user click on ViewDetails alert BrandId value Column, please help me.thanks all
You just need to add javascript function.
<script type="text/javascript">
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
alert(dataItem.Id); //considering Id = BrandId
}
</script>
Here is the demo of Kendo Grid Custom Command
also I used this successfully :
<script type="text/javascript">
function showDetails(e)
{
e.preventDefaults();
var grid = $("#Grid").data("kendoGrid");
var selectedItem = grid.dataItem(grid.select());
//you can get the value of any column after that
alert("Brand Id is : " + selectedItem.Id);
alert("Brand Name is: " + selectedItem.BrandName);
}
</script>

Resources