@(Html.Kendo().Grid<FileDataModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.FileName);
columns.Bound(c => c.Title);
columns.Bound(c => c.SelectedDocType);
columns.Template(@<text></text>).Title("<b>Download</b>")
.ClientTemplate("<a href='" + Url.Action("Download", "Home", new { @id = "#=Id#" }) + "'>Download</a>")
.HtmlAttributes(new { style = "text-align: left;" });
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Title("<b>Action</b>");
}).Events(e => e.DataBound("onDataBound"))
.Scrollable(a=>a.Height("auto"))
.Selectable()
.Groupable()
.Sortable()
.Editable(config => config.Mode(GridEditMode.PopUp))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='addFilePopup()' href='#' id='addNewFile'></span>Add new file</a>"))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(false)
.PageSize(20)
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
model.Field(p => p.CreatedDate).Editable(false);
model.Field(p => p.DateSigned).Editable(false);
model.Field(p => p.DateSubmitted).Editable(false);
model.Field(p => p.DjjNumber).Editable(false);
model.Field(p => p.ScanDate).Editable(false);
model.Field(p => p.ScanUser).Editable(false);
})
.Read(read => read.Action("GetFiles", "Home", new { djjNumber = Model.DjjNumber }))
.Update(update => update.Action("EditingInline_Update", "Home"))
.Destroy(destroy => destroy.Action("EditingInline_Destroy", "Home"))
))
</div>
Kendo Autocomplete and Validation function.
$("#txtDocType").kendoAutoComplete({
dataSource: new kendo.data.DataSource({
type: "json", // specifies data protocol
pageSize: 3,//This is to set search limit
serverFiltering: true,
transport: {
read: '@Url.Action("GetDocumentTypes", "Home")',
parameterMap:function(){
return {filterKey:$("#txtDocType").data("kendoAutoComplete").value()};
}
},
}),
dataTextField:"Type",
filter: "contains",
minLength: 3,//This is to set minimum character length for autocomplete
});
});
function ValidateDocumentType(){
var isValidDocType=true;
$.ajax({
data:{documentType:$("#txtDocType").val()},
url:'@Url.Action("GetDocumentType", "Home")',
async: false,
success:function(data) {
if(data==false)
isValidDocType=false;
complete=true;
},
});
return isValidDocType;
}
Auto complete for Document type works as expected when i add new file (Tool bar add file).
How do I achieve the same auto complete and validation if user clicks edit/Update? I am using ScaffoldColumn to make the Doc type editable when user clicks Edit in Kendo Grid.
6 Answers, 1 is accepted
Rank 1
[quote]Sai said:
Auto complete for Document type works as expected when i add new file (Tool bar add file).
How do I achieve the same auto complete and validation if user clicks edit/Update? I am using ScaffoldColumn to make the Doc type editable when user clicks Edit in Kendo Grid??
@(Html.Kendo().Grid<FileDataModel>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.FileName);
columns.Bound(c => c.Title);
columns.Bound(c => c.SelectedDocType);
columns.Template(@<text></text>).Title("<b>Download</b>")
.ClientTemplate("<a href='" + Url.Action("Download", "Home", new { @id = "#=Id#" }) + "'>Download</a>")
.HtmlAttributes(new { style = "text-align: left;" });
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Title("<b>Action</b>");
}).Events(e => e.DataBound("onDataBound"))
.Scrollable(a=>a.Height("auto"))
.Selectable()
.Groupable()
.Sortable()
.Editable(config => config.Mode(GridEditMode.PopUp))
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='addFilePopup()' href='#' id='addNewFile'></span>Add new file</a>"))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(false)
.PageSize(20)
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
model.Field(p => p.CreatedDate).Editable(false);
model.Field(p => p.DateSigned).Editable(false);
model.Field(p => p.DateSubmitted).Editable(false);
model.Field(p => p.DjjNumber).Editable(false);
model.Field(p => p.ScanDate).Editable(false);
model.Field(p => p.ScanUser).Editable(false);
})
.Read(read => read.Action("GetFiles", "Home", new { djjNumber = Model.DjjNumber }))
.Update(update => update.Action("EditingInline_Update", "Home"))
.Destroy(destroy => destroy.Action("EditingInline_Destroy", "Home"))
))
</div>
Kendo Autocomplete and Validation function.
$("#txtDocType").kendoAutoComplete({
dataSource: new kendo.data.DataSource({
type: "json", // specifies data protocol
pageSize: 3,//This is to set search limit
serverFiltering: true,
transport: {
read: '@Url.Action("GetDocumentTypes", "Home")',
parameterMap:function(){
return {filterKey:$("#txtDocType").data("kendoAutoComplete").value()};
}
},
}),
dataTextField:"Type",
filter: "contains",
minLength: 3,//This is to set minimum character length for autocomplete
});
});
function ValidateDocumentType(){
var isValidDocType=true;
$.ajax({
data:{documentType:$("#txtDocType").val()},
url:'@Url.Action("GetDocumentType", "Home")',
async: false,
success:function(data) {
if(data==false)
isValidDocType=false;
complete=true;
},
});
return isValidDocType;
}
[/quote]
The provided snippet reveals that the Kendo UI Grid has a custom Toolbar template, i.e:
.ToolBar(toolBar => toolBar.Template("<a class='k-button k-button-icontext' onclick='addFilePopup()' href='#' id='addNewFile'></span>Add new file</a>"))However, I am missing the addFilePopup() function so I can provide you with more concrete guidance. Additionally, the creation of the Kendo UI AutoComplete seems out of context. Could you please advise how and where it is used?
Meanwhile, I will give you some generic feedback and you can let me know if you need more assistance.
1) To use a specific template for a column whilst in edit mode, utilise the columns editor configuration:
http://docs.telerik.com/kendo-ui/api/aspnet-mvc/Kendo.Mvc.UI.Fluent/GridBoundColumnBuilder#methods-EditorTemplateName(System.String)
2)To validate the Kendo UI model, I would suggest following the approach in the custom validation demo:
http://demos.telerik.com/aspnet-mvc/grid/editing-custom-validation
I hope this helps.
Regards,
Alex
Telerik by Progress
Rank 1
Thank you, Alex.
We have a requirement that addFilePopup() , Edit, Delete will be disabled for closed event dates. which is determined by EndServiceDate. I have assinged an ID for addFilePopup() and wrote function which checks the EndServiceDate based on it disables addFilePopup() , Edit, Delete. along with this Autocomplete function is written for SelectedDocType field in addFilePopup().
Every thing works fine. Now I have the requirement to achieve same Auto complete/Validation for SelectedDocType when user wants to Edit (Popup) a row. Below is the complete Jquery function. Let me know if you need any other details. Thanks.
<style>
.form-horizontal .control-label {
text-align: left !important;
}
</style>
<script>
$(document).ready(function() {
$("#txtScanDate").kendoDatePicker();
$("#txtDateSubmitted").kendoDatePicker();
$("#txtDateSigned").kendoDatePicker();
$("#txtDateCreated").kendoDatePicker();
var validator = $("form").kendoValidator({
rules: {
upload: function(input) {
if (input[0].type === "file") {
return input.closest(".k-upload").find(".k-file").length;
}
return true;
},
custom:function(input){
if(input.is("[name=SelectedDocType]")){
var isValidDocType=ValidateDocumentType();
return isValidDocType;
}
//Add any more conditions for custom validation here
return true;
}
},
messages: { upload:"Please select a file",
custom:function(input){
if(input.is("[name=SelectedDocType]"))
{ return "Invalid Document Type selected";}
//Add any more conditions for custom validation here
}
}}).data("kendoValidator");
var myWindow = $("#window");
function onClose() {
}
myWindow.kendoWindow({
width: "900px",
title: "Add new file",
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
close: onClose
}).data("kendoWindow").center();
function load(e) {
loadImage(
e.target.files[0],
function(img) {
$("#divImg").html(img);
},
{ maxWidth: 600 }
);
}
$("input[type='file']").on("change", load);
var endServiceDate = @Html.Raw(Json.Encode(Model.EndServiceDate));
if (endServiceDate == null || !endServiceDate) {
$("#addNewFile").attr('disabled', true);
} else {
$("#addNewFile").attr('disabled', false);
}
$("#txtDocType").kendoAutoComplete({
dataSource: new kendo.data.DataSource({
type: "json", // specifies data protocol
pageSize: 3,//This is to set search limit
serverFiltering: true,
transport: {
read: '@Url.Action("GetDocumentTypes", "Home")',
parameterMap:function(){
return {filterKey:$("#txtDocType").data("kendoAutoComplete").value()};
}
},
}),
dataTextField:"Type",
filter: "contains",
minLength: 3,//This is to set minimum character length for autocomplete
});
});
function ValidateDocumentType(){
var isValidDocType=true;
$.ajax({
data:{documentType:$("#txtDocType").val()},
url:'@Url.Action("GetDocumentType", "Home")',
async: false,
success:function(data) {
if(data==false)
isValidDocType=false;
complete=true;
},
});
return isValidDocType;
}
function onAdditionalData() {
return {
text: $("#products").val()
};
}
function addFilePopup() {
if ($("#addNewFile").attr('disabled') !== "disabled") {
$("#window").data("kendoWindow").center().open();
}
//if (endServiceDate == null || !endServiceDate) {
// $("#window").data("kendoWindow").center().open();
//}
}
function onRemove(e) {
$("#divImg").html('');
}
function onSelect(e) {
setTimeout(function() {
$("input[type='file']").on("change", function(e) {
loadImage(
e.target.files[0],
function(img) {
$("#divImg").html(img);
},
{ maxWidth: 600 }
);
});
}, 2000);
}
function onSuccess(e) {
}
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
var endServiceDate = @Html.Raw(Json.Encode(Model.EndServiceDate));
if (endServiceDate == null || !endServiceDate) {
grid.table.find(".k-grid-edit").prop('disabled', true).attr('disabled', true);
grid.table.find(".k-grid-delete").prop('disabled', true).attr('disabled', true);
} else {
grid.table.find(".k-grid-edit").prop('disabled', false).attr('disabled', false);
grid.table.find(".k-grid-delete").prop('disabled', false).attr('disabled', false);
}
}
Rank 1
Attached Screen Shots. In AddnewFile PopUp I have already have Autocomplete/Validate for DocumnetType.
How do I have the same functionality for SelectedDocType in EditPopup when User clicks Edit?
Thank you, Alex.
I am glad to hear that you are making progress.
To change the columns field editor, you can define an editor with the ClientTemplate option:
http://demos.telerik.com/aspnet-mvc/grid/editing-custom
The validator with kick in as long as you have added the [Required] attribute to the model as outlined at:
http://docs.telerik.com/kendo-ui/aspnet-mvc/validation#use-dataannotation-attributes
Kind Regards,
Alex
Telerik by Progress
Rank 1
Hi Alex,
I have resolved this issue by adding events.Edit("edit_handler") and writing required logic inside edit_handler function for Autocomplete in EditPopup.
Thanks.