Telerik Forums
UI for ASP.NET MVC Forum
4 answers
1.3K+ views
Hi Support,

I am using kendo drop down list in grid.
I am facing an issue on scroll of the page when the drop down was opened while edit/add in grid. (See attachment) 
When kendo ui drop down opened try to scroll with the mouse wheel, the kendo dropdown list is detaching from it and moving on the page with the scroll.

Is there any fix for this to make it close on scroll .
To produce the scenario :-  
1>  open the drop down list using mouse scroll wheel move the page up/down .
2> List also will move to up and down by detaching from the element

Any help much appreciated.
thanks in advance

Saroj
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
 answered on 27 Mar 2024
1 answer
13 views

Controls loading icon stretching fields

As you can see fields grow and shrink due the the loading icon right of the dynamic controls being larger than the control I believe

Is this a bug or something I can do to resolve

https://i.imgur.com/puFkDGl.gif

Eyup
Telerik team
 answered on 26 Feb 2024
1 answer
32 views

I'm using a k-grid with an items per page dropdown, it initially loads correctly but when a new value is selected then the pager elements are hidden. 

Anton Mironov
Telerik team
 answered on 25 Oct 2023
1 answer
51 views

I'm upgrading a project from 2021.2.511 to 2023.2.829 and I have a page which is extremely data heavy. Using the  .Size(ComponentSize.Small) option still results in a much larger drop-down list than before.

How can I reduce the size of these drop-downs further? In the old version, they simply inherited the font-size of the parent div.

 

This also applies to the multiselect controls as well

Ivan Danchev
Telerik team
 updated answer on 04 Oct 2023
1 answer
259 views


@model DetailSelectionViewModel

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("Id")
        .DataTextField("Name")
        .Value(Model.Selected)
        .Events(e =>
        {
            e.Select("SelectionDropDownItemSelected");
            e.DataBound("SelectionDropDownDataBound");
        })
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("GetDetailList", "DataWorksheet"))
        )
)

Above is the drop down that I have embedded within a detail grid.  When a value is changed in the master grid I need to traverse through all the detail rows and change the selected item in the dropdown list in each row.

So I successfully traverse the dataitems bound to the detailgrid. The dropdown appears to be changed until you actually click on the dropdown list and the dropdown appears with the selecteditem still being the item that was selected when the grid was originally rendered. When I click on the dropdown the Read Action occurs and the data is retrieved and the dropdown is bound, but the selected value isnt set to the new value desired.

Thinking that I can traverse the dataitems and set the values there. Think I need to traverse the datagrid itself and find the dropdown list in each row and programmatically choose the selected value.  I see no sample code to one traverse the datagrid that is a child when parent changed. I see no sample code to find the dropdown list in a datagrid row.

My logic starts when the datasource change event occurs for the parent grid.

Can anyone assist please. These tasks cant be that uncommon.

Anton Mironov
Telerik team
 answered on 27 Sep 2023
1 answer
66 views
Hi,
I have a project implementing kendo grid UI for asp.net mvc. It has a common .Filterable() as:
.Filterable(ftb =>
{
    ftb.Mode(GridFilterMode.Row);
    ftb.Extra(false);
    ftb.Operators(operators => operators.ForString(str => str.Clear().IsEqualTo("Is equal")
                                                                    .StartsWith("Contains")
                                                                    .IsNotEqualTo("Is not equal"))
                                        .ForDate(str => str.Clear().IsEqualTo("Is equal")
                                                                    .IsNotEqualTo("Is not equal")
                                                                    .IsLessThan("Is less than")
                                                                    .IsGreaterThan("Is greater than")
                                                                    .IsLessThanOrEqualTo("Is less than or equal to")
                                                                    .IsGreaterThanOrEqualTo("Is greater than or equal to"))
                                        .ForNumber(str => str.Clear().IsEqualTo("Is equal")
                                                                    .IsNotEqualTo("Is not equal")
                                                                    .IsLessThan("Is less than")
                                                                    .IsGreaterThan("Is greater than")
                                                                    .IsLessThanOrEqualTo("Is less than or equal to")
                                                                    .IsGreaterThanOrEqualTo("Is greater than or equal to")));
})
However, for 1 particular column, I have set .Filterable(ftb => ftb.Cell(cell => cell.Template("nameOfMyDropDownList")));
The custom filter is populated using JS. The thing is, I want to get rid of the Filter Icon that gets displayed along with the dropdown since it does not make sense to have the filter icon there when we can have a custom filter dropdown. 
I tried adding a class to the element to be hidden. But the class name doesn't get added. 
Anton Mironov
Telerik team
 answered on 11 Sep 2023
0 answers
162 views

I am trying to create a kendo grid with one of the column as a multiselect dropdown widget, so users can select multiple values for a column named industry in a single record. I am not able to do so.

Please help.

This is how i have prepared my grid :

