kendo grid is taking more time to load when using kendo editor inside a template - kendo-ui

I am trying to load the documents on click of a button which is inside a grid but it is creating a new pages for every row and it is taking more time how to resolve it using kendo editor template or another specific methods.
// open window
function openWin(id) {
var myWindow = $("#" + id);
var did = id.replace("win", "doc");
console.log("Value from DID", did);
var rid = Number(id.replace("win", ""));
kendo.ui.progress($(".k-window"), true);
myWindow.data("kendoWindow").center().open();
$.ajax({
type: "POST",
url: "",
data: JSON.stringify(rid),
dataType: "json",
contentType: 'application/json; charset=utf-8',
success: function(data) {
kendo.ui.progress($(".k-window"), false);
$("#" + did).data("kendoEditor").value(data);
},
error: function() {
alert("Error occured!!");
}
});
}
// column definition
{
field: "Document",
template: docTemplateFunction,
title: "Document Intake",
width: "250px",
editable: "inline"
}
// template definition
function docTemplateFunction(dataItem) {
var input = '<div id="win' + dataItem.id + '"><textarea id="doc' + dataItem.id + '" style="width:100%;" aria-label="editor"></textarea></div><button class="k-button" onclick="openWin(' + "'win" + dataItem.id + "'" + ')">Open Doc</button><span class="k-button k-state-disabled doc-btn"><i class="red k-icon k-i-close k-state-disabled"></i></span>';
return input;
}

Related

Selectize with Ajax call autocomplete and Elastic search on Laravel

i try to make a Facebook Style User search using elastiquent on Laravel 5.5 that autocomplete ad sugest user by typing some char in input field.
The response from Ajax call return correct object but in my js code there is probably somethings wrong.
This the elasticsearch url http://basketmapp.com/users-list?q=Paolo, and in response i can see that item is correctly fetched:
this is the js used for selectize:
$(document).ready(function () {
var topUserSearch = $('.js-user-search');
if (topUserSearch.length) {
topUserSearch.selectize({
persist: false,
maxItems: 2,
valueField: 'name',
labelField: 'name',
searchField: ['name'],
options: [],
render: {
option: function(item, escape) {
return '<div class="inline-items">' +
(item.avatar ? '<div class="author-thumb"><img src="' + escape(item.avatar) + '" alt="avatar"></div>' : '') +
'<div class="notification-event">' +
(item.first_name ? '<span class="h6 notification-friend"></a>' + escape(item.first_name) + '</span>' : '') +
'</div>';
},
item: function(item, escape) {
var label = item.first_name;
return '<div>' +
'<span class="label">' + escape(label) + '</span>' +
'</div>';
}
},
load: function(query, callback)
{
if (!query.length) return callback();
$.ajax
({
url: '/users-list',
type: 'GET',
dataType: 'json',
data:
{
q: query
},
error: function()
{
callback();
},
success: function(res)
{
callback(res.data);
}
});
}
});
}
});
need your help!

JQgrid custom button to display additional record details as in view record dialog

