Kendo UI Window widget - Dynamic title using templates - javascript

Is it possible to have dynamic window titles using templates?
Something like this:
wnd = $("#details").kendoWindow({
title: #= ItemName #,
modal: true,
visible: false,
resizable: false,
width: 300}).data("kendoWindow");
I added ItemName in the title field merely to indicate the concept. Any idea?

You can do it with setOptions api method, something like:
// Setting some options
wnd.setOptions({
title: "dynamic title",
width: "60%"
});
First initialize your window with your code and on some events (button click may be), use window object to set its options.
If its not clear, lets play with example: I am setting the window title on kendo-grid custom command button click:
<div class="k-content">
<div id="noteswindow"></div>
</div>
<script>
$(document).ready(function () {
$("#noteswindow")
.kendoWindow({
actions: ["Refresh", "Maximize", "Minimize", "Close"],
visible: false
})
});
function onNotesClick(e) { // Custom button click
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
rData = dataItem;
// Using same window variable again and again for successive clicks with dynamic content
var nWin = $("#noteswindow").data("kendoWindow");
// Setting some options
nWin.setOptions({
title: "Notes on " + dataItem.AssetOrShotName,
width: "60%"
});
nWin.refresh({
url: "../Task/Notes",
data: { AssignId: rData.Id }
});
nWin.open().center();
}
</script>

This is easy way i have show event title in title header like that
API.get('/Scheduler/GetEventDetailById', detailParams).then(function (data) {
$('.k-window-title').text(data.EventTitle);
});

Related

Mix it up is not working in tab1 but working in another tab i.e tab2 in chrome and mobile devices

