Telerik Forums
Kendo UI for jQuery Forum
1 answer
27 views
 

I am trying to create a multifilter from enum data type column using the ItemTemplate. But ItemTemplate Javascript function is not being called and data is not being shown in combobox. Please can you give me a help. Here is the code

Enum Records

public enum EmpTypes
{
    [Display(Name = "Service")]
    Service = 0,
    [Display(Name = "Sales")]
    Sales = 1,
    [Display(Name = "Purchase")]
    Purchase = 2,
    [Display(Name = "Office")]
    Office = 3
}

Kendo Grid

columns.Bound(c => c.EmpTypes).Title("Type")
        .Filterable(filterable => filterable
            .Multi(true)
            .UI(“”).DataSource(s=>s.Read(r=>r.Action(“GetEmpTypes”,”Report”)))
            .ItemTemplate(“typetemplate”));
<script>
 function typetemplate(e)
{
  alert('Test');
}

</script>
Action Method in MVC controller

Public ActionResult GetEmpTypes()
{
 List<EmpType> emptypes = new List<EmpType>();
emptypes.Add(EmpType.Sales)
emptypes.Add(EmpType.Report)
return Json(emptypes,JsonRequestBehavior.AllowGet);
}


 

Mihaela
Telerik team
 answered on 13 Mar 2024
6 answers
101 views

Hello,

I currently have multiple comboBoxes in a modal view, once everythig is opened up there is a single x above the comboBox (photo 1) but if i leave the page and come back a new x will appear over the comboBoxes (photo2). 

the code for the html portion is 

<div data-role="view" data-title="New Simulation" data-layout="back" data-model="app.newSim" data-before-show="app.newSim.beforeShow">
     <a href="#NewSimModal" data-rel="modalview" data-role="button">Open Modal</a>

</div>

 

<div data-role="modalview" id="NewSimModal" style="width: 75%; height: 70%;  border-style:double;" data-modal="false">
<input id="Manufacturer" />
<input id="ProductFam" />
  <input id="CCT" />
  <input id="CRI" />
  <input id="PartNumber" />
  <a data-role="button" data-click="app.newSim.addLED">add LED</a>
</div>

 

And a piece of the javascript portion is 

$("#CCT").kendoComboBox({
    dataTextField: "CCT",
    dataValueField: "CCT",
    dataSource: app.CCTData,
    index: 0
});

$("#CRI").kendoComboBox({
    dataTextField: "CRI",
    dataValueField: "CRI",
    dataSource: app.CRIData,
    index: 0
});

$("#PartNumber").kendoComboBox({
    dataTextField: "LEDPartNumber",
    dataValueField: "LEDPartNumber",
    //dataSource: app.data
});

 

Naimesh
Top achievements
Rank 1
Iron
 answered on 20 Jun 2023
1 answer
60 views

As subject says, we load the combobox in a kendo window by demand.

Hence the combobox and window are not visible by default.

I wrote a short function to preselect either the entry with ID -1 if it exists - else I want the first entry to be displayed.

My problem is the dynamic loading of all that - my commands are executed in the databound event of the combobox - but it seems not to work as expected .. when I manually enter the needed command AFTER that kendo window with the combobox is displayed it works to a 'T' but not during regular execution ..

Can you give me some hints ?

 


                 onComboBoxDataBound: function (evt) {
                    var widget = evt.sender;
                    if (this.dataSource.total() > 0) {
                        // delete preselection then try to select entry with id -1
                        $('#modComboBox').data('kendoComboBox').input.select();
                        $('#modComboBox').data('kendoComboBox').input.val('');
                        $('#modComboBox').data('kendoComboBox').select(function (data) {
                            return data.id == -1;
                        });
                        // no selection then select first entry
                        if (widget.select() === -1) { // hint I found in stackoverflow
                            $('#modComboBox').data('kendoComboBox').select(0);
                        }
                    }
                },

I tried "waiting" for the kendo window to be displayed - but that waiting seems to interfere with normal code execution and prevents the "popup display" from being executed so the kendo window content is displayed behind other stuff 
Sven
Top achievements
Rank 1
Iron
Iron
Iron
 answered on 18 Apr 2023
1 answer
90 views

Hello,

Cascading Comboboxes do not clear and reset values correctly when Virtualization is enabled.

I mimicked the bug though Codepen.

Find it here and follow instructions to reproduce the bug. 

Thank you.

Georgi Denchev
Telerik team
 answered on 06 Feb 2023
1 answer
171 views

I have a combo inside a column of the grid, i already managed to introduce a default value.
Now i need to block the combo actions, so the user cannot remove the default value.

My grid with combobox:

 

My code do default value inside combobox:

Nikolay
Telerik team
 updated answer on 03 Feb 2023
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
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
386 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
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?