Telerik Forums
Kendo UI for jQuery Forum
1 answer
87 views

Hi,

I have a data display problem, multi-column header error showing foreign key column as shown in attached video.

Can someone help me, many thanks.
The foreign key column property is declared as below:

        col.dataTextField = col.dataTextField ?? "text";
        col.dataValueField = col.dataValueField ?? "value";
        col.dataSource = {
            type: "json",
            transport: {
                read: function (options) {
                    ufn_ApiGetLookup({
                        data: col.source,
                        success: function (d) {
                            options.success(ufn_GetData(d));
                        }
                    });
                }
            }
        }

Georgi Denchev
Telerik team
 answered on 31 Oct 2022
1 answer
54 views

I am having a kendo autocomplete combo box, when typing out the keys i get the list of options. But it is not highlighting (focusing) the first option. when i try to hover with mouse it is focused. Adding the sample screenshots.

Kindly do the needful. Thanks in  advance

It is working fine with the dropdown

But for the autocomplete

 

When i hover this with cursor it is working. This is our expectation when typing in the autocomplete.

Martin
Telerik team
 answered on 07 Oct 2022
0 answers
59 views
Page Numbers are not visiable in the kendo dropdown list. only page number 1 is showing and other pages are not visiable and not working
sai
Top achievements
Rank 1
Iron
 asked on 03 Aug 2022
0 answers
76 views

I have written the following code for kendoComboBox, it does not cause any problem when creating, but when editing, only the id is displayed.

 

 


   $('#buyer').kendoComboBox({
                        dataSource: new kendo.data.DataSource({
                            type: 'aspnetmvc-ajax',
                            serverFiltering: true,
                            serverPaging: true,
                            serverSorting: true,
                            transport: {
                                read: {
                                    url: kmc.urlBase + '/lookups/buyers',
                                    dataType: 'json',
                                    type: 'POST',
                                    beforeSend: function (xhr) {
                                        kmc.setRequestVerificationToken(xhr);
                                    }
                                }
                            },
                            schema: {
                                aggregateResults: 'aggregateResults',
                                data: 'data',
                                errors: 'errors',
                                total: 'total',
                                model: {
                                    id: 'id',
                                    fields: {
                                        id: { type: 'number' },
                                        name: { type: 'string' },
                                        code: { type: 'string' },
                                        cidNID: { type: 'string' },
                                        addr: { type: 'string' },
                                        tel: { type: 'string' },
                                        fax: { type: 'string' }
                                    }
                                }
                            },
                            error: function (e) {
                                if (e.status === 'customerror') {
                                    pki.alert(e.errors);
                                } else {
                                    var failure = pki.parseJson(e.xhr.responseText);
                                    if (failure && failure.success === false) {
                                        pki.alert('Status: ' + e.xhr.status + '<br/><br/>Error: ' + failure.errors);
                                    } else {
                                        pki.alert('Status: ' + e.xhr.status + '<br/><br/>Error: ' + e.xhr.responseText);
                                    }
                                }
                            }
                        }),
                        dataTextField: 'name',
                        dataValueField: 'id',
                        filter: 'startswith',
                        valuePrimitive: true,
                        //change: function (e) {
                        //    var dataItem = this.dataItem();
                        //    if (dataItem) {
                        //        pro.headerModel.set('buyer', { id: dataItem.Id, name: dataItem.Name });
                        //    }
                        //},
                        minLength: 2,
                        select: function (e) {
                            var item = e.dataItem;
                            if (item) {
                                $('#buyer-name').text(`TO: ${item.name}`);
                                $('#buyer-addr').text(`ADD: ${item.addr}`);
                                $('#buyer-tel').text(`TEL: ${item.tel}`);
                                $('#buyer-fax').text(`FAX: ${item.fax}`);
                                $('#buyer-nid').text(`COMMERCIAL/NATIONAL ID: ${item.cidNID}`);
                            }
                        }
                    });







 






 html code :

                                <td>
                                <span class="caption">Buyer: </span>
                                <input id="buyer" name="buyer" class="combobox-lg" data-bind="value: buyer.id" required />
                               </td>

Fatemeh
Top achievements
Rank 1
Iron
 asked on 09 Jul 2022
7 answers
380 views
I am new to kendo UI HTML v2013.1.226 .I am trying cascading combo box within the kendo grid.In this fiddle http://jsfiddle.net/moonolite3/abgy56ak/6/

