We Keep Coding

Kendo UI bind drop down value from PopupEditor

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.

Unable to use jQuery to select Angular Dropdown value

I have this angular component on the page which has all the options binded.
Using jQuery, I was able to retrieve the correct selected value with the following:
$('#mat-select').val(); // returns me the id of the selected option
However, when I try to update the value with jQuery, the value is updated but not reflected on the component on the screen.
eg.
$('#mat-select').val(); // eg. returns 'mat-select-option-0'
$('#mat-select').val('mat-select-option-5').trigger('input').trigger('change');
$('#mat-select').val(); // returns me 'mat-select-option-5'
Yet, the selected value on the component still appears to be mat-select-option-0. I am guessing that I am just setting the dom's value attribute and not updating the angular component but couldn't figure out how.
Can someone please advise?

It is not recomended to use jQuery together with Angular, because they bouth are manipulating with dom in their own way try using https://ng-bootstrap.github.io/#/getting-started
That will allow you to avoid many future problems.

How do I iterate over a container with KendoUI widgets and get their values using jQuery?

I'm working with jQuery and KendoUI for MVC. I have a ul called #overview and each list item has a different kind of KendoUI widget in it. Those widgets are the like of text boxes, multi select, ranger sliders and dropdown lists. There is a button that the user can click which runs a jQuery function to gather the content of all these widgets.
The problem I have is that these widgets have Kendo specific code to access their values and text attributes such as $("MyControl").data("kendoDropDownList).text();, I am using a .each loop to iterate over the li and I need a way to grab the data from the varying controls and I was wondering if there was a clean way to do that?
With so many controls available it will make for a complex piece of code to check for every possible control that may be there.
Any help is appreciated.

This is kinda tricky. There is an obscure method called kendo.widgetInstance() that whatever element you pass intto it, it will check for a widget and return it's instance.
var $date = $("#date").kendoDatePicker({ value: (new Date()) });
console.log(kendo.widgetInstance($date).value());
Demo

AngularJS edit and save values inside ng-repeat

I'm working on my first angular app and i dont know the best way to handle this problem.
I have a long hierarchical json becouse the tables of the database are like a pyramid, looks similar to this:
I have the view represented pretty well using ng-repeat, I want to be able to edit the last rows of the last table which correspond with last level of JSON.
To do this I have implemented a edit modal that works fine, it saves and updates the database perfectly, the problem is that to see the updated value i have to refresh the page losing scroll position and collapsing accordions which is very bad.
Images of accordions:
When i click edit icon a promise stores in $scope.objEdit = {}; the object and launches the modal, which is linked to this object by ng-model.
So I think that the next step is that when modal is closed, i have to override the old object placed in the $scope variable that contains the entire json for the edited one, but im not sure how to do it.
I would appreciate your help to learn the standard way to do this, thx mates.
I Just solved it, I used a similar procedure to the oen that #AnikIslamAbhi sugested, in the fiddle that #Harshad shared in the comments is solved, but i have a much more dificult json to handle, i had to go with things like those to get the index of all levels of the json:
$scope.positionEvaluacion = $scope.dataEvaluacion.indexOf(args.levelOne);
$scope.positionAsignaturaevaluacion = $scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion.indexOf(args.levelTwo);
$scope.positionTarea = $scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion[$scope.positionAsignaturaevaluacion].tarea.indexOf(args.levelThree);
And after this override this object with the edited one:
$scope.dataEvaluacion[$scope.positionEvaluacion].asignaturaevaluacion[$scope.positionAsignaturaevaluacion].tarea[$scope.positionTarea] = $scope.objEdit;

You can try this procedure
Pass the selected object on edit click from UI to Controller.
Clone it and pass that object to modal.
OnModal close pass the modal object back to the UI.
Copy the values of modal object to the previous selected object
Like this
for(var i in modalObj){
selectedObj[i]=modalObj[i];
}

ASP.NET MVC Razor View selector and model mapping/binding

I am new to ASP.NET MVC. I was trying to create a page where I was displaying few controls and 3 of them are Country, State and City. Since these are common on few other pages, I did research to find the best way to create them in Razor view and I finally ended up using $.getJSON and then filling the dropdown select with options in javascript, following is the code form JS:
$(document).ready(function () {
$.getJSON("/Meta/GetCountries", null, function (data) {
$.each(data, function (index, optionData) {
$("#country").append("<option>" +optionData.Text+"</option>")
});
});
});
And instead of DropDownListFor or EditFor I used normal HTML select for this purpose. But then I wasn't sure how MVC binds each control with the field in the model. Because the HTML is not aware of any model, I know we use something like m => m.Country, so I looked at the HTML code of Razor view and I didn't see any special things, so I felt that may be it is handled by Name/ID that we specify in the HTML tags so I tried to use the same and it worked. So my question is, is this the right approach? Using the field name value as Name in HTML tag works fine, but would there be any problems in future with this kind of approach?