How to create custom dropdownlist in kendo grid header column? - javascript

Actually my requirement is want to create custom dropdownlist in the column header of kendo grid. I don't down like nrwant to use filtler column. I just want to add normal dropdown in header. Please provide any example like that so that i can move forward on my task.
Thanks in advance...

In your column definition add a property like this:
headerTemplate: '<input id="dropdown" />'
Then after your grid initialization do:
$("#dropdown").kendoDropDownList({...init parameters...});
UPDATE: go to dojo.telerik.com and paste in the following code:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{
field: "ProductName",
title: "Product Name",
headerTemplate: '<input id="dropdown" />'
},
{ field: "UnitPrice", title: "Price", template: 'Price: #: kendo.format("{0:c}", UnitPrice)#' }
],
pageable: true,
dataSource: {
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
},
pageSize: 10
},
excelExport: function(e) {
var sheet = e.workbook.sheets[0];
var template = kendo.template(this.columns[1].template);
for (var i = 1; i < sheet.rows.length; i++) {
var row = sheet.rows[i];
var dataItem = {
UnitPrice: row.cells[1].value
};
row.cells[1].value = template(dataItem);
}
}
});
$("#dropdown").kendoDropDownList({
optionLabel: 'Choose a value...',
dataTextField: 'description',
dataValueField: 'id',
dataSource:{
data: [{id: 1, description: 'One'},{id: 2, description: 'Two'}]
},
change: function(e){
//do whatever you need here, for example:
var theGrid = $("#grid").getKendoGrid();
var theData = theGrid.dataSource.data();
$(theData).each(function(index,item){
item.ProductName = e.sender.text();
});
theGrid.dataSource.data(theData);
}
});

Related

Binding array of object to Kendo grid popup multiselect