Html:
<div id="myLayout" class="k-content" style="background-color:Gray; height:100%;">
<div id="contentArea" style="background-color:Silver;">
  <div id="myList"></div>
</div>
<div id="footer" style="background-color:Silver;">
    Click on ShipCity to trigger custom editor
</div>

Script:
var myDataSource = new kendo.data.DataSource({
        type: "odata",
       transport: {
        },
        schema: {
            model: {
                id: "OrderID",
                fields: {
                    OrderID: { type: "number" },                   
                    ShipName: { type: "string" },
                    ShipCountry: { type: "string" },
                    ShipCity: { type: "string" },
                    ShipName: { type: "string" }
                   
                }
            }
        },
        pageSize: 50,
        serverPaging: true,
        serverFiltering: true,
    });
 
var $footer = $("#footer");
 
var gridHeight = function () {
    return $(window).height() - $footer.height() - 2;
}
 
var $grid = $("#myList").kendoGrid({
    scrollable: { virtual: true },
    editable: true,
    dataSource: myDataSource,
    sortable: true,
    height: gridHeight(),
    columns: [
        { field: "OrderID" },
        { field: "ShipName"},
        { field: "ShipCountry",
           title : "Ship's Country",
            editor: function(container, options) {
                $('<input id="ShipCountry1" required data-text-field="ShipCountry" data-value-field="ShipCountry" data-bind="value:' + options.field + '"/>').appendTo(container).kendoComboBox({
                    filter: "contains",
                        placeholder: "Select category...",
                        dataTextField: "ShipCountry",
                        dataValueField: "ShipCountry",
                    dataSource: {
                        type: "odata",
                        serverFiltering: true,
                        transport: {
                            read:                            'http://demos.kendoui.com/service/Northwind.svc/Orders?$select=ShipCountry'
                        }
                    },
                    
                     
                });
            }
        },
         { field: "ShipCity",
           title : "Ship's City",
            editor: function(container, options) {
                $('<input id="ShipCity1" required data-text-field="ShipCity" data-value-field="ShipCity" data-bind="value:' + options.field + '"/>').appendTo(container).kendoComboBox({
                     autoBind: false,
                        cascadeFrom: "ShipCountry1",
                        filter: "contains",
                        placeholder: "Select product...",
                        dataTextField: "ShipCity",
                        dataValueField: "ShipCity",
                    dataSource: {
                        type: "odata",
                        transport: {
                            read:'http://demos.kendoui.com/service/Northwind.svc/Orders?$select=ShipCity'
                        }
                    }
                     
                });
            }
        },
         { field: "ShipName",
           title : "Ship's Name",
            editor: function(container, options) {
                $('<input id="ShipName1" required data-text-field="ShipName" data-value-field="ShipName" data-bind="value:' + options.field + '"/>').appendTo(container).kendoComboBox({
                     autoBind: false,
                        cascadeFrom: "ShipCity1",
                        filter: "contains",
                        placeholder: "Select product...",
                        dataTextField: "ShipName",
                        dataValueField: "ShipName",
                    dataSource: {
                        type: "odata",
                        transport: {
                            read:'http://demos.kendoui.com/service/Northwind.svc/Orders?$select=ShipName'
                        }
                    }
                     
                });
            }
        }
         
      ]
});
 
$("#rootLayout").kendoSplitter({
    orientation: "vertical",
    panes: [
        { scrollable: false, collapsible: false, size: "90%" },
        { collapsible: true, size: "10%" }
    ]
});
 
var resizeGrid = function () {
    var dataArea = $grid.find(".k-grid-content");
    var newHeight = gridHeight();
    var diff = $grid.innerHeight() - dataArea.innerHeight();
 
    $grid.height(newHeight);
    dataArea.height(newHeight - diff);
}
 
$(window).resize(function () {
    resizeGrid();
});


When I select the 'ship's Country' the 'ship's City' Column need to get invoked and list out the city name but its not doing that.Ship's city in turn need to invoke ship's Name .In kendo site the demo cascading is on outside the grid and I didn't get how to do the same inside the grid.Can any one help me out or with any other sample fiddle..Thanks in Advance.Note: I need to stick with this kendo version..cant change to updated one :(
Fatemeh
Top achievements
Rank 1
Iron
 answered on 09 Jul 2022
1 answer
387 views