Here is my code for custom button, i would like to display additional details about the selected row from server side to jqgrid dialog box with similar look and feel of view record dialog. Can someone help with a sample code to create a dialog box similar to view record from custom button onclick?
jQuery("#list2").jqGrid('navButtonAdd','#pager2',{
caption:"", title: "History",buttonicon:"ui-icon-clock",
onClickButton : function () {
var grid = $("#list2");
var rowid = grid.jqGrid('getGridParam', 'selrow');
if (rowid) {
var alertIDs = {themodal:'alertmod',modalhead:'alerthd',modalcontent:'alertcnt'};
//if ($("#"+alertIDs.themodal).html() === null) {
//alert("1");
$.jgrid.createModal(alertIDs," <span tabindex='0'><span tabindex='-1' id='jqg_alrt' class='ui-jqgrid'></span></span>",
{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqModal:true,drag:true,resize:true,
caption:"History",
top:300,left:500,width:'auto',height: 'auto',closeOnEscape:true,
zIndex: null},"","",true);
$.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqm:true});
$("#jqg_alrt").focus();
$("#jqg_alrt").load('jsontableHeadingsApartmentResource.action?viewBy=' + viewBy+'&timeZone=' + timeZone);
} else {
var alertIDs = {themodal:'alertmod',modalhead:'alerthd',modalcontent:'alertcnt'};
$.jgrid.createModal(alertIDs,"<div>"+$.jgrid.nav.alerttext+"</div><span tabindex='0'><span tabindex='-1' id='jqg_alrt'></span></span>",
{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqModal:true,drag:true,resize:true,
caption:$.jgrid.nav.alertcap,
top:300,left:500,width:200,height: 'auto',closeOnEscape:true,
zIndex: null},"","",true);
$.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqm:true});
$("#jqg_alrt").focus();
}
}
});
Found the solution.
Here is the updated working code, i had to use jgrid info_dialog,
jQuery("#list2").jqGrid('navButtonAdd','#pager2',{
caption:"", title: "History",buttonicon:"ui-icon-clock",
onClickButton : function () {
var grid = $("#list2");
var rowid = grid.jqGrid('getGridParam', 'selrow');
var msg = "" ;
if (rowid) {
$.ajax({
url: 'jsontableHistoryApartmentResource.action?viewBy=' + viewBy+'&rowId=' + rowid,
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data, st) {
if (st == "success") {
msg = data.rr.history;//jqgrid history data
$.jgrid.info_dialog('History','<span style="white-space: nowrap">' + msg +'</span>', $.jgrid.edit.bClose,{buttonalign:'center', width:'auto',resize: true , align: 'left'});
}
},
error: function () {
// alert("Error with AJAX callback");
}
});
} else {
var alertIDs = {themodal:'alertmod',modalhead:'alerthd',modalcontent:'alertcnt'};
$.jgrid.createModal(alertIDs,"<div>"+$.jgrid.nav.alerttext+"</div><span tabindex='0'><span tabindex='-1' id='jqg_alrt'></span></span>",
{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqModal:true,drag:true,resize:true,
caption:$.jgrid.nav.alertcap,
top:300,left:500,width:200,height: 'auto',closeOnEscape:true,
zIndex: null},"","",true);
$.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqm:true});
$("#jqg_alrt").focus();
}
}
});

JSON, jQueryUI Autocomplete, AJAX - Cannot get data when array is not local

