I have used this code to generate search box for every fields. But it is showing syntax error at the line .columnFilter({. how to solve this problem
<script type="text/javascript" charset="utf-8">
//initialisation code
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers",
.columnFilter({
sPlaceHolder: "head:before",
aoColumns: [ {
type: "select",
values: [ 'Gecko', 'Trident', 'KHTML',
'Misc', 'Presto', 'Webkit', 'Tasman']
},
{ type: "text" },
{ type: "number" },
{ type: "date-range" },
{ type: "number-range" }
]
} );
} );
</script>
looks like a javascript syntax problem. Try changing to this:
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers"
})
.columnFilter({
sPlaceHolder: "head:before",
aoColumns: [ {
type: "select",
values: [ 'Gecko', 'Trident', 'KHTML',
'Misc', 'Presto', 'Webkit', 'Tasman']
},
{ type: "text" },
{ type: "number" },
{ type: "date-range" },
{ type: "number-range" }
]
} );
} );
$(document).ready(function(){
$('#example').dataTable().columnFilter();
})
make usure you have closed the dataTable() brackets before .columnFilter.
Hope it works.
Related
I am adding rows to a Datatable with the following code :
for (var key in itm) {
t.row.add([
null,
itm[key].itemcode,
itm[key].itemdesc,
itm[key].batch,
itm[key].expiry,
itm[key].qty,
itm[key].unit,
itm[key].rate,
itm[key].total,
itm[key].discper,
itm[key].discamt,
itm[key].staxper,
itm[key].staxamt,
itm[key].amount,
itm[key].netprate,
itm[key].salerate,
itm[key].page,
itm[key].sub1,
itm[key].sub2,
'<i class="fa fa-edit"></i>',
'<i class="fa fa-trash"></i>'
]).draw(false);
}
This is working fine except for the large data. When I try to add around 750 rows its too slow even the page hangs-up some times.
I tried to add the data using rows.add() API but its not working, the table is blank. Here is the code i am using to add bulk data.
var t = $('#productTable').DataTable();
t.rows.add(itm);
My datatable definition is as under :
$('#productTable').DataTable({
"paging": false,
"ordering": false,
"searching": false,
"info": false,
"rowHeight": '100px',
"scrollY": "200px",
"scrollX": true,
"scrollCollapse": true,
"paging": false,
"columns": [
{ data: null },
{ data: 'itemcode' },
{ data: 'itemdesc' },
{ data: 'batch' },
{ data: 'expiry' },
{ data: 'qty' },
{ data: 'unit' },
{ data: 'rate' },
{ data: 'total' },
{ data: 'discper' },
{ data: 'discamt' },
{ data: 'staxper' },
{ data: 'staxamt' },
{ data: 'amount' },
{ data: 'netprate' },
{ data: 'salerate' },
{ data: 'page' },
{ data: 'sub1' },
{ data: 'sub2' },
{ data: null },
{ data: null },],
"columnDefs": [
{ className: "dt-right", "targets": [7,8,9,10,11,12,13] },
{ "targets": varbatchcol, visible: false },
{ "targets": vardisccol, visible: false },
{ "targets": vartaxcol, visible: false },
{ "targets": vartotcol, visible: false },
{ "targets": [17,18], visible: false },
],
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
$("td:first", nRow).html(iDisplayIndex +1);
return nRow;
}
});
and the data coming from server is :
Found the problem.
t.rows.add(itm);
should be
t.rows.add(itm).draw();
And this also solved the slow populating issue.
I tried to add Quill Emojis to editor but I am getting console error as
Uncaught ReferenceError: Quill is not defined
I am using Laravel 5.6 and vue js and definately new to vue and its components so I may sound silly to you but for the past 3 days I am searching on the google for the solution and even contacted author of vue2editor on github here is the link
This is what I have tried so far:
vue2editor.vue
<template>
<div id="app">
<vue-editor v-model="content"></vue-editor>
</div>
</template>
<script>
import { VueEditor, Quill } from 'vue2-editor';
import Emoji from 'quill-emoji/dist/quill-emoji';
Quill.register('modules/quill-emoji', Emoji);
export default {
name: 'vue2editor',
components: { VueEditor },
data() {
return {
content: "<h1>Some initial content</h1>",
editorSettings: {
modules: {
toolbar: {
container: [
[{'size': ['small', false, 'large']}],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'indent': '-1' }, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean'],
['link', 'image', 'video'],
['emoji'],
],
handlers: {
'emoji': function () {}
},
},
toolbar_emoji: true,
short_name_emoji: true,
textarea_emoji:true,
},
},
text: null,
};
},
};
</script>
I even tried the method mentioned by one of the user on github for Quill-Emoji, here is the link.
I came here with lots of hopes; if anyone here is to help me out, at least tell me what I am missing will be more than a help for me.
Quill.register({
'formats/emoji': Emoji.EmojiBlot,
'modules/short_name_emoji': Emoji.ShortNameEmoji,
'modules/toolbar_emoji': Emoji.ToolbarEmoji,
'modules/textarea_emoji': Emoji.TextAreaEmoji}, true);
you need register the model, add the up code to you code.
Edit:
//1) Add plugin to laravel mix
const mix = require('laravel-mix')
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.ProvidePlugin({
"window.Quill": "quill/dist/quill.js",
Quill: "quill/dist/quill.js"
})
]
};
});
//2 example vue file
<template>
<div class="mt-1">
<vue-editor
ref="editor"
v-model="content"
:editor-toolbar="customToolbar"
:editorOptions="editorSettings"
/>
</div>
</template>
<script>
import { VueEditor, Quill } from "vue2-editor";
import Emoji from "quill-emoji/dist/quill-emoji";
Quill.register("modules/emoji", Emoji);
export default {
components: {
VueEditor,
},
props: {
bubble: Object,
contentCol: {
type: String,
},
},
data() {
return {
edit: false,
content: "<b>Content is here</b>",
customToolbar: [["bold", "italic", "underline"], ["link"], ["emoji"]],
editorSettings: {
modules: {
"emoji-toolbar": true,
"emoji-textarea": true,
"emoji-shortname": true,
},
},
};
},
beforeDestroy() {},
};
</script>
<style src="quill-emoji/dist/quill-emoji.css"/>
I use this code for grid Kendo UI, But it doesn't show data in the grid. I trace code, it's right, only doesn't show record in grid. I don't know how to solve this problem.
public JsonResult GridData()
{
var products = new List<Product>();
for (var i = 1; i <= 100; i++)
{
products.Add(new Product { Id = i, Name = "Product " + i });
}
return Json(products, JsonRequestBehavior.AllowGet);
}
public class Product
{
public int Id { set; get; }
public string Name { set; get; }
}
<link href="~/Content/kendo/kendo.common.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.common.core.min.css" rel="stylesheet" />
<link href="~/Content/kendo/kendo.default.min.css" rel="stylesheet" />
<script src="~/Scripts/kendo/jquery.min.js"></script>
<script src="~/Scripts/kendo/kendo.web.min.js"></script>
<script src="~/Scripts/kendo/kendo.all.min.js"></script>
<div id="report-grid"></div>
<script type="text/javascript">
$(function () {
var productsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/Home/GridData/',
dataType: "json",
contentType: 'application/json; charset=utf-8',
type: 'GET'
},
parameterMap: function (options) {
return kendo.stringify(options);
}
},
schema: {
data: "Data",
total: "Total",
model: {
fields: {
"Id": { type: "number" }, //تعیین نوع فیلد برای جستجوی پویا مهم است
"Name": { type: "string" },
"IsAvailable": { type: "boolean" },
"Price": { type: "number" }
}
}
},
error: function (e) {
alert(e.errorThrown.stack);
},
pageSize: 5,
sort: { field: "Id", dir: "desc" },
serverPaging: true,
serverFiltering: true,
serverSorting: true
});
$("#report-grid").kendoGrid({
dataSource: productsDataSource,
autoBind: true,
scrollable: false,
pageable: true,
sortable: true,
filterable: true,
reorderable: true,
columnMenu: true,
columns: [
{ field: "Id", title: "شماره", width: "130px" },
{ field: "Name", title: "نام محصول" },
{
field: "IsAvailable", title: "موجود است",
template: '<input type="checkbox" #= IsAvailable ? checked="checked" : "" # disabled="disabled" ></input>'
},
{ field: "Price", title: "قیمت", format: "{0:c}" }
]
});
});
</script>
Please try with the below code snippet.
<script type="text/javascript">
$(function () {
var productsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/Home/GridData',
dataType: "json"
},
parameterMap: function (options) {
return kendo.stringify(options);
}
},
schema: {
model: {
fields: {
"Id": { type: "number" },
"Name": { type: "string" }
}
}
},
error: function (e) {
alert(e.errorThrown.stack);
},
pageSize: 5,
sort: { field: "Id", dir: "desc" },
//serverPaging: true,
//serverFiltering: true,
//serverSorting: true
});
$("#report-grid").kendoGrid({
dataSource: productsDataSource,
autoBind: true,
scrollable: false,
pageable: true,
sortable: true,
filterable: true,
reorderable: true,
columnMenu: true,
columns: [
{ field: "Id", title: "شماره", width: "130px" },
{ field: "Name", title: "نام محصول" }
]
});
});
</script>
Let me know if any concern.
I'm using Durandal and Kendo UI. My current problem is the edit popup event on my grid. I cannot seem to set the selected value on my dropdown.
I can debug and inspect, and I indeed do see the correct value of e.model.InstrumentName nicely populated.
How can I set the value/text of those dropdowns in edit mode ?
Here's my grid init:
positGrid = $("#positGrid").kendoGrid({
dataSource: datasource,
columnMenu: false,
{
field: "portfolioName", title: "Portfolio Name",
editor: portfolioDropDownEditor, template: "#=portfolioName#"
},
{
field: "InstrumentName",
width: "220px",
editor: instrumentsDropDownEditor, template: "#=InstrumentName#",
},
edit: function (e) {
var instrDropDown = $('#InstrumentName').data("kendoDropDownList");
var portfDropDown = $('#portfolioName').data("kendoDropDownList");
instrDropDown.list.width(350); // let's widen the INSTRUMENT dropdown list
if (!e.model.isNew()) { // set to current valuet
//instrDropDown.text(e.model.InstrumentName); // not working...
instrDropDown.select(1);
//portfDropDown.text();
}
},
filterable: true,
sortable: true,
pageable: true,
editable: "popup",
});
Here's my Editor Template for the dropdown:
function instrumentsDropDownEditor(container, options) {
// INIT INSTRUMENT DROPDOWN !
var dropDown = $('<input id="InstrumentName" name="InstrumentName">');
dropDown.appendTo(container);
dropDown.kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
dataSource: {
type: "json",
transport: {
read: "/api/breeze/GetInstruments"
},
},
pageSize: 6,
select: onSelect,
change: function () { },
optionLabel: "Choose an instrument"
}).appendTo(container);
}
thanks a lot
Bob
Your editor configuration is bit unlucky for grid, anyway i have updated my ans on provided code avoiding manual selections:
Assumptions: Instrument dropdown editor only (leaving other fields as strings), Dummy data for grid
<div id="positGrid"></div>
<script>
$(document).ready(function () {
$("#positGrid").kendoGrid({
dataSource: {
data: [
{ PositionId: 1, Portfolio: "Jane Doe", Instrument: { IID: 3, IName: "Auth2" }, NumOfContracts: 30, BuySell: "sfsf" },
{ PositionId: 2, Portfolio: "John Doe", Instrument: { IID: 2, IName: "Auth1" }, NumOfContracts: 33, BuySell: "sfsf" }
],
schema: {
model: {
id: "PositionId",
fields: {
"PositionId": { type: "number" },
Portfolio: { validation: { required: true } },
Instrument: { validation: { required: true } },
NumOfContracts: { type: "number", validation: { required: true, min: 1 } },
BuySell: { validation: { required: true } }
}
}
}
},
toolbar: [
{ name: "create", text: "Add Position" }
],
columns: [
{ field: "PositionId" },
{ field: "Portfolio" },
{ field: "Instrument", width: "220px",
editor: instrumentsDropDownEditor, template: "#=Instrument.IName#" },
{ field: "NumOfContracts" },
{ field: "BuySell" },
{ command: [ "edit", "destroy" ]
},
],
edit: function (e) {
var instrDropDown = $('#InstrumentName').data("kendoDropDownList");
instrDropDown.list.width(400); // let's widen the INSTRUMENT dropdown list
},
//sortable: true,
editable: "popup",
});
});
function instrumentsDropDownEditor(container, options) {
$('<input id="InstrumentName" required data-text-field="IName" data-value-field="IID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataSource: {
type: "json",
transport: {
read: "../Home/GetMl"
}
},
optionLabel:"Choose an instrument"
});
}
</script>
Action fetching json for dropddown in Home controller:
public JsonResult GetMl()
{
return Json(new[] { new { IName = "Auth", IID = 1 }, new { IName = "Auth1", IID = 2 }, new { IName = "Auth2", IID = 3 } },
JsonRequestBehavior.AllowGet);
}
I have put a fiddle here that demonstrates the issue.
http://jsfiddle.net/codeowl/fmzay/1/
Just delete a record, and it should rollback the delete as I am calling options.error from inside the destroy function.
Why is it that the grid doesn't roll back?
Regards,
Scott
Markup:
<div id="KendoGrid"></div>
JS:
var _data = [
{ Users_ID: 1, Users_FullName: 'Bob Smith', Users_Role: 'Administrator' },
{ Users_ID: 2, Users_FullName: 'Barry Baker', Users_Role: 'Viewer' },
{ Users_ID: 3, Users_FullName: 'Bill Cow', Users_Role: 'Editor' },
{ Users_ID: 4, Users_FullName: 'Boris Brick', Users_Role: 'Administrator' }
],
_dataSource = new kendo.data.DataSource({
data: _data,
destroy: function (options) {
options.error(new Error('Error Deleting User'));
}
});
$('#KendoGrid').kendoGrid({
dataSource: _dataSource,
columns: [
{ field: "Users_FullName", title: "Full Name" },
{ field: "Users_Role", title: "Role", width: "130px" },
{ command: ["edit", "destroy"], title: " ", width: "180px" }
],
toolbar: ['create'],
editable: 'popup'
});
Signaling the error is not enough. Lets say that having an error on removing a record is not enough since KendoUI doesn't know if the record has actually been removed in the server and the reply is the one producing the error. So KendoUI approach is a conservative approach: You have to decide what to do and explicitly say it:
So what you should do is add an error hander function that invokes a cancelChanges in the grid.
The code would be:
_dataSource = new kendo.data.DataSource({
transport: {
read: function(options) {
options.success(_data);
console.log('Read Event Has Been Raised');
},
destroy: function (options) {
options.error(new Error('Error Deleting User'));
console.log('Destroy Event Has Been Raised');
}
},
schema: {
model: {
id: "Users_ID",
fields: {
Users_ID: { editable: false, nullable: true },
Users_FullName: { type: "string", validation: { required: true } },
Users_Role: { type: "string", validation: { required: true } }
}
}
},
error: function(a) {
$('#KendoGrid').data("kendoGrid").cancelChanges();
}
});
And the updated JSFiddle in here: http://jsfiddle.net/OnaBai/fmzay/3
The ASP.NET-MVC equivalent solution to the OnaBai answer would be:
<script type="text/javascript">
function cancelChanges(e) {
e.sender.cancelChanges();
}
</script>
#Html.Kendo().Grid<MyClass>()
.DataSource(dataSource =>
dataSource
.Ajax()
.Read(read => read.Action("Read", "MyController"))
.Destroy(destroy => destroy.Action("Destroy", "MyController"))
.Events(evt => evt.Error("cancelChanges"))
)
[...]
Please be aware that the cancelChanges event will be called upon an error on every CRUD request.