kendo dropdown list casecadefrom - asp.net-mvc

I have three kendo drop downlist as below
1)
#(Html.Kendo().DropDownListFor(m => m.ProgrammeID)
.HtmlAttributes(new { data_value_primitive = "true" })
.Name("ProgrammeID")
.DataTextField("DegreeName")
.DataValueField("Id")
.OptionLabel("Select Below...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetProgramme", "AptitudeTset").Data("filterProgramme");
})
.ServerFiltering(true);
})
.SelectedIndex(0)
.CascadeFrom("FacultyID")
)
2)
#(Html.Kendo().DropDownListFor(m => m.SpecializationID)
.HtmlAttributes(new { data_value_primitive = "true" })
.Name("SpecializationID")
.DataTextField("SpecializationNameID")
.DataValueField("SpecializationID")
.OptionLabel("Select Below...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetSpecialization", "Subject").Data("filterSpecialization");
})
.ServerFiltering(true);
})
.SelectedIndex(0)
.CascadeFrom("ProgrammeID")
)
3)
#(Html.Kendo().DropDownListFor(m => m.SemesterID)
.HtmlAttributes(new { data_value_primitive = "true" })
.OptionLabel("Select Below...")
.Name("SemesterID")
.DataTextField("SemesterName")
.DataValueField("SemesterID")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetSemester", "StudentRSRegistration").Data("loadSemester");
})
.ServerFiltering(true);
})
.SelectedIndex(0)
.CascadeFrom("SpecializationID")
.CascadeFrom("ProgrammeID"`enter code here`)
)
in here my 3rd DDL load based on 1st & 2nd DDL. But some times 2nd DDL may not has values. It can be empty..1st DDL always has values. My problem is, when 2nd DDL is null value my 3rd DDL not loading. But I want to load my 3rd DDL always. Because SemesterID is Requires. SemesterID depend on programmeID or/and SpecializationID. That's why some times 2nd DDl may have null values.

I solved this problem using Ajax call..I used 2nd DDL Cascade Event Handel like below
.Events(m=>m.Cascade("cascadesp"))
Now my 2nd DDL
#(Html.Kendo().DropDownListFor(m => m.SpecializationID)
.HtmlAttributes(new { data_value_primitive = "true" })
.Name("SpecializationID")
.DataTextField("SpecializationNameID")
.DataValueField("SpecializationID")
.OptionLabel("Select Below...")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetSpecialization", "Subject").Data("filterSpecialization");
})
.ServerFiltering(true);
})
.Events(m=>m.Cascade("cascadesp"))
.SelectedIndex(0)
.CascadeFrom("ProgrammeID")
)
my ajax call is
function cascadesp()
{
getSemesterID($("#ProgrammeID").data("kendoDropDownList").value(),$("#SpecializationID").data("kendoDropDownList").value(),$("#SpecializationLevelID").data("kendoDropDownList").value(),$("#IntakeID").data("kendoDropDownList").value(),$("#intakeYear").val());
}
function getSemesterID(ProgrammeID, SpecializationID, SpecializationLevelID, IntakeID, intakeYear)
{
var ddl = $('#SemesterID').data("kendoDropDownList");
var URL = "/StudentRSRegistration/GetSemester/";
$.ajax({
url: URL,
data: JSON.stringify({ ProgrammeID: ProgrammeID, SpecializationID: SpecializationID, SpecializationLevelID: SpecializationLevelID, IntakeID: IntakeID, intakeYear: intakeYear }),
async: false,
cache: false,
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
ddl.setDataSource(data);
}
});
}
now my SemeterID DDL is loding Propely

Related

When Im Trying to Sort the DataGrid ..Data Was Disappearing ..But Data Was Coming As Json Response and it was not Showing on UI with Sortable()