I have searched stackoverflow, as well as the web for some insight into how to get the jQueryUI Autocomplete plugin working with my JSON data, and I'm at a loss. I had it working like a charm with a local data array. I was able to pull values and build html.
I ran into a problem when I had to pull JSON form this source:
/Search/AjaxFindPeopleProperties2
?txtSearch=ca pulls up the test data that I am trying to loop through, when I type in 'ca' to populate the autocomplete list. One of the problems is that ?term=ca is appended to the url instead of ?txtSearch=ca and I'm not sure how to change it.
This is an example of the data:
{
"MatchedProperties": [
{
"Id": 201,
"Name": "Carlyle Center",
"Description": "Comfort, convenience and style are just a few of the features you'll ...",
"ImageUrl": "/Photos/n/225/4989/PU__ThumbnailRS.jpg"
}
]
}
...and here is the ajax call I'm trying to implement:
$(document).ready(function () {
val = $("#txtSearch").val();
$.ajax({
type: "POST",
url: "/Search/AjaxFindPeopleProperties2",
dataType: "json",
data: "{}",
contentType: "application/json; charset=utf-8",
success: function (data) {
$('#txtSearch').autocomplete({
minLength: 0,
source: data.d, //not sure what this is or if it's correct
focus: function (event, ui) {
$('#txtSearch').val(ui.item.MatchedProperties.Name);
$.widget("custom.catcomplete", $.ui.autocomplete, {
//customize menu item html here
_renderItem: function (ul, item) {
return $("<li class='suggested-search-item" + " " + currentCategory + "'></li>")
.data("item.autocomplete", item)
.append($("<a><img src='" + item.MatchedProperties.ImageUrl + "' /><span class='name'>" + item.MatchedProperties.Name + "</span><span class='location'>" + "item.location" + "</span><span class='description'>" + item.MatchedProperties.Description + "</span></a>"))
.appendTo(ul);
},
_renderMenu: function (ul, items) {
var self = this,
currentCategory = "Properties Static Test Category";
$.each(items, function (index, item) {
if (item.category != currentCategory) {
ul.append("<li class='suggested-search-category ui-autocomplete-category'>" + currentCategory + "</li>");
//currentCategory = item.category;
}
self._renderItem(ul, item);
});
}
}//END: widget
//return false;
},
select: function (event, ui) {
$('#txtSearch').val(ui.item.MatchedProperties.Name);
//$('#selectedValue').text("Selected value:" + ui.item.Abbreviation);
return false;
}
});
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
}); //END ajax
}); //END: doc ready
and I'm initializing here:
<script type="text/javascript">
//initialize autocomplete
$("#txtSearch").autocomplete({ //autocomplete with category support
/*basic settings*/
delay: 0,
source: "/Search/AjaxFindPeopleProperties2",
autoFocus: true,
minLength: 2 //can adjust this to determine how many characters need to be entered before autocomplete will kick in
});
//set auto fucus
$("#txtSearch").autocomplete("option", "autoFocus", true);
</script>
any help would be great...
Thanks!

How to initialize jquery easy slider plugin to my plugin?

I have a plugin which retrieves JSON data from external file and appends it to the "div#slider", the data is retrieved and is working fine but the easySlider is not initialized after retrieving the data successfully . and the slide does not starts.
I have codes on http://lkamal.com.np/r3dImage
my plugin code is as follows:
(function($) {
$.fn.r3dImage = function(options){
var defaults = {
url: 'ajax/test.txt',
pause: 2000,
};
var options = $.extend(defaults, options);
//retrive json file
return this.each(function() {
obj = $(this);
var body = obj.html();
getJson();
});
function getJson(){
$.ajax({
type: "POST",
url: options.url,
dataType: "json",
cache: false,
contentType: "application/json",
success: function(data) {
//alert("Success");
$.each(data.dashboard, function(i,post){
obj.html('<li><img src="' + post.ImageUrl + '" title="' + post.OverlayText +'" /></li>');
});
$(obj).easySlider({
pause: options.pause
});
},
error: function(xhr, status, error) {
alert(xhr.status);
}
});
};
/* this.each(function() {
$(options.container).easySlider({
pause: options.pause
});
});*/
};
})(jQuery);
and another is easy slider 1.7.
or
can i do it inside the easyslider plugin.
How Can i merge this two plugin and make one.
I got solution for this also.
$(function() {
$.fn.r3dImage = function(param) {
var options = {
url : "",
pause : 2000,
feedFetchDelay : 10
};
this.each(function() {
var element = $(this);
//alert(element.attr('id'));
element.html("<ul></ul>");
options = $.extend(options,param);
if(options.url=="") { console.log("URL is not specified"); }
else {
getJsonFeed(element); //retrives json feed and appends to respective div
setInterval(getJsonFeed, options.feedFetchDelay*1000*60); //Time interval in milli seconds converted to minute using delay*1000*60
}
});
function getJsonFeed(element){
//function to retrive json feed start using post of json data
$.post(
options.url,
function(data) {
//alert(data.dashboard);
html = '';
$.each(data.dashboard, function(k,v) {
html += '<li>';
html += '<a href="'+v.TargetUrl+'" target="'+v.Target+'">';
html += '<img src="' + v.ImageUrl + '" alt="' + v.Alt +'" title="' + v.OverlayText +'" />';
html += '</a><p>'+v.OverlayText+'</p></li>';
});
//alert(html);
$("ul", element).append(html); //appending the json data with respective div
//initialize the slider to easy slider
$(element).easySlider({
auto: true,
continuous: true
});
},
"json"
);
}
}
});

.setPostData jqgrid not working

I want to reload jqgrid with new parameters.I'm using .setPostData().Please look at my code below.It always give me error at .setPostData().M I missing something? format?
$('table[id$="'+tabID+'_BBGrid"]').jqGrid({
url:'/Controls/Advertiser/BBControlNew.ascx.ashx?action=getBBData&advertiserID=' + $('#advertiser_id').text() + '&startDate=' + $('input[id$="' + tabID +
'_FromCalBuyBack_CalendarTbx"] ').val() + '&endDate=' + $('input[id$="' + tabID + '_ToCalBuyBack_CalendarTbx"] ').val(),
datatype: 'json',
mtype: 'POST',
height:'100%',
width:'100%',
colNames: result.colNamesData,
colModel: result.colModelData,
//pager: '#RequestLeadspager',
rowNum : 100,
shrinkToFit :false,
...........
function BuyBackGridReload(tabID,NoSelectedValues)
{
$('table[id$="'+tabID+'_BuyBackGrid"]').setPostData({
advertiserID:$('#advertiser_id').text(),
CampaignsDdlSelectedValue: $('select[id$="CampaignDdl"] option:selected').val(),
startDate: $('input[id$="'+tabID+'_FromCalBuyBack_CalendarTbx"] ').val(),
endDate: $('input[id$="'+tabID+'_ToCalBuyBack_CalendarTbx"] ').val(),
NoSelectedValue: NoSelectedValues
}).trigger("reloadGrid");
};
I have search btn.I'm getting values for NoSelectedValues inside that search btn. here is the code for button click.
$('input[id$="'+tabID+'_BuyBackSearchBtn"]').click(function(){
var values = [];
$('div[id$="' + tabID + '_SelectedBuyBackFilterDiv"] .children').each(function (){
$(this).find('option').each(function (){
var attr = $(this).attr('rel');
if (typeof attr == 'undefined' ){
values.push($(this).val());
}
});
});
BuyBackGridReload(tabID,values);
}); //End search click
ERROR:
$("table[id$=\"" + tabID +
"_BuyBackGrid\"]").setPostData({advertiserID:
$("#advertiser_id").text(),
CampaignsDdlSelectedValue:
$("select[id$=\"CampaignDdl\"]
option:selected").val(), startDate:
$("input[id$=\"" + tabID +
"_FromCalBuyBack_CalendarTbx\"]
").val(), endDate: $("input[id$=\"" +
tabID + "_ToCalBuyBack_CalendarTbx\"]
").val(), NoSelectedValue:
NoSelectedValues}) is undefined
I also don't want to pass as a querystring for new parameters.
Any suggestion?
Thanks
A
You don't need to use setPostData to set the postData parameter. You can use setGridParam function instead. See here examples.
I suppose if you will use postData parameter which contain functions you will not need to set any postData parameter at all. The url and postData parameters of jqGrid can look like
url:'/Controls/Advertiser/BBControlNew.ascx.ashx",
postData: {
action: "getBBData"
advertiserID: function() { return $('#advertiser_id').text(); },
startDate: function() { return $('input[id$="' + tabID + '_FromCalBuyBack_CalendarTbx"] ').val(); },
endDate: function() { return $('input[id$="' + tabID + '_ToCalBuyBack_CalendarTbx"] ').val(); },
advertiserID: function() { return $('#advertiser_id').text(); },
CampaignsDdlSelectedValue: function() { return $('select[id$="CampaignDdl"] option:selected').val(); },
startDate: function() { return $('input[id$="'+tabID+'_FromCalBuyBack_CalendarTbx"] ').val(); },
endDate: function() { return $('input[id$="'+tabID+'_ToCalBuyBack_CalendarTbx"] ').val(); },
NoSelectedValue: function() { return NoSelectedValues; }
}
The variables tabID and NoSelectedValues must be defined before. On every grid reloading the function from every postData property will be called and you can read the current values from the corresponding controls.

Resources