[Solved] Grid combo Bind different pickup list

[Daryl Shenner]

Posted on Feb 9, 2012

i need to bind Grid combo box as an different selections on each row on same column.

[Answer] column i need to pickup different selections.

but collection will be different for each row it's possible to bind in Grid?.


Ex


i want to bind data like this.

[Georgi Krustev]

Hello Daryl,


Thank you for contacting us. One possible solution is to use server template and define the ComboBox in the you like. I will need to elaborate more on this (code samples or running test project) in order to provide a better solution of the issue.


Regards,
Georgi Krustev
the Telerik team

[Daryl Shenner]

Hi Team,

My Scenario is as below:

I will have  2 Columns in my Grid. I'd like to have the column 2 in the Combo box binded to the respective rows

Column 1 - Normal Cell	Column 2 - Combo Column
Days	Monday Tuesday Wednesday Thursday Friday
Months	January February MarchApril

I'm unable to find solution to bind different values to the combo in each row. Can any one help us ?

[Georgi Krustev]

Hello Daryl,

 
In order to achieve your goal the object used in the grid should have property of List<SelectListItem> type. Thus you can use this property in the column template and bind the combobox to it. Thus every row will bind combobox to that property. 

Kind regards,
Georgi Krustev
the Telerik team

[Daryl Shenner]

Hi Team,

Can we have any sample demo url or project. what is the Grid object means? You mean the model that is binded to the grid or the property that is binded to the combo. If you provide us the sample projet or url containing the sample, that would probably help us more.

Thanks for your care and response

[Georgi Krustev]

Hello Daryl,

 
I have prepared a test project for you. Let me know if other questions arise.

All the best,
Georgi Krustev
the Telerik team

[Daryl Shenner]

Hi Team,

I used the sample application that you sent. But I'm unable to view the Combo box in the cell. I'm using InCell Editing and also I'm using Ajax Call to load and Save it. The Sample that you gave doesn't having any Operations.

