I've this issue I didn't see during development but it happens to my client. I use jQuery DataTables to let the user complete with information.
On a big/normal resolution this does not happened because the DataTables can show all the columns. But on lower resolution the grid shows a green plus button and the controls "inside" that group are not initialized correctly.
Normal page with lower resolution:
Using the Chrome Dev Tools' Console: I can excecute this:
$(".k_numeric").kendoNumericTextBox({ format: "c", decimals: 2 });
And the controls now are display correctly.
So it seems that when the DataTables hides columns to fit on the display, the controls are not being called by JS. I tried searching about this but I don't even know how to search it properly.
CAUSE
This issue occurs because Responsive extension creates new elements when preparing row details. These new elements need to be initialized again.
SOLUTION
You need to re-initialize those controls that become part of row details in a separate function.
The solution is to:
define a custom render for the row details with responsive.details.renderer option
call default renderer with $.fn.DataTable.Responsive.defaults.details.renderer() which returns jQuery collection.
initialize custom controls in this collection before returning it.
Example:
var table = $('#example').DataTable({
responsive: {
details: {
renderer: function (api, rowIdx, columns) {
var $details = $.fn.DataTable.Responsive.defaults.details.renderer(api, rowIdx, columns);
$(".numerictextbox", $details).kendoNumericTextBox({ format: "c", decimals: 2 });
return $details;
}
}
},
createdRow: function( row, data, dataIndex ){
$(".numerictextbox", row).kendoNumericTextBox({ format: "c", decimals: 2 });
}
});
DEMO
See this jsFiddle for code and demonstration.
LINKS
See jQuery DataTables – Responsive extension and custom controls article for more information.
Related
I'm developing a stock manager webapp for a company.
I have this page where the administrator can edit and delete products that they added in a table (dataTable), I managed to make this possible by using this tutorial:
https://www.webslesson.info/2017/05/live-table-data-edit-delete-using-tabledit-plugin-in-php.html
Everything works fine but I had this issue where the 2 edit and delete buttons weren't showed on other pages of my table except from the 1st, I managed to resolve this issue with attached code
Everything right now works fine but i have a huge graphic problem. While i'm searching, every time I tap a letter or a backspace, the last column as you can see from the attachment is cloning itself every time.
Error of multiple columns
I've already tried to debug the search method but I don't think it's related to that... it's a standard method.
Do you think it can possibly be a problem related to the fact that the last column with the 2 button (edit and delete) is automatically added with a js of the library extension I'm using and it's not hardcoded? so every time I redraw the table it is like an external element to redraw?
var table = $('#dataTable').DataTable();
// Document ready
$(function() {
editTable();
});
// Assuming "table" is the variable name of your datatable
table.on('draw', editTable);
function editTable() {
$('#dataTable').Tabledit({
url: 'updateDB.php',
columns: {
identifier: [0, "id"],
editable: [
[1, 'name'],
[4, 'quantity'],
[5, 'threshold'],
]
},
restoreButton: false,
onSuccess: function(data, textStatus, jqXHR) {
if (data.action == "delete") {
document.getElementById(data.id).remove();
}
}
});
};
I am trying to get Kendo Grid data which is hydrated from client side to a MVC controller method. My view contains several single fields like name, date of birth etc and tabular field which I hooked with a Kendo Grid. Since its a new operation I have no data in the grid ( and other fields) and user enters them from client side.
I have no idea how to proceed on this. Ideally I would like to get this data to a list in my viewmodal. So that when the user hits save, I have all other data and the grid data coming into a controller method.
I am able to successfully bind a list with kendo grid and display it. I have very little experience on JavaScript and Kendo and web programming.
If any of you can point me to the right direction, sample code would be greatly appreciated.
$("#departmet").kendoGrid({
dataSource: dataSource,
height: 250,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
"DepartmentName",
"SubDivision"
]
});
From experience I know their documentation is not easy to navigate. It seems there is the documentation and then the API. The API is usually what you will always want to find. What you will need is the information from here https://docs.telerik.com/kendo-ui/api/javascript/ui/grid. If I understand the question correctly. There are several ways you can achieve posting. You could make use of editor templates. Click the Open in Dojo to get an idea how it looks.
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable.template
With this you do not have to worry about modifying the data via javascript. Assuming your grid is surrounded with a form element it will get posted when submitted. Note paging is not accounted for here. Also, this method by default can auto post after each edit. If you don't want this behavior then you will have to have advanced knowledge of the API.....Correction on that last statement. The API is different when dealing with the data all on the client side. Click the Open in Dojo to see it all on the client side. If you are not wanting to use editor templates and want to manage the data editing yourself then you need to use the grid methods provided.
Once you have your grid created. To access the data source of the grid you will need to get the dataSource.
$('#departmet').data('kendoGrid').dataSource;
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource
If you need to use a different data source(or change it) you can use the setDataSource method below(grid function).
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setdatasource
To add to the data source use the add function to add a new object.
$('#departmet').data('kendoGrid').dataSource.add({ id: 2, name: 'name'});
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/add
It is important with kendo to ALWAYS use the methods provided to change the data source so that the proper events can fire to update the UI accordingly. This includes if you need to set a property on a specific data item. In that case you need to use the set method on the item itself.
After you are done modifying your data. Within javascript get the data and either create DOM elements within a form
//JQuery sudo code example
var data = $("#departmet").data("kendoGrid").dataSource.data();
var dataLen = data.length;
var myForm = $('#my-form'); //Already within DOM
for (var i = 0; i < dataLen; i++) {
var item = data[i];
var idEl = $('<input type="hidden" name="userData[' + i + '].id" />');
idEl.val(item.id);
var nameEl = $('<input type="hidden" name="userData[' + i + '].name" />');
nameEl.val(item.name);
myForm.append(idEl);
myForm.append(nameEl);
}
myForm.submit();
This assumes your controller function(??) on the backend is expecting an array of objects with the property name of userData.
Alternatively, you can post it via ajax. For example, the ajax jquery function. Passing your data as the data of the ajax call.
http://api.jquery.com/jquery.ajax/
Don't want to ramble. Let me know if you need more help.
SO won't let me comment yet so have to add another answer. You will not need to define the data source within the .NET code when dealing with client only data. Just use this.
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
If you will have data coming from the backend then you need to use the generic-less constructor and pass in the object else keep what you have.
Html.Kendo().Grid(Model.MyList)
However, if you are preprocessing some client data on the screen that you want to initialize then you will need to do this on ready. Don't worry about the schema part of the data source. It already knows this when you used the .NET MVC wrapper because you gave it the schema(type) via the generic or the parameter provided.
var initialDS= new kendo.data.DataSource({
data: [
{ ActionName: "Some Name", ActionType: "Some Type" }
]
});
$(document).ready(function () {
$('#docworkflow').data('kendoGrid').setDataSource(initialDS);
});
As I mentioned in the other answer. Use the data source functions for adding additional data to the data source. No need to setDataSource each time you want to add. Just
//Assuming you have 2 inputs on the screen the user is entering info into
var nameEntry = $('#action-name').val();
var typeEntry = $('#action-type').val();
$('#docworkflow').data('kendoGrid').dataSource.add({ ActionName: nameEntry , ActionType: typeEntry });
So after some efforts I come up with. But I don't know where to specify the
data in the html code. Is it possible this way?
#(Html.Kendo().Grid <DockData.Action> ()
.Name("docworkflow")
.Columns(columns =>
{
columns.Bound(e => e.ActionName);
columns.Bound(e => e.ActionType);
}).DataSource( **How do I load a script variable here***)
//This script variable should be fed to the above code.
This variable is populatedwhen the user adds data from the UI which works fine.
var dataSource = new kendo.data.DataSource({
data: result,
schema: {
model: {
fields: {
ActionName: { type: "string" },
ActionType: { type: "string" }
}
}
},
pageSize: 20
});
Using Polymer Starter Kit as an example, I would like to have different <app-toolbar> in <my-app> (using property headerType) based on different <my-view#>, i.e.
<my-view1> => headerType = 'my-view1-header'
<my-view2> => headerType = 'my-view2-header'
In my <my-app>, I have created a property headerType and use <dom-if> to show/hide different <app-toolbar>.
My question is how would I always fire an event to <my-app> and set headerType = my-view#-header whenever <my-view#> is active (i.e. comes into view).
I have tried the polymer lifecycle, such as ready(), attached(), etc, and I understand they are only trigger during dom-related events.
I eventually use the _pageChanged observer to call a function on <my-view#>. Below are the snippet of the code.
_pageChanged: function(page) {
let onLoad = function () {
let selected = this.$.ironpages.children[page];
if (Object.getPrototypeOf(selected).hasOwnProperty('viewSelected')) {
selected.viewSelected();
}
}
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, onLoad, this._showPage404, true);
},
There is some example in Polymer shop template where you can execute something when the visibility of your view change with iron-pages.
you just need to add a property for example visible in each of your view element with Boolean type and observe that property to check whatever the view is visible or not, and then in your iron-pages you need to add selected-attribute property and the value is visible. check Polymer Shop Template.
I have a button 'Search'. When I am clicking it, it is doing some search and loading data in the grid.
I want to add Mask and Unmask functionality here. I am using extJS5
{
xtype: 'button',
text: 'Search',
handler : function () {
var searchPanel = Ext.getCmp('searchPanel'),
grid = Ext.getCmp('searchResultsGrid'),
searchCrit = searchPanel.gatherCriteria();
Ext.getBody().mask("Loading Data ..");
grid.executeSearch(searchCrit);
Ext.getBody().unmask();
}
}
I have addedd Ext.getBody().mask("Loading Data .."); and Ext.getBody().unmask();. But it's not working properly.
Any idea, how to mask and unmask a panel in an event.
It depends on which proxy you use.
If you use memory proxy, then mask is not showing, because everything is executed at once, and browser not manage to make it visible. IMO the best way to make it visible is by using defer:
Ext.getBody().mask("Loading Data ..");
Ext.Function.defer(function() {
grid.executeSearch(searchCrit);
Ext.getBody().unmask();
}, 10);
That will give browser enough time to make mask visible.
If you use any other proxy, then grid loads data asynchronously, so you need to unmask it after load event is fired, no after executeSearch call:
Ext.getBody().mask("Loading Data ..");
grid.executeSearch(searchCrit);
grid.on('load', function() {
Ext.getBody().unmask();
}, grid, { single: true });
BTW grid by default has masking enabled (loadMask configuration parameter from Ext.grid.View). You might have something missconfigured. Check this example: http://jsfiddle.net/seur2aLx/9/
I am developing a MVVM application and I am using KendoUI Grid. In the grid I want to get the onChange event when user change the pages. (I have been able to do this without MVVM). To do this, I have used the following element.
data-pageable='{ "pageSize": 2, events: {change: onPage}}' //This is not working
I want to the program to execute the onPage function when user changes the pages.
Any help is appreciated.
Thank you.
I am using the grids Databound event which fires when a user changes the page. From there I am selecting the first row so it is highlighted. Hope this helps
In the grid definition:
.Events(events=>events.DataBound("Grid_Databound"))
In the script:
<script>
function Grid_Databound() {
var grid = $("#Grid").data("kendoGrid");
row = grid.tbody.find(">tr:not(.k-grouping-row)").eq(0);
grid.select(row);
}
You don't need "events : { }", just "change", and you need to reference your view model:
data-pageable='{ pageSize: 2, change: yourviewmodel.onPage }'