This is a migrated thread and some comments may be shown as answers.

need help with dropdownlist in a grid

2 Answers 101 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 16 Jun 2016, 10:07 PM

I have a grid bound to a ViewModel, and the 3rd column is bound to an empty property.  This data did not come from a database,so there is no foreign key relationship, in fact there's no database involved at all.  In the 3rd column I would like a drop down.  This would be the same dropdown in each row of the grid. That dropdown should contain a list of properties (List<string>).  When a value is selected,that specific item should be removed from the dropdown list on subsequent rows.

So how can I go about building such a beast?  It's easy enough to do in a WebForm, but alas using MVC and these Kendo components has left a real bad taste in my mouth.  It seems as if everything has to be gotten via an AJAX call, or must call into some action, or must be bound somewhere along the line; and nothing seems to work out of the box.

I'm using this to map a CSV file to an object.  So using the file uploader action, I parse the column headers out of the CSV file, and create a List<CVSColumn> that is actually a property of my CSVColumnsViewModel:

namespace FileUploader_Mapper.Models
{
    public class CSVColumn
    {
        public int ColumnNumber { get; set; }
        public string ColumnName { get; set; }
        public string MappedTo { get; set; }
    }
 
    public class CSVColumnsViewModel
    {
        public string CSVFile { get; set; }
        public List<CSVColumn> Columns = new List<CSVColumn>();
        public List<string> Properties { get; set; }
 
        public CSVColumnsViewModel()
        {
            Properties = new List<string>
            {
                "FirstName",
                "LastName",
                "SSN",
                "Address1",
                "Address2",
                "City",
                "State",
                "Zip"
            };
        }
    }
}

 

In the first column of the grid is the ColumnNumber property, the second column is the ColumnName property, and the 3rd column is empty, but is mapped to the MappedTo property.  What I want to do is show the list of Properties in a dropdown in the third column so the user can choose which property the current column would map to.  Then in the next row, it would only show available properties for the additional columns to map to.

I hope this is making sense...

Here's what I have in my cshtml file

@using FileUploader_Mapper.Models
@model CSVColumnsViewModel
 
@{
    ViewBag.Title = "Result";
}
 
<style>
    .k-grid td {
        line-height: 2em;
        padding: 0 0 0 1em;
    }
</style>
 
<h2>Result</h2>
 
<p></p>
 
@(Html.Label("lblMisc", "Columns from CSV File: " + Model.CSVFile))<br/>
 
@(Html.Kendo().Grid(Model.Columns)
    .Name("csvGrid")
    .HtmlAttributes(new { style = "width: 650px" })
    .Columns(col =>
    {
        col.Bound(c => c.ColumnNumber).Width(125).Title("Column Number");
        col.Bound(c => c.ColumnName).Title("Column Name");
        col.Bound(c => c.MappedTo).Title("Mapped To");
    })
    .DataSource(ds => ds
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
        .Model(m =>
        {
            m.Id(c => c.ColumnNumber);
            m.Field(c => c.ColumnName).Editable(false);
            m.Field(c => c.MappedTo).DefaultValue(Model.Properties);
 
        })
    )
    .Pageable()
)

I really don't know how to proceed and could use some guidance.

2 Answers, 1 is accepted

Sort by
0
Joe
Top achievements
Rank 1
answered on 17 Jun 2016, 04:00 PM

So in case anyone come across this and wants to know how I solved it, it was indeed a question of creating a foreign key. I changed my Properties list to include an auto-incrementing ID as well as the Name, and built the foreign key against the list of properties. Actually, it worked quite well.  I still have to figure out how to remove a used property from the dropdown, but one problem at a a time.

I'll include the new class definitions as well as what I have in the ASPX page...

namespace FileUploader_Mapper.Models
{
    public class CSVColumn
    {
        public int ColumnNumber { get; set; }
        public string ColumnName { get; set; }
        public int MappedTo { get; set; }
    }
 
    public class MappingProperty
    {
        private static int counter;
 
        public int Id { get; private set; }
        public string Name { get; private set; }
 
        public MappingProperty(string propertyName)
        {
            Id = ++counter;
            Name = propertyName;
        }
 
    }
 
    public class CSVColumnsViewModel
    {
        public string CSVFile { get; set; }
        public List<CSVColumn> Columns = new List<CSVColumn>();
        public List<MappingProperty> MappingProperties { get; set; }
 
        public CSVColumnsViewModel()
        {
            MappingProperties = new List<MappingProperty>
            {
                new MappingProperty("SSN"),
                new MappingProperty("FirstName"),
                new MappingProperty("LastName"),
                new MappingProperty("Address1"),
                new MappingProperty("Address2"),
                new MappingProperty("City"),
                new MappingProperty("State"),
                new MappingProperty("Zip")
            };
        }
    }
}

@using FileUploader_Mapper.Models
@model CSVColumnsViewModel
 
@{
    ViewBag.Title = "Result";
}
 
<style>
    .k-grid td {
        line-height: 2em;
        padding: 0 0 0 1em;
    }
</style>
 
<h2>Result</h2>
 
<p></p>
 
@(Html.Label("lblMisc", "Columns from CSV File: " + Model.CSVFile))<br/>
 
@(Html.Kendo().Grid(Model.Columns)
    .Name("csvGrid")
    .HtmlAttributes(new { style = "width: 650px" })
    .Columns(col =>
    {
        col.Bound(c => c.ColumnNumber).Width(125).Title("Column Number");
        col.Bound(c => c.ColumnName).Title("Column Name");
        col.ForeignKey(c => c.MappedTo, Model.MappingProperties, "Id", "Name").Title("Mapped To");
    })
    .ToolBar(toolBar =>
        {
            toolBar.Create();
        })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .DataSource(ds => ds
        .Ajax()
        .PageSize(20)
        .ServerOperation(false)
        .Model(m =>
        {
            m.Id(c => c.ColumnNumber);
            m.Field(c => c.ColumnName).Editable(false);
            m.Field(c => c.MappedTo).DefaultValue(0);
 
        })
    )
    .Pageable()
)

 

 

 

0
Maria Ilieva
Telerik team
answered on 21 Jun 2016, 10:13 AM
Hi,

Thank you for sharing your approach for achieving the required functionality. As for removing the properties form the drop down you will need your custom logic on the client and handle this logic manually.

Regards,
Maria Ilieva
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Joe
Top achievements
Rank 1
Answers by
Joe
Top achievements
Rank 1
Maria Ilieva
Telerik team
Share this question
or