I'm using the Kendo combobox on a edit form.  I'm loading initial values into the comboboxes on page load by using the "value" and "text" properties.  I have autobind set to false.  If I click the "clear" button it doesn't actually clear out the text value until the second time I click it.  It looks like the first time I click clear it loads the actual data items and then selects the value I have it set to.  The second time I click clear it actually works.  What is the proper way to configure this to load values from the server and preload a specific item when the control initializes?

 


 @(Html.Kendo().ComboBox()
                            .Name("combo" + item.DataField.ID)
                            .Filter("contains")
                            .DataTextField("DataTextField")
                            .DataValueField("DataTextValue")
                            .Placeholder("Select an item...")
                            .AutoBind(false)
                            .ClearButton(true)
                            .DataSource(source =>
                            {
                                
                                source.Custom()
                                    .ServerFiltering(true)
                                    .ServerPaging(true)
                                    .PageSize(40)
                                    
                                    .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
                                    .Transport(transport =>
                                    {

                                        transport.Read(r =>
                                        {

                                            
                                            r.Action("Virtualization_ReadComboEdit3", "Search", new { dataFieldId = item.DataField.ID }).Type(HttpVerbs.Post).Data("getFormData");



                                        });
                                        

                                    })
                                    
                                    .Schema(schema =>
                                    {
                                        schema.Data("Data") //define the [data](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                                              .Total("Total"); //define the [total](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                                    });
                            })
                        .HtmlAttributes(new { style = "width:100%;", data_parent_id = (item.DataField.ParentDataFieldID!=null ? item.DataField.ParentDataFieldID.ToString() : ""), data_conditional = item.DataField.IsConditionListener })
                        .FooterTemplate("<b>#: instance.dataSource.total() # items found<b/>")
                        .Events(e =>
                        {
                            e.Select("onSelectCombo");
                            e.Open("onOpenCombo");
                            e.Change("onChangeCombo");



                        })
                        .Virtual(v =>
                        {
                            v.MapValueTo("dataItem");
                            v.ItemHeight(26);
                            v.ValueMapper(e => "function(options) { dropdownMapper(options," + item.DataField.ID + "); }");
                        })
                        .Value(item.DataField.CurrentFieldValueSingle.ToString())
                        .Text(item.DataField.CurrentFieldText)
                            )

Anton Mironov
Telerik team
 answered on 28 Jun 2022
0 answers
67 views

Hey all,

I'm fairly new to kendo and have a bit of an problem ->

I'm currently troubleshooting a weird issue in version 2019.1.220.  I'd love to upgrade but its not feasible for this project at this time.

Basically, what is going on is that we're seeing some weird behavior with the Combobox control after databind.  Data comes from the database and is set in the control.  When the Arrow (Open button) is clicked its almost as though it doesn't do a read on the datasource because I get the No items found message.  However, if I change the selected text on the control it will do a pop open and locate the item in the list.

While trying to solve this with a work around I have tried to subscribe to the click event on the control and force a search function call in Kendo using the following:

    $(document).ready(function () {
        var itemCombo = $("#Items").data("kendoComboBox");
        itemCombo.input.on("click", function () {
            itemCombo.search(itemCombo.text);
        });
    });

This does seem to force a search to run on click of the control - however the arrow button on the control still does what it did before - not read the list or search for the item.  Does anyone have any quick tips on how i can access the click event on the arrow button itself?  The Open event isn't a good option - if I call .search on that it will cause an endless loop activity.

I'm sure this has been solved already in later versions but upgrade is not an option at this time.

Appreciative of any pointers!  Thanks!

Donald
Top achievements
Rank 1
 asked on 26 Apr 2022
1 answer
128 views

Hi,

I have an entry in my Knedo UI comboBox as 'Aré John'  While searching, if i use 'are' search is not working. Is there any way to search diacritics in Kendo Ui combo box or any work around to search above criteria. appreciate your help on this

 

$("#EmpList").kendoComboBox({
        placeholder: "search",
        dataTextField: "EName",
        dataValueField: "EID",
        dataSource: mdpList,
        filter: "contains",
        autoBind: true,
        minLength: 2,
        highlightFirst: true,
        change: onValueChange,
    });
Neli
Telerik team
 answered on 21 Mar 2022
1 answer
202 views

Hi

 

How I can make cascade drop downlist inside a grid like in this example :

https://demos.telerik.com/kendo-ui/grid/editing-custom

Neli
Telerik team
 answered on 24 Jan 2022
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?