on document ready code to call mixitup function
if ($('.tab1').hasClass('active')) {
initialize_mixitup('#mixitup_image_search_gallery', '#switchtogrid', '#switchtolist', '.mix_image', '.image_sort', 'grid', '');
}
$(".tab2").click(function () {
initialize_mixitup('#your_books_image_gallery', '#yourbook_switchtogrid', '#yourbook_switchtolist', '.mix_book', '.book_sort', 'grid', '');
});
function initialize_mixitup(mixitup_container, grid_button, list_button, target_class, sort_class, default_layout, mix_callback) {
var layout = default_layout,
$mixitupContainer = $(mixitup_container),
$gridButton = $(grid_button),
$listButton = $(list_button);
$mixitupContainer.mixItUp({
selectors: {target: target_class, sort: sort_class},
animation: {animateChangeLayout: true, animateResizeTargets: true, effects: 'fade rotateX(-40deg) translateZ(-100px)'},
layout: {containerClass: default_layout},
callbacks: mix_callback
});
Just from this quick look, does your tab1 have a click event defined like tab2?
example:
$(".tab1").click(function () {
initialize_mixitup('#your_books_image_gallery', '#yourbook_switchtogrid', '#yourbook_switchtolist', '.mix_book', '.book_sort', 'grid', '');
});
Issue resolved by replacing the container Id of both the containers with container class.

Kendo - how to close modal window from view

I have a modal window that displays two text boxes (customer id and customer name). When the user clicks on 'save', I'd like to close the modal window. I tried using $('#NewCustomer').hide() but that doesn't seem to close the window. So how do I close a kendo window from a different function from my ViewModel? Any help would be appreciated.
Thanks!
JS
var viewModel = kendo.observable({
ShowNewCustomerForm: function () {
var newCustomerWindow = $('#NewCustomer').kendoWindow({
title: "Add New Customer",
modal: true,
width: 500,
height: 300
}).data("kendoWindow");
newCustomerWindow.center().open();
$('#AddNewCustomerBtn').hide();
},
SaveCustomer: function (e) {
// close #NewCustomer here
$('#NewCustomer').hide();
}....
Kendo Window widget exposes a lot of API. open() & close() methods are available for you to programmatically handle the window.
Here is a demo we have on Kendo Window API methods - http://demos.telerik.com/kendo-ui/window/api
Do take a look at how it has been done in the demo and you can follow the same procedure.
OK -- I was able to figure it out. This is the working code:
var viewModel = kendo.observable({
ShowNewCustomerForm: function () {
var newCustomerWindow = $('#NewCustomer').kendoWindow({
title: "Add New Customer",
modal: true,
width: 500,
height: 300
}).data("kendoWindow");
newCustomerWindow.center().open();
$('#AddNewCustomerBtn').hide();
},
SaveCustomer: function (e) {
// close #NewCustomer here
$("#NewCustomer").closest(".k-window-content").data("kendoWindow").close();
}

MVC4, Render Partial View in Dialog Box with jQuery, How to refresh

I have a partial view that is popping up in a dialog with the code below. However, after the user saves the partial view the data does not refresh in that partial view when I click the ActionLink again until I stop debugging and restart the app. However, the new record is in my databsae. The other issue is when I restart the app I cannot update the record because of the error below. What am I missing? Thanks.
An object with the same key already exists in the ObjectStateManager. The ObjectStateManager cannot track multiple objects with the same key.
The div tag in my View
<div id="assign-dialog"></div>
The ActionLink in the same view
#Html.ActionLink("Assign", "Edit", "Assignment", new { id = Model.InfoId}, new { #class = "assign-modal" })
The jQuery
$(function () {
$(function () {
$('#assign-dialog').dialog({
autoOpen: false,
width: 400,
height: 500,
resizable: true,
modal: true
});
$('.assign-modal').click(function () {
$('#assign-dialog').load(this.href, function () {
$(this).dialog('open');
});
return false;
});
});
The HTTP GET action
[HttpGet]
[Authorize(Roles="Admin")]
public ActionResult ViewAssignment(int id = 0)
{
RequestAssignment query = _assignmentRepository.GetCurrentAssignment(id);
return PartialView("_ViewAssignment", query)
}
UPDATE:
I originally followed the steps in javascript/jquery modal popup dialog MVC 4 / render partial view under the dynamic section of Jasen's answer, but did not know what to put in the "Client Partial, empty for now "
...okay so going off some other posts I have read this is what I was able to come up with, but nothing happens when I click my link.
View html
Assign
<div id="assign-modal">
</div>
jQuery
//Dialog Box for Assignments
$(".dialog-trigger").on("click", function(event) {
event.preventDefault();
var infoId= $(this).data("infoId");
$.ajax({
url: "RequestAssignment/Edit/" + infoId,
type: "GET"
})
.done(function(result) {
$("#assign-modal").html(result).dialog("open");
});
});
so after some long searching, I decided to use Ajax.ActionLink. I know there are better ways out there, but this one was working for me. I want to thank #MattBodily for all the help along the way.
#Ajax.ActionLink("Approve", "QuickAssign", "Assignment", new { id = Model.InfoId}, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, OnSuccess = "openDialog" })
then my javascript function
function openDialog() {
//set the diaglog properties
$("#result").dialog({
title: 'Assign',
width: 550,
height: 'auto',
modal: true
});
$("#result").dialog("open");
}

how to call alloy ui on click function for all elements with same css class name

What I want is that I have few links like
sample Link 1 sample Link 2
and I want to call the static html when user clicks the link. For that I have written a code
AUI().ready(
'aui-aria',
'aui-dialog',
'aui-overlay-manager',
'dd-constrain',
function(A) {
A.all('.popup-link').on('click',
function() {
var dialog = new A.Dialog({
bodyContent: 'Loading...',
centered: true,
title: 'Sample Popup Content',
width: 400,
height:600
}
).render();
dialog.plug(
A.Plugin.IO,
{
autoLoad: false,
uri: '/html/sample.html'
}
);
dialog.io.start();
});
});
but this does not work, it simply does not call the function when I click the link, I also tried this, but same thing
AUI().ready(
'aui-aria',
'aui-dialog',
'aui-overlay-manager',
'dd-constrain',
function(A) {
A.all('.sample-popup').each(function() {
this.on('click', function(A){
.....
......
Any idea what is wrong here?
Finally I got why it was not working. I was using the same object "A" in the click function as well.
it should be like this: (have a look at the variable name event)
AUI().ready(
'aui-aria',
'aui-dialog',
'aui-overlay-manager',
'dd-constrain',
function(A) {
A.all('.sample-popup').each(function() {
this.on('click', function(event){
.....
......
I don't know much about AUI but if you want to achieve same task using jQuery you can achieve like this
i.e
<script>
$(document).ready(function() {
$('.popup-link').click(function(){
alert($(this).text());
});
});
</script>
Or
Using Javascript
i.e
Link
<script type="text/javascript">
function theFunction () {
// return true or false, depending on whether you want to allow the `href` property to follow through or not
}
</script>
HTH

Get data from the server and display in the Edit Form

This question is continuation of the following question Add JSON data to the view that unfortunately ended up unresolved yet.
In my main view which has a form with 2 controls and placeholder for flexigrid I added the following at the bottom
<div id="add-edit-dialog" style="display: none" title="Add / Edit Client">
#Html.Partial("_ClientForm", Model)
</div>
The flexigrid pluglin instantiates in run-time and adds 3 buttons: Add, Edit, Delete.
For Edit button I need to get the current row information from the server and then display it in the Form. For Add button I do not need to go to the server (I think).
This is my current code for the Edit button:
function edit(com, grid) {
$('.trSelected', grid).each(function () {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row') + 3);
currentId = id;
$('#fntype').val('Edit');
var ClientName;
ClientName =$('.trSelected td:eq(2)').text();
var url = '/Client/Edit/' + id ;
$.getJSON(url, function (html) {
// setFormControls(data.Id, data.Role, data.Location, data.JobType,
// data.Description);
// alert(data);
$($dlg).html(html);
});
//location.replace(url);
RunModalDialog("Edit Client: " + ClientName);
});
So, it is going to Edit controller action and returns that same partial view _ClientForm with correct information passed as a model. If I look at the response result returned in FireBug I can see that the returned HTML is correct and all the textboxes have correct information in their values.
However, the dialog that opens looks exactly the same as the dialog for the Add button - in other words, all form controls come blank. I can not figure out what is wrong and why it is not working the way I want it.
This is what I have for the RunModalDialog:
var validator = $("#add-edit-form").validate();
var $dlg = $("#add-edit-dialog").dialog({
autoOpen: false,
show: "blind",
closeOnEscape: true,
resizable: true,
width: 1200,
height: 750,
minHeight: 600,
minWidth: 950,
buttons: {
"Save": function () {
if ($("#add-edit-form").valid()) {
// jobPost.setVals(txtId.val(), txtRole.val(),
// txtLocation.val(), txtJobType.val(),
// txtDescription.val());
$.ajax({
type: 'POST',
//data: JSON.stringify(clientInformation),
url: '/Client/Save',
dataType: 'json',
contentType: 'application/json',
success: function (result) {
// insert new list into grid
$('#flexClients').flexAddData(result);
}
});
$(this).dialog('close');
} else return false;
},
Cancel: function () {
$(this).dialog("close");
clearForm();
if (validator)
validator.resetForm();
}
},
close: function () {
clearForm();
},
open: function () {
//$("#add-edit-dialog").parent().appendTo($("#add-edit-form"));
}
});
function RunModalDialog(title, url) {
if (title) {
$dlg.dialog("option", {"title": title });
}
if (url) {
$dlg.load(url).dialog("option", { "title": title }).dialog("open");
//$dlg.load(url, function () {
// var validator = $("#sform").validate();
// if (validator)
// validator.resetForm();
// $dlg.dialog("option", { "title": title }).dialog("open");
//});
} else {
$dlg.dialog("open");
}
}
The code with the load (and commented code) was another attempt to solve this problem. That sort of worked (the form displayed with the info), but the main Client view was also reloaded so I was seeing double grid.
Do you see what should I change in my code to get this thing working?
Thanks a lot in advance.
With Jazzen Chen from MS help we solved this problem. All I needed to do to display the data correctly was to change getJSON to just get jquery function. Now my form comes with data populated correctly and the next challenge will be to save the data.
I posted a blog post with what I have so far - hope it may help
http://blogs.lessthandot.com/index.php/WebDev/UIDevelopment/AJAX/asp-net-mvc-project-with

Categories