AutoComplete in grid column

4 posts, 0 answers
  1. Ahmad
    Ahmad avatar
    2 posts
    Member since:
    May 2012

    Posted 05 Sep 2013 Link to this post

    I use AutoComplete in grid column
    But i can't send AutoComplete value to server
    Please help me.
    @(Html.Kendo().Grid<MvcApplication10.Models.Product>()
        .Name("Customers")
        .ToolBar(tb => tb.Create())
        .Pageable()
        .Columns(cols =>
        {
            cols.Bound(c => c.Name).EditorTemplateName("products");
            cols.Bound(c => c.Number);             
            cols.Command(cmd =>
            {
                cmd.Edit();
                cmd.Destroy();           
            });
        })
        .DataSource(dataSource => dataSource.Ajax()
            .Model(model => model.Id(c => c.ProductID))
            .Read("GetCustomers", "Product")
            .Update("UpdateCustomer", "Product")
            .Create("InsertCustomer", "Product")
            .Destroy("DeleteCustomer", "Product"))   
    )
    and AutoComplete file(products.cshtml) is placed in EditorTemplate folder in this view
     
    @(Html.Kendo().AutoComplete()
              .Name("products")
              .DataTextField("Name")
              .Filter("contains")                         
              .MinLength(3)
              .HtmlAttributes(new { style = "width:250px" })
              .DataSource(source => {
                  source.Read(read =>
                  {
                      read.Action("GetProducts", "AutoComplate");                                                                                 
                  })
                  .ServerFiltering(false);
              })
        )

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 09 Sep 2013 Link to this post

    Hello Ahmad,

    The widget name should be the same as the property name in order for the value to be bound correctly:

    @(Html.Kendo().AutoComplete()
          .Name("Name")
          .DataTextField("Name")
          .Filter("contains")                        
          .MinLength(3)
          .HtmlAttributes(new { style = "width:250px" })
          .DataSource(source => {
              source.Read(read =>
              {
                  read.Action("GetProducts", "AutoComplate");                                                                                
              })
              .ServerFiltering(false);
          })
    )
    You could also remove the Name method and use the AutoCompleteFor helper to generate the correct name automatically based on the expression.

    Regards,
    Daniel
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Toan
    Toan avatar
    3 posts
    Member since:
    May 2014

    Posted 06 Jun 2014 Link to this post

    The same problem with me. I cannot display the Autocomplete value to grid column : Category . It cannot run in this grid column. But if i put autocomplete outside the Grid, it work. Please help

      View :

    @(Html.Kendo().Grid<VNS1.Models.OrderViewModel>()
                    .Name("Orders_#=ShopID#")
            .Columns(columns =>
            {

                columns.Bound(o => o.Category).EditorTemplateName("OrderEditor");
                columns.Bound(o => o.Quantity).Width(140);
                columns.Bound(o => o.Price).Width(200);
                columns.Command(command => { command.Destroy(); }).Width(172);
            })
                                    .ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); }

                        )
                .Editable(editable => editable.Mode(GridEditMode.InCell))
                .Pageable()
                .Navigatable()
                .Sortable()
                 
            .DataSource(source => source
                .Ajax()
                .Batch(true)
                .PageSize(4)
                .ServerOperation(false)
            .Model(model =>
                        {
                            model.Id(o => o.OID);
                        })

                        .Read(read => read.Action("Order_Read", "Order", new { ShopId = "#=ShopID#" }))
                        .Create(create => create.Action("Order_Create", "Order", new { ShopId = "#=ShopID#" })) // Action invoked when the user saves a new data item
                        .Update(update => update.Action("Order_Update", "Order"))  // Action invoked when the user saves an updated data item
                        .Destroy(destroy => destroy.Action("Order_Destroy", "Order")) // Action invoked when the user removes a data item
                        
                        )


    OrderEditor.cshtml :
    @(Html.Kendo().AutoComplete()
              .Name("Category")
              .DataTextField("Category")
              .Filter("contains")
              .MinLength(1)
              .HtmlAttributes(new { style = "width:250px" })
              .DataSource(source =>
              {
                  source.Read(read =>
                  {
                      read.Action("GetCategory", "User");
                  })
                  .ServerFiltering(false);
              })
    )

    Regards,
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 10 Jun 2014 Link to this post

    Hello,

    The code seems correct. Could you try with the valuePrimitive configuration:
    Html.Kendo().AutoComplete()
          .Name("Category")
          .ValuePrimitive(true)
          ...

    If the problem persists, then could you provide the code for the model and the controller as well?

    Regards,
    Daniel
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

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