[Solved] need help with dropdown list in grid with ajax

[Jon]

First, I'm brand new with c#, mvc2 and linq. I'm sure there's got to be an easier way to do what I'm trying to do and some months from now I'll look back and shake my head at my code, but...
For my model I've got this (some fields edited out):

[Table(Name = "TimePunches")]
public class TimePunch
{
    [Column(IsPrimaryKey = true, IsDbGenerated = true, AutoSync = AutoSync.OnInsert)]
    public int TimePunchID { get; set; }
    [Column] [UIHint("ProjectID"), Required] public int ProjectID { get; set; }
}

ProjectID is a foreign key to a Projects table that looks like this:

public class Project
{
    [Column(IsPrimaryKey = true, IsDbGenerated = true, AutoSync = AutoSync.OnInsert)]
    public int ProjectID { get; set; }
    [Column]
    public string ProjectDescription { get; set; }
}

Following, for the most part, the example in the telerik help, I've got columns bound like this:

.Columns(columns =>

{
...

    columns.Bound(tp => tp.ProjectID);

    columns.Command(commands => commands.Edit());

    columns.Command(commands => commands.Delete());

})

I can create the dropdown successfully when I edit, with Project table records loaded into ViewData, but of course the grid displays the ProjectID in the cell. In server mode I can successfully display the ProjectDescription in the cell using a DisplayTemplate that looks like this (and I'm sure can be done in a better way, but this is all I, the neophyte, can figure out):

<%
    foreach (vProject tp in (IEnumerable)ViewData["vprojects"])
   {
       if (tp.ProjectID == Model)
       { %><%=Html.Encode(tp.ProjectDescription) %><%
           break;
       }
   }
%>

 but, as advertised, in ajax mode this won't work, it needs a ClientTemplate. It works the first time, but after editing all of the cells go back to displaying the ProjectID.

So here's the thing, the help pages show the model as having the equivalent to the ProjectDescription in the model, instead of the ProjectID and my ignorance of linq discourages from making this kind of change to my model. 

Does anybody have some suggestions on how I can get this to work the way I want it to?

[Atanas Korchev]

Hi Jon,

 Have you checked this example? I think it implements a similar scenario.

Regards,
Atanas Korchev
the Telerik team

[Jon]

Yes, this is the example I've been following. The difference is, in the model of the example, the dropdown field is "employee" and is a string. That is also the text displayed in the dropdown box. What I want is for the model to have the int employeeID field, which is the value field in the dropdown box, but I also want to display the employee text field when returning from editing. Like I said, I was able to rig a way to do that in server mode by using a DisplayTemplate, but need to use ajax mode and the grid control only uses DisplayTemplates in server mode.

Is the only way to do this is to have the text field used in the bound model?

[Atanas Korchev]

Hello Jon,

It seems that you can use a client-side template in this case if you have all the names based on their ID. Something like this:

columns.Bound(c => c.EmployeeID).ClientTemplate("<#= EmployeeNames[EmployeeID] #>").

Regards,
Atanas Korchev
the Telerik team

[Jon]

Yes, I think that is exactly what I need, BUT (please excuse my embarrassing ignorance, like I said, this is my first c#, mvc, ajax project and I'm literally coding with one hand while holding a book in the other), I'm not familiar with the "<#=" syntax. I think it's got something to do with json? I know you're not in the business of teaching me basic stuff like this, but can you point me to how and where, maybe give me some clues of how I'd create the "EmployeeNames[EmployeeID]" structure?

It'll really save my bacon and I'd appreciate it greatly.

[Atanas Korchev]

Hi Jon,

 The <#= #> is a grid client-side expression. It is equivalent to <%= %> in the server side. What you need to do is to mimic the server side display template on the client side. In my example you need a JavaScript object (like hash) which maps EmployeeID -> Employee. You need to serialize this from the server-side in a <script>  tag. If you can attach a sample project to this thread I would be able assist with the implementation.

Regards,
Atanas Korchev
the Telerik team

[Jon]

Hi Atanas,
That would be terrific and greatly appreciated. I've attached the zipped solution. Because I've been trying several things you might spot some garbage in there that you can ignore. Also, if you have a moment while you're looking at it, maybe you can explain a couple of simple things. 1) The help pages give an example of having the ability to have a command column with two commands:

            //Command column with two commands
            columns.Command(commands => commands
                   .Edit()
                   .Delete())

but when I do that I get a compilation error, so I split it out to two columns. I posted that in the grid forum but didn't receive any replies. 2) When I do an edit on this grid the columns shift around. I assume it's because I don't have any widths set and the grid is defaulting to filling the screen, but the edit it using some other default widths. Is that right? And to fix it do I merely have to set column widths? Is there a grid width setting property too?

Thanks for looking at this for me. It will help a lot and hopefully it'll get me over the hump so I can stop asking questions.

Jon

[Atanas Korchev]

Hi Jon,

 This seems to be a problem with the documentation. The proper syntax is 

columns.Command(commands =>
{
    commands.Edit();
    commands.Delete()
})

To fix the columns make sure that you have set the width of all columns but one. This is required when the grid is not scrollable.

And lastly I couldn't run your project because I don't have the database. Perhaps you can attach a dummy one or provide some test repository.

Regards,
Atanas Korchev
the Telerik team

[Jon]

Thanks for clearing up those little questions and sorry about the database mix-up. I've attached a project that uses a fake repository, but also doesn't do any updating of the model. I think it'll still give you enough to sort me out.

[Atanas Korchev]

Hi Jon,

 I modified the sample project to demonstrate my idea. Find it attached.

Regards,
Atanas Korchev
the Telerik team

[Jon]

Atanas,
That was perfect. Thanks for all the hard work. You're the best.