Hide MultiColumnComboBox Column

[Richard]

Suppose I have a MultiColumnComboBox like below.  How can I have like 10 columns in it but hide specific ones of them?  I need the data from the additional columns when the user makes a selection but, I don't want them to show.  So in the example below, how could I hide the ID, and Inst columns?  I think it would be done in the dataBound event but no idea how to do it.

--Rich

 

@(Html.Kendo().MultiColumnComboBox()
    .Name("MainSched")
    .DataTextField("Room")
    .DataValueField("Room")
    .Columns(columns =>
    {
        columns.Add().Field("ID").Title("ID").Width("100px;");
        columns.Add().Field("Room").Title("Room").Width("100px;");
        columns.Add().Field("Inst").Title("Inst").Width("100px;");
        columns.Add().Field("MKey").Title("MKey").Width("100px");
    })
    .HtmlAttributes(new { @class = "FontSmall" })
    .Height(400)
    .DataSource(source => source
    .Custom()
    .Transport(transport => transport
        .Read(read =>
        {
            read.Action("MainSched_Read", "Home");
        })))
    .Events(events => events.Change("MainSched_Change").DataBound("MainSchedDataBound"))
    )

[Martin]

Hello Richard,

Currently there is no built-in method that would allow you to hide columns. A possible approach not to display specific columns would be to set 0 width for the column.

.Columns(columns =>
{
    columns.Add().Field("ID").Title("ID").Width("0");
    columns.Add().Field("Room").Title("Room").Width("100px;");
    columns.Add().Field("Inst").Title("Inst").Width("0");
    columns.Add().Field("MKey").Title("MKey").Width("100px");
})

Let me know if that is acceptable to you.

Regards,
Martin
Progress Telerik

[Richard]

Thanks Martin.

That got rid of the header but not the data.  It did point me in the right direction though.  I found a way to do what I want.  It is not pretty, but it works.

.Columns(columns =>
{
    columns.Add().Field("ID").Title("ID").Width("0").Template("<span style='display:none;width:0;padding:0;'># data.ID #</span>").HeaderTemplate("<span style='display:none;width:0;padding:0;'></span>");
    columns.Add().Field("Room").Title("Room").Width("100px;");
    columns.Add().Field("Inst").Title("Inst").Width("0").Template("<span style='display:none;width:0;padding:0;'># data.Inst #</span>").HeaderTemplate("<span style='display:none;width:0;padding:0;'></span>");;
    columns.Add().Field("MKey").Title("MKey").Width("100px");
})

<style>
    .k-grid-list > .k-item > .k-cell {
        padding: 0 !Important;
    }
</style>

[Ivan Danchev]

Hi Richard,

Yes, this is a valid approach. You could also apply a custom class to the span element in the templates and use that class as a selector in a CSS rule that will set display, width, etc. styles. This way you can avoid duplicating identical styles across multiple columns.

Regards,
Ivan Danchev
Progress Telerik