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

TreeView/TreeList

5 Answers 145 Views
Dialog
This is a migrated thread and some comments may be shown as answers.
Joshua
Top achievements
Rank 1
Veteran
Joshua asked on 29 Aug 2020, 01:22 PM

Hello, av been using Kendo UI about a week now, I was wondering if the following was possible:

1. change the layout from treeview/Treelist to a grid, but it should come as a dialog (see attached image)

2. How to do I change the datasource to point to a location/file that is located locally?

 

 

 

5 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 01 Sep 2020, 12:19 PM

Hi Joshua,

If I am understanding your question correctly, the attached example should be demonstrating what you want to implement. The attached archive contains an example of a Grid that is loaded in a dialog window and the data displayed in the Grid is sourced locally.

The data in the example is sourced from the products.js file you can find in the archive.

Check the attached example and let me know if it demonstrates what you want to implement. Let me know if you have any questions about the provided example.

Regards,
Petar
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive , special prizes and more, for FREE?! Register now for DevReach 2.0(20).

0
Joshua
Top achievements
Rank 1
Veteran
answered on 09 Sep 2020, 01:28 PM

Hello,

 

I managed to resolve the issue.

 

But I have another issue with the combobox

How do I activate the *filter feature* with the code below

 

<body>
    <div>
        <asp:dropdownlist class="k-combobox" runat="server" style="width: 50%;"></asp:dropdownlist>
    </div>
    <script>
        function pageLoad(){
                $(".k-combobox").kendoComboBox();
            }
    </script>
</body>

0
Petar
Telerik team
answered on 11 Sep 2020, 10:09 AM

Hello Joshua,

To active the filter feature, the filter configuration of the ComboBox should be configured on the component's initialization. 

You can check this Dojo example. The filter property is commented in the definition of the ComboBox and there is no filtering applied when searching for a value. If you uncomment the filter configuration, the filtering will be activated. 

Regards,
Petar
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Joshua
Top achievements
Rank 1
Veteran
answered on 17 Sep 2020, 07:21 AM

Hello,

 

thank you for the reply. Kindly note that I need the example in <asp:dropdownlist> as specified above.

 

 

0
Misho
Telerik team
answered on 18 Sep 2020, 11:51 AM

Hello Joshua,

Our colleague Petar is currently on a vacation until Sept 27-th. What I can see from your previous replies is that you are using asp:dropdownlist and initialize kendoComboBox from it. There are a couple of options for initializing Kendo combobox:

  1. From a pure HTML input/select element e.g. "<input id="fabric" placeholder="Select fabric..." style="width: 100%;" />" or <select id="size" placeholder="Select size..." style="width: 100%;" > as it is demonstrated in our jQuery basic usage demo:
    https://demos.telerik.com/kendo-ui/combobox/index 
  2. In MVC/Core projects (WebForms is not supported) by using the HTML helpers or Tag helpers:
    https://demos.telerik.com/aspnet-mvc/combobox :

     @(Html.Kendo().ComboBox()
              .Name("fabric")
              .Filter("contains")
              .Placeholder("Select fabric...")
              .DataTextField("Text")
              .DataValueField("Value")
              .BindTo(new List<SelectListItem>() {
                  new SelectListItem() {
                    Text = "Cotton", Value = "1"
                  },
                  new SelectListItem() {
                    Text = "Polyester", Value = "2"
                  },
                  new SelectListItem() {
                    Text = "Cotton/Polyester", Value = "3"
                  },
                  new SelectListItem() {
                    Text = "Rib Knit", Value = "4"
                  }
              })
              .SelectedIndex(3)
              .Suggest(true)
              .HtmlAttributes(new { style="width:100%;" })
    
        )


    https://demos.telerik.com/aspnet-core/combobox/tag-helper 

     <kendo-combobox name="orders" style="width:100%"
                        datatextfield="ShipName"
                        datavaluefield="OrderID"
                        min-length="3"
                        template="#= OrderID # | For: #= ShipName #, #= ShipCountry #"
                        height="520"
                        filter="FilterType.Contains">
            <datasource type="DataSourceTagHelperType.Ajax" page-size="80">
                <transport>
                    <read url="@Url.Action("TagHelper_Virtualization_Read", "ComboBox")" />
                </transport>
            </datasource>
            <virtual item-height="26" value-mapper="valueMapper" />
            <popup-animation>
                <open duration="500" />
                <close duration="500" />
            </popup-animation>
        </kendo-combobox>
    You could consider using one of these options for implanting your scenario.

In case of Webforms you could refer to ASP .NET AJAX product which is different from Kendo UI:

https://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx 

I hope this helps.

Wish you a great day!

Best Regards,
Misho
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Dialog
Asked by
Joshua
Top achievements
Rank 1
Veteran
Answers by
Petar
Telerik team
Joshua
Top achievements
Rank 1
Veteran
Misho
Telerik team
Share this question
or