Edit PopUp Autocomplete for a field

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

    Posted 07 Oct Link to this post

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

Back to Top