I am using Kendo UI Web Grid, not one of the Server Wrappers. I am only displaying a few fields in the grid. The rest of the fields are displayed in the create or edit popup. For this popup I am using a template:
<script id="popup_editor" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="Title">Title</label>
</div>
<div class="k-edit-field">
<input type="text" class="k-input k-textbox" name="Title" data-bind="value:Title" required>
</div>
</script>
and then I am calling it from the grid:
editable: {
mode: "popup",
template: $("#popup_editor").html(),
confirmation: "Are you sure?"
}
This works great for input boxes. However I have a foreign key column in my table. I want to display all the options from the foreign key table in a dropdown and select the correct one based on the value in my table. I have searched around quite a bit but haven't been able to find an answer to this.
Any help would be greatly appreciated.
I solved this myself. If anyone else is looking for this here is the solution.
In the Javascript section create a new data source it can be static:
var facultyRankDS = new kendo.data.DataSource({
data: [
{ Id: null, Name: "<Please Select>"},
{ Id: 1, Name: "Instructor" },
{ Id: 2, Name: "Assistant Professor" },
{ Id: 3, Name: "Associate Professor" },
{ Id: 4, Name: "Professor" }
]
});
or it can be dynamic:
var facultyRankDS = new kendo.data.DataSource({
transport: {
read: function(options) {
$.ajax({
url: "api/Member.mvc/GetMemberRanks",
dataType: 'json',
success: function(result) {
options.success(result);
}
});
}
}
});
Then in the popup_editor section add your dropdown:
<div class="k-edit-label">
<label for="FacultyRankId">Rank</label>
</div>
<!-- dropdownlist editor for field: "FacultyRankId" -->
<div class="k-edit-field">
<input name="FacultyRankId"
data-bind="value:FacultyRankId"
data-value-field="Id"
data-text-field="Name"
data-source="facultyRankDS"
data-role="dropdownlist"
data-value-primitive="true" />
</div>
Related
I am trying to create a custom toolbar in KendoUI grid following this link:http://demos.telerik.com/kendo-ui/grid/toolbar-template but getting stuck with an error.
This is what I am trying to do in my code:
<div id="example">
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px" />
</div>
</script>
<div id="grid"></div>
<script>
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
type: "post",
dataType: "json"
}
},
schema: {
data: "Data",
total: function (response) {
return $(response.Data).length;
}
},
pageSize: 10
},
toolbar: kendo.template($("#template").html()),
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "CustomerAltID",
filterable: true
},
{
field: "CustomerID",
title: "Customer ID"
},
{
field: "CustomerName",
title: "Customer Name",
template: "<div class='customer-photo'" +
"style='background-image: url(../Content/Images/customerimg/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: CustomerName #</div>"
},
{
field: "Gender",
title: "Gender",
template: "<div class='gender-photo'" +
"style='background-image: url(../Content/Images/#:data.Gender#.jpg);'></div>"
}
]
});
var dropDown = grid.find("#category").kendoDropDownList({
dataTextField: "Gender",
dataValueField: "CustomerID",
autoBind: false,
optionLabel: "All",
dataSource: {
severFiltering: true,
transport: {
read: {
url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
type: "post",
dataType: "json"
}
},
schema: {
data:"Data"
}
},
change: function () {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "CustomerID", operator: "eq", value: parseInt(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
});
</script>
</div>
I don't know what the problem is and its been hours that I am unable to figure out the solution for it.
I am using the following versions- Jquery v-3.1 and Jquery UI-1.12
Another possibility as mentioned in this github issue is to include <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script> in html. This worked for me.
The problem is likely due to using jQuery v3.1
Kendo does not currently work with jQuery v3, officially. But it apparently can work if you also include jquery-migrate.
http://www.telerik.com/forums/jquery-3-0
The officially supported versions of jQuery are listed here:
http://docs.telerik.com/kendo-ui/intro/installation/prerequisites#supported-jquery-versions
Note that it states that Kendo R3 2016 SP2 should also work with jQuery 3.1.1.
So, you can:
use the version of jQuery that ships with/is supported by whatever
version of Kendo you use
OR use jQuery 3.1 with jquery-migrate
OR use Kendo R3 2016 SP2 and jQuery 3.1.1
I've been trying different CRUD grids for jquery and I came across this one which is pretty good. I made a previous post using a different grid plugin but that did not met my needs so I'm trying this one. The table displays correctly but with empty rows.
I'm getting this response from the server which I validated with a JSON online validator
[{"id":"1","anio":"2016","mes":"1","quincena":"1"},{"id":"2","anio":"2016","mes":"1","quincena":"2"}]
this is the script made in symfony 1.4 to build the json:
public function executeGetNewsletters(sfWebRequest $request){
$conn = Doctrine_Manager::getInstance()->getCurrentConnection();
$qry=$conn->execute("Select id,anio,mes,quincena from newsletters");
$newsletters = $qry;
$dataNews = array();
foreach ($newsletters as $news)
{
$dataNews[] = array(
"id" => $news['id'],
"anio" => $news['anio'],
"mes" => $news['mes'],
"quincena" => $news['quincena'],
);
}
echo json_encode($dataNews);
return sfView::NONE;
}
this is the js file that holds the grid:
$(document).ready(function(){
$("#newsletters").click(function(){$.ajax({
type: "GET",
url: "/newsletter/getNewsletters"
}).done(function(newsletters) {
// newsletters.unshift({ id: "0", name: "" });
var news=newsletters;
alert(news);
$("#jsGrid").jsGrid({
height: "90%",
width: "100%",
datatype: 'json',
sorting: true,
paging: true,
filtering:true,
autosearch: true,
editing:true,
autoencode: true,
gridview: true,
mtype: 'POST',
colNames:['ID','Año', 'Mes','Quincena','Option'],
data: news,
fields: [
{ name: "id", type: "number", width: 150 },
{ name: "anio", type: "number", width: 50 },
{ name: "mes", type: "number", width: 200 },
{ name: "quincena", type: "text", textField: "Quincena" },
{ type: "control" }
]
});
});
});
});
and this is the html that holds the grid:
<?php use_javascript("jurisprudencia/newsletter.js")?>
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.4.1/jsgrid.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.4.1/jsgrid-theme.min.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.4.1/jsgrid.min.js"></script>
<body><div class="col-lg-7 col-lg-7-bc">
<h3 style="font-size:20px"> JURISPRUDENCIA</h3>
<p>
</br>
</p>
<div class="col-xs-6 col-sm-4 item ico "><a id="newsletters" target="_blank">Newsletters |</a></div>
<div class="col-xs-6 col-sm-4 item ico "><a id="fallos" target="_blank">Navegar |</a></div>
<div class="col-xs-6 col-sm-4 item ico"><a id="cuadernos_mpd" target="_blank">Cuadernos del MPD</a></div>
<div id="jsGrid"></div>
<script>
</script>
</div>
I could not find the accepted format on the jsgrid documentation. Does anyone know which is the correct format?. Thanks
I have looked at multiple questions on SO and on Git hub:
Set multiple Select2 options
Select2 can't set multiple value
Is initSelection used for select2(val)
But I still cant seem to figure out why the values is not being set.
I am using a jinja2 template, so Ill give the generated html/js:
<div class="form-group">
<label class="control-label col-sm-4" for="message_type">Meassage Type</label>
<div class="col-sm-5">
<input type="hidden" name="message_type" id="message_type" readonly />
</div>
</div>
and the js:
$(function () {
$("#message_type").select2({
placeholder: "Email/SMS/PIMS Modal",
multiple: true,
width: "300px",
tokenSeparators: [',', ' '],
data: [{
id: "email",
text: "Email"
}, {
id: "pims modal",
text: "PIMS Modal"
}, {
id: "sms",
text: "SMS"
}, ],
});
$("#message_type").select2("val", "pims modal");
});
I have also managed to reproduce the result, see example.
The issue occurs because you have set the multiple property to true. In this case to set a value you need to use an array instead of a string.
For example:
$(function () {
$("#message_type").select2({
placeholder: "Email/SMS/PIMS Modal",
multiple: true,
width: "300px",
tokenSeparators: [',', ' '],
data: [{
id: "email",
text: "Email"
}, {
id: "pims modal",
text: "PIMS Modal"
}, {
id: "sms",
text: "SMS"
}, ],
});
$("#message_type").select2("val", ["email"]);
});
A working demo here: http://jsfiddle.net/nww22qoj/19/
Edit: Here is a working jsfiddle using the 4.0.1 version of the plugin http://jsfiddle.net/nww22qoj/20/ (using the full version of the plugin)
Does anyone know how to filter a PrimeUI datatable?? i am using angular and PrimeUI, in the html i have the text field that according to it i want to filter my data table
$('#table').puidatatable({
caption: 'my tbl',
paginator: {
rows: 9
},
columns: [
{field:'name', headerText: 'name', sortable:true} ,
{field:'age', headerText: 'age', sortable:true},
{field:'id', headerText: 'ID', sortable:true}
],
datasource: myarray
,
selectionMode: 'single',
rowSelect: function(event, data) {
some code
}});
$('#messages').puigrowl();
and in my html :
<input id="basic" name="basic" type="text"/>
As of this moment, filtering is not available on PrimeUI Datatable. It's not mentioned anywhere on the page. I suggest you consider other - options.
As there is no support to filter Prime UI data table but still you can filter your data table from server side like i have implemented prime ui data table with custom search. I send one parameter from search field if that is empty i return all data if search filed contains some data i return filtered data though this i achieve the filter functionality
<!--input filed for search -->
<input type="text" name ="abc" id="input-filter" onkeypress="javascript:gridSearch();"/>
function searchToJSON(){
return JSON.stringify({
"input-filter": document.getElementById('input-filter').value,
});
}
gridSearch = function() {
var searchUrl= 'searchUrl';
$('#table').puidatatable({
lazy: true,
paginator: {
rows: 5
},
columns: [
{field:'abc', headerText: 'abc', sortable:true},
{field:'xyz', headerText: 'xyz', sortable:true}
],
datasource: function(callback) {
$.ajax({
type: "POST",
url: searchUrl,
datatype : "application/json",
contentType: "application/json",
data:searchToJSON(), // supply json fields and return filtered data from server accoring to your requirements
context: this,
success: function(response) {
callback.call(this, response.data);
}
});
} ,
});
};
I am using Kendo library for grid. I want to have a toolbar in that grid.
I have followed this link -
http://demos.kendoui.com/web/grid/toolbar-template.html
and created a toolbar at the top
I also want to add another toolbar at the bottom of grid. Below or above pagination bar. I could not find any way to create this extra toolbar. Please help.
There are two ways of getting it:
You let Kendo UI generate in the top and then you move it to the bottom
You generate it to the bottom.
The first approach is fast and if you don't need header toolbar is the best. Just add the following code:
$("#grid).data("kendoGrid").wrapper.append($(".k-toolbar"));
See it here : http://jsfiddle.net/OnaBai/WsRqP/1/
The second approach -using as base the example that you mention in your original question- would be something like this:
Step 1: Define a template, you might use the same than in the example:
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px"/>
</div>
</script>
Step 2: Initialize the grid, as you are doing now (in my case I will not include the toolbar as header but only as footer):
var grid = $("#grid").kendoGrid({
dataSource: {
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
pageSize : 20,
serverPaging : true,
serverSorting : true,
serverFiltering: true
},
height : 430,
sortable : true,
pageable : true,
columns : [
{ field: "ProductID", title: "Product ID", width: 100 },
{ field: "ProductName", title: "Product Name" },
{ field: "UnitPrice", title: "Unit Price", width: 100 },
{ field: "QuantityPerUnit", title: "Quantity Per Unit" }
]
}).data("kendoGrid");
Step 3: Add a dataBound handler for creating the footer after the grid has been initialized. We have to do it on dataBound otherwise the Grid is still not correctly formatted and the footer will look wrong. I've implemented creating the footer toolbar in a separate function to do not mess dataBound in case you do more stuff here.
dataBound : function () {
initFooterToolbar(this, kendo.template($("#template").html()));
}
Step 4: Implement this initFooterToolbar:
function initFooterToolbar(grid, template) {
if (!this._footer) {
this._footer = $("<div class='k-toolbar k-grid-toolbar k-widget'></div>")
.append(template);
grid.wrapper.append(this._footer);
// Other code for initializing your template
...
}
}
What initFooterToolbar does is first check that it has not already been initialized otherwise if you do pagination of refresh the data you might end-up with multiple footer toolbars.
Finally append the toolbar to grid.wrapper.
So the important part for creating a footer toolbar is invoking grid.wrapper.append(...) and doing it when the grid is already created.
The original example modified here : http://jsfiddle.net/OnaBai/WsRqP/
I avoid using kendo toolbars and just make an external 1 which you can then tweak with greater control.
For example,
#Html.DropDownList("Year", (SelectList)ViewBag.YearList, "All years")
transport: {
read: {
url: '#Url.Action("_List", "Applications")',
data: refreshGridParams,
type: 'POST'
},
function refreshGridParams() {
return {
Year: $('#Year').val()
};
}
$('#Year').change(function () {
theGrid.dataSource.read({
Year: $('#Year').val()
});
});
Then in my controller,
[HttpPost]
public JsonResult _List(int? Year, int skip, int take)
{
Last
_db.Blargh.Where(w => w.Year== Year).Skip(skip).Take(take).ToList().ForEach(x => { waList.Add(new WAListDTO(x)); });
This should cover all the core code needed but means you can keep adding as many toolbars/dropdowns/datepickers/text searchs or etc and just alter each stage to include the additional data.
Here is another hack which uses column footertemplate. When databound is triggered, footertemplate table is arranged to have one column with colspan equals to the number of grid columns.
http://plnkr.co/edit/1BvMqSC7tTUEiuw4hWZp
$("#grid").kendoGrid({
columns:[{
field:'name',
footerTemplate : "Row Count: #= data.name.count #"
},{
field:'age'
}],
dataSource: new kendo.data.DataSource({
aggregate: [{
field:"name",
aggregate: "count"
}],
data: [{
name: "Jane",
age: 31
}, {
name: "John",
age: 33
}]
}),
dataBound: function() {
var footer = this.wrapper.find('.k-footer-template');
footer.children(":first").attr('colspan', this.columns.length);
footer.children().not(':first').remove();
}
});