We Keep Coding

How to implement MultiSelect dropdown list in MVC

I am working on a web page where I need to create and fill a multiselect dropdown for states based on selected country.
I am using this plugin.
Html :-
#Html.DropDownListFor(m => m.CountryId, Model._CountryList, new { #class = "form-control countries", #tabindex = "12", #id = "ddlCorrCountry" })
#Html.DropDownListFor(m => m.StateIds, Model._StateList, new { #class = "form-control ms-parent multiselectmulticolumnddlstate nopadd states", #tabindex = "13", #id = "ddlCorrState" })
jQuery (Update):-
function makeMultiSelect() {
$('select.multiselectmulticolumnddlstate').multipleSelect({
multipleWidth: 190,
width: '100%',
filter: true,
multiple: true,
position: 'bottom',
animate: 'none', // 'none', 'fade', 'slide'
placeholder: '-- Select --',
selectAllText: 'Select All',
allSelected: 'All Selected',
countSelected: '# of % selected',
noMatchesFound: 'No matches found',
onClick: function () {
},
onOptgroupClick: function () {
},
onUncheckAll: function () {
},
onClose: function () {
}
});
}
$(document).ready(function () {
makeMultiSelect();
$('body').on('change', '#ddlCorrCountry', function () {
GetAllStates();
});
function GetAllStates() {
try {
$('#ddlCorrState').empty();
var params = { "SId": $('#ddlCorrCountry').val(), "All": false }
$.ajax({
type: "POST",
url: "/utility/getstates",
data: JSON.stringify(params),
async: false,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
debugger;
$.each(data, function () {
$('#ddlCorrState').append("<option value=" + this.Value + ">" + this.Text + "</option>");
});
makeMultiSelect();
},
error: function (jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText + ' Error:' + errorThrown);
}
});
}
catch (ex)
{ alert('EX:' + ex.message); }
}
});
On page load I am getting below first image which is correct, but while changing/selecting any country its totally distorts as shown in image 2 and even state dropdown is not opening by clicking on it.
Note here I am calling a partial view in modal popup, TIA.

