Autocomplete KendoUI grid edit popup

7 posts, 0 answers
  1. Sai
    Sai avatar
    6 posts
    Member since:
    Jun 2016

    Posted 07 Oct Link to this post

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

     

  2. Sai
    Sai avatar
    6 posts
    Member since:
    Jun 2016

    Posted 07 Oct in reply to Sai Link to this post

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

     

     

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    115 posts

    Posted 11 Oct Link to this post

    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.
  5. Sai
    Sai avatar
    6 posts
    Member since:
    Jun 2016

    Posted 11 Oct in reply to Alex Hajigeorgieva Link to this post

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

     

     

  6. Sai
    Sai avatar
    6 posts
    Member since:
    Jun 2016

    Posted 11 Oct in reply to Alex Hajigeorgieva Link to this post

    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.

     

  7. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    115 posts

    Posted 13 Oct Link to this post

    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
  8. Sai
    Sai avatar
    6 posts
    Member since:
    Jun 2016

    Posted 18 Oct in reply to Alex Hajigeorgieva Link to this post

    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.

Back to Top
UI for ASP.NET MVC is VS 2017 Ready