Trying to work with the Telerik Kendo UI MVC AutoComplete control. I'm using server side filtering which works. The results are coming back in the controller method, but I'm seeing 'Undefined' in the list of choice on the view. The MVC details are below.
View
#model List<USFS.Lending.LoanApprovalConditionSetup>
#(Html.Kendo().AutoComplete()
.Name("Conditions")
.DataTextField("ConditionName")
.BindTo(Model)
.MinLength(3)
.Filter(FilterType.Contains)
.Placeholder("Conditions Search...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("SearchLoanConditions", "LoanCondition")
.Data("onConditionsSearch");
})
.ServerFiltering(true);
})
)
<script>
function onConditionsSearch() {
return {
searchText: $("#Conditions").val()
};
}
</script>
Controller
public ActionResult SearchLoanConditions(string searchText)
{
if (string.IsNullOrEmpty(searchText))
{
searchText = String.Empty;
}
IEnumerable<LoanApprovalConditionSetup> loanConditions = SearchConditions(searchText);
return PartialView("_searchConditions", loanConditions.ToList());
}
Model
My model is a standard class with properties in it.
Any help would be great!
Thanks
Jim
Related
I'm developing a .NET Core 3.1 Razor Pages Application. One of the Razor Pages within my app Posts the contents of a TextArea using AJAX. This works as expected, however, when I use CKEditor 5 https://ckeditor.com/ckeditor-5/ and turn the TextArea into a WYSIWYG Editor, I can no longer Post the values within the editor.
Please note, the CKEditor loads as expected and there are no errors when I use Developer Tools within Google Chrome.
PageModel
[BindProperty]
public InputModel Input { get; set; }
public PartialViewResult OnPostMyTestPartial()
{
//Some logic then return data for partial
}
public class InputModel
{
public int Id { get; set; }
public string Narrative { get; set; }
}
CSHTML
<form>
<!-- Other html -->
<textarea asp-for="Input.Narrative"></textarea>
<button class="btn btn-primary" id="load">Update</button>
</form>
JQuery
$(document).ready(function () {
$('#load').on('click', function (evt) {
evt.preventDefault();
$.post("/MyPage/Index?handler=MyTestPartial", $('form').serialize(), function (data) {
$("#myPartial").html(data);
});
});
ClassicEditor
.create(document.querySelector('#Input_Narrative'), {
toolbar: ['heading', '|', 'bold', 'italic', 'link']
})
.then(editor => {
window.editor = editor;
})
.catch(err => {
console.error(err.stack);
});
});
When I comment out the ClassicEditor code in my JQuery file so that the TextArea remains purely as a TextArea, I can see through the Developer Tools and debugging in Visual Studio that the value is Posted successfully:
However, when I make the TextArea into an editor using the CKEditor and attempt to Post data, the data is not posted.
Can someone please help?
Thanks.
You need to manually transfer the content of the editor to the form control:
$('#load').on('click', function (evt) {
evt.preventDefault();
$('#Input_Narrative').val(CKEDITOR.instances['Input_Narrative'].getData());
$.post("/MyPage/Index?handler=MyTestPartial", $('form').serialize(), function (data) {
$("#myPartial").html(data);
});
});
https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/saving-data.html#manually-retrieving-the-data
I have a Kendo Dropdownlist as follow,
Html.Kendo().DropDownList()
.Name("CountryName")
.HtmlAttributes(new { style = "font-size:8pt;width:110px" })
.DataValueField("Id")
.DataTextField("Description")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("CountryAjax", "Shared");
});
})
Where
[HttpPost]
public ActionResult CountryAjax(string countryId)
{
var countries = this._decodeBL.GetAllCountriesList();
return new JsonResult
{
Data = new SelectList(countries, "Id", "Description", "Canada")
};
}
But the dropdownlist is empty. When set break point in CountryAjax, it doesn't stop there (means that CountryAjax is never executed). BTW, this code works fine for Telerik ASP.Net MVC. What is the problem? Thanks.
You are not supplying a countryId parameter. If the method signature was public ActionResult CountryAjax() it will fire I think.
I'm using Telerik Grid. I need to set background color for the entire row based on some property in view model. I've tried to do it as below by setting a background in IF statement for each column but backgound applies only on element not all cell (td). Also it seems it's a very "dirty" way to accomplish this task.
#(Html.Telerik().Grid(Model.SomeItems).Name("Grid")
.Columns(columns =>
{
columns.Template(
#<text>
#if (Model.IsOfSpecialColor)
{
<div class="gridRowBackground">
#Html.ActionLink(...)
</div>
}
else
{
#Html.ActionLink(...)
}
</text>).Title("Blabla");
});
You can change it using onRowDataBound event
#(Html.Telerik().Grid<Customer>()
.Name("Grid2")
.DataBinding(d => d.Ajax().Select("Select", "Home"))
.ClientEvents(e => e.OnRowDataBound("onRowDataBound"))
)
and the function is
<script>
function onRowDataBound(e) {
if (e.dataItem.ID == 2) {
e.row.style.backgroundColor = "grey";
}
}
</script>
If you are using server data binding, you can use CellAction. However, if you are using ajax data binding, you will need to use a solution like Tassadaque suggests.
#(Html.Telerik().Grid(Model.SomeItems)
.Name("Grid")
.CellAction(cell =>
{
if (cell.DataItem.IsOfSpecialColor.Value)
{
cell.HtmlAttributes["style"] = "background-color: red";
}
})
I have a view containing a Telerik grid:
Index.cshtml
#(Html.Telerik().Grid(Model)
.Name("Grid")
.DataKeys(keys => keys.Add(c => c.CustomerID))
.ToolBar(toolBar => toolBar.Template(
#<text>
<button id="feedback-open-button" title="Add Customer" class="t-button t-state-default">Add</button>
</text>))
.Columns(columns =>
{
columns.AutoGenerate(column =>
{
//customize autogenereted column's settings
column.Width = "150px";
if (column.Member == "CustomerID")
column.Visible = false;
});
columns.Command(commands => commands
.Custom("editCustomer")
.Text("Edit")
.DataRouteValues(route => route.Add(o => o.CustomerID).RouteKey("CustomerID"))
.Ajax(true)
.Action("EditCustomer", "Grid"))
.HtmlAttributes(new { style = "text-align: center" })
.Width(150);
})
)
I want to add/edit records to this grid using a popup. I have used a Telerik Window, in which I have opened another view as Partial View to add/edit records. This is the code for the window and how I am opening it as a popup for "ADD functionality".
Index.cshtml
#{ Html.Telerik().Window()
.Name("Window")
.Title("Add / Edit Customer")
.Content(#<text>
#Html.Partial("AddEditCustomer", new Customer());
</text>)
.Width(400)
.Draggable(true)
.Modal(true)
.Visible(false)
.Render();
}
#{ Html.Telerik().ScriptRegistrar()
.OnDocumentReady(#<text>
// open the initially hidden window when the button is clicked
$('#feedback-open-button')
.click(function(e) {
e.preventDefault();
$('#Window').data('tWindow').center().open();
});
</text>);
}
I have tried to use the same window for edit. But I am having problem in passing the customer object to the partial view within the window.
CustomerController.cs
public JsonResult EditCustomer(int CustomerID)
{
var model = CustomerModel._CustomerCollection.FirstOrDefault(o => o.CustomerID == CustomerID);
return Json(new { customer = model });
}
Index.cshtml
<script type="text/javascript">
function onComplete(e) {
if (e.name == "editCustomer") {
var detailWindow = $("#Window").data("tWindow");
var customer = e.response.customer;
detailWindow.center().open();
}
}
</script>
How can I pass this "customer" object to the partial view inside the popup window?
The way we deal with this where I work is by creating an empty div in the Telerik window. The "edit" link is an AJAX link which uses the window's div as its target. The link calls the controller method of your choice, and from there rather than returning Json, just return the PartialView you want displayed. The benefit of this approach is you use the customer object just like you would for any normal view/partial.
After the AJAX completes, open the Telerik window and the content should be there.
I have a view with several controls that are used for searching. When a user searches (Ajax.BeginForm) off of these I return the data into a PartialView (Telerik MVC3 Grid) that was generated dynamically.
This all works fine. In the grid are buttons for selecting a row. When I select a row, it posts to my controller, I do some "stuff" etc. When I try to get back to the view all I get is my grid data on a page by itself, it displays like a table with no borders, no other controls etc. My code is below.
My partial grid:
#model Highlander.Areas.Highlander.Models.ViewModels.DeliveriesGridViewModel
#using System.Data;
#(Html.Telerik().Grid<System.Data.DataRow>(Model.Data.Rows.Cast<System.Data.DataRow>())
.Name("Grid")
.DataKeys(dataKeys => dataKeys.Add("DeliveryID"))
.Columns(columns =>
{
columns.Command(commandbutton =>
{
commandbutton.Select().ButtonType(GridButtonType.ImageAndText);
}).Width(80).Title(ViewBag.Title);
columns.LoadSettings(Model.Columns as IEnumerable<GridColumnSettings>);
})
.DataBinding(dataBinding => dataBinding.Server().Select("_MarkSystem", "Deliveries"))
.EnableCustomBinding(true)
.Resizable(resize => resize.Columns(true))
)
My Controller:
[GridAction]
public ActionResult _MarkSystem(GridCommand command, int id)
{
string shipDeliver = DataCache.ShipDeliver;
DataTable fullTable = DataCache.FullTable;
// call to function to get the datatable data based on the id
rHelpers.GetDataTableRow(id, fullTable, shipDeliver);
// get the data for the grid into the model
fullTable = DataCache.FullTable;
model = new DeliveriesGridViewModel();
model.Data = fullTable;
model.Columns = rHelpers.NewColumns(DataCache.FullTable);
return PartialView("_DeliveryGrid", model);
//if (Request.IsAjaxRequest())
//{
// return PartialView("_DeliveryGrid", model);
//}
//return PartialView("_DeliveryGrid", model);
//return PartialView("DeliveryManager", model);
}
As you can see I have tried various things with no success.
Can anyone give me some direction on this.
Thanks for your time.
As far i understand you are using dataBinding.Server() that call a server side binding. Use .Editable(editing => editing.Mode(GridEditMode.InLine) it will work.
Both kind of bindings (Server and Ajax) needs a editing mode. Put an editing mode and try again.Kindly Response if it does not work for you. Here full code of data binding:
**.DataBinding(dataBinding => dataBinding.Ajax()
.Select("myAction", "myController")
.Update("myAction",myController")).
Editable(editing => editing.Mode(GridEditMode.InLine))**