Hi I am struggling to display my jtable. It only displays when I step through the javascript with the debugger.
$("body").on("click", "#tabRole", function () {
document.getElementById("1").className = "inactive";
document.getElementById("2").className = "active";
$('#Admin-details').load('../Admin/ADRoleAdmin');
jTableRoles();
});
This method loads ADRoleAdmin as a partial view into a div. Then jTableRoles() should load the jtable into a div (jTableRoles) inside ADRoleAdmin:
var jTableRoles = function () {
$(function () {
debugger;
$('#jTableRoles').jtable({
paging: true,
pageSize: 20,
sorting: true,
title: 'Roles',
onRowEdit: function (event, data) {
UpdateRoleDetails(data.records.RoleId, data.records.RoleName);
},
actions: {
listAction: '../Admin/GetRoles',
updateAction: 'dummy'
},
toolbar: {
items: [{
icon: '../Content/images/Misc/Add icon.png',
text: 'Create New',
click: function () {
UpdateRoleDetails(0, '');
}
}]
},
fields: {
Id: {
key: true,
list: false
},
Name: {
title: 'Role name',
},
Description: {
title: 'Role description',
sorting: false
}
}
});
$('#jTableRoles').jtable('load');
});
}
Please tell me what I am doing wrong or what I can do different to make it work.
Looping through the steps takes extra time.
It looks like the load of ADRoleAdmin is not finished on the moment the jTable is loaded.
Try to start the jtable after a certain timeout to check.
Preferably load the ADRoleAdmin an on it's postback load the jTable
Related
I am using a Kendo UI dataSource to bind KendoUIScheduler through SignalR. How can I pass parameters to the read operation of the dataSource with SignalR bindings?
I am using the following code:
var hub = $.connection.schedulerHub;
var hubStart = $.connection.hub.start();
$('#scheduler').kendoScheduler({
mobile: true,
height: 600,
views: [
'day',
'week',
'month',
'agenda',
{ type: 'timeline', selected: true }
],
timezone: 'Etc/UTC',
dataSource: {
type: "signalr",
push: function (e) {
alert(e.type);
},
autoSync: true,
transport: {
signalr: {
promise: hubStart,
hub: hub,
server: {
read:"read",
update: "update",
destroy: "destroy",
create: "create"
},
client: {
read:"read",
update: "update",
destroy: "destroy",
create: "create"
}
}
},
schema: {
model: {
id: 'SchedulerID',
fields: {
SchedulerID: { type: 'number', from: 'SchedulerID' },
start: { type: 'date', from: 'Start' },
end: { type: 'date', from: 'End' },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
Title: { from: 'Title' },
isAllDay: { type: 'boolean', from: 'IsAllDay' },
recurrenceId: { from: "RecurrenceId" },
recurrenceException: { from: "RecurrenceException" },
recurrenceRule: { from: "RecurrenceRule" },
Users: { nullable: true, from: 'Users' },
},
}
}
},
group: {
resources: ['Users'],
orientation: 'vertical'
},
resources: [
{
field: 'Users',
name: 'Users',
dataSource: Users,
multiple: false,
title: 'Users'
}
]
});
I realize this question is old, but I was trying to find this same answer and didn't find any clear solutions. I did find some hints in other threads that led me to a solution although I'm sure there are better ones (I wasn't able to figure out how to send the parameters separately - only as one object).
In your datasource, use the parameterMap function to put in whatever custom parameters you want. When binding to WCF (commented code) you can separate the parameters for the call but I couldn't get that to work with the SignalR implementation.
type: "signalr",
transport: {
parameterMap: function (data, type) {
switch (type) {
case "read":
{
// this works
var request = {};
var chkunsub = $('#chkunsubscribed').is(':checked');
request.unsubscribed = chkunsub;
request.oKendo = data;
return request;
// Does not work (separating parameters)
//return {
// unsubscribed: chkunsub,
// oKendo: data
//};
}
// Does not work either (separating parameters)
//return kendo.stringify({
// unsubscribed: chkunsub ? 1 : 0,
// oKendo: data
//});
}
},
Note that the "data" variable contains the filter, paging, grouping, etc. (I'm binding to a grid but I would think it's the same for scheduler).
Then on the server side in your hub, you just need to mirror the class structure like this (my CKendoGridOptions class has all of the properties from the API such as page, skip, filter, etc).
Public Class EventRequestData
Public Property unsubscribed As Boolean
Public Property oKendo As CKendoGridOptions
End Class
' This works
Public Function read(data As EventRequestData) As OrmedReturnData
Dim oReturn As New OrmedReturnData
If IsLoggingEnabled() Then
WriteToEventLog("Hub getevent_item called")
End If
Dim oToken As TokenHelper.TokenData = TokenHelper.ValidateToken(New Guid(Context.Request.Cookies("token").Value))
If oToken.TokenOK = False Then
oReturn.Success = False
oReturn.ErrorMessage = ERROR_INVALID_TOKEN
Else
Dim oData As New EventItems
oReturn = oData.Getevent_items(data.unsubscribed, data.oKendo)
End If
Return oReturn
End Function
I hope this helps someone else who is trying to pass parameters to a read function using Kendo in jQuery and SignalR.
I'm trying to use Select2 in Razor in ASP.NET MVC. But I can't get work.
$(document).ready(function () {
$(".genreOptions").select2({
tags: true,
ajax: {
url: 'http://localhost:65148/NewProfile/Genres',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, page) {
var newData = [];
$.each(data, function (index, item) {
newData.push({
id: item.Id, //id part present in data
text: item.Genre //string to be displayed
});
});
return { results: newData };
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1
});
#Html.DropDownListFor(x => x.BandProfile.Genres, Enumerable.Empty<SelectListItem>(), new { #class="genreOptions", multiple = "multiple", style ="width: 100%;"} )
The searching for tags works fine. But when I post the form, the count of the input field Is 0. How can I capture the data from the input form?
#Bryan I build up a javascript array and pass it with ajax to the server. Seems to work ok for my purposes. Perhaps you could try that. The selectors I put below will be different than what you need but here is the general idea...
On Click
$('#submitButton').click(function () {
fillHiddenInput();
var dataToSend = $('#hiddenInput').val();
//Submit the form with ajax or however you want to get dataToSend to server
});
FillHiddenInput function...
var fillHiddenInput = function () {
$('#hiddenInput').val("");
var stuff = [];
$('.ms-selection .ms-list li ul').children('li').each(function (){
if ($(this).hasClass('ms-selected'))
{
stuff.push($(this).children('span').text());
}
});
$('#hiddenInput').val(stuff);
}
hello I have the following snippet of code.
Departments
<div>Users </div>
<div id="UserTableContainer"></div>
<script type="text/javascript">
var departmentChangeId = 1;
$(document).ready(function () {
$('#DepartmentTableContainer').jtable({
paging: true,
useBootstrap: true,
sorting: true,
selecting: true,
selectOnRowClick: true,
title: 'Departments',
actions: {
listAction: '/api/Department/GetDepartmentList',
createAction: '/api/Department/CreateDepartment',
updateAction: '/api/Department/EditDepartment',
deleteAction: '/api/Department/DeleteDepartment'
},
fields: {
ID: {
key: true,
list: false
},
TypeId: {
title: 'Department Type',
options: '/api/Department/GetDepartmentTypeList'
},
Label: {
title: 'Department'
},
},
//Register to selectionChanged event to hanlde events
selectionChanged: function () {
//Get all selected rows
var $selectedRows = $('#DepartmentTableContainer').jtable('selectedRows');
departmentChangeId = $selectedRows.data('record').ID;
//alert(departmentChangeId);
//
refresh();
}
}).jtable('load');
$('#UserTableContainer').jtable({
messages: ArabMessages, //Lozalize
paging: true,
useBootstrap: true,
sorting: true,
title: 'Employee',
actions: {
listAction: '/api/Users/GetEmployee?id=' + departmentChangeId,
updateAction: '/api/Users/EditEmployee'
},
fields: {
Id: {
key: true,
list: false
},
DepId: {
title: ' Department',
options: '/api/Department/GetDepartmentTypeList'
},
LastName: {
title: 'Name'
},
}
});
$('#UserTableContainer').jtable('load');
});
and these are the two version I use for the refresh function
first
function refresh() {
$('#UserTableContainer').jtable('reload');
}
the second
function refresh() {
$.post("/api/Users/GetEmployee", "id=" + departmentChangeId,
function (results) {
$('#UserTableContainer').jtable('reload');
}
, "json");
}
unfortunately both of them dont work
instead of when I use debugging mode I see that the /api/Users/GetEmployee is visited in both case
please try using below code in refresh function
$('#UserTableContainer').jtable('load');
What is the proper way to do this ? Here are the statements one after another but since javascript is async I am guessing $score.lastItem does not exist when the 2nd function is called? So Do I put this 2nd function in a callback of the 1st?
//1st Call this on inital load to populate Congresses dropdownlist
ccResource.query(function (data) {
$scope.ccList.length = 0;
angular.forEach(data, function (ccData) {
$scope.ccList.push(ccData);
})
$scope.lastItem = $scope.ccList[$scope.ccList.length - 1];
});
//2nd after populating $scope.lastItem run this to populate grid on initial load (using id from selected item in dropdownlist)
cgResource.query({ id: $scope.lastItem.congressNumber }, function (data) {
$scope.usersList = data;
});
//ngGrid
$scope.userGrid = {
data: 'usersList',
multiSelect: false,
selectedItems: $scope.selectedUsers,
enableColumnResize: false,
columnDefs: [
{ field: 'firstname', displayName: 'First Name', width: '25%' },
{ field: 'lastname', displayName: 'Last Name', width: '25%' }
]
};
Yes.You can do
//1st Call this on inital load to populate Congresses dropdownlist
ccResource.query(function (data) {
$scope.ccList.length = 0;
angular.forEach(data, function (ccData) {
$scope.ccList.push(ccData);
})
$scope.lastItem = $scope.ccList[$scope.ccList.length - 1];
//2nd after populating $scope.lastItem run this to populate grid on initial load (using id from selected item in dropdownlist)
cgResource.query({
id: $scope.lastItem.congressNumber
}, function (data) {
$scope.usersList = data;
});
});
I am using the jQuery validator to validate a jQuery multiselect dropdownlist but it does not validate, my functions are bellow:
These functions are created from my code behind and registered on the page with the ScriptManager.RegisterClientScriptBlock.
I put the following directly on the aspx page and it then validates the multiselect, but as soon as I do it from the code behind and register the script, all validators besides the multiselect works.
$.validator.addMethod('notNone', function(value, element) {
return (value != '-1');
}, 'Please select an option.');
var $callback = $("#callback");
$(document).ready(function () {
$("#<%=example.ClientID%>").multiselect(
{
show: "fade",
hide: "fade",
click: function (event, ui) {
$callback.text(ui.text + ' ' + (ui.checked ? 'checked' : 'unchecked'));
},
});
});
$("#form1").validate({
rules: {
<%=example.UniqueID %>: {
notNone: true,
},
<%=txtPassword.UniqueID %>: {
//minlength: 5,
//required: true
},
<%=TextIdea.UniqueID %>: {
//minlength: 5,
//required: true
},
<%=ddlTest.UniqueID %>: {
//notNone: true
},
redemption : {
redemption : false
},
redemption: {
redemptionEnd : false
},
},
ignore: ':hidden:not("#<%=example.ClientID %>")',
messages: {
<%=example.UniqueID %>:{
notNone: "Plaese select something",
},
<%=txtPassword.UniqueID %>:{
required: "Plaese enter your password",
minlength: "Password must be atleaet of 5 characters"
},
<%=TextIdea.UniqueID %>:{
required: "Plaese enter your Ideas",
minlength: "Password must be atleaet of 5 characters"
},
}
});
My markup:
<select id="example" name="example" runat="server">
</select>
Am I doing something wrong? Please help guys.
Thanks in advance.
Okay, after 2 days I finally figured out what was going on, turns out the controls that use the jQuery multiSelect, their UniqueID gets appended with _multiSelect and the ClientID gets appended with $multiSelect.
Added those strings when getting the Client/UniqueID and it works.