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
Related
#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.
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>");
I'm trying to get a custom popup editor working in our Grid using MVC wrappers.
The MVC wrapper is
Html.Kendo().Grid(#Model.ReferralCommentsViewModel.ReferralComments)
.Name("gridComment")
.Columns(columns =>
{
columns.Bound(p => p.CommentValue).Title("Comment").Encoded(false).Width(450);
columns.Bound(p => p.CreatedBy).Title("Created By").ClientTemplate("#= kendo.toString(CreatedBy) #").Width(100);
columns.Bound(p => p.CreatedDate).Title("Create Date").ClientTemplate("#= kendo.toString(CreatedDate, \"MM/dd/yyyy\") #").Width(70);
columns.Command(command => { command.Edit().Text(" "); }).Title("Edit").Width(20);
columns.Command(command => { command.Destroy().Text(" "); }).Title("Delete").Width(20);
})
.ToolBar(toolbar => toolbar.Create().Text("Add new Comment"))
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("popupEditorTemplate").Window(w=>w.Title("Add/Edit Comment")))
.Resizable(resize => resize.Columns(true))
.Sortable()
.Selectable()
.HtmlAttributes(new { style = "height:165px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.AutoSync(false)
.Batch(true)
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.CommentID))
.Create(update => update.Action("EditingPopup_Create", "Referral"))
.Read(read => read.Action("EditingPopup_Read", "Referral"))
.Update(update => update.Action("EditingPopup_Update", "Referral"))
.Destroy(update => update.Action("EditingPopup_Destroy", "Referral"))
)
The editor template is -
<script id="popupEditorTemplate" type="text/x-kendo-template">
<label for="Created Date">Created Date:</label><Input data-bind= "value: CreatedDate" readonly="true" />
<label for="Created By">CreatedBy:</label><Input data-bind= "value:CreatedBy" readonly="true" />
<label for="Created By">Comments:</label>
<textarea data-role="editor"
data-bind="value: CommentValue"
style="width: 280px"></textarea>
</script>
No matter what options I use, I cannot get the custom edit template to display in the popup. Only the default popup is displayed. Is there something obvious missing?
Project - VS2012, MVC4
TemplateName should specify the name of the view which is a cshtml in the EditorsTemplate folders which MVC searches automatically.
It should not be the name of a html element which holds a Kendo template (like you did). More info about MVC EditorTemplates can be found here.
Is it possible? I tried with custom column, but I failed, can anyone give a simple example for it with razor ?
Paint work :)
I want something like that, column include data and a button( with onclick )
//---Not Worked 1---
columns.Command(command =>
{
command.Custom("Telefonları Göster").Click("telefonlariGoster");
columns.Bound(x => x.Adres);
}).Width(580);
....
//---Not worked 2---
columns.Template(#<text>
<label>#item.Adres</label>
<input type="button" name="AdresGuncelle" value="AdresGuncelle" onclick="telefonlariGoster()" />
</text>);
//Worked
columns.Bound(x => x.Adres)
.ClientTemplate("#=Adres#" +
"<input type='button' class='telefonlariGoster' style='float: right;' name='telefonlariGoster' value='Telefonları Güncelle' onclick='telefonlariGoster()'/>");
Try to use ClientTemplate of column where you want display your custom column display.
For example:
#(Html.Kendo().Grid(Model)
.Name("grid")
.Columns(columns =>
{
columns.Bound(x => x.Name)
.ClientTemplate("#=Name#" +
"<input type='button' class='className' style='float: right;' name='buttonName' value='Click here' onclick='ButtonClick(\"#=Name#\", this)'/>");
columns.Bound(x => x.Id);
})
.DataSource(dataSource => dataSource
.Ajax()
.Total(10)
.ServerOperation(false)
)
)
in script button click function
function ButtonClick(name, button) {
alert(name);
}
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>