I am using kendo grid + mvc 5. in that,
columns.Template(e => { }).ClientTemplate..
I just want to use "Contains".
if "SitePlanMediaUrl.Contains(\"" + ViewBag.option + "\"))" value then ClientTemplate item show, otherwise not.
note - I have a value in "ViewBag.option"
-code line -
columns.Template(e => { }).ClientTemplate("<a href='" + Url.Action("download", "common", new { area = "" }) + "?url=#=SitePlanMediaUrl#&fileName=#=MediaTitle#' title='Download Media' class='icon download' target='_blank'></a> #if(SitePlanMediaUrl.Contains(\"" + ViewBag.option + "\")) {# <a href='javascript:void(0)' class='icon upload' onclick='SitePlanUploadMedia(#=SitePlanMediaId#,\"#=MediaTitle#\", \"#=MediaTitle#\")' title='Upload Media'></a> #}# <a href='javascript: void(0)' class='icon delete' onclick='deleteRowConfirm(\"sitePlanMediagrid\",this)' title='Delete Media'></a>").Title("Action").Width(50);
if I get in between SitePlanMediaUrl then tag will show.
thanks.
I suspect this is not translated to C#, but to javascript, due to this being a ClientTemplate in the kendo framework.
Could you try with if(SitePlanMediaUrl.indexOf(\"" + ViewBag.option + "\") > -1)
.
The indexOf() method returns the index within the calling String
object of the first occurrence of the specified value starting the search at fromIndex. Returns -1 if the value is not found.
Related
I am trying to append rows to a table using an array called searchResults. Everything works as expected until I introduce the jQuery UI dialog box. The problem is I need a new dialog box for each row in the first column. I'm pretty new to all of this so I'm pretty sure I'm using the index incorrectly at times. This is just to give you an idea of what I'm trying to accomplish. Any ideas how to do this correctly?
for (var i = 0; i < searchResults.length; i++)
{
$('#patientFileDialog[i]').dialog();
$'#openPFDialog[i]').click(function() {
$('#patientFileDialog[i]').dialog('open');
});
var dialog[i] = $(`<div id="patientFileDialog[i]" title="Patient File">${searchResults[i].patientWebLink}</div>`);
body.append('<tr>'+
`<td><button id="openPFDialog[i]">Click Here</button></td>` +
`<td>${searchResults[i].patientFirstName}</td>` +
`<td>${searchResults[i].patientLastName}</td>` +
`<td>${searchResults[i].patientDateOfBirth}</td>` +
`<td>${searchResults[i].patientDataPulseID}</td>` +
`<td>${searchResults[i].patientLaserFicheID}</td>` +
'</tr>')
}
After looking at your code a bit more I think I can see what you are trying to do. Working JSFiddle, with some faked searchResults so we can see it in action.
There are a few problems with the code in your question:
Using selectors like $('#patientFileDialog[i]') and $'#openPFDialog[i]') will try to match elements on the page with those IDs. AFAICT those don't actually exist yet, you are trying to create them.
var dialog[i] = ... sets up some divs as strings, but those are never added to the page;
As I mentioned in my comment, there are some syntax errors, maybe just typos and mixed up formatting here on SO;
Here's an updated version of the code. Notable changes:
Instead of adding an event handler for every individual openPFDialog button, it is better practice to add just one which matches them all. That single handler can then work out which button was clicked, and take the right action for just that one, not all of them. In this case if you have all your buttons use IDs that match openPFDialog-X, where X is a number, you can target anything matching that pattern (using a starts with selector, and find the X by removing the openPFDialog- part with replace.
There's an added complication with the above though. Selectors parsed at page load will only match elements that exist at that time. In this case, you're adding new elements to the page, and a selector defined at page load won't match them. The solution is to select instead some parent element which does exist at page load, and filter. This is called event delegation (search for the paragraph starting with "Delegated event handlers").
Working from what you have, I am guessing the patientFileDialogs you create should be placed inside some parent element which is not displayed on the page? That's what I've done.
Here's the code (and working JSFiddle):
var dialog, i;
// Single click handler for anything that starts with "openPFDialog-".
// Since those elements don't exist on the page yet, we need to instead
// select a parent object, say the body, and filter for clicks on our
// elements starting with our pattern
$('body').on('click', '[id^=openPFDialog]', function() {
// We need to find the "i"
i = $(this).attr('id').replace(/openPFDialog-/,'');
console.log('clicked on id', i);
$('#patientFileDialog-' + i).dialog();
});
for (var i = 0; i < searchResults.length; i++) {
// Create a new div with ID like "patientFileDialog-1", using the current
// search result
dialog = $('<div id="patientFileDialog-' + i + '" title="Patient File">' + searchResults[i].patientWebLink + '</div>');
// Add it to the page. I've use a div with ID dialogs which is hidden
$('#dialogs').append(dialog);
$('table').append('<tr>'+
'<td><button id="openPFDialog-' + i + '">Click Here</button></td>' +
'<td>' + searchResults[i].patientFirstName + '</td>' +
'<td>' + searchResults[i].patientLastName + '</td>' +
'<td>' + searchResults[i].patientDateOfBirth + '</td>' +
'<td>' + searchResults[i].patientDataPulseID + '</td>' +
'<td>' + searchResults[i].patientLaserFicheID + '</td>' +
'</tr>');
}
Update
One last suggestion - manipulating the DOM by adding/removing elements is slow. If you need to do that for each element in an array, it is best to avoid actually adding your content on each iteration, and rather just build up a string. Then once you're done iterating, just add the big single string, so you're chaning the DOM just once. Here's the basic changes needed to do that:
// Add some new variables to hold our big strings
var dialog, dialogs, row, rows, i;
// ... your code ...
for (var i = 0; i < searchResults.length; i++) {
// Create the dialog ...
dialog = ...
// Append it to our big string of all dialogs
dialogs += dialog;
// Same approach for rows
row = '<tr>'+ ... all that stuff
rows += row;
}
// Finished iterating, nothing added to DOM yet. Do it all at once::
$('#dialogs').append(dialogs);
$('table').append(rows);
Here is what I finally ended up having to do:
$(document).ready(function(){
if ($('[attr="searchResultsJson"]').length)
{
$('.approval-outer-wrap').prepend(drawTable());
$('.approval-outer-wrap').append('<div id="result-details" title="Search Result Detail"><p></p></div>')
}
$('body').on('click', '[id^=openPFDialog]', function() {
var result = $(this).parents('tr').data('result');
$('#result-details p').html(result.patientFirstName);
$('#result-details').dialog();
});
});
function drawTable(){
var table = $('<table id="search-results" />');
var header = $('<thead />');
table.append(header);
header.append('<tr><th>Patient File</th><th>First Name</th><th>Last Name</th><th>Date of Birth</th><th>Data Pulse ID</th><th>Laserfiche ID</th></tr>');
var body = $('<tbody />');
table.append(body);
var json = $('[attr="searchResultsJson"] [type="text"]').text();
var searchResults = JSON.parse(json);
for (var i = 0; i < searchResults.length; i++) {
body.append(`<tr data-result='${JSON.stringify(searchResults[i])}'>`+
`<td><button id="openPFDialog-` + i + `">🔍</button></td>` +
`<td>${searchResults[i].patientFirstName}</td>` +
`<td>${searchResults[i].patientLastName}</td>` +
`<td>${searchResults[i].patientDateOfBirth}</td>` +
`<td>${searchResults[i].patientDataPulseID}</td>` +
`<td>${searchResults[i].patientLaserFicheID}</td>` +
'</tr>');
}
return table;
}
Consider the following code.
function showPatientDialog(cnt){
$("#patient-file-dialog").html(cnt).dialog("open");
}
var d = $("<div>", {
id: "patient-file-dialog",
title: "Patient File"
})
.appendTo("body")
.dialog({
autoOpen: false
});
$.each(searchResults, function(i, result) {
var row = $("<tr>").appendTo(body);
$("<td>").appendTo(row).html($("<button>", {
id: "open-pdf-dialog-" + i
}).click(function() {
showPatientDialog(result.patientWebLink);
}));
$("<td>").appendTo(row).html(result.patientFirstName);
$("<td>").appendTo(row).html(result.patientLastName);
$("<td>").appendTo(row).html(result.patientDateOfBirth);
$("<td>").appendTo(row).html(result.patientDataPulseID);
$("<td>").appendTo(row).html(result.patientLaserFicheID);
});
Im using Stacked area chart of nvd3-angularjs
This is my html
<div ng-controller="Eth2GraphController">
<nvd3-stacked-area-chart
data="GraphData"
noData="No Data For You!"
id="eth2Graphs"
showXAxis="true"
showYAxis="true"
showLegend="true"
interactive="true"
tooltips="true"
objectEquality="true"
margin="{left:100,right:100}"
useInteractiveGuideline="true"
tooltipcontent="toolTipContentFunction()"
xAxisTickFormat="xAxisTickFormatFunction()"
yAxisTickFormat="yAxisTickFormatFunction()"
color="colorFunction()"
legendColor="colorFunction()"
>
<svg></svg>
</nvd3-stacked-area-chart>
</div>
Now, I have a function that should format the tooltipcontent, but its not working. Maybe it has something to do with the useInteractiveGuideline attribute. I used the same tooltipcontent function to edit the tooltip of my other charts, its working on those charts the only difference is that those chart dont use useInteractiveGuideline.
$scope.toolTipContentFunction = function() {
return function(key, x, y, e, graph) {
return '<h3>' + x + '</h3>' +
'<p>' + key + ' ' + y + '</p>';
}
};
I want x to be in the center, and other formatting for the data. How would I do that? Am I using the correct attribute that would format the tooltip?
Change tooltipcontent="toolTipContentFunction()" to:
tooltipContent="toolTipContentFunction"
useInteractiveGuideline must be set to false for the tooltipContent to work. I believe it is because useInteractiveGuideline uses it's own popup.
i have column named type and its an enum
public enum CalcEnum
{
Created = 0,
Calculated = 1,
Imported = 2,
Edited = 3
}
I want to display a button based on the value of this field. Say if the value is created then i want to show a button in the grid. I have tried like this but its not working
#(Html.Kendo().Grid(Model.values)
.Name("Grid1")
.Columns(columns =>
{
columns.Bound(p => p.UserComments).Title("Comments");
columns.Bound(p => p.Type).Title("Type");
columns.Template(#<text></text>)
.ClientTemplate("#if(Type == '0') {#"
+ "View"
+ "#} else {#"
+ "Open"
+ "#} #").Title(string.Empty);
}
Any clues where im doing wrong ? Thanks
Here is a link to the templates overview.
Here is a similar question where an external function is called to do all the processing.
Here is a similar question to yours.
I am also not too sure why you have quotes on your 0.
I have performed the action client side and if you do this I believe you need to put 'data.' before your Model's property.
`#if(data.Type == 0)`
Try that OR check the links below to see the links to questions similar to yours.
I can't set up a project to test this at the moment but I can give you a quick look at how I have used it with a boolean (CanCanel).
columns.Template(#<text></text>).ClientTemplate(
"<button type='button' class='myRequestsViewRequest grid-btn grid-btn-primary' style='margin: 3px 15px 3px 0;'" +
"data-requestid='#= RequestId #' data-requesterdisplayname='#= RequesterDisplayName #'>View</button>" +
" #if (!(data.CanCancel)) " +
"{# <span class='grid-btn grid-btn-disabled'>Cancel</span> #} " +
"else {# <a class='grid-btn grid-btn-primary' href='" +
Url.Action("CancelRequest", "Home") +
"?requestId=#= RequestId #' " +
" onclick='return MyRequest_ConfirmCancel()'>Cancel</a> #}#")
.Title("Actions")
.Width(200);
})
What if you change the column value 'Type' in the condition as below
if(#=Type# == '0')
I use Kendo grid MVC and In The First Column I Use This Code:
columns.Template(s => s.IsActive).Title("").ClientTemplate(
" <input type='checkbox' \\#= IsActive ? checked='checked' : '' \\# /input>"
).Width(50);
and it works correctly, but when i wanted to use this code in span it's not working i wanted to show text insted of boolean my wrong code is :
columns.Template(s => s.IsActive).Title(T("My Title").ToString()).ClientTemplate(
" <span> \\#= IsActive?" + T("Required") + " : " + T("Optional") + " \\#</span>"
).Width(150);
so what's wrong with second one?
From looking at it the code is not being picked up because it it a mix of html and javascript. In the client templating then this should would in Kendo:
#if(data.IsActive === true){#<span>Required</span>#}else{#<span>Optional</span>#}#
I find this messy so I personally like to pull this out of the template and use a function as it means I can edit it easier and don't get frustrated. so something like this:
.ClientTemplate("#=TextFormatter(data.IsActive)#")
Then in the javascript would be
function TextFormatter(value)
{
var returnString = '';
if(value === true)
{
returnString = '<span>Required</span>';
}
else
{
returnString = '<span>Optional</span>';
}
return returnString;
}
For further reading check this link out: How do I have conditional logic in a column client template
I need to call an ASPX page from MVC view through below JavaScript code, also need to pass some parameter as query string,
function OpenTest() {
var width = (screen.availWidth - 700).toString();
var height = (screen.availHeight - 100).toString();
var param1 = "Test";
var baseUrl = '#Url.Content("~/Test/Test.aspx?")';
window.open(baseUrl + "param1=" + param1);
}
In ASPX page,
if(!string.IsNullOrWhiteSpace(Request.QueryString["param1"]))
{
string s1 = Request.QueryString["param1"];
}
I am able to call ASPX page and read parameter value by above code, but when I add other property of "window.open", I am not able to read query string, question is where should I place below property in above code so that I can also read query string value in ASPX page,
"mywindow", "width=" + width + ",height=" + height + ",toolbar=no,location=no,directories=yes,status=no," +
"menubar=no,scrollbars=yes,copyhistory=yes,resizable=yes" + ",screenX=0,screenY=0,left=0,top=0"
The syntax for window.open() is:
window.open('url/for/page/here.aspx', 'targetName', 'options');
The targetName can be "_self", "_blank", "_parent", just like any target attribute for links, or have an identifier to name the window, so you can reuse the window when openning with the same name.
When you calll window.open() with any option to restrict the window, like width=100 it assumes that all the other have to be disabled, so you don't have to put the properties you want to disable.
Fixing your options would be:
window.open(baseUrl + "param1=" + param1,
"mywindow",
"width=" + width + ",height=" + height + ",directories=yes,scrollbars=yes,copyhistory=yes,resizable=yes,screenX=0,screenY=0,left=0,top=0");
Another thing to note is that all options have to be separated by comas, without spaces. Some browsers ignore/missinterpret options with spaces.
Also, don't forget to escape the variables to pass with the url.