Hi i'm very much new to kendo UI, so need help in the below fix,
I'm using kendo grid UI as below for pagination:
<script>
$(document).ready(function(){
$("#table3").kendoGrid({
dataSource: {
pageSize: 10
},
pageable: true,
enter code hereheight: 300,
sortable: true,
});
$("#table3").show();
});
</script>
when user edits a record in a page, he's redirected to edit page with that record details so I need current page number because after editing a record in a page, I need to redirect user to the same page after saving the details of that record.
I'm using this in a coldfusion page.
Please help.
Thanks in advance
What you are after is here :
http://docs.kendoui.com/api/web/pager#methods-page
// get the page
var currentPage = grid.dataSource.page();
// later set the page
grid.dataSource.page(currentPage );
But I am bit confused with the redirect from the grid to edit page, why do you do that ? Kendo has inline batch edit and popup edit features, if you move to other page it will all get bit more complicated.
FYI : http://demos.kendoui.com/web/grid/editing.html
// declare page index as 1
var currentPage = 1;
pageable: {
change: function (e) {
currentPage = e.index;
},
page: currentPage,
sortable: true,
..`enter code here`
}
$scope.grid = dataSource;
$scope.grid._page = currentPage;// stay in the current page after grid refreshes
Related
I'm having a problem here:
When I select a radion button in a page 1 and another one in the same page it works fine, but when I select a radio button in the page number 2, and go back to the page number 1, that first radio button still selected and the one in the page number 2 is also selected, how can I solve this problem? I was looking for a solution here in the forum but couldn't find someone with the same problem.
*[code] $(document).ready(function () { var oTable = $('#example').dataTable({ "bJQueryUI": true, "sPaginationType": "full_numbers" }); }); [/code]*
There is no solution from DataTables itself. You'll have to do it on your own.
What you can do is save the selected value yourself on a click. Imagine you have a table called projectsTable. Then you can write:
var selection = -1;
$("#projectsTable input[type=radio]").on
(
"click",
function()
{
selection = $(this).val();
}
);
Then, you'll have to unselect all the wrong values every time the page changes. Add a callback in the construction of your table for page draw to do that:
//other settings go here, like the dom one
//you can choose your own, no need for this specific one
"dom": "lfBrtip",
"fnDrawCallback":
function(oSettings)
{
$("#projectsTable input[type=radio][value!="+selection+"]").prop('checked', false);
}
Every time the page is changed, this piece of code deselects everything you don't want to be selected any longer.
I've got a custom popup editor template for my Kendo Grid which contains tabs. One of the tabs is to have a second Kendo Grid of records relating to the record being edited.
I'd like to be able to create a new record and immediately start adding the related records, without having to re-open the newly created record. Obviously, I have to first save the record in order for its ID to be generated.
I've managed to prevent the popup editor closing when new records are saved, but I think the popup window is no longer bound to the model at this point.
Is there a way I can rebind the window to the model so I can carry on editing and adding the related records?
Thanks
Edit: Here's the technique for keeping the editor open:
The grid's edit and save events:
edit: function(e){
var editWindow = this.editable.element.data("kendoWindow");
editWindow.bind("close", onWindowEditClose);
},
save: function(e){
if (e.model.isNew()) {
preventCloseOnSave = true;
} else {
preventCloseOnSave = false;
}
}
The onWindowEditClose:
var onWindowEditClose = function(e) {'
if (preventCloseOnSave) {
e.preventDefault();
preventCloseOnSave = false;
}
};
I ended up using a slightly clunky workaround, but other than a minor UI 'flash' it works okay.
The Grid has a rowTemplate, so I've added the record's ID field to the TR tags so I can find them by ID. I then have a function that runs on the complete event when a new record is created which finds the new row and immediately opens it:
var ds = new kendo.data.DataSource({
// ...
transport: {
create: {
url: '/url/to/create',
dataType: 'json',
type: 'post',
complete: recordCreated
}
});
function recordCreated(e) {
"use strict";
var id = e.responseJSON.data[0].id,
grid = $('#grid').data("kendoGrid"),
row = grid.tbody.find("tr[data-id='" + id + "']");
grid.editRow(row);
}
On a conceptual level, you could intercept the POST action that saves the record to the database and get the saved data on return. Note that your POST action must return the saved object (as is expected). You can hook into this event by using the requestEnd method of the Kendo UI Datasource object that supports your grid and bind the saved record to your edit window (as long as you have a reference to it).
var ds = new kendo.data.DataSource({
// ...
requestEnd: function (e) {
kendo.bind(editWindow, e.response); // bind the returned data to your edit window
}
});
The understanding of the kendo ui structure (which can be tedious at times) is important to getting anything done with it. The closing of the popup that allows inserting is done in the dataBinding event. Therefore, that is the place we need to prevent it from:
$("#yourgrid").kendoGrid({
dataSource: yourDataSource,
columns: [
{ field: "YouColumn", title: "YourTitle", ... },
...
]
.
.
.
editable: "popup",
dataBinding: function(e){
//this is the key to keeping the popup open
e.preventDefault();
},
save: function (e) {
//whatever you need to do here
}
.
.
.
});
Hope this helps someone.
//Houdini
I made this topic once, but the information I had was a bit hard to follow and I did not get much help, so I am trying again after spending the day making a JSBIN sample.
I have a situation where I am using KendoUI to make a view model, and also to make some items within it, and when you click on sub-items that are drawn, it opens up a KendoWindow to let you edit them more specifically.
However, there is a problem with the dataSource concept, I think. When I try to bind to a dataSource on my page it works fine; But when I try to bind a kendo control to a remote datasource within a rendered window, it refuses to fetch.
If I bind only to local data, hard coded data, it works; So I know the dropdownlist is working. But I really need to be able to bind to remote data.
I have prepared a JSBIN to show this behavior (or lack thereof)
JSBIN EXAMPLE
Any help would be greatly appreciated. To see the behavior, click on the button to Create Socket Rail, then use the NumericTextBox to increase the size to any number higher than 0, then click on one of the drawn boxes.
You need to create the kendoDropDownList in the kendoWindow.activate event (or at least bind the DataSource there). Adapted from your code, this will work:
kendoWindowWidget = function (options) {
// extend the settings options so that we can take
// explicit configuration from the widget caller.
var settings = $.extend({
resizable: false,
modal: true,
viewable: true,
visible: false,
width: "450px",
height: "450px",
activate: function () {
var myDataSource = new kendo.data.DataSource({
transport: {
read: {
dataType: "json",
url: "http://jsbin.com/UYEbOXi/3/js"
}
}
});
widgets.windows.sockets.type = $('#socket-type').kendoDropDownList({
dataTextField: "Name",
dataValueField: "Id",
dataSource: myDataSource
}).data("kendoDropDownList");
}
}, options);
var $window = $("<div id='kendow-editor-window'/>")
.kendoWindow(settings)
.data("kendoWindow");
$window.databind = function (e) {
kendo.bind($window.element, e);
$window.open().center();
};
// return the created combo box
return $window;
};
Adapted JSBin (I removed a bunch of things to make it easier to manage):
http://jsbin.com/uMuFewI/3/edit
In telerik mvc grid i want to display some data in popup window when i click on a link button. But not using Ajax. Below is the code i am using but it is not working. Any help is appreciated
#section JavaScript{
<script type="text/javascript" language="javascript">
$(function () {
$(".lnkShortCodeAndKeyword").click(
function (e) {
e.preventDefault();
var WShortCodeAndKeyword = $.telerik.window.create({
name: "ShortcodesWindow",
title: "Shortcodes",
contentUrl: $(this).attr('href'),
modal: true,
resizable: true,
draggable: true,
scrollable: true,
width: 960,
height: 600,
onClose: function () {
destruir(this);
}
}).data('tWindow').center();
}
}
If you are not using the Window component anywhere on your View (by using Html.Telerik().Window() for example) you will have to manually add the required JavaScript files when you define your ScriptRegistrar. Normally, if you declare the components on the page the ScriptRegistrar takes care of everything for you, but if you just try to create this on the client-side you will have to do something along the following lines:
#(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Add("telerik.common.js").Add("telerik.draganddrop.js").Add("telerik.window.js").Combined(true).Compress(true)))
As you can see I just manually defined the JavaScript files I wanted to load. Keep in mind to not add the "min" suffix as the ScriptRegistrar takes care of this as well (.min.js will only be used in production code and not debug).
jqGrid parameter loadonce: true is used
Selecting rows and pressing delete button
No url is set
How to delete rows in local data only and suppress this error message ?
Is it possbile to set some dummy url or any other idea to allow row delete?
It would be nice if add and edit forms can be used also with local data.
url: 'GetData',
datatype: "json",
multiselect: true,
multiboxonly: true,
scrollingRows : true,
autoencode: true,
loadonce: true,
prmNames: {id:"_rowid", oper: "_oper" },
rowTotal: 999999999,
rownumbers: true,
rowNum: 999999999,
Update 1
From Oleg answer I understood the following solution:
Disable jqGrid standard delete button
Add new delete button to toolbar.
From this button click event call provided
grid.jqGrid('delGridRow', rowid, myDelOptions);
method.
Multiple rows can selected. How to delete all selected rows, this sample deletes only one ?
Is'nt it better to change jqGrid so that delete, edit, add buttons work without url ? Currently it is required to pass dummy url which returns success always for local data editing.
You can use delRowData method do delete any local row.
You can do use delGridRow from the form editing if you need it. I described the way here and used for formatter:'actions' (see here, here and originally here).
var grid = $("#list"),
myDelOptions = {
// because I use "local" data I don't want to send the changes
// to the server so I use "processing:true" setting and delete
// the row manually in onclickSubmit
onclickSubmit: function(options, rowid) {
var grid_id = $.jgrid.jqID(grid[0].id),
grid_p = grid[0].p,
newPage = grid_p.page;
// reset the value of processing option which could be modified
options.processing = true;
// delete the row
grid.delRowData(rowid);
$.jgrid.hideModal("#delmod"+grid_id,
{gb:"#gbox_"+grid_id,
jqm:options.jqModal,onClose:options.onClose});
if (grid_p.lastpage > 1) {// on the multipage grid reload the grid
if (grid_p.reccount === 0 && newPage === grid_p.lastpage) {
// if after deliting there are no rows on the current page
// which is the last page of the grid
newPage--; // go to the previous page
}
// reload grid to make the row from the next page visable.
grid.trigger("reloadGrid", [{page:newPage}]);
}
return true;
},
processing:true
};
and then use
grid.jqGrid('delGridRow', rowid, myDelOptions);
UPDATED: In case of multiselect: true the myDelOptions can be modified to the following:
var grid = $("#list"),
myDelOptions = {
// because I use "local" data I don't want to send the changes
// to the server so I use "processing:true" setting and delete
// the row manually in onclickSubmit
onclickSubmit: function(options) {
var grid_id = $.jgrid.jqID(grid[0].id),
grid_p = grid[0].p,
newPage = grid_p.page,
rowids = grid_p.multiselect? grid_p.selarrrow: [grid_p.selrow];
// reset the value of processing option which could be modified
options.processing = true;
// delete the row
$.each(rowids,function(){
grid.delRowData(this);
});
$.jgrid.hideModal("#delmod"+grid_id,
{gb:"#gbox_"+grid_id,
jqm:options.jqModal,onClose:options.onClose});
if (grid_p.lastpage > 1) {// on the multipage grid reload the grid
if (grid_p.reccount === 0 && newPage === grid_p.lastpage) {
// if after deliting there are no rows on the current page
// which is the last page of the grid
newPage--; // go to the previous page
}
// reload grid to make the row from the next page visable.
grid.trigger("reloadGrid", [{page:newPage}]);
}
return true;
},
processing:true
};
UPDATED 2: To have keyboard support on the Delete operation and to set "Delete" button as default you can add in the delSettings additional option
afterShowForm: function($form) {
var form = $form.parent()[0];
// Delete button: "#dData", Cancel button: "#eData"
$("#dData",form).attr("tabindex","1000");
$("#eData",form).attr("tabindex","1001");
setTimeout(function() {
$("#dData",form).focus(); // set the focus on "Delete" button
},50);
}