We Keep Coding

Unable to read value from document

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.

Getting kendo-window parameter

I have a JavaScript method that opens up a kendo-window, this window contains a kendo-grid which has a datasource that I want to get from my controller. In order to get the data to fill this grid I need to pass on an ID. The JavaScript method that opens up this window contains the necessary data, however I do not know how to get this data in my kendo-grid. I need to get my ID to the (read => read.Action("Read_Action", "ControlerName", new { linenum = ??? }) part where I want to replace the question marks with my ID.
JavaScript:
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
console.log(dataItem.LineNum);
var wnd = $("#Details").data("kendoWindow");
wnd.center().open();
}
Kendo-window:
#{Html.Kendo().Window().Name("Details")
.Title("Location Details")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(800)
.Height(600)
.Content(
Html.Kendo().Grid<TelerikMvcApp1.Models.BinLocationItemModel>()
.Name("LocItemGrid")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(m => m.BinLocationItemId))
.Read(read => read.Action("Read_Action", "ControlerName", new { linenum = ??? })))
.ToHtmlString()).Render();
}

You can only do this using a controller to open your window content as a partial view.
Set up your controller which will render the partial view and add the id to ViewBag to retrieve in kendo window,
public ActionResult GetKendoWindow(){
ViewBag.Id = 123;
return PartialView("_PartialView"); // Html file name
}
Your "_PartialView" file will now contain the grid only with Id assigned from ViewBag.Id
Html.Kendo().Grid<TelerikMvcApp1.Models.BinLocationItemModel>()
.Name("LocItemGrid")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(m => m.BinLocationItemId))
.Read(read => read.Action("Read_Action", "ControlerName", new { linenum = ViewBag.Id }))
Your kendo().window() method will change to this (without the content as it'll load from the Partial View)
#{Html.Kendo().Window().Name("Details")
.Title("Location Details")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(800)
.Height(600)
.LoadContentFrom("GetKendoWindow", "Controller")
.ToHtmlString()).Render();
}
If your ID is coming from the parent page (the page you're opening the window from), you will need to pass the ID up to the controller, your .LoadContentFrom("GetKendoWindow", "Controller") would then become .LoadContentFrom("GetKendoWindow?ID=123", "Controller").
And your controller declaration would become public ActionResult GetKendoWindow(int ID)
Edit:
As you retrieve the value from JavaScript event, you would preferably want to open your window using JavaScript for simplicity, in your event put the following
$("#Details").kendoWindow({
width: "620px",
height: "620px",
title: "Window Title",
content: {
url: "GetKendoWindow",
type: "GET",
data: {ID : dataItem.ID}
}
});
Remove your Kendo().Window() Razor function completely, and leave an empty div with id Details, and open the window using $("#Details").data("kendoWindow").center().open()
Complete code for simplicity:
<div id="Details"></div>
<script>
// Your event function where you retrieve the dataItem
$("#Details").kendoWindow({
width: "620px",
height: "620px",
title: "Window Title",
content: {
url: "GetKendoWindow",
type: "GET",
data: {ID : dataItem.ID}
}
});
$("#Details").data("kendoWindow").center().open()
//End the event function
</script>
Then add your controller method from above.
public ActionResult GetKendoWindow(int ID){
ViewBag.Id = ID;
return PartialView("_PartialView"); // Html file name
}

You could use Kendo DataSource additional data like this:
$("#grid").data("kendo-grid").dataSource.read({additional:"data"});
This is working on grid demo page: http://demos.telerik.com/kendo-ui/grid/remote-data-binding. It adds param to the request.
You could probably set the function returning additional data in dataSource - see the docs: http://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-do-i-send-values-to-my-action-method-when-binding-the-grid?
EDIT 1
You can achieve this simply by setting the grid's additional request data:
$("#grid").data("kendo-grid").dataSource.transport.options.read.data = { additional: "data"};
So you open the window with kendo grid. Select the grid with typical $(...).data("kendoGrid"). An then set the dataSource.transport.options.read.data to your line id.

How do I populate a list field in a model from javascript?

I have a Kendo.MVC project. The view has a model with a field of type List<>. I want to populate the List from a Javascript function. I've tried several ways, but can't get it working. Can someone explain what I'm doing wrong?
So here is my model:
public class Dashboard
{
public List<Note> ListNotes { get; set; }
}
I use the ListNotes on the view like this:
foreach (Note note in Model.ListNotes)
{
#Html.Raw(note.NoteText)
}
This works if I populate Model.ListNotes in the controller when the view starts...
public ActionResult DashBoard(string xsr, string vst)
{
var notes = rep.GetNotesByCompanyID(user.ResID, 7, 7);
List<Koorsen.Models.Note> listNotes = new List<Koorsen.Models.Note>();
Dashboard employee = new Dashboard
{
ResID = intUser,
Type = intType,
FirstName = user.FirstName,
LastName = user.LastName,
ListNotes = listNotes
};
return View(employee);
}
... but I need to populate ListNotes in a Javascript after a user action.
Here is my javascript to make an ajax call to populate ListNotes:
function getReminders(e)
{
var userID = '#ViewBag.CurrUser';
$.ajax({
url: "/api/WoApi/GetReminders/" + userID,
dataType: "json",
type: "GET",
success: function (notes)
{
// Need to assign notes to Model.ListNotes here
}
});
}
Here's the method it calls with the ajax call. I've confirmed ListNotes does have the values I want; it is not empty.
public List<Koorsen.Models.Note> GetReminders(int id)
{
var notes = rep.GetNotesByCompanyID(id, 7, 7);
List<Koorsen.Models.Note> listNotes = new List<Koorsen.Models.Note>();
foreach (Koorsen.OpenAccess.Note note in notes)
{
Koorsen.Models.Note newNote = new Koorsen.Models.Note()
{
NoteID = note.NoteID,
CompanyID = note.CompanyID,
LocationID = note.LocationID,
NoteText = note.NoteText,
NoteType = note.NoteType,
InternalNote = note.InternalNote,
NoteDate = note.NoteDate,
Active = note.Active,
AddBy = note.AddBy,
AddDate = note.AddDate,
ModBy = note.ModBy,
ModDate = note.ModDate
};
listNotes.Add(newNote);
}
return listNotes;
}
If ListNotes was a string, I would have added a hidden field and populated it in Javascript. But that didn't work for ListNotes. I didn't get an error, but the text on the screen didn't change.
#Html.HiddenFor(x => x.ListNotes)
...
...
$("#ListNotes").val(notes);
I also tried
#Model.ListNotes = notes; // This threw an unterminated template literal error
document.getElementById('ListNotes').value = notes;
I've even tried refreshing the page after assigning the value:
window.location.reload();
and refreshing the panel bar the code is in
var panelBar = $("#IntroPanelBar").data("kendoPanelBar");
panelBar.reload();
Can someone explain how to get this to work?
I don't know if this will cloud the issue, but the reason I need to populate the model in javascript with an ajax call is because Model.ListNotes is being used in a Kendo Panel Bar control and I don't want Model.ListNotes to have a value until the user expands the panel bar.
Here's the code for the panel bar:
#{
#(Html.Kendo().PanelBar().Name("IntroPanelBar")
.Items(items =>
{
items
.Add()
.Text("View Important Notes and Messages")
.Expanded(false)
.Content(
#<text>
#RenderReminders()
</text>
);
}
)
.Events(e => e
.Expand("getReminders")
)
)
}
Here's the helper than renders the contents:
#helper RenderReminders()
{
if (Model.ListNotes.Count <= 0)
{
#Html.Raw("No Current Messages");
}
else
{
foreach (Note note in Model.ListNotes)
{
#Html.Raw(note.NoteText)
<br />
}
}
}
The panel bar and the helpers work fine if I populate Model.ListNotes in the controller and pass Model to the view. I just can't get it to populate in the javascript after the user expands the panel bar.