Here is my View.

 @(Html.Telerik().Grid<HomeFrontCRM.Web.UI.Models.OptionModels>().Name("OptionListGridView").DataKeys(keys =>
                                {
                                    keys.Add(o => o.OptionID);
                                }).ToolBar(commands =>
                                {
                                    commands.SubmitChanges().ButtonType(GridButtonType.Image);
                                }).DataBinding(dataBinding => dataBinding.Ajax().Select("_SelectionOptionClientSide_Customers", "Test", new { OptionID = "OptionID" }).Update("_SaveOptionBatchEditing", "PopUp"))
                                .Columns(columns =>
                                {
                                    columns.Bound(o => o.SelectedFlag).ClientTemplate("<input type='checkbox' onchange='checkboxChange(event)'  name='SelectedFlag' <#= SelectedFlag? checked='checked' : '' #> />").Width(40).Title("Select");
                                    columns.Bound(o => o.Description).Title("Description").Width(250).ReadOnly(true);
                                    columns.Bound(o => o.Qty).Title("Qty").Width(45).Format("{0:N}");
                                    columns.Bound(o => o.UOM).Title("UOM").Width(50).ReadOnly(true);
                                    columns.Bound(o => o.Price).Title("Price").Format("{0:c}").HtmlAttributes(new { style = " text-align: right" }).Width(65);
                                    columns.Bound(o => o.TotalPrice).Title("Total Price").Format("{0:c}").ReadOnly(true).HtmlAttributes(new { style = " text-align: right" }).Width(70);
                                    columns.Bound(o => o.Location).Title("Location").Width(50);
                                    columns.Bound(o => o.Style).Title("Style").Width(50).ReadOnly(true);
                                   columns.Template(o => Html.Telerik().DropDownListFor(e => e).BindTo(new SelectList((System.Collections.IEnumerable)Session["ddlLocation"], "Text", "Text"))).Visible(true).Width(60).Title("Color123");
                                    columns.Template(
                        @<text>
                            @(Html.Telerik().ComboBox()
                                  .Name("ComboBox" + item.id.ToString())
                                          .BindTo(new SelectList(item.Color123, "ID", "Name"))
                            )
                        </text>
                    ).Title("Picture").Width(150);
                                     columns.Bound(o => o.Color).Title("Color").Width(50);
                                    columns.Bound(o => o.Finish).Title("Finish").Width(50).ReadOnly(true);
                                    columns.Bound(o => o.Others).Title("Others").Width(50).ReadOnly(true);
                                    columns.Bound(o => o.Comments).Title("Comments").Width(100);
                                    columns.Bound(o => o.ImagePath).Title("");//.Width(1).Hidden(true);
                                    columns.Bound(o => o.CategoryID).Title("").Width(1).Hidden(true);
                                    columns.Bound(o => o.SubCategoryID).Title("").Width(1).Hidden(true);
                                    columns.Bound(o => o.OptionID).Hidden(true);
                                    columns.Bound(o => o.OptionImageCount).Hidden(true);
                                    columns.Bound(o => o.IsColorRequired).Hidden(true);
                                    columns.Bound(o => o.IsColorStrictList).Hidden(true);
                                    columns.Bound(o => o.IsFinishRequired).Hidden(true);
                                    columns.Bound(o => o.IsFinishStrictList).Hidden(true);
                                    columns.Bound(o => o.IsOtherRequired).Hidden(true);
                                    columns.Bound(o => o.IsOtherStrictList).Hidden(true);
                                    columns.Bound(o => o.IsStyleRequired).Hidden(true);
                                    columns.Bound(o => o.IsStyleStrictList).Hidden(true);
                                }).Editable(editing => editing.Mode(GridEditMode.InCell).DefaultDataItem(new HomeFrontCRM.Web.UI.Models.OptionModels
                                {
                                })).Selectable().Pageable(paging => paging.PageSize(10).Style(GridPagerStyles.NextPreviousAndDropDown))
                                .Sortable().Scrollable(scrolling => scrolling.Height(350))
                                .Reorderable(reorder => reorder.Columns(true))
                                .Resizable(resizing => resizing.Columns(true)).HtmlAttributes(new { style = " font-family:arial; font-size: .7em;width:825px" })
                                .ClientEvents(events => events.OnRowSelect("onRowSelected").OnEdit("OnChangeGrid"))
                                .ClientEvents(clientEvents => clientEvents.OnDataBinding("onDataBinding"))
                                .RowAction(row =>
                                {
                                    row.Selected = row.DataItem.OptionID.Equals(ViewData["id"]);
                                })
                                .ClientEvents(events => events.OnRowDataBound("OnRowDataBound"))


                                    )

My Model:

