I am having a kendo UI Splitter with left pane and right pane. In the left pane I have kendoui Panel bar which consists of links to different reports. Now onclick of any link I am trying to open the report page in right pane by making use of iframe. But for some reason report page is opening in a new window.
Sample Anchor tag from one of the links in Panel bar
<a class="right" target="reportDisplayPane" title="MyTitle" href="reports/params.aspx?rt=Basic Reports&rn=My Report">My Report</a>
MVC View code with Kendo Ui Splitter, Kendo Ui Panel bar and I frame.
#(Html.Kendo().Splitter()
.Name("splitter")
.Orientation(Kendo.Mvc.UI.SplitterOrientation.Horizontal)
.Panes(horizontalPanes =>
{
horizontalPanes.Add()
.Size("20%")
.HtmlAttributes(new { id = "left-pane", style = "height:100%;" })
.Collapsible(true)
.Content(#<div class="pane-content">
<div id="navigation">
#(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(Kendo.Mvc.UI.PanelBarExpandMode.Multiple)
.HtmlAttributes(new { style = "width:100%;height:100%;" })
.Items(panelbar =>
{
foreach (var category in Model.MyModel.Categories)
{
panelbar.Add().Text(category)
.Items(reports =>
{
foreach (var report in Model.MyModel.Reports)
{
if (report.Category.Equals(category))
{
reports.Add().Text(report.NavigateURL).Encoded(false);
}
}
});
}
})
)
</div>
</div>
);
horizontalPanes.Add()
.Size("80%")
.HtmlAttributes(new { id = "right-pane",style = "height:100%;"})
.Collapsible(false)
.Content(#<div class="pane-content">
<iframe id="reportDisplayPane" ></iframe>
</div>);
})
Please suggest on what might be wrong here.
Achieved it using below.
var onSelect = function (e) {
var iframeUrl = 'reports/maypage.aspx?rt=Myreports&rn=' + e.item.innerText;
$('#reportDisplayPane').attr('src', iframeUrl);
};
var panelBar = $("#panelbar").kendoPanelBar({
select: onSelect
});
Related
I have a dropdown by which I select the category of my data in a Kendo grid in my MVC app.
#(Html.Kendo().DropDownList()
.Name("kind")
.HtmlAttributes(new { style = "width:18%" })
.OptionLabel("Select Category")
.DataTextField("Cat_Title")
.DataValueField("Cat_ID")
.Events(e => e.Change("onChange"))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("Overview_Get_Categories", "Announcements");
});
})
)
I need to save my selected value so if the user return back can load his search. I have the following code for my grid
<div class="box-col">
Save State
Load State
and in js
<script>
$(document).ready( function () {
var grid = $("#grid").data("kendoGrid");
$("#save").click(function (e) {
e.preventDefault();
localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
});
$("#load").click(function (e) {
e.preventDefault();
var options = localStorage["kendo-grid-options"];
if (options) {
grid.setOptions(JSON.parse(options));
}
});
});
How can I save the value from the dropdown? and then reload it?
any idea? Thank you!
I'm using kendo grid for adding and updating my values.
Update button is enable for all rows default, but I just want to enable the button based on the column?
on Databound event you can remove Edit button for every row of kendo grid based on you condition
try with this code
function onDataBound() {
//Selects all edit buttons
$("#Grid tbody tr .k-grid-edit").each(function () {
var currentDataItem = $("#Grid").data("kendoGrid").dataItem($(this).closest("tr"));
//Check in the current dataItem if the row is editable
if (currentDataItem.isEditable == true) {
$(this).remove();
}
})
If you are using the mvc fluid api to configure your grid columns then try this solution.
columns.Bound(p => p.MyModelID).Title("My Button Column").Sortable(false)
.Width(120)
.ClientTemplate("#if(MyModelFieldShowButton){#" +
"<button onclick='myButtonClick(#=MyModelID#)' tabindex='0' class='k-button k-button-icontext' id='btnMy#=MyModelID#' role='button' aria-disabled='false' type='button' data-role='button'><span class='k-icon k-i-redo'></span>My Button Text</button>" +
"#}else{#" +
"<button onclick='myButtonClick(#=MyModelID#)' tabindex='0' class='k-button k-button-icontext' id='btnMy#=MyModelID#' role='button' aria-disabled='false' type='button' data-role='button' disabled><span class='k-icon k-i-redo'></span>My Button Text</button>" +
"#}#"
)
.HeaderHtmlAttributes(new { title = "Queue the notification for delivery.", style = "text-align:center" }
);
I created a grid with a custom command:
#(Html.Kendo().Grid<OfficeTracker.ViewModels.OffViewModel>()
.Name("OffGrid")
columns.Command(command =>
{
command.Custom("OfficeLocations").SendDataKeys(true).Click("openOfficeLocations");
}); ...
When the button is clicked, It should open another grid in a pop up window.
Here is the KendoWindow:
#{Html.Kendo().Window().Name("OffDetails")
.Title("Office Details")
.Visible(false)
.Modal(true)
.Draggable(true)
.Visible(false)
.Modal(true)
.Draggable(true)
.Content(#<text> #showGrid(6470) </text>)
}
I created a helper to hold the grid (it sends the officeID to the Controller):
#helper showGrid(int officeID)
{
#(Html.Kendo().Grid<OfficeTracker.ViewModels.LocViewModel>()
.Name("LocGrid")
.Columns(columns =>
{ ...
}
Then this JavaScript function:
function openOfficeLocations(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
var officeid = dataItem.OfficeID;
var wnd = $("#OfficeDetails").data("kendoWindow");
//wnd.content(wnd.content(#<text> #showWCGrid(officeid) </text>));
wnd.center().open();
wnd.refresh();
}
My problem is with the "wnd.content" line. If I don't include it, the grid opens when I click on the "OfficeLocations" button, but because I have hard coded the officeid, it always opens the same record. If I include the "wnd.content" line, it throws an error. I don't know if this needs to be formatted a certain way or what the problem is.
I'm not sure if this is the right approach. This is kind of like a detail window, but I need to have two buttons.
This question is exposing that one: integrating jquery ui dialog with knockoutjs
I have Model with array of items like this:
var viewModel = {
items: ko.observableArray([])
}
viewModel.items.push(new DialogModel("title 1"));
viewModel.items.push(new DialogModel("title 2"));
viewModel.items.push(new DialogModel("title 3"));
Next I show these items in markup using foreach statement
<div data-bind="foreach: items">
<div data-bind="text: title"></div>
<button data-bind="click: open">Open</button>
<button data-bind="click: close" >Close</button>
</div>
I need to show JQueryUI dialog on clicking buttons and this dialog should be binded to ItemModel instance.
I do not want to include dialog code inside loop because it is copying in result DOM and makes it huge. I'd like to use dialog in template for example.
JSFiddle mockup here http://jsfiddle.net/YmQTW/8/
Any thoughts?
You can create an array that contains only the opened dialogs and bind this array to the template.
With this code only dom of opened dialogs are duplicated.
var DialogModel = function (title) {
var self = this;
self.title = ko.observable(title);
self.isOpen = ko.observable(false);
self.open = function () {
viewModel.shownDialogs.push(self);
setTimeout(function () { self.isOpen(true); }, 0);
};
self.close = function () {
this.isOpen(false);
};
self.isOpen.subscribe(function () {
if(self.isOpen() === false)
viewModel.shownDialogs.remove(self);
})
};
var viewModel = {
items: ko.observableArray([]),
shownDialogs: ko.observableArray([]),
};
The view :
<div data-bind="foreach: shownDialogs">
<div data-bind="template : 'tmpl'"></div>
</div>
See fiddle
I hope it helps.
I want to refresh page when close the dialog? Is this possible? How can I do this?
There are links that opens the their own dialog. But When I clicked first time any link, dialog cache it's id, And then I clicked others, link id always same (first clicked id).
Should I refresh the page when close the dialog or Is there another way to fix this problem.
I use codes in below for opening dialog:
#foreach (var item in Model)
{
<tr>
<td>#Html.ActionLink(linkText: item.musteri_adi,
actionName: "MusteriDuzenle",
controllerName: "Musteri",
routeValues: new { sno = item.sno },
htmlAttributes: new { #class = "open_dialog", data_dialog_title = item.musteri_adi })
</td>
<td>#Html.DisplayFor(x => item.fatura_adresi)
</td>
</tr>
}
Thanks. And sorry my poor english :)
You can use beforeClose event to call a function to refresh your page.
$( "#myDialog" ).dialog({
beforeClose: function(event, ui) {
window.location.reload();
// or you can use window.location = 'mypage.html';
}
});