Just need to call plugin function again after rebinding the dropdown.
function makeMultiSelect() {
$('select.multiselectmulticolumnddlstate').multipleSelect({
multipleWidth: 190,
width: '100%',
filter: true,
multiple: true,
position: 'bottom',
animate: 'none', // 'none', 'fade', 'slide'
placeholder: '-- Select --',
//addTitle: 'Sunil',
//delimiter: ', ',
//minimumCountSelected: 3,
selectAllText: 'Select All',
allSelected: 'All Selected',
countSelected: '# of % selected',
noMatchesFound: 'No matches found',
onClick: function () {
//$("#<%= hdnfld.ClientID %>").val("1");
},
onOptgroupClick: function () {
//$("#<%= hdnfld.ClientID %>").val("1");
},
onUncheckAll: function () {
//$("#<%= hdnfld.ClientID %>").val("1");
//unSelectAll();
},
onClose: function () {
//var hdnVal = $("#<%= hdnfld.ClientID %>").val();
//if (hdnVal == "1") {
// $('#cover').show();
// $(".myhdnBtn").click();
//}
}
});
}
$(document).ready(function () {
makeMultiSelect();
$('body').on('change', '#ddlCorrCountry', function () {
GetAllStates();
});
function GetAllStates() {
debugger;
$('#ddlCorrState').find('option').remove(); $('#ddlCorrState').empty();
$.ajax({
type: "post", url: "/city/getstates", data: { CountryId: $('#ddlCorrCountry').val(), IsAll: true }, datatype: "json", traditional: true, success: function (data)
{
$.each(data, function (index, value) {
$('#ddlCorrState').append('<option value="' + value.Value + '">' + value.Text + '</option>');
});
makeMultiSelect();
}
});
}

Calling href with Angular to open modal

Context
I´m working in this Tutorial, is about CRUD with DataTable, but difference I´m using Asp.Net WebApi with Angular
I´m into step 9, where tutorial made partial views for pop-up window, but I don´t use partial view, instead it, I use Angular Views
Problem
I don´t know how to replace that partial View for my Angular View
Code
View
<table class="table table-striped table-hover table-bordered dt-bootstrap no-footer" id="tabla_catalogos" role="grid" aria-describedby="sample_editable_1_info">
<thead>
<tr>
<th class="hidden"></th>
<th style="width: 200px;"> Codigo </th>
<th> Nombre </th>
</tr>
</thead>
<tbody></tbody>
</table>
JS
$('#tabla_catalogos')
.DataTable({
searching: true,
dom: 'ftpB',
autoWidth: false,
buttons: [
//'excelHtml5', 'csv', 'print'
],
paging: true,
select: {
style: 'single'
},
info: false,
ordering: true,
"processing": true,
ajax: {
method: 'GET',
url: "../../api/Catalogo/GetCatalogoRegistro/" + selected.ID,
dataSrc: '',
beforeSend: function(request) {
request.setRequestHeader("Version", $scope.usuario.Version);
request.setRequestHeader("Origen", 'Web');
}
},
columns: [
{ data: 'Catalogo', visible: false, searchable: false },
{ data: 'Codigo' },
{ data: 'ID', visible: false, searchable: false },
{ data: 'Nombre' },
{ data: 'Padre', visible: false, searchable: false },
{
data: 'ID',
render: function(data){
return '<a class="popup" href="root.detalleregistros'+data+'">Editar</a>';
}
},
{
data: 'ID',
render: function (data) {
return '<a class="popup" href="root.detalleregistros' + data + '">Eliminar</a>';
}
}
],
pageLength: 10 //,
//pagingType: "simple_numbers"
,
language: {
"emptyTable": "No se encontraron registros",
"zeroRecords": "No encontraron coincidencias",
"search": "Buscar: "
}
});
$('.tablecontainer').on('click', 'a.popup', function (e) {
e.preventDefault();
OpenPopup($(this).attr('href'));
});
function OpenPopup(pageUrl) {
var $pageContent = $('<div/>');
$pageContent.load(pageUrl, function () {
$('#popupForm', $pageContent).removeData('validator');
$('#popupForm', $pageContent).removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse('form');
});
$dialog = $('<div class="popupWindow" style="overflow:auto"></div>')
.html($pageContent)
.dialog({
draggable: false,
autoOpen: false,
resizable: false,
model: true,
title: 'Popup Dialog',
height: 550,
width: 600,
close: function () {
$dialog.dialog('destroy').remove();
}
})
$('.popupWindow').on('submit', '#popupForm', function (e) {
var url = $('#popupForm')[0].action;
$.ajax({
type: "POST",
url: url,
data: $('#popupForm').serialize(),
success: function (data) {
if (data.status) {
$dialog.dialog('close');
oTable.ajax.reload();
}
}
})
e.preventDefault();
})
$dialog.dialog('open');
}
};
Angular Service, invoke view:
.state('root.detalleregistros', {
url: "detalleRegistros.html",
templateUrl: "../SPA/administrador/catalogos/detalleRegistros.html",
controller: "detalleRegistrosCtrl",
authenticate: true
})
When I clic into url as mi code '<a class="popup" href="root.detalleregistros'+data+'">Editar</a>'; it redirect me to http://localhost:55720/admin/root.detalleregistros/1
instead
http://localhost:55718/admin/#/detalleRegistros.html
What I´am doing wrong there? help is very appreciated. Regards
I try '<a class="popup" ui-sref="root.detalleregistros({data:11})">Editar</a>'; as #Agam Banga comment but modal just don´t open, I need to add something to table view? or what can be wrong there?

You have defined the state for "root.detalleregistros". To Open this state, you need to use the inbuild directive of ui-router which is ui-sref.
<a ui-sref="root.detalleregistros">Editar</a>
Also, if you want to pass params, you can use
<a ui-sref="root.detalleregistros({data:11})">Editar</a>

Open the Results of Autocomplete in Fancybox

I have the following autocomplete searchbox code
$("#searchbox").autocomplete({
source: function(request,response) {
$.ajax({
type: "POST",
dataType: "json",
data: { term: request.term },
url: "/Settings/Find?searchString="+request.term,
success: function(data) {
response($.map(data,function(item) {
return { label: item.Name ,value: item.Type, ID: item.ID};
}
))
}
})
},
messages: {
noResults: "No Results",results: "Results"
},
select: function(e, ui) {
window.location.assign('/Item/Details/'+ui.item.ID);
}
},
});
When the user clicks on the autocompleted items, I redirect them to the detail page of the item using this
window.location.assign('/Item/Details/'+item.ID);
Now, I want to display the details of the item in a fancybox without redirect the user to another page. So when the user clicks on the autocompleted results, a fancybox opens up with the details of the selected item.
Here is the fancybox code That i would like to call.
$('.fancyboxdisplay').fancybox({
fitToView: false,
autoSize: false,
closeClick: false,
width: '550px',
height:'680px',
padding: 15,
closeBtn:true,
'afterClose': function() {
window.location.reload();
},
});
I looked everywhere for a possible solution but i can't figure it out. Can you please help !
Thanks

