I want to open kendo windows in maximize as default when click on button.
i have achieve using
$("#window").data("kendoWindow").maximize().open();
with actions: [ "Maximize", "Close"] and when i click on close button of kendo window and reopen the kendo window then it duplicates the restore button.
I know this question was asked 11 months ago but for those who came to this page looking for a solution, you simply need to open the window first and then maximize it.
$("#window").data("kendoWindow").open().maximize();
That simple!
I'm using UI for ASP.NET MVC, v.2016.2.714 and it works for me.
I'm posting this sample that is working here. Please try in this Kendo release.
$("#dialog").kendoWindow({
actions: [ "Maximize", "Close"],
draggable: false,
height: "300px",
modal: true,
pinned: false,
position: {
top: 100,
left: 100
},
resizable: false,
title: "Modal Window",
width: "500px"
});
$( "#target" ).click(function() {
$("#dialog").data("kendoWindow").maximize().open();
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
</head>
<body>
<div id="dialog"></div>
<div id="target">
Click here
</div>
</body>
</html>
var dialog= $("#dialog").data("kendoWindow");
dialog.maximize();
Related
I clone this repo https://github.com/Microsoft/BotFramework-WebChat and I managed to edit css in local.
I would like to know what I need to deploy to use webchat online ?
Thanks you for you help
I clone this repo https://github.com/Microsoft/BotFramework-WebChat and I managed to edit css in local. I would like to know what I need to deploy to use webchat online?
After you customize&build your own web chat, to embed web chat in your website, you should include your built botchat.css and botchat.js file in your project and reference botchat.css and botchat.js in your web page.
I want to add a widget like this to open my chatbot, what I need to do?
It seems that you’d like to display the chat icon in your web page to allow user dynamically open/collapse your web chat, to achieve the requirement, you need not to modify the botchat.js file, the following code sample work for me , you can refer to it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="BotChat/botchat.css" rel="stylesheet" />
<script src="BotChat/botchat.js"></script>
<style>
#mychat {
margin: 10px;
position: fixed;
bottom: 30px;
right: 10px;
z-index: 1000000;
}
</style>
</head>
<body>
<div id="container">
<h1>Hello World</h1>
<!--other page contents-->
<img id="mychat" src="https://i.stack.imgur.com/RD7i4.png" style="float:right" />
</div>
</body>
</html>
<script>
(function () {
var div = document.createElement("div");
document.getElementsByTagName('body')[0].appendChild(div);
div.outerHTML = "<div id='botDiv' style='width: 400px; height: 0px; margin:10px; position: fixed; bottom: 0; right:0; z-index: 1000;><div id='botTitleBar' style='height: 40px; width: 400px; position:fixed; cursor: pointer;'></div></div>";
BotChat.App({
directLine: { secret: '{directline_secret}' },
user: { id: 'You' },
bot: { id: '{your_botid}' }
}, document.getElementById("botDiv"));
document.getElementsByClassName("wc-header")[0].setAttribute("id", "chatbotheader");
document.querySelector('body').addEventListener('click', function (e) {
e.target.matches = e.target.matches || e.target.msMatchesSelector;
if (e.target.matches('#chatbotheader')) {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = "0px";
document.getElementById("mychat").style.display = "block";
};
});
document.getElementById("mychat").addEventListener("click", function (e) {
document.getElementById("botDiv").style.height = '500px';
e.target.style.display = "none";
})
}());
</script>
Test result:
If I want to add a widget like this
to open my chatbot, what I need to do ? Is it enough to modify the botchat.js file ?
How to have an application like in this post?
if you want to use iframe then you can't customize the design . for customize design you need to use Direct line by you can change design as well as make bot fully responsive.
Here is the code i am using working fine for me:
<!DOCTYPE html>
<html class="no-js lang-en" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!-- For Bot Frame -->
<link href="../assets/SCSS/botchat-fullwindow.css" type="text/css" rel="stylesheet" />
<link href="../assets/SCSS/botchat.css" type="text/css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body class="personal-body">
<!-- For Bot Code -->
<div id="BotChatElement">
</div>
<img src="../assets/images/chat-2-icon.png" onclick="openchatbot()" class="open-bot" id="button_chat" />
<script src="../assets/JS/botchat.js"></script>
<script>
var model = {
"userId": "demo1234",
"userName": "You",
"botId": "Chatbot Main Tree",
"botIconUrl": "",
"botName": "Chatbot Main Tree",
"secret": "",
"iconUrl": "",
"directLineUrl": "https://webchat.botframework.com/v3/directline",
"webSocketEnabled": "false"
};[enter image description here][1]
BotChat.App({
directLine: {
secret: model.secret,
token: model.token,
domain: model.directLineUrl,
webSocket: false,
sendTyping: true
},
user: { id: model.userId, name: model.userName },
bot: { id: model.botId, name: model.botName },
sendTyping: true,
resize: 'window'
},
document.getElementById("BotChatElement"));
function openchatbot() {
$(".wc-chatview-panel *").removeClass("maximizebot");
$(".wc-chatview-panel").css({ 'bottom': '0', 'display': 'block' });
}
$(".minimize-icon").on('click',
function () {
$(".wc-chatview-panel").removeClass("minimize-icon");
$(".wc-chatview-panel ").toggleClass("minimizebot");
$(".minimize-icon ").toggleClass("maximizebot");
});
$(".close-icon").on('click',
function () {
$(".wc-chatview-panel ").removeClass("minimizebot");
$(".wc-chatview-panel ").removeClass("maximizebot");
$(".wc-chatview-panel").css({ 'bottom': '-500px', 'display': 'none' });
});
</script>
</body>
</html>
To deploy your bot follow those steps:
Create an Azure account.
You can create free trial Azure subscription from here.
Deploying the a MS Bot framework code to Azure:
You can see this video deploying a MS Bot framework code to Azure
WebChat channel using Visual Studio.
Also you can check this tutorial. (However, this tutorial use old version of Azure portal).
After connecting the bot with WebChat channel, you can use the Embed code in your HTML code.
I'm using free jqgrid 4-15-3 with guiStyle set to bootstrap. The problem is that the Add dialog launched from navGrid "+" button is a Model dialog by default. I have set the "model: fasle" in addParms but has no effect. Also failed in making changes in afterShowForm by setting jquery ui dialog "option" with "model", false. Below is the code snippet. What are the possible solutions?
$("#mygrid").jqGrid("navGrid", "#mygrid_nav", {add:true,...},{},
{ model:false,
afterShowForm: function(form){
$(form).closest(".ui-jqdialog").dialog("option", "model", false);
}
}
Update: Created a simple test as below, same result:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/Content/jquery-ui.min.css" rel="stylesheet"/>
<link href="/Content/ui.jqgrid.css" rel="stylesheet"/>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-ui.min.js"></script>
<script src="/Scripts/jquery.jqgrid.src.js"></script>
<script src="/Scripts/grid.locale-en.js"></script>
</head>
<body>
<div>
<div>
<div>
<table id="tbl_test"></table>
<div id="div_test_pager"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#tbl_test").jqGrid({
datatype: "local",
colNames: ['Col 1', 'Col 2'],
colModel: [
{ name: 'col1', index: 'col1', editable: true, width: 200 },
{ name: 'col2', editable: true, width: 100 }
],
pager: "#div_test_pager",
height: 200,
caption: "Test"
});
$("#tbl_test").jqGrid("navGrid", "#div_test_pager",
{ edit: false, add: true, del: false, search: false, refresh: false }
/*no difference*/
//,{}, {modal: false}
);
});
</script>
</body>
</html>
Appreciate any help!
(Can Oleg or someone knows give a hint? Thanks a lot.)
The word model you use is not correct - replace it with the word modal in the settings and in the calling of the dialog function
Is it possible to click on an icon/image and then get a kendo dropdown list to appear below he icon/image?
(In other words I only want do use the popup of a dropdownlist, I would like the input editor to be hidden and replace it with an image, when the user clicks the image the popup dropdownlist should appear)
The closest I have come to a solution is to hide the input element
<div style="display:none;"> <input id="dropdownlist"/> </div>
And when image/icons is clicked I open kendo dropdownlist popup
$("#dropdownlist").data("kendoDropDownList").open();
The problem with this is that the popup menu is displayed in the top left corner, I have not found a way to make the popup appear below icon/image.
Here is a little snippet of code that might suite your needs:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<div style="position: absolute; visibility: hidden;">
<input id="dropdownlist" style="height: 100px;" />
</div>
<img src="https://cdn2.scratch.mit.edu/get_image/gallery/1778374_200x130.png" style="height: 100px; position: absolute;" onclick="$('#dropdownlist').data('kendoDropDownList').open()" />
<script>
$("#dropdownlist").kendoDropDownList({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1
});
</script>
</body>
</html>
Notice that the image height and the dropdown height should be the same.
I am using jqGrid 4.6.0.
Implemented Column chooser feature using the below code.
I am using
jquery-ui-1.11.1.js
jquery.multi-select.js
jquery-ui.css
multi-select.css
$.extend($.ui.multiselect, {
locale: {
addAll: 'Make all visible',
removeAll: 'Hidde All',
itemsCount: 'Avlialble Columns'
}
});
$.extend(true, $.jgrid.col, {
width: 500,
msel_opts: { dividerLocation: 0.5 }
});
$grid.jqGrid('navButtonAdd', "#p" + $grid.attr("id"), {
caption: "",
buttonicon: "ui-icon-calculator",
title: "Choose columns",
onClickButton: function () {
$(this).jqGrid('columnChooser',
{
width: 260,
height: 280,
classname: "column-chooser",
msel_opts: { //multiselect options
autoOpen: true,
header: true,
height: "auto",
classes: "column-chooser",
beforeclose: function () { return false; } //keep multiselect drop down open
}
});
}
});
The column chooser popup is showing up without available columns and make all columns visible options..
It just has one option available i.e., select columns..
Can somebody help..
thanks in advance...
It's very suspected where you get jquery.multi-select.js and multi-select.css. I suppose that you get wrong files. jqGrid which you downloads from trirand contains plugins subdirectory with ui.multiselect.js and ui.multiselect.css. So the typical contain of <head> of the page where you use jqGrid with columnChooser could be the following
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css"/>
<link rel="stylesheet" type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css"/>
<link rel="stylesheet" type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.js"></script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
I posted the bug report recently where I described some small steps to make "Remove all" and "Add all" working in case of usage the last versions of jQuery and jQuery UI. The modified versions of ui.multiselect.js and jquery.jqGrid.src.js you can download from here and here.
The demo can be used as prototype for the usage of columnChooser.
I was using a different Multiselect js and css files..
I downloaded the JQGRID 4.6.0 package.. it gave me the ui.multiselect.css and ui.multiselect.js files.. i added them in my project..
now the column chooser popup is showing up with available columns and make all columns visible options.. thank you Oleg.
I use kendoui window to create a dialog
in first time that i click on some button the kendo window open end of my page
in other time it's work good
my window div is below the body tag
plz help
$('#myModal').html(response);
var accessWindow = $("#myModal").kendoWindow({
actions: ["Maximize", "Close"], /*from Vlad's answer*/
draggable: false,
resizable: false,
title: "ویرایش سوال",
width: "90%",
visible: true
}).data("kendoWindow").center().open();
Your example seems to work fine to me (http://jsfiddle.net/OnaBai/uspmW/) and it should not happened that your window ends placed outside body tag since you are explicitly saying where it should be.
Your full HTML should be something like:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<link href="/styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="/styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/kendo.all.min.js" type="text/javascript"></script>
</head>
<body>
Type the text to add as response here : <input type="text" id="response" class="k-widget k-textbox"/></br>
<button id="button" class="k-button">Show response</button>
<div id="myModal"></div>
<script>
$("#button").on("click", function () {
var response = $("#response").val();
$('#myModal').html(response);
var accessWindow = $("#myModal").kendoWindow({
actions : ["Maximize", "Close"], /*from Vlad's answer*/
draggable: false,
resizable: false,
title : "ویرایش سوال",
width : "90%",
visible : true
}).data("kendoWindow").center().open();
});
</script>
</body>
</html>
As a recommendation, try not creating a new window each time you want to display it. Consider creating it at the beginning or the first time that you need it and then open it each time that you need it.