This is a migrated thread and some comments may be shown as answers.

Autocomplete KendoUI grid edit popup

6 Answers 275 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sai
Top achievements
Rank 1
Sai asked on 07 Oct 2016, 01:56 PM

 @(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

Sort by
0
Sai
Top achievements
Rank 1
answered on 07 Oct 2016, 04:25 PM

[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]
0
Alex Hajigeorgieva
Telerik team
answered on 11 Oct 2016, 08:33 AM
Hi Sai,

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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
0
Sai
Top achievements
Rank 1
answered on 11 Oct 2016, 12:42 PM

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);
        }
    }

 

 

0
Sai
Top achievements
Rank 1
answered on 11 Oct 2016, 12:59 PM

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.

 

0
Alex Hajigeorgieva
Telerik team
answered on 13 Oct 2016, 08:00 AM
Hi Sai,

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Sai
Top achievements
Rank 1
answered on 18 Oct 2016, 07:27 PM

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.

Tags
Grid
Asked by
Sai
Top achievements
Rank 1
Answers by
Sai
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or