Data Was Binding When Sortable() was clicked data was Disappearing on UI
#(Html.Kendo().Grid<Keys>(Model.baseKeysLocations).Name("SearchResultsGridLocation")
//.Sortable()
.Sortable(Sortable => Sortable.AllowUnsort(false))
.HtmlAttributes(new { style = "height: 450px" })
.Resizable(r => r.Columns(true))
.Reorderable(r => r.Columns(true))
.Scrollable(s => s.Virtual(true))
.Editable(e => e.Mode(GridEditMode.InCell))
.Pageable(p => p.Numeric(false).PreviousNext(false).Messages(m => m.Display("Total: {2}")))
.DataSource(ds => ds
.Ajax()
.AutoSync(true)
.Read(read => read.Action("Grid_KeyLocationRead", "Keys", new { #schdate = "", #drv = "" }))
.Model(m =>
{
m.Id(f => f.UniqueId);
m.Field(f => f.Schedule);
m.Field(f => f.TableId).Editable(false);
m.Field(f => f.FobId).Editable(false);
m.Field(f => f.RoomKey).Editable(false);
m.Field(f => f.Community).Editable(false);
m.Field(f => f.Lease).Editable(false);
m.Field(f => f.RoomKey).Editable(false);
m.Field(f => f.Driver).Editable(false);
m.Field(f => f.Status).Editable(false);
m.Field(f => f.FobId);
}
)
)
.Columns(columns =>
{
columns.Bound(f => f.UniqueId).Width("8rem").Hidden();
columns.Bound(f => f.TableId).Title("Id").Width("5rem").Hidden();
columns.Bound(f => f.RoomKey).Title("Key Location").Width("6rem");
columns.Bound(f => f.Community).Title("Community").Width("6rem");
columns.Bound(f => f.Lease).Title("Master").Width("6rem");
columns.Bound(f => f.Driver).Title("Driver").Width("6rem");
columns.Bound(client => client.Status).ClientTemplate("# if (Status == true) { #" + "IN" + "# } else {#" + "OUT" + "# } #").Title("Status").Width("8rem");
})
.Sortable()
)
</div>
*Data Was Binding When Sortable() was clicked data was Disappearing on UI*
*Data Was Binding *1: https://i.stack.imgur.com/qRAmu.png
When Pressing Sort Function Data Is Disappearing[2]: https://i.stack.imgur.com/LVSld.png
Trying to Sort the DataGrid ..Data Was Disappearing ..But Data Was Coming As Json Response and it was not Showing on UI with Sortable() *
function SearchLocationResults(search) {
$filter = new Array();
var leaseuid = null, complexuid = null;
if (search == true) {
if ($("#baseLocationViewModel_ComplexUId").data("kendoDropDownList").value() != '' && $("#baseLocationViewModel_ComplexUId").data("kendoDropDownList").value() != null && $("#baseLocationViewModel_ComplexUId").data("kendoDropDownList").value() != undefined) {
$filter.push({ field: "Driver", operator: "isequalto", value: $("#baseLocationViewModel_DriverUId").data("kendoDropDownList").value() });
complexuid = $("#baseLocationViewModel_ComplexUId").data("kendoDropDownList").value();
}
if ($("#baseLocationViewModel_MasterUId").data("kendoDropDownList").value() != '' && $("#baseLocationViewModel_MasterUId").data("kendoDropDownList").value() != null && $("#baseLocationViewModel_MasterUId").data("kendoDropDownList").value() != undefined) {
$filter.push({ field: "LeaseUId", operator: "isequalto", value: $("#baseLocationViewModel_MasterUId").data("kendoDropDownList").value() });
leaseuid = $("#baseLocationViewModel_MasterUId").data("kendoDropDownList").value();
}
}
$(".loadermodel").removeClass('d-none');
$.ajax({
url: '/Keys/Keys/Grid_KeyLocationRead',
type: "POST",
dataType: "json",
contentType: 'application/json; charset=utf-8',
async: false,
data: JSON.stringify({
request: $filter, schedule: $("#baseLocationViewModel_Schedule").val(), driver: $("#baseLocationViewModel_DriverUId").data("kendoDropDownList").value(), _complexUId: complexuid, _leaseUId: leaseuid
}),
cache: false,
success: function (result) {
$("#SearchResultsGridLocation").data('kendoGrid').dataSource.data([]);
$("#SearchResultsGridLocation").data('kendoGrid').dataSource.data(result);
$(".loadermodel").addClass('d-none');
},
error: function (err) {
$(".loadermodel").addClass('d-none');
}
});
}

How to send DataSourceRequest object to the controller via ajax call properly?

I have a kendo grid on my razor view mvc as below:
#(Html.Kendo().Grid(Model.employeeList)
.Name("grid")
.Pageable(pager => pager
.Messages(messages => messages.Empty("No data"))
)
.Pageable(pager => pager
.PageSizes(new[] { 15, 20, 25, 50 })
)
.Filterable()
.Groupable()
.Sortable()
.Columns(columns =>
{
columns.Bound(employee => employee.employeeId);
columns.Bound(employee => employee.firstName);
columns.Bound(employee => employee.lastName);
columns.Bound(employee => employee.jobTitle);
columns.Bound(employee => employee.employeeId).ClientTemplate(
"<a href='" + Url.Action("Edit", "Employee", new { id = "#=employeeId#" }) + "'>Edit</a> | " +
"<a href='" + Url.Action("Details", "Employee", new { id = "#=employeeId#" }) + "'>Details</a> | " +
"<a href='" + Url.Action("Delete", "Employee", new { id = "#=employeeId#" }) + "'>Delete</a>"
)
.Filterable(false)
.Groupable(false)
.Sortable(false)
.Title("");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetEmployeesList", "Employee").Data("branchData")).PageSize(15)
)
)
Along with the controller for GetEmployeesList ActionResult:
[HttpPost]
public ActionResult GetEmployeesList([DataSourceRequest]DataSourceRequest request, int branchId, bool includeNonActive)
{
IQueryable<Employee> employees;
if (includeNonActive)
{
employees = db.Employee.Where(e => e.branchId == branchId && e.isDeleted == false)
.Include(e => e.HireType).Include(e => e.HireStatus);
}
else
{
employees = db.Employee.Where(e => e.branchId == branchId && e.HireStatus.hireStatusId == 1 && e.isDeleted == false)
.Include(e => e.HireType).Include(e => e.HireStatus);
}
DataSourceResult result = employees.ToDataSourceResult(request, employee => new EmployeeViewModel
{
employeeId = employee.employeeId,
firstName = employee.firstName,
lastName = employee.lastName,
jobTitle = employee.jobTitle,
HireStatus = new HireStatus() { hireStatus = employee.HireStatus.hireStatus },
HireType = new HireType() { hireType = employee.HireType.hireType }
});
return Json(result);
}
So far, everything went well. DataSourceRequest request was passed from the grid successfully.
But then I have another post AJAX call via jQuery:
$(document).ready(function () {
$('#ddlBranchList').change(function () {
var isNonActive = $('#isNonActive')[0].checked;
var ddlValue = $('#ddlBranchList').val();
$.ajax({
type: "POST",
url: "/Employee/GetEmployeesList",
data: JSON.stringify({ branchId: ddlValue, includeNonActive: isNonActive }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
resultData = result;
},
error: function () {
alert("Error retrieving Employees List!");
}
}).done(function () {
var dataSource = new kendo.data.DataSource({
data: resultData.Data,
pageSize: 15
});
var grid = $('#grid').data("kendoGrid");
grid.setDataSource(dataSource);
dataSource.read();
});
});
}
A dropdown change event should trigger an ajax post to the controller, but I couldn't properly pass a proper object to DataSourceRequest request parameter. When it is posted, DataSourceRequest request is always null.
How do I pass the object correctly?
I got it working by forcing the kendo grid to re-read the data:
$('#ddlBranchList').change(function () {
var grid = $('#grid').data("kendoGrid");
grid.dataSource.read();
});
and then modify the branchData function:
function branchData() {
var isNonActive = $('#isNonActive')[0].checked;
var ddlValue = $('#ddlBranchList').val();
if (ddlValue > 0) {
branchId = ddlValue;
}
return {
branchId: branchId,
includeNonActive: isNonActive,
}
}

Function fails to POST. Insted it sends a Get?

I can pass my parameters from a Kendo Grid bound columns, as shown below. But my Controller is treating it as GET. I cannot get he controller to treat it a [HTTPPOST]
#(Html.Kendo().Grid((IEnumerable<myApp.Dal.SmKpr1Value>) ViewBag.kk1)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(c => c.opYear).Width(100);
columns.Bound(c => c.opPeriod).Width(100);
columns.Bound(c => c.val).Width(100)
.ClientTemplate(#Html.ActionLink("#=val#", "myAction", "myController", routeValues: null, htmlAttributes: new{ para1 = #ViewBag.para1, para2 = "#=opYear#", para3 = "#=opPeriod#",#class = "postLink k-button", onclick = "myFunction(this)" })
.ToHtmlString());
}
.
.
)
<script>
function myFunction(e) {
var _para1 = $(e).attr("para1");
var _para2 = $(e).attr("para2");
var _para3 = $(e).attr("para3");
var parameters = { param1: _para1, param2: _para2, param3: _para3 };
$.Ajax({
method: 'POST',
url: $(e).attr("href"),
data: parameters,
success: function (success)
{
alert(success);
}
});
}
</script>

Change dropdownlist to autocomplete in scheduler popup editor in Kendo MVC

For example, I bind the resource as follows.
.Resources(resource =>
{
resource.Add(m => m.UserName)
.Title("Staff")
.Name("Staff")
.DataTextField("Text")
.DataValueField("Value")
.DataSource(source => source
.Read(read => read.Action("GetStaffList", "Scheduler"))
);
})
When the editor popups, the staff input has type of dropdown list which contains all the Staff in database.
Question: How to change it to an autocomplete widget with server filtering by staff's name for example.
Thank you.
I would jump into JavaScript by hooking up a event on edit to the grid, then you can do it there doing something like this
function onEdit(e) {
//Autocompleter
$("#Staff").kendoAutoComplete({
dataSource: {
serverFiltering: true,
transport: {
read: { url: "/Staff/GetListForAutocompleter" },
parameterMap: function (data, action) {
var newParams = { filter: $("#Staff").val(), filter2: 'something' };
return newParams;
}
}
}
});
}

Kendo Grid and one row of JSON data and a single row of data

I feed JSON results to My Kendo Grid; seems like when I have one row of data, the grid can't function?
Following works:
<DocumentElement>
<ResultXml>
<NoData>1</NoData>
</ResultXml>
<ResultXml>
<NoData>2</NoData>
</ResultXml>
</DocumentElement>";
and this doesn't work:
<DocumentElement>
<ResultXml>
<NoData>1</NoData>
</ResultXml>
</DocumentElement>";
EDIT to clear out above xml is converted to json before being fed to the grid (I included the xml version of the json for readability purposes)
Obviously above is xml; after using Newtonsoft.Json.JsonConvert, I get the following JSON results to feed to my grid (none of which works):
{"DocumentElement":{"ResultXml":"Nothing to display"}}
{"DocumentElement":{"ResultXml":{"field":"Nothing to display"}}}
Following works, but I want to avoid sending an empty field if I don't have to
{"DocumentElement":{"ResultXml":[{"NoData":null},{"NoData":"Nothing to display"}]}}
End of Edit
here's my Kendo Grid:
$("#grid").kendoGrid({
sortable: true,
groupable: true,
scrollable: true,
height: "600px",
pageable: { pageSizes: 9 },
dataSource:
{
transport:
{
read: function (options) {
$.ajax("/Controller/Action?param=" + paramVal,
success: function (result) {
var jResult = $.parseJSON(result);
options.success(jResult.DocumentElement.ResultXml);
});
}
}
},
});
I guess I can hardcode the json string when sending it back to client; I would've liked to have the xml version of saying I have empty dataset; but I guess this'll do, unless someone can suggest something better;
if (string.IsNullOrEmpty(xmlResult))
{
//No data:
jsonData = "{\"DocumentElement\":{\"ResultXml\":[{\"NoData\":\"Nothing to display\"}]}}";
}
else
{
//Turn xml data to Json:
var doc = new XmlDocument();
doc.LoadXml(xmlResult);
jsonData = JsonConvert.SerializeXmlNode(doc);
}
I believe the field name does not need double quotes. Ex/ name\value pair as in {name: "Bob Mazzo"}
Are you sure that there are 2 definition (one for View,the other for retrieving data) in your controller and the View calls the other one as below?
Controller:
//!!! This is for calling "CustomAjaxBinding" view
public ActionResult CustomAjaxBinding()
{
return View();
}
//!!! This is for retrieving data called from "CustomAjaxBinding" View
public ActionResult CustomAjaxBinding_Read([DataSourceRequest] DataSourceRequest request)
{
var dataContext = new SampleEntities();
//Convert to view model to avoid JSON serialization problems due to circular references.
IQueryable<OrderViewModel> result = dataContext.Orders.Select(o => new OrderViewModel
{
OrderID = o.OrderID,
ShipCity = o.ShipCity,
ShipCountry = o.ShipCountry,
ShipName = o.ShipName
});
return Json(result, JsonRequestBehavior.AllowGet);
}
View (name is "CustomAjaxBinding")
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.Order>()
.Name("Grid")
.Columns(columns => {
columns.Bound(o => o.OrderID).Groupable(false);
columns.Bound(o => o.ShipCity);
columns.Bound(o => o.ShipCountry);
columns.Bound(o => o.ShipName);
})
.Pageable()
.Sortable()
.Filterable()
.Scrollable()
.Groupable()
.DataSource(dataSource => dataSource
.Ajax()
//!!! Call "CustomAjaxBinding_Read" not CustomAjaxBinding
.Read(read => read.Action("CustomAjaxBinding_Read", "Grid"))
)
)
Regards...

Resources