Set all checkbox in Kendo Dropdowntree checked when load the page - checkbox

I want to create kendo dropdowntree where when i load the page, all the checkbox is checked. Here is my code.
#(Html.Kendo().DropDownTree()
.AutoWidth(true)
.Name("dropdowntree")
.DataTextField("Name")
.DataValueField("Id")
.CheckAll(true)
.HtmlAttributes(new { style = "width: 100%" })
.Events(events => events.Change("onChange"))
.Filter(FilterType.Contains)
.AutoClose(false)
.Checkboxes(checkboxes => checkboxes
.Name("checkedFiles")
.CheckChildren(true)
)
.DataSource(dataSource => dataSource
.Read(read => read
.Action("GetName", "CheckBox")
)
)
)
I already doing some research and try the solution, but none if them work. For example, what i have try:
$(document).ready(function () {
$("#dropdowntree input.k-checkbox").prop("checked", true);
})
This one also not work:
$(document).ready(function () {
$("#dropdowntree").attr('checked', 'checked');
})
This one is work, but i need to set the value. What i need is it checked all by default, no need to set the value.
$(document).ready(function () {
var dropdowntree = $("#dropdowntree").data("kendoDropDownTree");
dropdowntree.value(["1","2","3","4","5","6","7"]);
})
Other than all of these, i also try the solution in this link jquery set all checkbox checked and others solution. But still not work. I really need some advice. Thank you.

I already found the answer if there is someone need it.
First in controller i get all of the list for id, then i change the list into string in json.
CONTROLLER CODE:
public IActionResult CheckBoxDB()
{
List<string> parts = new List<string>();
GetId(parts);
ViewBag.All = parts;
var json = JsonConvert.SerializeObject(parts);
ViewBag.change = json;
return View();
}
private void GetId(List<string> parts)
{
List<DdlcheckBox> ddlcheckBoxes = new List<DdlcheckBox>();
ddlcheckBoxes = _context.DdlcheckBox.ToList();
foreach (var data in ddlcheckBoxes)
{
string id = data.Id.ToString();
parts.Add(id);
}
}
Then, in the Views, i get the ViewBag value at the script.
<script>
$(document).ready(function () {
var dropdowntree = $("#dropdowntree").data("kendoDropDownTree");
dropdowntree.value('#ViewBag.change');
});
</script>
Thank you.

Related

Rendering a portion of code (tablesorter with selectize) everytime I load a React component