Within your select setting, try replacing window.location.assign by the fancybox script like :
select: function (e, ui) {
// window.location.assign('/Item/Details/' + ui.item.ID);
$.fancybox({
href: '/Item/Details/' + ui.item.ID,
type: "iframe",
fitToView: false,
autoSize: false,
closeClick: false,
width: 550,
height: 680,
padding: 15,
closeBtn: true,
afterClose: function () {
window.location.reload();
}
});
}
It's assumed you have previously loaded fancybox js and css files

JSON JavaScript Hyperlink

How can I create a hyperlink using date retrieved by JSON/JavaScript?
{ "mData": "FileRef" } - here I would like to have a hyperlink instead only text value.
Below JavaScript function used by me.
<script type="text/javascript">
function LoadZipCodes(state)
{
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('SharePointList')/items?$select=FileRef",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.done(function (data,textStatus, jqXHR){
$('#example').dataTable({
"bDestroy": true,
"bProcessing": true,
"aaData": data.d.results,
"aoColumns": [
{ "mData": "FileRef" }
]
});
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving Tasks: " + jqXHR.responseText);
});
}
</script>

jqGrid open dialog in front of edit/add dialog

I can achieve the opening of a new dialog, but is opens behind the edit-/add-dailog. How can I make it opening in front of the edit-/add-dialog? If I do the same with an alert-box it works instantially.
<style>
.dialogue{ z-index: 1000; }
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#A').dialog({
autoOpen: false,
buttons: {
"Open Dialog B": function(){
$('#B').dialog('open');
}
}
});
$('#B').dialog({
autoOpen: false
});
jQuery("#list").jqGrid({
sortable: true,
url:'{{=URL('get',args=table)}}',
datatype: 'json',
mtype: 'GET',
colNames:{{=h}},
colModel :{{=b}},
ondblClickRow: function (rowid) {
myClickHandle.call(this, rowid);
},
jsonReader: {
repeatitems: false
},
width: 1024,
height: '100%',
pager: '#gridpager',
rowNum:10,
rowList:[10,20,30],
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
gridview:true,
caption: '{{=table}}',
editurl:'{{=URL('adu',args=table)}}'
});
jQuery("#list").jqGrid('navGrid','#gridpager',
{edit:true},
{ beforeShowForm: function(form) {
$('.basic').live('click',function() {
$('#A').dialog("open");
});
},
width:500,height:'100%',
reloadAfterSubmit:false,
closeAfterEdit:true}, // edit options
{width:500,height:'100%',
closeAfterAdd:true}, // add options
{reloadAfterSubmit:false,
closeAfterSubmit:true}, // del options
{} // search options
);
jQuery("#list").jqGrid('navButtonAdd','#gridpager',{
caption: "",
title: "Reorder Columns",
onClickButton : function (){
jQuery("#list").jqGrid('columnChooser',{
done: function(perm) {
if (perm) {
var gridWidth = this.jqGrid('getGridParam', 'width');
this.jqGrid('setGridWidth', gridWidth);
this.jqGrid('remapColumns', perm, true);
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: "{{=URL('ps',args=(table,id))}}",
data: $('#list').jqGridExport({
exptype: 'jsonstring',
root: 'Settings'
})
});
}
}
});
}
});
});
</script>
<table id="list"></table>
<div id="gridpager">
</div>
<div title="Dialog A" id="A" class="dialogue">Dialog A</div>
<div title="Dialog B" id="B" class="dialogue">Dialog B</div>
Greets Kluther

Try using the modal option in the dialogues (jsFiddle http://jsfiddle.net/r4meJ/):
$('#A').dialog({
autoOpen: false,
modal: true,
buttons: {
"Open Dialog B": function(){
$('#B').dialog('open');
}
}
});
$('#B').dialog({
autoOpen: false,
modal: true
});
This should provide what you require