I have a Kendo Grid which has an option to add a new record using the Popup Editor.
One field from the popup editor is a DropDownList. I have the first record from the dropdown list pre-selected when I open the Popup Editor. Since I pre-selected it, I would like it to be automatically created (bound) within the grid (when pressing "Update") without having to manually select it again.
I have the example script here
Working script: https://dojo.telerik.com/OFinidew/28
Here's a few things that are useful to know:
1. Defining schemas for your dataSources
A schema is a way to define what structure to expect from your data. When a schema is defined, your data will be "bound". As much as possible you'll want to bind your data, because as a last resort you'll end up having to use templates. Normally, Kendo UI will try to figure things out and get things bound automatically, but in special cases you'll have to give it a schema. This is one of those cases.
From the code sample, it seems like the approach of the workaround was to try change the "edit" event of the kendoGrid to immediately select the "Processing" status - Instead, you can define the "Processing" status (value "2") as the defaultValue of the "status" field in your model. But then, you'll need to make sure your custom editor template CAN be bound to, which leads us to..
2. Using the HTML property: data-bind="value:(nameOfYourField)"
When you're making your own editor templates for the kendo popup, it has no way of knowing what part of your HTML to bind to. See the statusDropdownEditorTemplate in the link provided as an example of how this is done.
3. What valuePrimitive means
Normally, a kendoDropDownList will return an object containing both the Text and Value of the selected choice. But this is not what we want in this case, because status is defined as "0", "1", "2" - so we just wanted the value. When you set valuePrimitive to true, you're instructing the kendoDropDownList to only return the value itself, not an object containing everything.
Related
I have two columns in this demo
Setting Type (which has drop-down list)
Editor (it contains the value of column)
I want to change the the Editor column when drop-down list value is changed (from Setting Type column). Example, if a user selects date from drop-down list, the Editor column field should change to date picker.
Can anyone help me to solve this problem? I've been stuck with this for a week. Appreciate your help. Here's a demo: DEMO IN DOJO
One option is to switch to incell edit mode (https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable) so that when the editor for the settingDefaultValue is created, the value of settingType is set.
The second option is to bind to the change event of the typeEditor and re-create the editor for settingDefaultValue. Currently, I don't think the grid.refresh() will even be fired, since the grid has a row open for edition. In the typeEditor change event, e.sender will give you the kendoDropDownList, and something like e.sender.element.closest("tr").find("td:nth-child(2)") will give you the container to put the editor in.
One more remark: use either data-bind="value:YourFieldHere", or a change handler with options.model.set("YourFieldHere", this.value()), but you don't need to do both - setting the YourFieldHere is literally what the value binding does.
I have an accordion that uses the datasource Competency, which stores a list of core competencies for their employees and the related metadata (such as a description). Inside the Accordion's detail, I have a panel that uses the Comment datasource. A user can then enter a comment that will get related to the Competency datasources with some unrelated logic.
Right now, I have an empty checkbox (check_box_outline_blank) in the Accordion Row. When a user enters text, I want the checkbox to have a check (i.e. change the value from check_box_outline_blank to check_box) The problem is that I'm not able to figure out a way to select the checkbox.
Selecting with widget.parent.parent.parent.parent.parent.parent.children.DetailAccordionRow.children.CompletionIcon.text = "check_box"; results in the error
Cannot read property 'children' of undefined
at CheckinSubmit.RootPanel.FormPanel.AccordionPanel.DetailAccordion.DetailAccordionDetail.AccordionDetialPanel.CommentFormPanel.CreateCommentForm.CreateCommentFormBody.Field.onValueEdit:1:78
Selecting with app.pages.CheckinSubmit.children.RootPanel.children.FormPanel.children.AccordionPanel.children.DetailAccordion.children.DetailAccordionRow.children.CompletionIcon.text = "check_box";
Throws the error:
Cannot read property 'children' of undefined
at CheckinSubmit.RootPanel.FormPanel.AccordionPanel.DetailAccordion.DetailAccordionDetail.AccordionDetialPanel.CommentFormPanel.CreateCommentForm.CreateCommentFormBody.Panel3.onValueEdit:1:140
Both commands were put into the Submit button's onValueEdit trigger.
I've been using AppMaker's autosugguestions to generate both of these commands. I'm not sure how else to select this item. Here's a screenshot with the UI and outline:
Did you try to use binding? It seems, that you are adding Comments to the Competency, so maybe this binding for the label's text will work?
#datasource.item.Comments.length > 0 ? 'check_box' : 'check_box_outline_blank'
when a user enters text, I want the checkbox to have a check
if you want exactly this behavior, and you have properly configured bindings, then you can bind label's text to something similar to this:
#datasource.relations.Comments.modes.create.item.Comment !== null ?
'check_box' : 'check_box_outline_blank'
Note that bindings will be reevaluated on focus loss of the Comment input (but there is a workaround for that).
I have a collection of objects in JS with a name and two boolean fields, which looks like the following.
{
"Name": "testname",
"ReadAccess": true,
"WriteAccess": false
}
I keep these in a collection on my angular controller as so
$scope.permissions = permissionArray;
Which I'm currently binding to a select box as so
<select size="20" style="width: 585px" ng-disabled="disableControls" ng-model="ComputePermissionsService.selectedPermission" ng-options="permissions.Name for permissions in ComputePermissionsService.Permissions"></select>
Which gives me a tall select window with the name of each permission.
I want to mimic the Select box functionality and display my collection of objects as a scrollable list, however I want to do something I used to do in WPF and redefine the DataTemplate for the data row. So for each object that binds as an Option to the Select, I want to display the Name as a label, then two check boxes representing the Boolean values on my object. I want these to be clickable so I can toggle them and have this update the underlying JS object so if I then click save, all I have to do is send the data to the server to update.
This used to be easy in WPF with custom DataTemplates but I'm not sure if this is possible in CSS/JS/HTML. Can someone suggest a clean way to do this?
My goal is to reset selected values in selectize input. I called selectize function in seperate js file (working with Ruby on Rails), so there is no option to create some global selectize input variable (at least I want to avoid it).
In select2 I would solve similar issue like that:
$(".select2").select2("val", "")
but when I call selectize() second time on the input all previous options and collection loaded via ajax just dissappear.
Thanks for help
Selectize uses .selectized as its identifying class.
Unfortunately, selectize is not accessible via $('.selectized').selectize - you need to go directly to the <select>/<input> element - $('.selectized')[0].selectize as shown in the docs.
I don't believe you can access all selectize items at once, you need to iterate through them. I recommend using the map function, such as something like:
$.map($('.selectized'), function(item, index) {
item.selectize.setValue('');
});
I have a dropdown field and its value is pre-selected as soon as its rendered (Say, its a Country field in a signup form). And I have other dropdowns or other components which change the selected value of the first dropdown dynamically. Now I want to fire a method with every "value getting selected" in the dropdown. Is it possible?
To put my question in much more clearer way, I want to create a onDefaultValueSet event and subscribe the first dropdown to it. So in which ever way the dropdown gets any value selected, the corresponding handler (my function) gets called.
I tried to do it with YUI Custom Events, but I am not sure how the browser will be calling(understanding) my handler every time a value is selected in the dropdown.
onSelect (from Default DOM) is not a right answer I guess, as I tried it.
Please help me in tackling this problem.
I am not sure whether this is an answer, but I've found a workaround. Please validate this.
So I was making a item "selected" using javascript-dom manipulation. Meaning, using
domElement.options[5].selected = True;
So with the (YUI)custom event I created, I started calling "fire()" right after this. So the code becomes:
domElement.options[5].selected = True;
onDefaultValueSetEvent.fire(domElement.name);
But I am not sure, what if the particular option is selected in a gui fashion. Meaning, how automatically fire() method is called