I am using Kendo grid with .net mvc and angular. On some event i need to refresh datasource in grid (another url call) but with different parameter.
I know you can do this by setting dataSource.transport.options.read.url but is there any better way to do it? Like setting parameters on grid which datasource will read on each refresh?
This is my transport config
transport: { read: {
url: scope.model.readUrl,
type: scope.model.readAction || 'POST',
dataType: 'json',
},
and this is defining of the model (in a controller)
$scope.kendoGrid = {
showActions: true,
readUrl: /getPayPeriodReportForAllEmployees + "?dateTime=" + $scope.dateTime,
readAction: 'GET',
dataObjectName: 'Data',
totalObjectName: 'Total',
pageSize: 30,
fields: {
...
},
columns: [...]
}
So this $scope.dateTime is changeable, and if possible to tell that to the directive so i don't have to send it different url each time a chnage happens.
SO my problem is similar like this one http://www.telerik.com/forums/pass-a-parameter-to-a-datasource#aBBqFUSbE0-K3ecm1Q2fxg
Related
I'm using ajax to pull in data from a php file (which returns json).
I'm wondering, can you have results pulled from Ajax and loads on click without having to search? so essentially you click the field, it drops down with all the elements from Ajax. Couldn't find in the documentation.
Code:
jQuery('.producttypesajax').select2({
allowClear: true,
placeholder: {
id: '',
text: 'Search by Product Type'
},
ajax: {
url: base + '/appProductTypeSearch.php',
dataType: 'json',
delay: 250,
data: function( params ) {
return {
q: params.term // search term
};
},
processResults: function( data) {
return {
results: data
};
},
cache: true
},
minimumInputLength: 1
});
jQuery('.producttypesajax').on('select2:select', function (e) {
var data = e.params.data;
});
https://select2.org/data-sources/ajax
I believe there's no native solution for this, but I managed to do it somehow.
Since Select2 accepts Arrays as a data source, you can make an Ajax request returning your Json object and use it as an "Array".
Sample code:
$.ajax({
url: url,
type: 'get',
dataType: 'json',
success: function (jsonObject){
$('#mySelect').select2({ data: jsonObject });
}
});
It worked for me. Hope it helps.
Happy New Year!
I want to place a label in a KendoUI Grid , When my page loads I am passing in the primary key of some table that refers to the description of the value I show in the label. It is working good when the page loads, BUT when I go to add a new row to the grid, it switches back and shows the primary key value in there.
Here is parts of how I have it currently setup:
In the schema of the grid I have added two fields:
ManagerPK: {
type: "number",
defaultValue : SearchVariable
},
ManagerName: {
type: "string"
}
And my Create/Update of the Kendo Grid are defined like this:
create: {
type: "POST",
url: "AddSomeRow",
dataType: "json",
contentType: "application/json"
},
update: {
type: "POST",
url: "UpdateSomeRow",
dataType: "json",
contentType: "application/json"
},
and in the columns definition of the grid for it I defined it like this:
columns: [
{
field: "ManagerPK",
title: "Manager Desc",
width: "8%",
template: "#=ManagerDesc ? ManagerDesc : ''#"
}
So how should I change my code to NOT SHOW the PK and always she the Description?
I have a kendo ui treeview and a dropdownbox on my asp.net mvc page. The dropdown box can have two values. Depending upon which one has been chosen, I want to change the datasource url, which is a method in a controller. The data type and structure of data from both the url will be the same. Essentially I want to change url: '#Url.Content("~/Document/GetMyDocument")' dynamically. The following is my treeview code:
<script>
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true,
},
dataSource: {
transport: {
read: {
url: '#Url.Content("~/Document/GetMyDocument")',
type: "post",
dataType: "json"
}
},
schema: {
model: {
text: "Name",
spriteCssClass: "fa fa-folder",
children: "Files"
}
}
},
dataTextField: ["Name", "FileName"],
dataValueField: ["id"],
check: onCheck
});
You can specify the URL of the treeview dataSource as function
transport: {
read: {
url: function (e) { }
}
}
You can then listen for the change event of the DropDownList and call
$('#treeview').data('kendoTreeView').dataSource.read();
Inside the url function you can get the value of the DropDownList and resolve the url dynamically:
var ddl = $('#myDDl').data('kendoDropDownList');
var value = ddl.value();
return value == "someValue" ? "/foo/bar": "/bar/baz";
I am using Kendo UI TreeView with virtualization feature (ASP.net MVC); it helps me to load the top level initially & loads further levels on-demand.
Now there is a requirement to include “search” functionality to search nodes in the TreeView.
Unfortunately I don’t have all the nodes pre-loaded in my TreeView to perform search; can you please suggest if there are any alternatives to perform search dynamically inside TreeView.
Thank you
-nm
I ran into a similar problem and managed to fix it by implementing two Controller methods
Controller.LoadNodes(int? parentId)
Controller.SearchNodes(string searchTerm)
LoadNodes would return a flat list of direct children. Whereas SearchNodes would return a nested list of matched search terms and their parents.
My example used a SQL Server backup and followed the Hierachyid Data Type tutorial.
Once you've got that setup in the search button click event swap out the datasource for your treeview. Notice you have to set the datasource using the setDataSource method based on a post in the Telerik forums titled "Error when attempting to change datasource on treeview".
function ExpandNodes(nodes) {
return $.map(nodes, function (x) {
x.expanded = x.children.length > 0;
if (x.expanded)
ExpandNodes(x.children);
return x;
});
};
$("#search-btn").click(function(){
var searchText = $("#SearchText").val();
var treeview = $("#TreeView").data("kendoTreeView");
if(searchText.trim() != "")
{
url = "Controller/SearchNodes?searchText=" + searchText;
data.setDataSource(new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: url,
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (options) {
return JSON.stringify(options);
}
},
schema: {
parse: function (response) {
return ExpandNode(response);
},
model: {
id: "node_id",
children: "children",
expanded: true
}
}
}));
}
else
{
url = "Controller/LoadNodes";
data.setDataSource(new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: url,
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (options) {
return JSON.stringify(options);
}
},
model: {
id: "node_id",
}
}
}));
}
data.dataSource.read();
});
I am new to MVC programming.I am working on a simple POC application that displays/edits data from Database.
I have 2 views and 2 controllers. On one of them the JQuery AJAX call to MVC controller action method is working fine. But not on the other one (In here, the AJAX call is not triggering the Action method).
Can anyone had this situation before???
The JQuery code is below:
$('#ddlZones').change(function () {
var value = $('#ddlZones option:selected').val();
// alert(value); var status = $('#ddlStatus option:selected').val();
// alert(status); $('#lstResources').children().remove();
$('#lstBeds').children().remove();
$.ajax({ url: 'FillResources', type: 'POST',
data: JSON.stringify({ ZoneId: value }),
dataType: 'json', contentType: 'application/json',
success: function (result) {
for (var r in result) {
$('#lstResources').append('<option value="' + result[r].Value + '">' + result[r].Text + '</option>');
}
}
});
});
Thanks
Latha
Check the controller url is called or not,
Also in data parameter you can call it simply like { ZoneId: value } instead of
JSON.stringify({ ZoneId: value }),
At server side get this parameter by using $_POST if you are using PHP
in controller, also check in console that, you are getting json from server side or not.
$.ajax({ url: 'FillResources', type: 'POST',
data:{ ZoneId: value },
dataType: 'json', contentType: 'application/json',
success: function (result) {
for (var r in result) {
$('#lstResources').append('<option value="' + result[r].Value + '">' + result[r].Text + '</option>');
}
}
});
Please check the request and the response in the browser. You can use the inbuilt ones in IE/Chrome/FF(Firebug) or fiddler. It probably is just a routing issue if this is ASP.NET MVC.
Specifically, look for what your request url is and what is the HTTP response from the server.
It is always a good practice to specify both the controller and actions in the routing urls to avoid any such errors.
Another thing to check will be if the change function is actually being called? You can put a console.log before the ajax request to make sure that this is not the case.