Passing data to Kendo Window on a button click of Kendo Grid - javascript

on a button click event (custom command in the grid), i would like the data to kendo window (loadcontentfrom) action and wondering if anyone can guide please?
<div class="container-fluid">
<div class="row">
<div class="col-md-4">
#Html.Label("Summary")
#(Html.Kendo().Grid<Settings.Services.Models.DocumentTypeStatusList>()
.Name("EmpGrid")
.Columns(columns =>
{
columns.Bound(c => c.DocumentType.DocumentTypeDescription).Width(200);
columns.Bound(c => c.Status).Width(100);
columns.Command(c => c.Custom("ADD").IconClass("k-icon k-i-plus").Click("showDetails")).Width(100);
})
.HtmlAttributes(new { style = "height: 700px;" })
.Scrollable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.DocumentType.DocumentTypeId);
})
.Read(read => read.Action("GetAllDocumentsTypeStatus", "Home"))
.PageSize(20)
)
)
#(Html.Kendo().Window().Name("Details")
.Title("Add/Edit Document Type Setting")
.Visible(false)
.Modal(true)
.Draggable(true)
.Width(600)
.LoadContentFrom("ModifyDocumentTypeSettings", "Home")
.Actions(actions => actions.Close())
)
</div>
</div>
this is the javascript function that gets the value from the grid but how do i pass it to the kendo window function:
function showDetails(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var wnd = $("#Details").data("kendoWindow");
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
}
This is resolved by refactoring the code as below (see this question for more information: how to set LoadContentFrom kendo window in run time):
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$(document.body).append('<div id="Window"></div>');
$('#Window').kendoWindow({
title: "Add/Edit Document Type Setting",
modal: true,
resizable: false,
width: 400,
content: "/Home/ModifyDocumentTypeSettings/" + dataItem.id,
visible: false,
minHeight: 350,
animation: {
open: {
effects: "expandVertical",
duration: 1000
},
},
close: function () {
setTimeout(function () {
$('#Window').kendoWindow('destroy');
}, 200);
}
}).html('<img src="761.gif" />').data('kendoWindow').center().open();

This is resolved by refactoring the code as below (see this question for more information: how to set LoadContentFrom kendo window in run time):
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$(document.body).append('<div id="Window"></div>');
$('#Window').kendoWindow({
title: "Add/Edit Document Type Setting",
modal: true,
resizable: false,
width: 400,
content: "/Home/ModifyDocumentTypeSettings/" + dataItem.id,
visible: false,
minHeight: 350,
animation: {
open: {
effects: "expandVertical",
duration: 1000
},
},
close: function () {
setTimeout(function () {
$('#Window').kendoWindow('destroy');
}, 200);
}
}).html('<img src="761.gif" />').data('kendoWindow').center().open();

Related

Tabulator scrollToRow not working and no errors shown

When the page loads, no scrolling is done. There are no errors too.
Can anyone tell me what I'm doing wrong?
Is there another way to go to the desired row? I don't need the scrolling animation, just to get to the row.
$: if (tableElement && data && columns) {
table = new Tabulator(tableElement, {
height: "100%",
layout: "fitData",
data: data,
cellVertAlign: "middle",
resizableColumns: "header",
groupStartOpen: true,
groupToggleElement: "header",
columnHeaderSortMulti: true,
columnCalcs: "both",
tooltipsHeader: true,
virtualDomBuffer: 50000, // I read in another post to increase this, but it does nothing
groupHeader: (value, count, data, group) => {
return `
${value}
<span style="color:#d00; margin-left:10px;">
${count}
</span>
`;
},
columns: columns,
});
}
$: if (table && $scrollToRecordId) {
console.log("SCROLLING");
table
.scrollToRow($scrollToRecordId, "top", true)
.then(() => {
console.log("done");
})
.catch((error) => {
console.log(error);
});
}
The solution to this is using tick.
import { tick } from "svelte";
$: if (table && $scrollToRecordId) {
scrollTable();
}
async function scrollTable() {
await tick();
table.scrollToRow($scrollToRecordId, "top", true);
}
If you are getting a no matching row error, use this:
table.on("tableBuilt", () => {
if ($scrollToSku) {
table.scrollToRow($scrollToSku, "top", true);
$scrollToSku = null;
}
});

How to call fucntion when modal close JQuery

