I have a function like so

<script>
    function refreshMsInvoiceData1() {
        var ms = $("#msInvoicesAPV").data("kendoMultiSelect");

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: function () {
                    $.ajax({
                        url: "/Invoices/GetInvoicesByDateTimeRange",
                        contentType: "application/json; charset=utf-8",
                        data: getDateTimeRangeParameters(),
                        success: function (result) {
                            // notify the data source that the request succeeded
                            console.log("success: ", result);
                        },
                        error: function (result) {
                            // notify the data source that the request failed
                            console.error("error: ", result);
                        }
                    });
                }   
            }
        });
        dataSource.fetch();
        console.log('datasource: ', dataSource);

        ms.setDataSource(dataSource);      

        console.log("ms", ms);
    }
</script>

 

I am calling this js function everytime there is a change in my selected date time range, I was able to see the data in the console logs but it is not updating the multiselect

Here is my multiselect

                                    @(Html.Kendo().MultiSelect()
                                        .Name("msInvoicesAPV")
                                        .Placeholder("Select invoices...")
                                        .HtmlAttributes(new { required = "required", style = "width: 100%", validationmessage = "Select Invoice Numbers." })
                                        .DataTextField("Number")
                                        .DataValueField("Id")
                                        .AutoBind(true)
                                    )

what am I doing wrong?

I am using telerik asp.net mvc and I have a multi select:

                                @(Html.Kendo().MultiSelect()
                                                .Name("msInvoicesAPV")
                                                .Placeholder("Select invoices...")
                                                .HtmlAttributes(new { required = "required", style = "width: 100%", validationmessage = "Select Invoice Numbers." })
                                                .DataTextField("Number")
                                                .DataValueField("Id")
                                                .AutoBind(true)
                                                .DataSource(source =>
                                                    {
                                                        source.Read(read =>
                                                        {
                                                            read.Action("GetInvoicesByDateTimeRange", "Invoices")
                                                            .Data("getDateTimeRangeParameters");
                                                        })
                                                        .ServerFiltering(true);
                                                    })
                                )

now it is reading from a controller called Invoices and the action name is GetInvoicesByDateTimeRange

 

        public ActionResult GetInvoicesByDateTimeRange(string start, string end)
        {
            var session = Session["AccessToken"];

            try
            {
                DateTime startRange = Convert.ToDateTime(start);
                DateTime endRange = Convert.ToDateTime(end);

                string query = $"Type == \"ACCPAY\" AND Date >= DateTime({startRange.Year},{startRange.Month},{startRange.Day})" +
                    $" AND Date <= DateTime({endRange.Year},{endRange.Month},{endRange.Day})";

                var invoices = _xeroCoreApi.Invoices.Where(query).Find();

                return Json(invoices, JsonRequestBehavior.AllowGet);
            }
            catch (RenewTokenException e)
            {
                return RedirectToAction("Connect", "XeroOAuth");
            }
        }

as you can see, whenever it went to the catch part, I am redirecting it to another Action and controller

 

        public ActionResult Connect()
        {
            var authorizeUrl =  _authenticator.GetRequestTokenAuthorizeUrl(_user.Name);

            return Redirect(authorizeUrl);
        }


but I am getting errors of :
"Access to XMLHttpRequest at 'https://api.xero.com/oauth/Authorize?oauth_token=KNFURSOK8ZPTF1AMUKYQHT2E85FPTQ&scope=' (redirected from 'http://localhost:57141/Invoices/GetInvoicesByDateTimeRange?start=5%2F9%2F2019&end=11%2F19%2F2019') from origin 'http://localhost:57141' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request."

do I need to add "Access-Control-Allow-Origin:" as a header of the read property? if so how do I add it?

Hi,

I want to find out all the kendo dropdown lists on a page. I want to write a common function in a .js file where I can perform this feature. I am using the below version of Telerik

 

Version: 2019.2.619.545 (Kendo Web Extensions for ASP.NET MVC)

MVC version: 5.0

IDE: Visual Studio 2015

Browser : Chrome  76.0.3809.100, IE 11.0

.Net Framework: 4.6.2

Programming Language: C#

I tried to use the approach provided at https://stackoverflow.com/questions/21513056/finding-all-kendo-drop-downs-on-page but it's not working.

In my Kendo MVC grid, I have code as follows to place Edit and Destroy icons in a table cell:

 

I've attached a file that shows the result of this. As you can see, the container for the icons are much larger than they need to be and I have to devote almost 90 pixels to the column just to prevent the icons from wrapping. Is there a way I can make the icon containers smaller?

 

Hi,
I'm new to Telerik, and there's a lot about MVC that I'm still learning, so apologies in advance.
I have a Grid Control that I'm passing an object to (see code below).  I want a detail page which is a little complex and beyond the scope of what a popup would handle, so a separate page is necessary.

I'm really struggling to get a "Select" button working to send route value out, something like /Person/Details/5
The grid itself is working as expected, however I can't seem to invoke a route or action based on the current selected row or invoke an action on the select button.
 
I've written a comment in the actual section I'm having a problem with. 
 
Thanks

I have a couple of Dropdownlist in columns of a grid, when the page is resized the DDLs are not being resized accordingly.

How can I hook them into the column width on the resize.

This is kind of a follow-up to this one:

https://www.telerik.com/forums/dropdownlist-in-a-non-editable-grid

 

Thanks