Perhaps this will do it for you. I will provide a small working example I believe you can easily extend to meet your needs. I would recommend writing the html by hand instead of using the helper methods such as #html.raw since #html.raw is just a tool to generate html in the end anyways. You can write html manually accomplish what the helper methods do anyway and I think it will be easier for you in this situation. If you write the html correctly it should bind to the model correctly (which means it won't be empty on your post request model) So if you modify that html using javascript correctly, it will bind to your model correctly as well.
Take a look at some of these examples to get a better idea of what I am talking about:
http://www.hanselman.com/blog/ASPNETWireFormatForModelBindingToArraysListsCollectionsDictionaries.aspx
http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx
http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/
So to answer your question...
You could build a hidden container to hold your list values like this (make sure this container is inside the form):
<div id="ListValues" style="display:none">
</div>
Then put the results your ajax post into a javascript variable (not shown).
Then in javascript do something like this:
$('form').off('submit'); //i do this to prevent duplicate bindings depending on how this page may be rendered futuristically as a safety precaution.
$('form').on('submit', function (e) { //on submit, modify the form data to include the information you want inside of your ListNotes
var data = getAjaxResults(); //data represents your ajax results. You can acquire and format that how you'd like I will use the following as an example format for how you could save the results as JSON data: [{NoteID ="1",CompanyID ="2"}]
let listLength = data.length;
for (let i = 0; i < listLength; i++) {
$('#ListValues').append('<input type="text" name="ListNotes['+i+'].NoteID " value="' + data.NoteID +'" />')
$('#ListValues').append('<input type="text" name="ListNotes['+i+'].CompanyID " value="' + data.CompanyID +'" />')
//for your ajax results, do this for each field on the note object
}
})
That should do it! After you submit your form, it should automatically model bind to you ListNotes! You will be able to inpsect this in your debugger on your post controller action.

Kendo autocomplete showing [object object] instead of propery value

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.

Pass argument using Client Side in Telerik MVC

I'm developing some application using Telerik MVC.I wanted to pass Argument from client side.Is there any way to do it?
Here is my code for rad window
#{ Html.Telerik().Window()
.Name("NewsWindow")
.Title("Edit Here")
.Draggable(true)
.Scrollable(true)
.Resizable(resizing => resizing
.Enabled(true))
.LoadContentFrom("News/NewsEditor")
.Modal(true)
.Buttons(b => b.Refresh().Close())
.Width(600)
.Height(650)
.Visible(false)
.Render();
}

Remove
.LoadContentFrom("News/NewsEditor")
Add a function containing below codes and bind it to your desired event.
$("#NewsWindow")
.data("kendoWindow")
.refresh({
url: baseURL + "News/NewsEditor",
data: { argumentName: argumentValue }
})
.open();