Here is the reference
Example of Server filtering in Kendo UI MultiSelect widget
Now the thing is, I want to add selected item after it's being loaded. Since the data source is remote (acts like autocomplete), I can't attach it directly
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/multiselect/serverfiltering">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" >
<div class="demo-section k-header">
<h4>Products</h4>
<select id="products"></select>
</div>
<script>
$(document).ready(function() {
$("#products").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "airline_name",
dataValueField: "airline_value",
autoBind: false,
dataSource: {
serverFiltering: true,
transport: {
read: {
url: "/**Server url **/",
}
}
}
});
intially dataSource is empty ...Multiselect is loaded
when is execute following code:
$("#products").data("kendoMultiSelect").value([{airline_name:"AA", airline_value:"BB"}]);
//above statemnt doesnt display in selected value but shows value when called value() function
});
</body>
</html>
THE URL gets JSON Array and it works like when I enter letter that is sent to controller and controller send requested matched values in JSON array.
Now I cannot use below statement to add selected items:
$("#products").data("kendoMultiSelect").values(json_array) //doesnt work
THERE IS NO DATASOURCE AT MULTISELECT LOAD . IN My case VALUES ARE NOT LOADED ALREADY . The above is just an example
In the following code snippet you can see your example working. It is basically your code with button that selects two of the elements of the DataSource.
What you should do is define json_array as an array of the ids (in your case ProductID) if you want to select them using the text field (Chai, Aniseed Syrup..., then you should define in kendoMultiSelect that the dataValueField is ProductName and not ProductId.
$(document).ready(function() {
$("#products").kendoMultiSelect({
placeholder: "Select products...",
dataTextField: "ProductName",
dataValueField: "ProductID",
autoBind: false,
dataSource: {
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
}
}
}
});
$("#sel").on("click", function() {
$("#products").data("kendoMultiSelect").value([3, 1]);
});
});
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.902/styles/kendo.material.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.902/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.902/js/kendo.all.min.js"></script>
<button id="sel" class="k-button">Select Chai & Aniseed</button>
<h4>Products</h4>
<select id="products"></select>
Related
I'm creating a leave system and I've linked the database with Asp.net. Inside the mvc project there's an HTML page that I use as my landing page, it has 2 buttons. One button for 'Admin' and other for 'Staff'. I want to hide some of the text-boxes if the 'Staff' button is clicked. How do I go about achieving this?
I have created sample html, you can use jquery to show and hide your textbox based on click
if you are using mvc then your textbox is #Html.TextBox or
with asp.net set ClientIDMode="Static" - check here
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<input type="text" id="AdminTxt" />
<button id="showAdmin">Show Admin</button>
<button id="showStaff">Show Staff</button>
<script>
$( "#showAdmin" ).click(function() {
$("#AdminTxt").show();
});
$( "#showStaff" ).click(function() {
$("#AdminTxt").hide();
});
</script>
</body>
</html>
You can use the attach en detach functions with JQuery.
So if you have a button called Admin
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>detach demo</title>
<style>
p {
background: yellow;
margin: 6px 0;
}
p.off {
background: black;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
how are
<p>you?</p>
<button>Attach/detach paragraphs</button>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
if ( p ) {
p.appendTo( "body" );
p = null;
} else {
p = $( "p" ).detach();
}
});
</script>
</body>
</html>
According to the polymer documentation for app-localize-behavior
Each element that displays content to be localized should add Polymer.AppLocalizeBehavior. All of these elements share a common localization cache, so you only need to load translations once.
In the following snippet (adapted from this answer) does not find the shared resources in the tag
Maybe I missed something ?
<!DOCTYPE html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="https://rawgit.com/yahoo/intl-messageformat/d361003/dist/intl-messageformat.min.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="app-localize-behavior/app-localize-behavior.html">
</head>
<body>
<x-local-translate></x-local-translate>
<dom-module id="x-local-translate">
<template>
<div>
<span title="english">🇬🇧</span>
<paper-toggle-button on-change="_toggle" id="switch"></paper-toggle-button>
<span title="french">🇫🇷</span>
</div>
<div>
<h4>Outside Repeater</h4>
<div>
<div>{{localize('greeting')}}</div>
</div>
<h4>Template Repeater Items</h4>
<template is="dom-repeat" items="{{things}}">
<div>{{localize('greeting')}}</div>
</template>
<x-local-test></x-local-test>
</div>
</template>
<script>
Polymer({
is: "x-local-translate",
behaviors: [
Polymer.AppLocalizeBehavior
],
properties: {
things: {
type: Array,
value: function() {
return [1, 2, 3];
}
},
/* Overriden from AppLocalizeBehavior */
language: {
value: 'en',
type: String
},
/* Overriden from AppLocalizeBehavior */
resources: {
type: Object,
value: function() {
return {
'en': {
'greeting': 'Hello!'
},
'fr': {
'greeting': 'Bonjour!'
}
};
}
}
},
_toggle: function() {
this.language = this.$.switch.checked ? 'fr' : 'en';
}
});
</script>
</dom-module>
<dom-module id="x-local-test">
<template>
<h4>Inside x-local-test</h4>
<div>{{localize('greeting')}}</div>
</template>
<script>
Polymer({
is: "x-local-test",
behaviors: [
Polymer.AppLocalizeBehavior
],
properties: {
things: {
type: Array,
value: function() {
return [1, 2, 3];
}
}
},
});
</script>
</dom-module>
</body>
</html>
Now in the following fiddle, I made it work by passing the resources and language object as x-local-test properties.
https://jsfiddle.net/g4evcxzn/2/
But it should work without that
According the ideas of Jose A. and Jean-Rémi here some example code for copy/paste:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-localize-behavior/app-localize-behavior.html">
<script>
MyLocalizeBehaviorImpl = {
properties: {
language: {
value: 'de'
}
},
attached: function() {
this.loadResources(this.resolveUrl('locales.json'));
}
};
MyLocalizeBehavior = [MyLocalizeBehaviorImpl, Polymer.AppLocalizeBehavior];
</script>
Include the behavior file in all your custom components and add the behavior:
<link rel="import" href="./my-localize-behavior.html">
......
behaviors: [
MyLocalizeBehavior
],
I took a look at AppLocaleBehavior's demo and if you actually look at the repo, they use two elements for it, one that loads the resources from an external json and one more that has them locally defined and in the demo, the don't seem to be sharing a cache, just as what's happening to you.
This struck me as odd seeing that they do mention the cache, so I took a look at the behavior's code and found out something interesting, the cache actually exists but it seems its purpose is to prevent loading the same external resource multiple times rather than sharing the resources property.
So, if you want to share localization resources on multiple elements the way to go would be having a common resource (let's say we call it locales.json) and call the loadResources function on every one of them (Since the request is cached you don't need to worry about loading the file multiple times). You could do it on the attached callback like this:
attached: function () {
this.loadResources(this.resolveUrl('locales.json'));
}
I have a Kendo UI dropdownlist, which using Kendo MVVM features:
<select id="SearchPicker"
data-bind="source: LocationTypeDropDown, value: LocationType"
data-role="dropdownlist"
data-value-field="Code"
data-text-field="Name"
data-option-label="All"
data-value-primitive="true"
data-cascade-from="ddlSite"
data-auto-bind="false">
</select>
But for display text of the items, indeed I want a format like Code - Name, and I wonder how can I change the display template?
In MVC I know there is a .ClientTemplate() method which enable me to write .ClientTemplate("#=Code# - #=Name#"), but as I am using MVVM features, how can I acheive something like this?
EDIT
Other than the drop down list item options, is it possible that the selected value (like "Oranges" below)
be shown using template as well? ("2 - Oranges")
Try with this solution JSFiddle
var viewModel = kendo.observable({
selectedProduct: null,
onChange: function () {
var selectedFruit = this.get("selectedFruit");
alert("Id: " + selectedFruit.id + " - Name: " + selectedFruit.name);
},
fruits: new kendo.data.DataSource({
data: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" },
{ id: 3, name: "Bananas" }],
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" }
}
}
}
})
});
kendo.bind("#example", viewModel);
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.rtl.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.silver.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2016.1.112/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2016.1.112/js/kendo.all.min.js"></script>
<div id="example">
<p>Kendo UI DropDownList</p>
<select data-role="dropdownlist"
data-option-label="Select Item..."
data-bind="value: selectedFruit,source: fruits, events: {
change: onChange
}" data-template="select-template" data-value-template="select-template" data-text-field="name" data-value-field="id">
</select>
<script id="select-template" type="text/x-kendo-template">
<option value="#: id #">#: id # - #: name #</option>
</script>
</div>
From what I read, the $(#selector).dialog("destroy") is supposed to remove all the added jquery ui elements and return the element, the dialog attached to, back to its original DOM position. I wrote a test html and it is not doing either. In firebug, after I clicked close, it simply makes it becomes invisible (display:none). Am I doing something wrong? Below is my test html:
<html>
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<style type="text/css">
.modalDialogPopup {
display:none;
border:1px solid #4f8cc5;
}
</style>
<script src="/resources/default/1_0/js/jquery.js?v=081814" type="text/javascript" ></script>
<script src="/resources/default/1_0/js/jquery-ui-1.8.20.custom.min.js?v=081814" type="text/javascript" ></script>
<script>
var testPopUp = {
popUpID : '#testPopUp',
close:
function() {
$(this.popUpID).dialog("close");
},
open:
function() {
$(this.popUpID).dialog({
modal: true,
autoOpen: false,
title: 'Test Outer Pop Up',
dialogClass:'modalDialogPopup',
resizable: true,
close: function( event, ui ) {
$(this.popUpID).dialog( "destroy" );
alert('outer Pop Up Destroyed? '+$(testPopUp.popUpID).attr("class"));
}
});
$(this.popUpID).dialog("open");
}
}
$(document).ready(function() {
});
</script>
</head>
<body>
<div id="OuterDiv">
<a href="javascript:void(0)" onclick="testPopUp.open(); return false;" >Open PopUp</a>
<div id="testPopUp" class="modalDialogPopup">
<div id="testPopUpDiv" style="overflow: auto; display: table;">
<div id="testPopUpContent" >
This is a Pop Up Test
<br/>
<br/>
<a href="javascript:void(0)" onclick="testPopUp.close(); return false;" >Close PopUp</a>
</div>
</div>
</div>
</div>
</body>
</html>
Found two problems that cause the destroy to not working:
1) on this line ==>
close: function( event, ui ) {$(this.popUpID).dialog( "destroy" );
I shouldn't use this.popUpID. It should be testPopUp.popUpID, like below,
close: function( event, ui ) {$(testPopUp.popUpID).dialog( "destroy" );
Once I did that, it starts to remove all the added jquery ui elements. But it still does not put the element (id="testPopUp") back to it's original DOM position, which is resolved after I done #2 below.
2) Change my jquery ui version to jquery-ui-1.10.4.custom.min.js.
I am having an issue working with jaGrid and ASP.NET MVC 2. Everything is working, but when I select a row I get this error on FireBug: uncaught exception: jqGrid - No such method: restoreRow.
Debugin Js I realize that error happend here:
onSelectRow: function(id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
I think, the problem is the jqGrid libraries include (or the include order). This is my Index.aspx page.
<%--CSS Files--%>
<link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" />
<%--jQuery Library--%>
<script type="text/javascript" src="../../Scripts/jquery-1.4.4.min.js"></script>
<%--Must load language tag BEFORE script tag--%>
<script type="text/javascript" src="../../Scripts/grid.locale-es.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../../Scripts/grid.jqueryui.js"></script>
<script type="text/javascript" src="../../Scripts/grid.base.js"></script>
<script type="text/javascript" src="../../Scripts/grid.common.js"></script>
<script type="text/javascript" src="../../Scripts/grid.formedit.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.fmatter.js"></script>
<script type="text/javascript" src="../../Scripts/grid.custom.js"></script>
<script type="text/javascript" src="../../Scripts/jqDnR.js"></script>
<script type="text/javascript" src="../../Scripts/jqModal.js"></script>
<script type="text/javascript" src="../../Scripts/grid.import.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<table id="tableAccidentes" border=0>
<tr>
<td><img alt="" src="../../images/icono_victima.png" /></td>
<td><h2>Accidentes Registrados</h2></td>
</tr>
</table>
<script type="text/javascript">
var lastsel;
var Plantas = ['Pablo Podesta', 'Pilar', 'Tigre', 'Otra'];
jQuery(document).ready(function() {
jQuery("#list").jqGrid({
url: '/Accidentes/ListarAccidentes',
datatype: "json",
colNames: ['Fecha', 'Detalle', 'Accidentado', 'Planta'],
colModel: [
{ name:'Fecha', index:'Fecha', width:150, align:'left',
editable:true },
{ name:'Detalle', index:'Detalle', width:150, align:'left',
editable:true },
{ name:'Accidentado', index:'Accidentado', width:200,
align:'left', editable:true },
{ name:'planta', index:'planta', width:150, align:'left',
editable:true, edittype:"select",
editoptions: { value:Plantas} }
],
onSelectRow: function(id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: "/Accidentes/GridSave",
edit: {
addCaption: "Agregar Accidente",
editCaption: "Editar Accidente",
bSubmit: "Guardar",
bCancel: "Cancelar",
bClose: "Cerrar",
saveData: "Se modifico el registro! ¿guardar los cambios?",
bYes: "Si",
bNo: "No",
bExit: "Cancelar"
},
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '/scripts/themes/coffee/images',
caption: 'Accidente'
}).navGrid('#pager', { edit: true, add: true, search: false, del: false },
{ closeAfterAdd: true, closeAfterEdit: true });
// add custom button to export the data to excel
jQuery("#list").jqGrid('navButtonAdd','#pager',{
caption:"",
onClickButton : function () {
jQuery("#list").jqGrid('excelExport',
{ url: '/Accidentes/ExportarAccidentes' });
}
});
});
</script>
<%-- HTML Required--%>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
Please, can someone help me?
The restoreRow and editRow methods, which you use, are defined in the grid.inlinedit.js file and are the part of the inline editing module (see more in the jqGrid documentation). Moreover you should remove the file jquery.jqGrid.min.js to avoid having definitions of the same functions twice. Because the method restoreRow was not defined in the jquery.jqGrid.min.js which you use you use probably wrong downloaded jqGrid version. You should download the jqGrid one more time and be sure that you check "Inline Editing" module. If you open jquery.jqGrid.min.js file in the text editor you will see in the comment at the begining of the file all modules which was the part of the download.
Some additional small remarks: in the documentation is described which parameters of the colModel are default. For example, width:150 and align:'left' have defaout values, so you can remove there from the column definition.
The value property for "select" type of the editoptions which you use is wrong. The Plantas should be defined as
var Plantas = { 'Pablo Podesta':'Pablo Podesta', Pilar:'Pilar',
Tigre:'Tigre', Otra:'Otra'};
or as
var Plantas = 'Pablo Podesta:Pablo Podesta;Pilar:Pilar;Tigre:Tigre;Otra:Otra';
See the documentation for details.
The parameter imgpath is deprecated and should be removed. Class "scroll" is also deprecated and the HTML fragment for the jqGrid can be reduced to
<table id="list"></table>
<div id="pager"></div>
See an example here.
The parameter edit is not exist in the jqGrid it is the parameter of editGridRow from the form editing. You can define it as the part of navGrid parameters prmEdit and prmAdd. Currently you use only prmEdit. Probably the usage of grid.locale-XX.js from the i18n directory will make the usage of edit parameter unneeded.