You use it to bind to a viewModel:
viewModel.bind("change", function( event ){ console.log("BIND:", event.field, "=", this.get(event.field)); });
this.get(event.field)
has the data just modified.
Is there a way to get the old data, before change?
Many thanks
Ran into a bug with the latest version, traced it back to the first release of the year, 2023.1.117.
This dojo works, using 2022.3.1109.
This dojo does not work, using 2023.1.117 or later.
The not working example displays "undefined" whereas the working one displays "$100".
This sample works till 2022 R3 SP1: https://dojo.telerik.com/EqaQuWAn
Some parts of our code has observable objects accessing functions using `get('functionName()')` format.
This no longer works since 2023 R1 and I cannot find any details about it in the change log. I don't know how to access docs for older versions either, but I do remember the docs suggesting this function access pattern.
Could you please help me find either the change log or older docs?
Hi,
We're using a custom binding to set columns from the view model, but we're experiencing some trouble using nested columns and headerTemplate.
I set up a dojo example where you can see the problem. It will occur if you uncomment the headerAttributes that's commented out.
Anyone have any idea how to get this to work properly?
Dojo example: https://dojo.telerik.com/ApIGimiv/2
This example not works as expected:
https://dojo.telerik.com/ESAQEsip/2
It should only select: Red and Green.
Isn't it?
It's the same if I write the value of the input field by hand: value="Red"
Docs:
https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/checked#binding-lists-of-checkboxes-to-arrays
Many thanks
I have this field in my kendo grid column :
field: "tauxAcquisEntree",
template: '#if (tauxAcquisEntree === 0){#'
+ '<div class="text-right">#= tauxAcquisEntree #</div>'
+ '# }else if (tauxAcquisEntree > 1 ){#'
+ '<div class="d-flex justify-content-end"><div class="input-group d-flex flex-nowrap percent-input"> <input id="fraisent" name="fraisent" value="#= tauxAcquisEntree #" max="4" class="form-control text-center" min="1" type="number" step=1 pattern="[0-9]$" autocomplete="off" /> </div></div>'
+ '# }else{#'
+ '<div id="fraisOne" name="fraisOne" class="d-flex justify-content-end"><div class="input-group d-flex flex-nowrap percent-input"> <input value="#= tauxAcquisEntree #" class="form-control text-center" max="1" min="1" type ="number" pattern="[0-1]$" autocomplete="off" readonly /> </div></div>'
+ '# }#'
,
I have a condition when i get the field "tauxAcquisEntree" from the "database" if it's equal to "1" the input type number becomes readonly.
The problem is when the user changes the value of the input type number in the front and it's equal to "1" the template condition gets triggered which is a behavior that i don't want to happen.
To summarize how can i get the if condition in the template to be applied only if the value if from backend or the database (and not what the user typed) ?
I'm using template binding to display a list of users. For each user, we have a yes/no radio button and a drop down. The options available in the drop down are dependent on the radio button. If the user picks "yes" in the radio, we give them 4 options in the drop down, if they select no, we give them 2 options.
I created a view model that contains an array of users and for each user I have an array of the available options for the drop down.
ex. viewModel= [{UserId: 1, RBValue: true, DropDownId: 3, DropDownOpts: [1,2,3,4]}, {UserId: 2, RBValue: false, DropDownId:1, DropDownOpts: [1,2]};
And then in my template I have a select as such:
<select source: DropDownOpts, value: DropDownId"></select
When the radio is updated, I modify the DropDOwnOpts for that item.
When the page loads, it works fine. The appropriate options appear in the dropdown list, but when I modify the DropDownOpts in the viewmodel, I can see the update in the console, but the options do not change.
Am I missing something obvious here? Or is this not possible (I'm sure I can do it via js, but would rather not).
Thanks for any help.
I'm binding a span to a property on my model that ends up being populated with HTML e.g., "Word<br/>break". When it gets rendered, it is rendered just like that, so it displays the <br/> inline in the text with no effect. Is there a way to tell the binding to render it in raw form so it is displayed on two lines?
<span id="rawSpan" data-bind="text: rawTextDisplay"></span>
I was hoping to find some option like data-raw-text='true' but apparently my google-fu needs some work. Thanks.
Does anyone know how to correctly configure the PanelBar to work with AJAX content when instantiating via MVVM?
Dojo Example MVVM PanelBar with AJAX content
This code instantiates the PanelBar but does not load the AJAX content
<div id="example">
<ul
data-role="panelbar"
data-content-urls="['https://demos.telerik.com/kendo-ui/content/web/panelbar/ajax/ajaxContent1.html']" >
<li>MVVM Ajax Test
<div></div>
</li>
</ul>
</div>
<script>
kendo.bind($("#example"));
</script>
When using the MVVM value binding with the DropDownTree, pressing the X button to clear the selection does not clear the bound field in the viewmodel. If the DropDownTree is configured with valuePrimitive=true, then the VM bound field is completely unchanged If the DropDownTree is configured with valuePrimitive=false, then the VM bound field is set to the string value of the prior selection's ID.
So my present workaround is to use valuePrimitive=false and if the VM bound field ends up being a string instead of an object, then treat it as null instead. This adds a bunch of extra and ugly code to my app - is there any way to get the widget to simply set the bound VM field to null when the user clicks the X?