I need to call a function when modal close. My code as follows,
function openModal(divName) {
$("#"+divName+"Modal").modal({
overlayClose: false,
closeHTML: "<a href='#' title='Close' class='modal-close'>X</a>",
onShow: function (dialog) {
$('#simplemodal-container').css({ 'width': 'auto', 'height': 'auto', 'padding-bottom': '1000px' });
var tmpW = $('#simplemodal-container').width() / 2
var tmpH = $('#simplemodal-container').height() / 2
$('#simplemodal-container').css({ 'margin-left': tmpW * -1, 'margin-top': tmpH * -1 });
},
close:onClose,
onClose: ModalClose(),
opacity: 50,
persist: true
});
}
I tried two ways to call a function as follows, but both not working
1st way
function onClose() {
alert('called');
}
2nd way
$('.resetbutton').click(function () {
alert('called');
}
Call another function which you want inside ModalClose(), if it user-defined function
From the bootstrap documentations, you can just call the javascript event on closing the modal Javascript.Bootstrap
$('#myModal').on('hide.bs.modal', function (e) {
// do the closing function...
});
And for Kendo Library you can do the close but without the "()" and this will pass the event "e" in the function
close: onClose,
Events in Kendo UI
dialog.kendoDialog({
width: "400px",
title: "Software Update",
closable: true,
modal: false,
content: "<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>",
actions: [
{ text: 'Close', action: onCancel },
{ text: 'OK', primary: true, action: onOK }
],
initOpen: onInitOpen,
open: onOpen,
close: onClose,
show: onShow,
hide: onHide
});
function onClose(e) {
show.fadeIn();
kendoConsole.log("event :: close");
}

jquery UI modal not causing postback

I have a jquery UI modal which opens on checkbox click and cause postback after clicking ok button but its not working .I have tried all solutions.please help.Asp.net button is inside form tag.
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "Other-Legend",
width: 300,
open: function (type, data) {
$(this).parent().appendTo("form");
},
buttons: {
Ok: function () {
$("[id*=btnConfirm]").click();
},
Close: function () {
$(this).dialog('close');
}
}
});
jQuery('input[type="checkbox"]').click(function () {
var parentClass = jQuery(this).parent('td').attr('class');
var checked = jQuery(this);
jQuery('.' + parentClass.substring(0, parentClass.length - 8) + ' input[type="checkbox"]').each(function (i, e) {
jQuery(this).prop('checked', false);
})
jQuery(checked).prop('checked', true);
if (parentClass.indexOf("mdclass") >= 0) {
$('#dialog').dialog('open'); }
});
<asp:Button ID="btnConfirm" runat="server" Text="Button" style="display:none" OnClick ="Button1_Click" />
You can try adding the jQuery UI v1.10 or greater syntax of appending the modal DIV to the form.
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "Other-Legend",
width: 300,
appendTo: "form",
buttons: {
Ok: function () {
$("[id*=btnConfirm]").click();
},
Close: function () {
$(this).dialog('close');
}
}
});

Ajax.BeginForm() post method not returning Partial View

