I'm trying to configure kendo autocomplete using their tutorial.
The problem is that autocomplete control display objects instead of property value which I set in kendo initialization (see capture):
#(
Html.Kendo().AutoComplete()
.Name("products")
.Placeholder("Find Product...")
.DataTextField("Name")
.Template("<span><img src='/Content/Images/default-photo.jpg' " +
"width='20' height='20' /> ${data}</span>")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetProducts", "Search")
.Data("onAdditionalData");
})
.ServerFiltering(true);
})
)
<script>
function onAdditionalData() {
return {
text: $("#products").val()
};
}
</script>
After I click this item the name is showing properly:
My action return type is return Json(products, JsonRequestBehavior.AllowGet);
where products is ICollection<VmProduct>
Whats going on?
You've set the DataTextField but you're overwriting it when you set the Template, because kendo will execute the template instead of getting the field you set. But that's not the problem, the problem is that in your template you're printing the data object, which is.. an object actually. You need to print it's property related to the suggestion text, e.g.:
.Template("<span><img src='/Content/Images/default-photo.jpg' " +
"width='20' height='20' /> ${data.Name}</span>")
Give it a try and tell us what happens.
Related
I'm a novice in MVC, Below is my code
I am unable to read the value of an ID and use that in an decision statement, I am getting "The name "Text" does not exist in current context", I need to work on the if statement based on the value I get from my document.getElementById
#{
var grid = new WebGrid(Model.Abc, canPage: true, canSort: true, rowsPerPage: 50);
}
#{
var gridColumnsNew = new List<WebGridColumn>();
gridColumnsNew.Add(grid.Column("Details", header: "Id"));
<text>
var obj = document.getElementById("NextAction").value;
</text>
if (#text.obj == "Start")
{
gridColumnsNew.Add(grid.Column("Temp"));
}
}
Try using
document.getElementsByName("NextAction").value;
I have seen in my case that Blazor changes Id to name.
Note: I am using DevexpressBlazor
Did you checked if you are able to see on the html generated that ID?
If yes, Did you have any JS error before?
Looks like the ID not was generated or the place where you are run the getElementById don't have visibility to your specific code.
You are mixing razor syntax and javascript. The line var obj = document.getElementById("NextAction").value; is javascript and should go inside <script> tag. You can't call javascript functions from razor code.
Solution:
Assuming you have a controller named GridController.cs and a view named Grid.cshtml. Inside your controller add a new HttpPost action:
[HttpPost]
public IActionResult NextAction(string nextAction)
{
ViewData["NextAction"] = nextAction;
return View("Grid");
}
Inside the view add a form that posts the nextAction value to the controller:
<form asp-action="NextAction" asp-controller="Grid">
<input type="hidden" value="Start" name="nextAction" />
<button type="submit">Start</button>
</form>
The controller added the NextAction value in the ViewData dictionary so now the view can access it:
#{
var gridColumnsNew = new List<WebGridColumn>();
gridColumnsNew.Add(grid.Column("Details", header: "Id"));
if (ViewData["NextAction"] == "Start")
{
gridColumnsNew.Add(grid.Column("Temp"));
}
}
You are getting that error because you are using #text.obj. In Razor, once you attached # before any identifier, it considers it a C# or VB variable.
Since we don't have your entire page, you may need to clarify where the source of the NextAction. It will be helpful. See a sample of something similar.
#if(item.Ward == "start")
{
gridColumnsNew.Add(grid.Column("Temp"));
}
The item is from the model I am iterating to form the grid.
I have list and I am using bindaggregation to bind my model data.
below is my code.
Controller
this.oList = this.byId("list");
this.oListItem = this.byId("MAIN_LIST_ITEM").clone();
this.oList.bindAggregation("items", {path: '/myListSet',
template: this.oListItem,
filters: this.searchFilters,
});
this.registerMasterListBind(this.oList);
console.log("firststatus"+this.oListItem.getFirstStatus().getText());
}
My requirement is to manipulate the value of the firststatus, Fristly I am trying to get the value with the below line and unfortunately it is diplaying null value. Can someone advise how to get the value of the firststatus?
this.oListItem.getFirstStatus().getText()
Update - View
<List id="list" growing="true" growingThreshold="20" growingScrollToLoad="true" showNoData="true" mode="{device>/listMode}"
select="_handleSelect">
<ObjectListItem id="MAIN_LIST_ITEM" type="{device>/listItemType}" press="_handleItemPress" title="{sName}">
<markers>
<ObjectMarker type="Flagged"/>
</markers>
<firstStatus>
<ObjectStatus text="{Status1Txt}"/>
</firstStatus>
<attributes>
<ObjectAttribute id="ATTR1" text="{SNumber}"/>
<ObjectAttribute id="ATTR2" text="{PTxt}"/>
</attributes>
<secondStatus>
<ObjectStatus text="{Status2Txt}"/>
</secondStatus>
</ObjectListItem>
</List>
So if I understand correctly, you're trying to retrieve the status text of an entry, but what you're actually doing is retrieving the default template of the ObjectListItem.
If you want the correct value for an entry, you can try this. This returns a filled clone of the default template. You can't clone() an empty template and expect it to have values in it.
Hope this helps, lampstand.
this.byId("list").getItems()[0].getFirstStatus().getText();
How do i go about setting the Kendo FlatColorPicker default value using MVC with either ViewBag or a variable?
#{
var iconColor = ViewBag.FaviconColor;
}
#(Html.Kendo().FlatColorPicker()
.Name("faviconColor")
.Value(iconColor)
.Events(events => events
.Change("ColorChange"))
)
I tried with
.Value("ViewBag.FaviconColor")
.Value("#ViewBag.FaviconColor")
.Value(ViewBag.FaviconColor)
.Value(#ViewBag.FaviconColor)
I get a javascript error when i try to do this, there has to be a way.
EDITED:
renamed shouldComponentUpdate to onClick
I'm using Ruby on Rails with the gem react-rails. The idea is to use a "PATCH" method to update an ArrayAttribute but using just JavaScript. To be clear, I'm still a newbie building a project while learning.
The story is, when a user checks a checkbox, it marks their post as complete. Their Post's table has a column for is_complete: :boolean, :default => false. Im using Postgres for the database.
var Foo = React.createClass({
getInitialState: function() {
return {
is_complete: this.props.data.is_complete, # shows "Empty object"
# is_complete: this.props.data[0].is_complete ..... shows "false"
# I could not use that because data[0] and data[1] etc...
}
},
onClick: function(){
var newVal = this.state.is_complete;
this.setState({
is_complete: React.addons.update(this.state.is_complete, { '$set': [ newVal ] })
})
},
render: function() {
var supports = (s) => (
<input type="checkbox" onChange={this.onClick}
/> Mark complete
);
return (
<div>
{this.props.data.map(supports)}
</div>
);
}
});
Index.html.erb:
<%= react_component('Foo', { data: #userlist }) %>
controller:
#userlist = #user.supports.as_json(:only => [:is_complete] # shortened for emample
When the checkbox is checked I get Uncaught TypeError: Cannot read property of is_complete of undefined
I'm looping through all of that user's posts (supports) and outputting the result on one page with a checkbox to mark as complete. I could achieve something similar by adding the chechbox inside of the edit page but I don't want that.
After the edit, I'm not getting the result I want. I want when checked, Array[1] and [2]'s is_complete is set to true or false.
Somehow I need to loop the getInitialState(), is that possible? I see not documentation on that.
So i was trying to implement something like the google map example in the angular-ui bootstrap demo page, but i can't get the result display in the dropdown menu.
full code
http://plnkr.co/edit/eIM7UC4HrIUXxdET3CO0?p=preview
this is what i have so far
HTML
<input required ng-model="asyncSelected" typeahead="address for address in getUserData($viewValue) | filter:$viewValue" type="text" placeholder="e.g john, david">
angular controller
$scope.getUserData = function(val) {
return $http.get('/sessionHandler/userProfileNameAndPicture/'+val, {
}).then(function(userData){
var addresses = [];
console.log(userData) // see picture below
angular.forEach(userData.data, function(item){
addresses.push(item);
});
return addresses;
});
};
console.log(userData)
i got the result back but i can't display it on the dropdown menu.
UPDATE:
after apply the answer from #Engineer
i got this error: TypeError: Cannot call method 'replace' of undefined
From the pic you can see, that there is no "results" property(you use it in .forEach ) of the data array. Try to change your code to below one:
angular.forEach(userData.data, function(item){
// ^-------- '.results' is removed