The icon on my date picker is too high... it should be centered in the dropdown box.  What CSS do I need to modify to get it to look right?

 

 

Hello!

 

First of all I'm posting tihs in the DropDownTree section but I'm not convinced that the DropDownTree is necessarily the right component for what I want.

Basically I need to display something exactly like the autocomplete component but it must have a hierarchy, so the items displayed in this "autocomplete" can be a parent item or a child item and each child is linked to a parent and should be somehow intended. This looks like what the DropDownTree offers but I'm having several problems working with it.

 

In order to get my data, I need to call an external service which takes two parameters, the language and the search string (which should be whatever the user typed in the autocomplete box).

This is how I setup my DropDown:

 

In onAdditionalData, I setup the two parameters that my Search action from the Blabla controller requires:

Since I didn't find an easy way to get the value that the user typed, I'm binding the filtering event like this and setting the value in a hidden field, which is then used by onAdditionalData to pass the search string:

 

Then my controller calls the service with the 2 parameters and that's fine, I get my results in essentially this format:

 

Now my problem is that I don't know how to build a result set that the dropdowntree can display properly. I've tried to build a list of DropDownTreeItem like this:

 

But that doesn't really work, the autocomplete does not contain any items then, for some reason that also doesn't populate anything in the autocomplete (I get "no data found" even though there are items). From the examples I've seen, it seems that DropDownTreeItem needs to call the search method recursively to get its children and this doesn't work for me because my service already returns me all the relevant children based on my search string.

I've tried using the ToTreeDataSourceResult method like this:

 

that also doesn't populate anything in the autocomplete. (I get "no data found" even though the tree.Data has data).

 

I'm starting to think that this DropDownTree is not the right component and maybe I can achieve what I want with a simple AutoComplete and some styling ?

Hopefully my problem is clear enough with those details.

Any help would be greatly appreciated,

Thanks!

 

 

Hi All,

I have razor page that gets data source on server side from "public async Task OnGetAsync()". I was able to get data from api and have it set to List successfully. Now, how can I set this datasource to my Kendo Grid? Thanks in Advance!

Hello,

We have a Grid in which one of the fields - CategoryId - is a foreign key. Using the normal .ForeignKey(…) method works but it is not enough for this particular situation as the data do be displayed inside has a hierarchy to it.

We are trying to, by means of a custom editor template, display that field as a DropDownTree.


The contents of the DropDownTree are also dependant on another foreign key - SchemeId - which is filtered inside the editor template's DataSource.Read method.

All of this works in terms of actually selecting the item in the DropDownTree - however the value is not stored / or is just stored on certain situations. i.e, as you select other column this one remains blank (no red triangle on corner).


I should also point out that we are using the Grid in "InCell" edit mode and have the .Batch mode set to true (event though the same happens if it's not in Batch mode).


I have tried many things, including tapping on to certain events and setting the dirty fileds property in the grid's data but with no success (also not sure if I should be meddling with it).



How should we go about doing this?


To make things more clear,  here are the contents of the files in question:



Contents of Views\Items\List.cshtml
 
@using Project.Web.Models
@model ItemListViewModel
@(Html.Kendo()
    .Grid<ListItem>(Model.Items)
    .Name("itemsGrid")
    .Columns(columns =>
    {
        columns.ForeignKey(i => i.SchemeId, Model.SchemesList, "Value", "Text").Filterable(ftb => ftb.Multi(true).Search(true));
        columns.ForeignKey(i => i.CategoryId, Model.Categories, "CategoryId", "Name")
            .EditorViewData(new { Categories = Model.Categories })
            .EditorTemplateName("CategoryDropdown").Filterable(ftb => ftb.Multi(true).Search(true));
        columns.Bound(i => i.Value);
        columns.Bound(i => i.Date).Title("Date").Format("{0:MM/yyyy}").Sortable(true).EditorTemplateName("CustomMonthPicker").Filterable(ftb => ftb.Multi(true).Search(true));
        columns.Command(command => { command.Destroy(); });
    })
    .ToolBar(toolbar => { toolbar.Create(); toolbar.Save(); })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .DataSource(dataSource =>
        dataSource.Ajax()
        .Batch(true)
        .Model(model =>
        {
            model.Id(a => a.Key);
        })
        .Create(create => create.Action("SaveItems", "AssetData"))
        .Read(read => read.Action("ReadItems", "AssetData"))
        .Update(update => update.Action("SaveItems", "AssetData"))
        .Destroy(destroy => destroy.Action("DeleteItems", "AssetData"))
    )
)
<script>
    function filterCategories() {
        var grid = $("#itemsGrid").data("kendoGrid");
        
        var dataItem = grid.dataItem(grid.tbody.find("tr:has(.k-edit-cell)"));
        return {
            schemeId: dataItem.SchemeId
        };
    }
</script>
 


-----


Contents of Views\Shared\EditorTemplates\CategoryDropdown.cshtml 


@using Kendo.Mvc.UI;
@model object
@(Html.Kendo().DropDownTreeFor(m => m)
    .ValuePrimitive(true)
    .Filter("contains")
    .DataTextField("Text")
    .DataValueField("Value")
    .DataSource(dataSource =>
    {
        dataSource.Model(m => m.HasChildren("HasChildren").Children("Items"));
        dataSource.Read(read => read.Action("GetSchemeCategories", "Category").Data("filterCategories"));
    })
)
 


----


Thanks!