I have a MVC application and I'm trying to insert properties of objects. For that, I made a modal popup via jQuery dialog. I don't want it interfering with other actions that the user is doing, so I made an Ajax.BeginForm. I hoped that when I do the insert, it will close on return PartialView(), but it opens the popup View on full screen instead of closing the dialog. Also, it is important that the base view should be dynamic, so you can open the dialog on any page and not make a postback.
I've read the other similar issues and couldn't resolve my problem.
There are some similar issues, but none of them
Please, help me to achieve the proper function if possible. Code below:
JS:
<script>
$(document).ready(function () {
var url = "";
$("#dialog-alert").dialog({
title: 'Error encountered!',
autoOpen: false,
resizable: false,
width: 350,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true
});
if ('#TempData["msg"]' != "") {
$("#dialog-alert").dialog('open');
}
$("#lnkServer").on("click", function (e) {
//e.preventDefault(); //use this or return false
url = $(this).attr('href');
$('#dialog-edit').dialog({ title: "Add a new Server" });
$("#dialog-edit").dialog('close');
$("#dialog-edit").dialog('open');
return false;
});
$("#lnkIssType").on("click", function (e) {
//e.preventDefault(); //use this or return false
url = $(this).attr('href');
$('#dialog-edit').dialog({ title: "Add a new Issue Type" });
$("#dialog-edit").dialog('close');
$("#dialog-edit").dialog('open');
return false;
});
$("#lnkUser").on("click", function (e) {
//e.preventDefault(); //use this or return false
url = $(this).attr('href');
$('#dialog-edit').dialog({ title: "Add a new User" });
$("#dialog-edit").dialog('close');
$("#dialog-edit").dialog('open');
return false;
});
$("#lnkDept").on("click", function (e) {
//e.preventDefault(); //use this or return false
url = $(this).attr('href');
$('#dialog-edit').dialog({ title: "Add a new Department" });
$("#dialog-edit").dialog('close');
$("#dialog-edit").dialog('open');
return false;
});
$("#dialog-edit").dialog({
autoOpen: false,
resizable: false,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
//$(".ui-dialog-titlebar-close").hide();
$(this).load(url);
}
//buttons: {
// "Cancel": function () {
// $(this).dialog("close");
// }
//}
});
});
function onSuccess() {
$("#dialog-edit").dialog('close');
}
</script>
Form:
<div id="container">
#using (Ajax.BeginForm("AddDept", new AjaxOptions { OnSuccess = "onSuccess" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div>
<fieldset>
<div class="editor-label">
#Html.LabelFor(model => model.Department_Name)
</div>
<div class="editor-field">
#Html.TextBoxFor(model => model.Department_Name, htmlAttributes: new { #class = "form-control text-box single-line input-properties", placeholder = "Collections" })
</div>
<div class="editor-label">
#Html.ValidationMessageFor(model => model.Department_Name)
</div>
<input type="submit" value="Submit" class="btn btn-default btn-add-properties" />
</fieldset>
</div>
}
</div>
Controller:
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult AddDept([Bind(Include = "Department_Name")] Department #dept)
{
try
{
if (ModelState.IsValid)
{
db.Departments.Add(#dept);
db.SaveChanges();
TempData["Msg"] = "Data has been saved successfully";
return PartialView();
//return Redirect(System.Web.HttpContext.Current.Request.UrlReferrer.PathAndQuery);
}
}
catch
{
TempData["Msg"] = "Probably the record already exists. If not, contact Georgi Georgiev, RA Dept.";
return PartialView();
}
return PartialView(#dept);
}
My problem was probably due to that my Ajax.BeginForm popup View relied on different ActionResult in the controller compared to the Background View's.
Anyway, it turns out that I couldn't achieve my functionality without having a POST through Ajax.
Here's what I did (in Layout view):
$("#dialog-edit").dialog({
autoOpen: false,
resizable: false,
width: 400,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
//$(".ui-dialog-titlebar-close").hide();
$(this).load(url);
},
buttons: [{
text: "Submit",
"class": "btn-add-properties",
click: function () {
var form = $('form', this);
$.post(form.prop('action'),
form.serialize(),
function (response) {
alert("success");
})
.fail(function () {
alert("error");
});
$("#dialog-edit").dialog('close');
}
}]
});
The ajax post is the function under the dialog button.

controller action execute two times with Ajax.ActionLink and JQuery UI Dialog

I have ajax.actionlink
#Ajax.ActionLink("Click here",//link text
"Insert", // action name
"Projects", // controller
new { poz = item.itemID.ToString() }, // route values
new AjaxOptions() { HttpMethod = "GET", UpdateTargetID = "PrjDiv" OnSuccess = "Initiate_Dialog" }, // ajax options
new { #class = "openDialog", #id = item.idemID.ToString() } //htmlAttributes
)
and jQuery UI dialog
function Initiate_Dialog() {
var itemID= $(this).attr("id").replace("item_", "");
var prjID= $("#m_project").val();
var url = encodeURI("/Projects/Insert?poz=" + itemID+ "&proj=" + prjID);
$("#dialog-edit").dialog({
title: 'Insert',
autoOpen: false,
resizable: false,
height: 'auto',
width: 650,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(this).load(url);
},
close: function (event, ui) {
$(this).dialog('close');
},
buttons: {
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#dialog-edit").dialog('open');
return false;
}
When i click on generated link, my controller action is executed 2 times. Once with parameters sent from ajax.actionlink, and second time, with parameters sent from javascript.
I know that i have 2 calls and that's why is action executed twice. My question is, is there a way around this to execute only call from javascript, and not from actionlink?

Categories

Resources