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);
}
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 have a telerik grid which is bounded to a model. Initially I have two columns which I want to convert into one. I want location and closing date columns in a single column. I can do this from database side but I want to know how it can be done in telerik. Thanks in advance
#(Html.Telerik().Grid(Model.NPList)
.Name("NPL")
.DataKeys(keys => keys.Add(o => o.JOBID))
.Columns(columns =>
{
columns.Bound(o => o.LOC).Title("Location").HtmlAttributes(new { name = "location" });
columns.Bound(o => o.CL_DATE).Title("Closing Date");
#<text
<a class=" btn-mini btn-info" title="Apply Online" onclick="javascript:openApp('#item.JOBTITLESEQ');" href="javascript:void()">Apply</a>
</text>).ClientTemplate("<a class=' btn-xs btn-info' title='Apply Online' onclick='javascript:open(<#=JOBTESEQ#>)' href='javascript:void()'>Apply</a>")
.HeaderTemplate(
#<text>
Action
</text>
);
})
.DataBinding(dataBinding => dataBinding.Ajax()
.Select("_nplt", "jl")
)
.ClientEvents(events => events.OnDataBinding("onDataBinding"))
.Sortable()
.Pageable(paging =>
paging.PageSize(5))
.Filterable()
)
Since you have to bind to a simple property, you could add the "ClosingDateAndLocation" property to Model.NPList.
public class NPList
{
public string ClosingDateAndLocation { get { return ClosingDate.ToString() + "\" + Location.ToString(); } }
}
Then bind your column to ClosingDateAndLocation.
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.
I'm working through some Kendo UI tutorials and have a problem with the look of my text boxes on the grid. The demo I'm following is http://demos.kendoui.com/web/grid/editing-inline.html.
I've figured out how to format the date in the grid and use a datepicker for the date in the editor. To do this I've used an Editor template.
I've added an editor template for the name column just so I could apply a css class and it looks better but it doesn't function correctly. When the editor opens up the value in the text box is empty (see image). Surely there must be an easier way to apply a css class.
Do I have to create an editor template for all text boxes in the grid? If so, how can I have it bring the value when editing?
Here's the code for the grid:
#(Html.Kendo().Grid<Product>()
.Name("Grid")
.Columns(columns => {
columns.Bound(p => p.Name);
columns.Bound(p => p.UnitPrice).Width(140);
columns.Bound(p => p.Units).Width(140);
columns.Bound(p => p.Discontinued).Width(100);
columns.Bound(p => p.Date).Width(100).Format("{0:d/M/yyyy}");
columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.Events(events => events.Error("error_handler"))
.Model(model => model.Id(p => p.Id))
.Create(update => update.Action("EditingInline_Create", "Home"))
.Read(read => read.Action("EditingInline_Read", "Home"))
.Update(update => update.Action("EditingInline_Update", "Grid"))
.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
)
)
Here's the code for the name editor template:
#using Kendo.Mvc.UI
#model KendoUiOne.Models.Product
#Html.TextBoxFor(x=>x.Name, new {#class = "k-input k-textbox"})
The issue is that model passed to the editor template is not the Product but just the string. This means that the model of the editor template is string.
And you should declare the TextBox helper to be for the model itself.
the Editor template should look like this:
#model string
#Html.TextBoxFor(x=>x, new {#class = "k-input k-textbox"})
Interesting, try to set the name of the widget to be "Name" instead of using the TextBoxFor helper.
e.g.
#Html.TextBox("Name", new {#class = "k-input k-textbox"})
Try:
#Html.TextBox("Name", Model.Name, new {#class = "k-input k-textbox"})
Or try with HTML first, to debug the issue then revert back to Html.TextBox helper:
<input type="text" id="Name" value="#Model.Name" class="k-input k-textbox"/>