Autocomplete column

[Brad]

I want to be able to have the size column, have an autocomplete feature to where they would start typing and it would automatically show them the options that they can choose from, and they would need to choose one of them. Also i want to have the Description column also have an autocomplete feature but i want its options to be loaded based on whatever is chosen for the size column. Is this possible? if so, how would i go about doing something like this?

protected void Page_Load(object sender, EventArgs e)
        {
            if (Session["GridData"] == null)
            {
                DataTable table = GetTable();
                Session.Add("GridData", table);
            }
            DefineGridStructure();
        }


        private void DefineGridStructure()
        {
            RadGrid grid = new RadGrid();
            grid.ID = "RadGrid1";
            grid.NeedDataSource += new GridNeedDataSourceEventHandler(grid_NeedDataSource);
            grid.AutoGenerateEditColumn = true;
            grid.AutoGenerateDeleteColumn = true;
            grid.AllowAutomaticInserts = false;
            grid.Width = Unit.Percentage(100);
            grid.PageSize = 15;
            grid.AllowPaging = true;
            grid.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric;
            grid.AutoGenerateColumns = false;
            grid.MasterTableView.Width = Unit.Percentage(100);
            grid.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.TopAndBottom;
            grid.AllowAutomaticDeletes = false;
            grid.AllowAutomaticUpdates = false;
            grid.InsertCommand +=grid_InsertCommand;
            grid.MasterTableView.DataKeyNames = new string[] { "RowNumber" };
            GridBoundColumn boundColumn = new GridBoundColumn();
            boundColumn.DataField = "RowNumber";
            boundColumn.HeaderText = "RowNumber";
            boundColumn.ReadOnly = true;
            grid.MasterTableView.Columns.Add(boundColumn);
            boundColumn = new GridBoundColumn();
            boundColumn.DataField = "Size";
            boundColumn.HeaderText = "Size";
            grid.MasterTableView.Columns.Add(boundColumn);
            boundColumn = new GridBoundColumn();
            boundColumn.DataField = "Description";
            boundColumn.HeaderText = "Description";
            grid.MasterTableView.Columns.Add(boundColumn);
            boundColumn = new GridBoundColumn();
            boundColumn.DataField = "Quantity";
            boundColumn.HeaderText = "Quantity";
            grid.MasterTableView.Columns.Add(boundColumn);
            boundColumn = new GridBoundColumn();
            boundColumn.DataField = "Duration";
            boundColumn.HeaderText = "Duration";
            grid.MasterTableView.Columns.Add(boundColumn);
            boundColumn = new GridBoundColumn();
            boundColumn.DataField = "DurationType";
            boundColumn.HeaderText = "DurationType";
            grid.MasterTableView.Columns.Add(boundColumn);
            boundColumn = new GridBoundColumn();
            boundColumn.DataField = "Amount";
            boundColumn.HeaderText = "Amount";
            grid.MasterTableView.Columns.Add(boundColumn);
            PlaceHolder1.Controls.Add(grid);
        }

        private void grid_InsertCommand(object sender, GridCommandEventArgs e)
        {
            // Looking to loop through the form so i can insert the values into the datatable
        }





        void grid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            DataTable current = (DataTable)Session["GridData"];
            RadGrid grid = (RadGrid)sender;
            grid.DataSource = current;

        }



        static DataTable GetTable()
        {
            //
            // Here we create a DataTable with a few columns.
            //
            // Create Datatable to store all colums
            DataTable dt = new DataTable();
            DataRow dr = null;
            dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
            dt.Columns.Add(new DataColumn("Size", typeof(string)));
            dt.Columns.Add(new DataColumn("Description", typeof(string)));
            dt.Columns.Add(new DataColumn("Quantity", typeof(string)));
            dt.Columns.Add(new DataColumn("Unit", typeof(string)));
            dt.Columns.Add(new DataColumn("Duration", typeof(string)));
            dt.Columns.Add(new DataColumn("DurationType", typeof(string)));
            dt.Columns.Add(new DataColumn("Amount", typeof(string)));
            dr = dt.NewRow();
            dr["RowNumber"] = 1;
            dr["Size"] = string.Empty;
            dr["Description"] = string.Empty;
            dr["Quantity"] = string.Empty;
            dr["Unit"] = string.Empty;
            dr["Duration"] = string.Empty;
            dr["DurationType"] = string.Empty;
            dr["Amount"] = string.Empty;
            dt.Rows.Add(dr);
            return dt;
        }

[Vasil]

Hello Brad,

It is possible, but not out of the box.

You can handle the ItemDataBound event of the grid. Find the AutoCompleteBox and rebind it using values based on the filter value of size column.

Regards,
Vasil
Telerik

[Brad]

What if i already have something for the ItemDataBound event, how can i have both?

I have the following event for the ItemDataBound:

protected void grid_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
  {
      if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
      {
          GridEditFormItem editItem = (GridEditFormItem)e.Item;
          DropDownList ddl = (DropDownList)editItem.FindControl("dropdownlist1");
          ddl.DataSource = (DataTable)GetTableForDropDown();
          ddl.DataTextField = "DurationType";
          ddl.DataValueField = "DurationType";
          ddl.SelectedIndex = editItem.ItemIndex;
      }
  }

[Vasil]

Hello Brad,

Here is an example how to apply different logic depending on the type of the item:

if (e.Item is GridEditFormItem && e.Item.IsInEditMode)
{
  //......
}
else if(e.Item is GridFilterItem)
{
  //......
}

Regards,
Vasil
Telerik