We Keep Coding

Kendo Combo box always selecting first item on Tab

I have the following code in my Kendo Combo Box:
.Events(events =>
{
events.Select("carUpdate");
events.DataBound("dropDownBind");
})
My carUpdate js method is then as below:
function carUpdate(e) {
debugger;
var rowData = getRowData(e, this);
//If enough data is given to identify unique technology autocomplete the row
var grid = $grid.data('kendoGrid');
if (isUniqueManufacturerDataProvided(rowData)) {
rowData.CarName = this.dataItem(e.selectedIndex).Name;
rowData.CarId = this.dataItem(e.selectedIndex).Id;
return;
}
if (this.selectedIndex === null || this.selectedIndex === -1
|| e.sender._last === kendo.keys.TAB) {
rowData.CarName = pleaseSelect;
rowData.CarId = null;
//$("#Car").data("kendoComboBox").value(pleaseSelect);
//$("#Car").data("kendoComboBox").trigger("close");
return;
} else {
rowData.CarName = this.dataItem(e.selectedIndex).Name;
rowData.CarId = this.dataItem(e.selectedIndex).Id;
}
}
If my ComboBox Contains AB, ABC, ABCD, ABCDE
If I enter A and press the Tab Key I want the combo box to revert to my Please Select Option and move to the next Field in the grid. However what I am finding is the if I just Enter A and press Tab the AB option is getting selected in the box. The other behaviour I want is that ABCDE is entered (i.e - enough data so the combox is filtered to only 1 option) and the Tab key is pressed this option is selected and the cursor moves to the next field in the grid. Is there something I have missed in my js to make this work

AngularJS keep category expanded at where user left off

I am new to the angularJS. And recently I have been working on a angularJS project. I use the ng-template and ng-repeat to make a multiple product category tree. And I add a button to control whether the sub-category expanded or not.Here is the problem,How I can keep the category expaneded at where user left off when the user click into other pages and click back to the category page?

You could save the current tree state into the HTML5 Localstorage.
Add a unique id to each category and save them into the localstorage.
function saveCurrentState() {
const openedCategories = /* find the opened categories */;
// we injected $window in our controller.
$window.localStorage.setItem('openedCategories', openedCategories.join(','));
}
Then, when you load the page
/* to be run on the page load.*/
function retrieveOpenedCategories() {
// all the current categories, open or not.
const categories = /* get all the categories */;
// we retrive our category from the localStorage. With some code to handle if it's empty / null.
const openedCategories = ($window.localStorage.getItem('openedCategories') || "").split(',');
// check if we have categories that were opened. length of 0 will evaluate to false-y.
if(openedCategories.length) {
// we use map because we want to change every value from the original array.
categories = categories.map((category) => {
if(openedCategories.includes(category.id)) {
category.open = true;
}
return category;
});
}
}
/* we show our categories, somehow.*/

Set a kendo dropdown value in a function

I have a two kendo dropdown lists to select State for address entry on a page. I have a check box to copy the first address to the second address. I need to be able to reference and set the value of the kendo dropdown list.
The dropdown lists:
#(Html.Kendo().DropDownListFor(m => m.physicalAddress.State)
.Name("physicalAddress.State")
.DataTextField("name")
.DataValueField("value")
.OptionLabel("Physical State")
.BindTo((System.Collections.IEnumerable)ViewData["StateList"]))
#(Html.Kendo().DropDownListFor(model => model.mailingAddress.State)
.Name("mailingAddress.State")
.DataTextField("name")
.DataValueField("value")
.OptionLabel("Mailing State")
.BindTo((System.Collections.IEnumerable)ViewData["StateList"]))
The function that I'm trying to write:
function copyInfo(f) {
if (document.getElementById("copyCheckBox").checked) {
//I'm hoping something exists like this
[SecondDropDown].value = [FirstDropDown].value;
}
}

Try this:
function copyInfo(f) {
if (document.getElementById("copyCheckBox").checked) {
var FirstDropDown= $("#dropdownlist1").data("kendoDropDownList");
var SecondDropDown= $("#dropdownlist2").data("kendoDropDownList");
SecondDropDown.value(FirstDropDown.value());
}
}
Where dropdownlist1 and dropdownlist2 are the DOM IDs of the containing element.
See the API DEMO: http://demos.telerik.com/kendo-ui/dropdownlist/api
Docs for value(): http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-value

