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

Preselect dropdownlist in grid

4 Answers 104 Views
Grid
This is a migrated thread and some comments may be shown as answers.
CH
Top achievements
Rank 1
CH asked on 17 Jul 2014, 02:07 AM
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,

4 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 18 Jul 2014, 11:17 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
CH
Top achievements
Rank 1
answered on 21 Jul 2014, 12:15 AM
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
0
Georgi Krustev
Telerik team
answered on 22 Jul 2014, 01:23 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
CH
Top achievements
Rank 1
answered on 23 Jul 2014, 01:28 AM
Hi Georgi,

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

Thanks

Regards,
CH
Tags
Grid
Asked by
CH
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
CH
Top achievements
Rank 1
Share this question
or