public class OptionModels
    {
        public string OptionID { get; set; }
        public string Description { get; set; }

        [UIHint("Qty")]
        public decimal Qty { get; set; }
        public string UOM { get; set; }
        public string Price { get; set; }
        public string Cost { get; set; }
        public string TotalPrice { get; set; }
        [UIHint("Location")]
        public string Location { get; set; }
        public string Color { get; set; }
        public IEnumerable<Color> Color123 { get; set; }
        public string Style { get; set; }
        public string Finish { get; set; }
        public string Others { get; set; }
        public string Category { get; set; }
        public string SubCategory { get; set; }
        public string Comments { get; set; }
        public int OptionType { get; set; }
        public bool IsCustomOption { get; set; }
        public string OptionIDs { get; set; }
        public bool SelectedFlag { get; set; }
        public string SNO { get; set; }
        public string ImagePath { get; set; }
        public string QuoteDetailID { get; set; }
        public string ChangeOrderDetailsID { get; set; }
        public string CategoryID { get; set; }
        public string SubCategoryID { get; set; }
        public bool IsOPTDeleted { get; set; }
        public bool CheckBoxflag { get; set; }
        public string LocationID { get; set; }
        public string BasePrice { get; set; }
        public int OptionImageCount { get; set; }
        public Dictionary<string, string> dictAliasNames { get; set; }
        public string DescriptionHeader { get; set; }
        public string QtyHeader { get; set; }
        public string UOMHeader { get; set; }
        public string CostHeader { get; set; }
        public string PriceHeader { get; set; }
        public string TotalPriceHeader { get; set; }
        public string LocationHeader { get; set; }
        public string StyleHeader { get; set; }
        public string ColorHeader { get; set; }
        public string FinishHeader { get; set; }
        public string OthersHeader { get; set; }
        public string CommentsHeader { get; set; }
        public string BuilderDeclinedHeader { get; set; }
        public string ColorID { get; set; }
        public string StyleID { get; set; }
        public string FinishID { get; set; }
        public string OtherID { get; set; }
        public int id { get; set; }
        public bool IsColorRequired { get; set; }
        public bool IsColorStrictList { get; set; }
        public bool IsStyleRequired { get; set; }
        public bool IsStyleStrictList { get; set; }
        public bool IsFinishRequired { get; set; }
        public bool IsFinishStrictList { get; set; }
        public bool IsOtherRequired { get; set; }
        public bool IsOtherStrictList { get; set; }

        public string DefaultBuilderDeclinedHeader = "Builder Declined";
        public string DefaultDescriptionHeader = "Description";
        public string DefaultQtyHeader = "Qty";
        public string DefaultUOMHeader = "UOM";
        public string DefaultCostHeader = "Cost";
        public string DefaultPriceHeader = "Price";
        public string DefaultTotalPriceHeader = "Total Price";
        public string DefaultLocationHeader = "Location";
        public string DefaultStyleHeader = "Style";
        public string DefaultColorHeader = "Color";
        public string DefaultFinishHeader = "Finish";
        public string DefaultOthersHeader = "Others";
        public string DefaultCommentsHeader = "Comments";
    }

Code that loads the Collection:

/// <summary>
        /// Colors the combo.
        /// </summary>
        /// <param name="colorID">The color ID.</param>
        /// <returns></returns>
        private IEnumerable<Color> ColorCombo(string colorID)
        {
            List<Color> AllColor = new List<Color>();
            if (!string.IsNullOrEmpty(colorID))
            {
                List<AttributesModels> attributesList = Session["attributesList"] as List<AttributesModels>;
                if (attributesList != null && attributesList.Count > 0)
                {
                    var obj = attributesList.FindAll(x => x.ListID == colorID);
                    if (obj != null)
                    {
                        for (int count = 0; count < obj.Count(); count++)
                        {
                            Color curColor = new Color();
                            curColor.ID = obj[count].AttributeListValueID;
                            curColor.Value = obj[count].Value;
                            AllColor.Add(curColor);
                        }
                    }
                }
            }
            return AllColor;
        }

[Daryl Shenner]

Hi,
Can anyone respond to us on the mentioned issue. We badly need the solution

[Georgi Krustev]

Hello Daryl,

As it is pointed in this help topic, the server templates are not supported with Ajax binding. Check this code library which shows how to use ComBox editor in InCell editing. 

Regards,
Georgi Krustev
the Telerik team

[Daryl Shenner]

If you had a detail look into our requirement, you would notice that we need to bind different datasource to the combo box in each row. The sample that you gave contains the same datasource for all the rows which works perfect to me already.
It Should be Possibleto bind different datasource to the combo in each row with InCell Editing. Am I right??

Please reply back as soon as possible

[Georgi Krustev]

Hello Daryl,

 
I have updated the test project in order to bind combobox with different data on edit using InCell editing. Check it and let me know if other questions arise.

All the best,
Georgi Krustev
the Telerik team

[Daryl Shenner]

Thanks a Ton George, This Works Perfect.


In IE9.0 and 8.0 as well. Thanks again