Add new Row in Kendo Grid with some default values

I want to add new Row in Kendo Grid which is having Default value in First Cell.
How can I set the Default Value in that added Row of Kendo Grid
I am adding New Row in Kendo Grid as::
$('#AddSingleSuppliment').click(function () {
grid.addRow();
});
But I want to Set the Value of First cell on the Basis of Value of Clicked DOM element, Like
$('#AddSingleSuppliment').click(function () {
var temVal=$(this).text();
grid.addRow(tempVal);
});
But we can't do it in that Manner.
So please help me on this, For adding New Row in Kendo Grid with one Cell having Value of Button clicked.
Now I am able to Add New Row in Kendo Grid as,
$("#AddSingleSupplement").click( function(){
var tempSupplement = $(this).val();
//alert(tempSupplement);
grid.addRow(tempSupplement);
grid.dataSource._data[0].Description = $(this).text().trim();
});
But the Value is not Directly Shown while adding new Row. It is Shown after we click on some other element.
Please Suggest me wether this one is the Correct way to do this or there is any other way than this.

For dynamic defaults you can wire up your logic on Edit event, something like:
<script>
$('#AddSingleSuppliment').click(function () {
grid.addRow();
});
function onEdit(e)
{
//Custom logic to default value
var name = $("#AddSingleSuppliment").text();
// If addition
if (e.model.isNew()) {
//set field
e.model.set("Name", name); // Name: grid field to set
}
}
</script>

As per Kendo team , Default value cannot be changed dynamically.
However, we can make use the Grid edit event to pre-populate the edit form:
edit: function(e) {
if (e.model.isNew() && !e.model.dirty) {
e.container
.find("input[name=ProductName]") // get the input element for the field
.val("MyCustomValue") // set the value
.change(); // trigger change in order to notify the model binding
}
}

label inside combobox and conditional multiselect

I am building a pretty combobox with checkboxes and conditional entries. Everything works out alright, except for two features that I cannot figure out how to implement.
1) I would like to move the label inside the combobox, make it shift the values to the right, and appear in a slightly gray color.
2) I would like the value to ignore certain entries (group headers) selected. Those entries are there for functionality only - to select/unselect groups of other entries.
The entire project is in the zip file. You don't need a server, it's a client base app. Just download the archive, unpack, and launch app.html in your browser.
http://filesave.me/file/30586/project-zip.html
And here's a snapshot of what I would like to achieve.

Regarding your second issue, the best way I see is to override combobox onListSelectionChange to filter the values you don't want:
onListSelectionChange: function(list, selectedRecords) {
//Add the following line
selectedRecords = Ext.Array.filter(selectedRecords, function(rec){
return rec.data.parent!=0;
});
//Original code unchanged from here
var me = this,
isMulti = me.multiSelect,
hasRecords = selectedRecords.length > 0;
// Only react to selection if it is not called from setValue, and if our list is
// expanded (ignores changes to the selection model triggered elsewhere)
if (!me.ignoreSelection && me.isExpanded) {
if (!isMulti) {
Ext.defer(me.collapse, 1, me);
}
/*
* Only set the value here if we're in multi selection mode or we have
* a selection. Otherwise setValue will be called with an empty value
* which will cause the change event to fire twice.
*/
if (isMulti || hasRecords) {
me.setValue(selectedRecords, false);
}
if (hasRecords) {
me.fireEvent('select', me, selectedRecords);
}
me.inputEl.focus();
}
},
And change your onBoundlistItemClick to only select and deselect items in the boundlist not to setValue of the combo:
onBoundlistItemClick: function(dataview, record, item, index, e, eOpts) {
var chk = item.className.toString().indexOf('x-boundlist-selected') == -1;
if ( ! record.data.parent) {
var d = dataview.dataSource.data.items;
for (var i in d) {
var s = d[i].data;
if (s.parent == record.data.id) {
if (chk) { // select
dataview.getSelectionModel().select(d[i],true);
} else { // deselect
dataview.getSelectionModel().deselect(d[i]);
}
}
}
}
},
Regarding your first issue, it is easy to add the label using the displayTpl config option. But this will only add the text you need, without any style (grey color, etc). The combo is using a text input, which does not accept html tags. If you don't need the user to type text, than you may want to change the combo basic behavior and use another element instead of the text input.