I'm trying to bind an array of id-value pairs to a kendo grid popup editor.
Got everything to work for creating a new record. Popup editor loads the custom editor and successfully submits the data to the controller.
The problem is when I try to edit records. The records displays properly in the row, but when I try to edit it, the multiselect does not hold the values.
Grid Markup
$("#ProjectSites-SubContract-grid").kendoGrid({
dataSource: {
type: "json",
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
DateOfContract: { type: 'date', editable: true },
DateOfCompletion: { type: 'date', editable: true },
AmountOfContract: { type: 'number', editable: true },
Contractor: { defaultValue: { id: "", name: "" } }
}
}
},
},
columns: [
{
field: "ScopeOfWork",
title: "Scope of Work",
template: "#=parseScopeOfWork(ScopeOfWork)#",
editor: scopeOfWorkEditor
},
]
});
});
Scope of Work editor
function scopeOfWorkEditor(container, options) {
$('<input data-text-field="name" data-value-field="id" data-bind="value:ScopeOfWork"/>')
.appendTo(container)
.kendoMultiSelect({
dataSource: {
data: [
#foreach (var scopeOfWork in Model.AvailableScopeOfWork)
{
<text>{ id : "#scopeOfWork.Value", name : "#scopeOfWork.Text" },</text>
},
]
}
});
parseScopeOfWork -
this method guys iterates through the object list and concats the name.
function parseScopeOfWork(scopeOfWork) {
var result = "";
for (var i = 0; i < scopeOfWork.length; i++) {
result += scopeOfWork[i].Name;
if (i < scopeOfWork.length - 1)
{
result += ", <br/>";
}
}
return result;
}
Here's a screenshot:
You're binding the SpaceOfWork to the new widget, but how that widget knows your Model ? I mean, just using data-bind doens't binds the model to the widget, it can't figure that by itself. I have two suggestions:
Set the value in the widget's initialization:
.kendoMultiSelect({
value: options.model.ScopeOfWork
Demo
Bind the model to the widget for good:
let $multiSelect = $('<input data-text-field="name" data-value-field="id" data-bind="value:ScopeOfWork"/>');
kendo.bind($multiSelect, options.model);
$multiSelect
.appendTo(container)
.kendoMultiSelect({ ...
Demo
Note: Edit the category cell in both demos to see the changes.

How to add items Slick grid to Multi select TextBox?

I am new to Slick Grid.
This is my javascript code,I declared my variables here,
var grid;
var printPlugin;
var dataView;
var data = [];
var selectdItems = [];
var columns = [
{ id: "Id", name: "Id", field: "Id", sortable: true },
{ id: "Name", name: "Name", field: "Name", sortable: true, cssClass: "cell-title", editor: Slick.Editors.Text, width: 300 },
{ id: "Addr", name: "Addr", field: "Addr", sortable: true, editor: Slick.Editors.Text }
];
I add check box here,By using this check box, I want to add those items to 'selectdItems' array
var checkboxSelector = new Slick.CheckboxSelectColumn({
cssClass: "slick-cell-checkboxsel"
});
columns.push(checkboxSelector.getColumnDefinition());
Those are my options
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
multiColumnSort: true,
editable: true,
ebableAddRow: true,
asyncEditorLoading: true,
autoEdit: false
};
This is my ajax method to getting data.In this ajax method I written '$('#btnShift').click(function (e)){}' function,If I written this method out side the ajax method it is not working,If I written this function in ajax method The ajax method is calling every action in a page, When I am adding selected records to multiline textbox those items binding and again rebinding the data to grid and clear the multiline textbox
var param = {};
$.ajax({
type: 'GET',
url: 'AllFeatures.aspx/method',
data: JSON.stringify(param),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (resp) {
var v = resp;
for (i = 0; i < resp.d.length; i++) {
data[i] = {
Id: resp.d[i].split('~')[0],
Name: resp.d[i].split('~')[1],
Addr: resp.d[i].split('~')[2],
};
}
grid = new Slick.Grid("#myGrid", data, columns, options);
var argRows = [];
grid.onSelectedRowsChanged.subscribe(function (e, args) {
argRows = args.rows;
});
grid.setSelectionModel(new Slick.RowSelectionModel({ selectActiveRow: false }));
grid.registerPlugin(checkboxSelector);
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
$('#btnShift').click(function (e) {
var dataView = new Slick.Data.DataView();
dataView.beginUpdate();
dataView.getItems().length = 0;
dataView.endUpdate();
for (var i = 0; i < argRows.length; i++) {
selectdItems.push(data[argRows[i]]);
data.splice(argRows[i], 1);
$('#sel').append('<option>' + data[argRows[i]]['Name'] + '</option')
}
grid = new Slick.Grid("#myGrid", data, columns, options);
e.priventDefault();
});
}
});
I want to when I select the check box in grid after click the shift method that check box selected data shifted to multiline textbox.(I don't want to call ajax method multiple times )
This is my HTML Code
<div id="myGrid" style="width: 600px; height: 500px;" class="item-details-editor-container" ></div>
<button data-action='save' id="btnShift">shift</button>
<select multiple="" id="sel"></select>
It's quite hard to tell exactly what you're trying to do without a mockup.
But have you seen the examples at the 6pac repo:
https://github.com/6pac/SlickGrid/wiki/Examples
eg:
http://6pac.github.io/SlickGrid/examples/example-select2-multiselect-editor.html

Error in kendo grid - grid.select is not a function why?

I have a kendoDropDown list as a cell in my grid. I am calling the kendDropDownList using the editor command of kendo grid ("editor"). I need to pass selected value of selected row to kendoDropDownList as a parameter in order to server reply back only with filtered list as my kendoDropDownList . Please see my below example
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
columnMenu:true,
filterable:true,
height: 550,
reorderable: true,
columnReorder: function(e) {
console.log(e.column.field, e.newIndex, e.oldIndex);
},
toolbar: ["create","excel","save", "cancel" , { template: kendo.template($("#template").html()) } , { template: kendo.template($("#clearFilterTemplate").html()) } , { name: "create", text: "Add New Employee" }],
excel: {
fileName: "Kendo UI Grid Export.xlsx",
proxyURL: "excelExport",
filterable: true,
allPages: true
},
editable: "inline" , //editable: true,
columns: [
{ field: "fileNo" , title:"File No" , width: 80 },
{ field: "jobNo" , title:"Job No" , width: 80 },
{ field: "discipline" , title:"Discipline" , width: 80 },
{ field: "moduleNo" ,title:"Module", width: 100},
{ field: "description",title:"Title",editor: descriptionDropDownEditor, width: 150},
{ field: "documentNo",title:"Document No", width: 150 },
{ field: "remarks",title:"Remarks" , width: 150 } ,
{ command: ["edit","destroy"], title: " ", width: "250px" }
]
});
function descriptionDropDownEditor(container, options) {
// here is the error grid.select is not a function why ?
var selectedItem = grid.dataItem(grid.select());
var selectedJobNo = selectedItem.jobNo ;
alert("selectedJobNo :"+selectedJobNo );
$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "text",
dataValueField: "value",
filter: "contains",
dataSource: {
dataType: "json",
transport: {
// I need to pass the selected jobNo in order to get the only aprropriate descrption for that jobNo
// each row job has description and I don't want to show all the description for all jobs , I need only for that row jobNo
read: "getDescriptionForEachDocumentIndex?selectedJobNo"+selectedJobNo
}
}
});
}
once the row of grid in edit mode I need to pass the selected row jobNo to kendoDropDownList in order to respond back with only releated description for that jobNo. The problem is i can not call grid in the edit mode and use the function grid.select() . what to do in this case ?
Well, that is easy. The second parameter of your editor function has a property called model, which is the dataItem of the current row user is editing. So in your case, I supose this would work:
function descriptionDropDownEditor(container, options) {
var selectedItem = options.model;
But, to answer your question, you can't access the select() method because grid is not a Kendo Grid object, it is in fact the #grid element. You can either add .data("kendoGrid") at the end of the widget initialization:
$("#grid").kendoGrid({ ... }).data("kendoGrid");
Or call it inside the function:
function descriptionDropDownEditor(container, options) {
var gridWidget = $(grid).data("kendoGrid");
var selectedItem = gridWidget.dataItem(gridWidget.select());

One Column Value remain unchanged in kendo grid drag and drop

I'm fairly new to kendo UI but some how I managed to render a kendo grid with drag and drop feature Where users can drag and place rows.In my case I have three columns id,name,sequence
So I need to keep sequence column data unchanged while id and name data changed when a drag and drop of a row.
Ex id=1 Name=David Sequnce=0
id=2 Name=Mark Sequnce=1
Now I'm going to drag row 1 to 2 while data of the sequence column remain unchanged new data like this,
Ex id=2 Name=Mark Sequnce=0
id=1 Name=David Sequnce=1
In my case every row is getting changed. I need to implement this solution.
Can somebody help me out on this.
Cheers,
Chinthaka
Try this,
Script
<script type="text/javascript">
$(document).ready(function () {
var data = [
{ id: 1, text: "David ", Sequnce: 0 },
{ id: 2, text: "Mark ", Sequnce: 1 }
]
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
text: { type: "string" },
Sequnce: { type: "number" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
columns: ["id", "text", "Sequnce"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
hint: function (e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function (e) {
var target = dataSource.get($(e.draggable.currentTarget).data("id"));
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.get(dest.parent().data("id"));
//not on same item
if (target.get("id") !== dest.get("id")) {
//reorder the items
var tmp = target.get("Sequnce");
target.set("Sequnce", dest.get("Sequnce"));
dest.set("Sequnce", tmp);
dataSource.sort({ field: "Sequnce", dir: "asc" });
}
}
});
});
</script>
View
<div id="grid">
</div>
Demo: http://jsfiddle.net/nmB69/710/

Kendo Grid Draggable Rows With Kendo Template

I'm going to implement drag and drop behaviour with kendo grid which is populated using template. How can I achieve draggable rows and reordering with kendo grid.
.Orderable()
Works a treat. Maybe try ".Dragable()" I'm a bit unsure about that though.
Take a look at following my demo code and try it to implement.
var data = [
{ id: 1, text: "text 1", position: 0 },
{ id: 2, text: "text 2", position: 1 },
{ id: 3, text: "text 3", position: 2 }
]
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "id",
fields: {
id: { type: "number" },
text: { type: "string" },
position: { type: "number" }
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
scrollable: false,
columns: ["id", "text", "position"]
}).data("kendoGrid");
grid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup",
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
grid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup",
drop: function(e) {
var target = dataSource.get($(e.draggable.currentTarget).data("id")),
dest = $(e.target);
if (dest.is("th")) {
return;
}
dest = dataSource.get(dest.parent().data("id"));
//not on same item
if (target.get("id") !== dest.get("id")) {
//reorder the items
var tmp = target.get("position");
target.set("position", dest.get("position"));
dest.set("position", tmp);
dataSource.sort({ field: "position", dir: "asc" });
}
}
});
put .Dragable()
but make sure that you sit it in the right place, the ordering is required. Some times you may not get the expected result and that may happen due to not paying attention to the order.

Categories