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.
Related
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 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();
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 have a edit template using a list view and want a drop down list that is populated from a remote source. But the drop down list just shows the loading icon.
Here is the DropDownList DataSource.
var dsTitles = new kendo.data.DataSource({
transport: {
read: "../data/options/",
dataType: "json"
},
serverFiltering: true,
filter: [{
field: "category_opt",
operator: "eq",
value: "title"
}]
});
and here is what I'm putting in the edit template
<input name="title_clt"
data-bind="value:title_clt"
data-value-field="value_opt"
data-text-field="label_opt"
data-source="dsTitles"
data-role="dropdownlist"
required
validationMessage="Required" />
any help would be great.
Your code is basically fine but there a couple of question that you might have missed.
Since you are defining the DataSource saying data-source="dsTitles" as part of the HTML the order on how you define things is pretty important.
The first thing that gets defined is the HTML. Which means that dsTitle should be global.
Then, after the input is processed is when you should call kendo.init.
So, it should be something like this:
<html>
<head>
<meta charset="UTF-8"/>
<title>OnaBai - KendoUI DrowDownList</title>
<!-- Kendo UI Web styles-->
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<!-- Kendo UI Web scripts-->
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<!-- Web Page styling -->
<style type="text/css">
</style>
<script type="text/javascript">
var dsTitles = new kendo.data.DataSource({
transport: {
read: "../data/options/",
dataType: "json"
},
serverFiltering: true,
filter: [{
field: "category_opt",
operator: "eq",
value: "title"
}]
});
$(document).ready(function () {
kendo.init("input");
});
</script>
</head>
<body>
<input name="title_clt"
data-bind="value:title_clt"
data-value-field="value_opt"
data-text-field="label_opt"
data-source="dsTitles"
data-role="dropdownlist"
required
validationMessage="Required" />
</body>
</html>
I think the answer might be as simple as using a Kendo DropDownListFor, which will be populated with the given data.
hello i trying for two weeks that my jqgrid works without success. i dont know much about this lenguaje. i make that the grid bring me the data from de database but every time that i edit or add a new row the change is no applie to the database only change in the screen. then i refresh the page the chage desappears. help!!!!
this is the datos.js
jQuery("#grid_id").jqGrid({
url:'conec.php',
datatype: "json",
colNames:['id','name', 'record_id', 'created_at','updated_at','deleted_at'],
colModel:[
{name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10}},
{name:'name',index:'name', width:80,editable:true,editoptions:{size:10}},
{name:'record_id',index:'record_id', width:90,editable:true,editoptions:{size:25}},
{name:'created_at',index:'created_at', width:60, align:"right",editable:true,editoptions:{size:10}},
{name:'updated_at',index:'updated_at', width:60, align:"right",editable:true,editoptions:{size:10}},
{name:'deleted_at',index:'deleted_at', width:60,align:"right",editable:true,editoptions:{size:10}},
],
rowNum:10,
rowList:[10,20,30],
pager: '#gridpager',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"Navigator Example",
editurl:"editurl.php",
height:210});
jQuery("#grid_id").jqGrid('navGrid','#gridpager',
{}, //options
{height:280,reloadAfterSubmit:false}, // edit options
{height:280,reloadAfterSubmit:false}, // add options
{reloadAfterSubmit:false}, // del options
{} // search options
);
this is the index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui- 1.8.6.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<style type="text">
html, body {
margin: 0; /* Remove body margin/padding */
padding: 0;
overflow: hidden; /* Remove scroll bars on browser window */
font-size: 75%;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
</head>
<body>
<table id="grid_id"></table>
<div id="gridpager"></div>
</body>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="datos.js" type="text/javascript"></script>
</html>
this is the conec.php (the conection)
<?php
include_once 'lib.php';
$conexion= mysql_connect('localhost', 'root', '');
mysql_select_db("taskmaker", $conexion);
$result = mysql_query("SELECT id, name, record_id, created_at, updated_at, deleted_at FROM Team", $conexion);
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$responce->rows[$i]['id']=$row[id];
$responce->rows[$i] ['cell']=array($row[id],$row[name],$row[record_id],$row[created_at],$row[updated_at],$row[d eleted_at]);
$i++;
}
echo json_encode($responce);
?>
this is the lib.php
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpassword = "";
$database = "taskmaker";
?>
thats all.
jqGrid supports different ways to edit the contain of the grids: cell editing, inline editing, form editing. Your current code use form editing. You can see the editing live in the demo. Choose on the left tree part the item "Live Data Manipulation" and then "Navigator". See also "Row Editing" / "Input types" to understand how inline editing can look like.
After the user finish the row editing and press "Submit" button the information about the row added/changed/deleted will be posted to the URL defined by the editurl parameter of the jqGrid (editurl.php in your case). Together with the row data, as the additional parameter, will be posted oper which will be "add", "edit" or "del" string and the id which can be "_empty" in case of adding a new row. In case of adding of the new row your server code have to return the id of the new added row. It is very helpful to use Fiddler or Firebug to see what will be send to and returned from the server during the row editing.
So the implementation of the editurl.php is what you miss in your server code.