My app is rendering a portion of code everytime I load a component. This is the code:
https://jsfiddle.net/rLvfa8rn/
I'm trying to implement this http://jsfiddle.net/Unspecified/qrqJv/1/ on my tablesorter table.
The problem is with the portion of lines 71-121, there's a dropdown of Selectize.js rendering everytime I call the page:
Selectize.define( 'clear_selection', function ( options ) {
var self = this;
var title = options.title || 'Sin filtro';
//Overriding because, ideally you wouldn't use header & clear_selection simultaneously
self.plugins.settings.dropdown_header = {
title: title
};
this.require( 'dropdown_header' );
self.setup = (function () {
var original = self.setup;
return function () {
original.apply( this, arguments );
this.$dropdown.on( 'mousedown', '.selectize-dropdown-header', function ( e ) {
self.setValue( '' );
self.close();
self.blur();
return false;
});
}
})()
});
I put all the code because maybe the problem is another.
Well, all the problem was in the var selectize({
var selectize({
hideSelected: false,
dropdownParent: 'body'
the option: dropdownParent: 'body' was the problem, it's a know bug of selectize I guess. Removing that option works fine.

New items don't displaing in select-box from array factory use AngularJS

Helloo, i created simple AngularJS application, i have two buttons(Create New Phone and Create New Category), i saved my categories into array use factory:
myApp.factory('categoriesStorage', function () {
var storage = [];
var categories = ["Apple","HTC"];
storage.addCategory = function (categoryTest) {
categories.push(categoryTest);
console.log(categories);
}
storage.getCategories = function()
{
return categories;
}
return storage;
});
At Add New Phone form i have dx-select-box -element:
<div class="dx-label">Phone Name</div>
<div dx-select-box="nameOfPhone" ng-model="phoneName"></div><br/><br />
For Getting elements from array i use the next code in my HomeController.js
//name of phone select-box pop-up
$scope.nameOfPhone = {
items: categoriesStorage.getCategories()
};
It works
till when i change focus or close Add New Category form, new elements adds into array but don't displaying into select-box.
Thanks for your answers!
You need to call this line again when Add phone view is displayed.
$scope.nameOfPhone = {
items: categoriesStorage.getCategories()
};

How to set dynamic variable name in Angularjs controller

This is my controller code :
var selectableFields = ["customerName", "customerAddress"];
angular.forEach(selectableFields, function(field, key) {
var value = $.jStorage.get(field); //using jStore to get the values
$scope.field=value;
});
The objective is to be able to access {{customerName}} and {{customerAddress}} in the view.
Can anyone please tell me what is the correct way of doing this?
Use $scope[field] = value; instead.
With $scope.field, you're creating a new attribute named field.
var pages=["kedi","köpek","tavşan","ayi"]
pages.map(page =>{
$rootScope["adChangeUrl"+page]="dene.com"
$rootScope["imgSrc"+page]="images/deneme.png"
$rootScope["imgAdTitle"+page]="deneme.com"
$rootScope["imgAdAlt"+page]="https://deneme.com/"
}
)
//console.log Output
adChangeUrlayi: "dene.com"
adChangeUrlkedi: "dene.com"
adChangeUrlköpek: "dene.com"
adChangeUrltavşan: "dene.com"
imgAdAltayi: "https://deneme1.com/"
imgAdAltkedi: "https://deneme1.com/"
imgAdAltköpek: "https://deneme1.com/"
imgAdAlttavşan: "https://deneme1.com/"
imgAdTitleayi: "deneme.com"
imgAdTitlekedi: "deneme.com"
imgAdTitleköpek: "deneme.com"
imgAdTitletavşan: "deneme.com"
imgSrcayi: "images/deneme.png"
imgSrckedi: "images/deneme.png"
imgSrcköpek: "images/deneme.png"
imgSrctavşan: "images/deneme.png"

AngularJS + Protractor How to select Dropdown option based on its text not value

I want to click on item by it's text and not by it's value from dropdown box.
i found this great post : https://coderwall.com/p/tjx5zg but it doesn't work as expected, the search continue forever after match was found and it is not clicking the item,
if someone have better example (a working one) or can fix this code and make it work,
i will apperciate.
This is the code Dan Haller from the post used (all rights reserved to him)
function selectOption(selector, item){
var selectList, desiredOption;
selectList = this.findElement(selector);
selectList.click();
selectList.findElements(protractor.By.tagName('option'))
.then(function findMatchingOption(options){
options.some(function(option){
option.getText().then(function doesOptionMatch(text){
if (item === text){
desiredOption = option;
return true;
}
});
});
})
.then(function clickOption(){
if (desiredOption){
desiredOption.click();
}
});
}
This is a select item function that I can use like this:
var browser = protractor.getInstance();
browser.selectOption = selectOption.bind(browser);
browser.selectOption(protractor.By.id('my-dropdown'), 'My Value');
This question is similar to: How to select option in drop down protractorjs e2e tests
So long as you're on a recent version of protractor, you can just do:
element(by.cssContainingText('option', 'BeaverBox Testing')).click();
If you want to click by number, you can do:
var selectDropdownbyNum = function ( element, optionNum ) {
if (optionNum){
var options = element.findElements(by.tagName('option'))
.then(function(options){
options[optionNum].click();
});
}
};
This function selects the 3rd option of your select box.
function selectDropdownByNumber(element, index, milliseconds) {
element.findElements(by.tagName('option'))
.then(function(options) {
options[index].click();
});
if (typeof milliseconds !== 'undefined') {
browser.sleep(milliseconds);
}
}
var mySelect = $('#my-dropdown');
selectDropdownByNumber(mySelect, 2);
More info can be found here - http://qainsight.blogspot.fr/2014/04/select-dropdown-value-in-protractor-js.html
As you want to select option by value, you can use:
var select = element.one(by.model('selectData'));
select.$('[label="Option 1"]').click();

wait for backbone template to be appended to the dom

I am trying to bind events to elements that are placed by appending a backbone template:
appendEditTemplateAndSetEvents: function() {
var associatedCollection = App.Helpers.findAssociatedCollection(this.allCollections, this.associatedCollectionId);
var template = this.setEditTemplateForElement(associatedCollection.type);
var modalBody = this.$el.find('.modal-body');
modalBody.empty();
var firstModel = associatedCollection.at(0);
if(template.mainTemplate !== null) {
modalBody.append($('#edit-form-element-frame').html());
//each mode in collection
associatedCollection.each(function(model){
if(model.get('positionInContainer') === 1) {
firstModel = model;
}
console.log(model.attributes);
modalBody.find('.elements-in-editmodal-wrapper').append(template.mainTemplate(model.toJSON()));
});
}
if( template.templateValidation.length !== 0 ) {
modalBody.append('<hr><h3>Validateregels</h3>');
_.each(template.templateValidation, function(val, index) {
modalBody.append(val(firstModel.toJSON()));
});
}
//set listeners and handlers that apply when a edit modal is open
this.validationEventsForEditModal(firstModel);
this.editErrorMessagesInModal(firstModel);
},
Now the problem is that when the last two functions are called the html of the templates isn't appended yet so the the events are binded to an object with a length of 0.
Does anyone have a decent solution for this async problem? I tried $.Defferred but that did not work, but maybe someone get's it working.
I solved this by using this.$el.find(...) in the functions:
this.validationEventsForEditModal(firstModel);
this.editErrorMessagesInModal(firstModel);
I don't know if it's still an async problem, but this solves it.

Resources