$("#ListofMF").kendoGrid({
            dataSource: {
                data: extractedData,
                schema: {
                    model: {
                        fields: {
                            Id: {type: "integer"},
                            FullName: { type: "string" },
                            Temp1: { type: "boolean" },
                            Temp2: { type: "boolean" },
                            Industry: { type: "string" },
                            //Discontinued: { type: "boolean" }
                        }
                    }
                },
                pageSize: 20
            },
            //scrollable: true,
            sortable: true,
            filterable: true,
            pageable: {
                input: true,
                numeric: true,
                pageSize: 6
            },
            columns: [
                {
                    title: " ",
                    width: 30,
                    field: "Id",
                    hidden: true
                },
                {
                    title: " ",
                    width: 40,
                    filterable: false,
                    headerAttributes: { style: "font-weight: bold;" },
                    template: '<input type="checkbox" class="isMFSelected"/>'
                },
                {
                    field: "FullName",
                    title: "Data",
                    //width: "140px",
                    headerAttributes: { style: "font-weight: bold;" }
                },
                {
                    field: "Temp1",
                    title: "Temp 1",
                    width: "130px",
                    filterable: false,
                    headerAttributes: { style: "font-weight: bold;" },
                    template: '<input type="checkbox" class="Temp1" #=Temp1? "checked=checked" : "" #/>'
                },
                {
                    field: "Temp2",
                    title: "Temp 2",
                    width: "130px",
                    filterable: false,
                    headerAttributes: { style: "font-weight: bold;" },
                    template: '<input type="checkbox" class="Temp1" #=Temp1 ? "checked=checked" : "" #/>'
                },
                {
                    field: "Industry",
                    title: "Industry",
                    editor: function (container, options) {
                        // Get the industry template and apply it to the column editor
                        console.log(container.html);
                        var industryTemplate = $("#industryTemplate").html();
                        container.html(industryTemplate);
                    }
                }
            ]
        });
And in another script tag i am preparing the multiselct widget

<script id="industryTemplate" type="text/x-kendo-template">
    @(Html.Kendo().MultiSelect()
        .Name("Industry")
        .DataValueField("Value")
        .DataTextField("Text")
        .BindTo((IEnumerable<SelectListItem>)ViewData["IndustryList"])
    )
</script>
My output on screen for Industry column always remains like :


Biswajit
Top achievements
Rank 1
 asked on 22 Aug 2023
0 answers
45 views

Grid with Parent rows and Detail Table. Parent row has a DropDown bound to choices. The data in the Detail Table includes a DropDown bound to same possible choices. When page 1st renders all the DropDowns in the detail table display the same choice that the parent row shows.  It is possible for parent row to have 1 value then each of the 5 detail rows to have different values for the column that is manipulated with dropdown. The problem is that the detail dropdowns although bound to data rows with proper value instead show the text that the parent dropdown shows.

This is before user makes any choices. If user clicks on dropdown in detail table it will change to dropdown and show the correct choice.

How to get the detail tables to render correctly when initially displayed? I added a couple of images for illustration. InitialRender.png is the screen right after it loads. Afterclick.png is the screen after clicking the dropdown control, but not changing the value. You see that the dropdown has selected the value that corresponds to the data in the datasource for that row. The dropdowns in the detail rows dont even have a value of "Multiple" to select.

 

 

 

 


Keith
Top achievements
Rank 1
Iron
Iron
 updated question on 15 Aug 2023
1 answer
215 views

I have a Kendo dropdown list in my project, data of which is dependent from some external conditions and can be changed while widget is already constructed.

When you have 1 item initially and you open dropdown - height for the suggestions popup is fine and covers this 1 item.

When you later change number of items to 6 for example and try to open it - height is still covers only one item and creates a scroll instead of just expand to all available area.

Here is a Dojo example of how it works: https://dojo.telerik.com/oGubaqiX

You should open dropdown, then hit "Change DS" button and the open dropdown again.

As you can see the behavior is absolutely wrong.

How can I change it or what am I doing wrong?

Neli
Telerik team
 answered on 10 Aug 2023
1 answer
137 views

Hi,

I am working on a grid having inline edit functionality.  I am trying to create a dropdown which display a list of persons, however, I want to save the email id of the person in our backend SQL DB.

I am trying to implement this with editor template approach -

I have tried the below code -

Grid:

columns.Bound(mm => mm.Person).Title("Assigned To").EditorTemplateName("PersonList").HeaderHtmlAttributes(new { style = "white-space: normal" });

PersonList.chstml

@(Html.Kendo()
            .DropDownList()
            .Filter("contains")
            .Name("Person")
            .DataTextField("Name")
            .DataValueField("Email")
            .DataSource(dataSource =>
            {
                dataSource.Read(read => read.Action("GetPeopleByArea", "Common").Data("getPeopleByArea"))
                .ServerFiltering(true);
            })
            //.HtmlAttributes(new { required = "required", data_required_msg = "Select Person Name", style = "width: 100px" })
            .ValuePrimitive(true)
            .AutoWidth(true)
            .OptionLabel("-- Please Select --")            
    )

 

function getPeopleByArea() {
        var grid = $("#Grid").data("kendoGrid");
        var dataItem = grid.dataItem("tr.k-grid-edit-row");
        return {
            Area: dataItem.Area
        };
    }

When I edit the grid the dropdown work list works fine and it displays the filtered list of people as expected.  However, Instead of the email id the record is getting updated with Null or blanks in the backend table.

However, this approach works fine if I do not use getPeopleByArea function to filter the area based on certain conditions and use a different controller function to get the whole list.

Also, if I am using  .DataTextField("Name") and  .DataValueField("ID"), ID is getting stored and same is getting displayed on the grid instead of the Name.

What am I doing wrong here ? Can anyone please suggest.

Please let me know if you have any questions.

 

 

Thanks

Saurabh

 

Saurabh
Top achievements
Rank 1
Iron
 answered on 07 Aug 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?