Preselect dropdownlist in grid

[CH]

Hi,
I have an application to capture the Project Stage based on the project selected in my grid. I have 2 columns(Project and ProjectS 

@(Html.Kendo().Grid<Data>() .Name("Detail") .ToolBar(tool => { tool.Create().Text("New Project");})

      .Columns(columns =>{

             columns.Bound(f => f.PROJECT).Title("Project Name").ClientTemplate("#: PROJECT.PROJ_NAME #");

             columns.Bound(f => f.PROJSTAGE).Title("Stage").Width(400).ClientTemplate("#: PROJSTAGE.PROJ_STAGE #");

             columns.Bound(f => f.REMARK).Title("Remark");

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

      .Editable(e => { e.Mode(GridEditMode.InLine).DisplayDeleteConfirmation(false); })

      .DataSource(dataSource => dataSource

   .Ajax()

   .Model(m => {

 m.Id(f => f.SEQ_ID);                                

 m.Field(f => f.PROJECT).DefaultValue(ViewData["defaultProject"] as DPA.ETimelog.Models.Project);

 m.Field(f => f.PROJSTAGE).DefaultValue(ViewData["defaultProjStage"] as PA.ETimelog.Models.ProjStage);

 m.Field(f => f.REMARK);})
     .Read(read => read.Action("test_read", "Home"))

     .Create(create => create.Action("test_create", "Home"))

 )

  )

My Editor for Project

@model object
<script>
    function eProjectReadData() {
        return { startDate:selectedDate.toJSON() };
    }
</script>

@(
 Html.Kendo().DropDownListFor(m => m)
      .OptionLabel("-please select-")
       .HtmlAttributes(new { style = "width: 200px" })
      .DataTextField("PROJ_NAME")
      .DataValueField("PROJ_NO")
      .DataSource(source => {source.Read(read =>{read.Action("GetProjectAssignedToMember",  "eProject").Data("eProjectReadData");});})

)

My editor for Project Stage:

@model object

@(
 Html.Kendo().DropDownListFor(m => m)
        .OptionLabel("-please select-")
                .DataTextField("PROJ_STAGE")
                .DataValueField("PROJ_STAGE_ID")
            .DataSource(source =>
            {
                source.Read(read =>
                { read.Action("GetProjStage", "Home");});
            })
)

When in add\edit mode in grid,
when user select the project type, i wanted to auto populate the project stage of the current project. How can i achieve that?

Please advise.
Thanks.

Regards,

[Georgi Krustev]

Hello,

I suppose that you would like to achieve so called "cascading functionality" between "Project" and "ProjectStage" dropdownlists. If this is the case I would suggest you examine the following code libraries, which show how to achieve your goal:

Grid InLine and PopUp Editing using Cascading DropDownLists
Grid Incell Editing using Cascading DropDownLists

Regards,
Georgi Krustev
Telerik

 

 

[CH]

Dear Georgi,

Thanks for your reply. I see your demo but it is not what i want.
I do not want to filter the ProjectStage, instead, i want to preselect the stage but user can still change the stage.

For example,
Project1 - current stage is RequirementGathering

So when the user create a new record, and choose Project1, the dropdown of the stage will auto-select RequirementGathering instead of filter.

Is it something i can do on my client side? any idea how i can do this?

Regards,
CH

[Georgi Krustev]

Hello CH,

If I understand you correctly, you would like to pre-select an item in child combobox when user selects an item from parent widget. If this is the case then you will need to wire the change event of the widget manually and update the value of the child combobox. The required steps are:
1. Wire the edit event of the grid
2. Once the event is triggered, you can find the parent widget using its ID and set the correct value to     the child widget

function grid_edit(e) {
   //Important: use the correct name/id of the widgets in order to find the correct HTML elements
   var parent = e.container.find("input[name=project]").data("kendoDropDownList");
   var child = e.container.find("input[name=stage]").data("kendoDropDownList");

   parent.bind("change", function() {
        //set child value
        if ([condition]) {
            child.value([desired value]);
        }
   });
}

You can find more information about the DropDownList API here.
Let me know if I am missing something.

Regards,
Georgi Krustev
Telerik

 

 

[CH]

Hi Georgi,

Your understanding is correct. I will try to test if i can get it done.

Thanks

Regards,
CH