I am trying to persist my grid data and following this example.
This works very well for me but the problem is I am having Excel Import button in my grid and after loading the persisted state of the grid, the Excel Export button is disappeared.
This is my code for the grid (data persisting code is not here, it is same as the above example).
#(Html.Kendo().Grid<DtoTaskExtended>()
.Name("AdraKendoGrid")
.TableHtmlAttributes(CodeTaskKendoGrid.GetTableHtmlAttributes())
.RowAction(CodeTaskKendoGrid.GridPerRowAction)
.CellAction(CodeTaskKendoGrid.GridCellsConfigurator)
.Columns(CodeTaskKendoGrid.ColumnsConfigurator)
.ToolBar(tools => tools.Excel())
.Pageable(pager => pager.PageSizes(new int[] { 15, 50, 100, 500 })
.Info(true)
.Messages(message => message.Display("{0} - {1} " + Strings.of + "{2} " + Strings.items))
.Messages(message => message.ItemsPerPage(Strings.itemsPerPage))
.Messages(message => message.Empty(Strings.noItemsToDisplay)))
.Sortable()
.Groupable(gr => gr.Messages(message => message.Empty(Strings.kendoGroupMsg)))
.Excel(excel => excel
.AllPages(true)
.FileName("Task Grid Export.xlsx")
.Filterable(true)
.ProxyURL(Url.Action("Excel_Export_Save", "Task")) //.ForceProxy(true)
)
.Filterable()
.Reorderable(reorder => reorder.Columns(true))
.Resizable(r => r.Columns(true))
.ColumnMenu()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetTaskResult", "Task")))
.ClientDetailTemplateId("client-template")
)
Data is saved and loaded correctly, but the grid buttons (Export to Excel) button is disappeared after loading data.
How do I persist the button of the gird?
Thank you.
Hi I have a same issue like you and i solve my problem like this
function load() {
var grid = $('#gr').data("kendoGrid");
var toolBar = $("#grid .k-grid-toolbar").html();
var options = localStorage["kendo-grid-options-log"];
if (options) {
grid.setOptions(JSON.parse(options));
$("#grid .k-grid-toolbar").html(toolBar);
$("#grid .k-grid-toolbar").addClass("k-grid-top");
}
}
There is a limitation for making the toolbar persistent. A note about it from the kendo docs:
An important limitation when using the setOptions method in combination with the MVC wrappers is that any toolbar or header server templates (razor syntax #) will be lost and the layout will become incorrect once the method is invoked. Those options cannot be persisted because there is no JavaScript equivalent option for them since they contain server side logic. Consider using JavaScript initialization (instead of the MVC wrapper). An alternative is to specify the same option with the JavaScript equivalent.
Here's a possible solution:
Persist state issues
I'm not a developer, but ran across the same problem with using javascript. I had to put the entire template code in the grid options, instead of pointing to an HTML template.
I hope that points you in the right direction.
After a long research I was able to find a real and workable solution:
https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/grid-preserve-server-toolbar-template-after-set-options/GridPerserveToolbarServerTemplate/Views/Home/Index.cshtml
You need to add the following code to your View:
Razor:
#helper ToolbarTemplate() {
<a class="k-button k-button-icontext k-grid-save-changes" href="javascript:void(0)"><span class="k-icon k-update"></span>Save changes</a>
<a class="k-button k-button-icontext k-grid-cancel-changes" href="javascript:void(0)"><span class="k-icon k-cancel"></span>Cancel changes</a>
}
<script type="text/x-kendo-template" id="toolbarTemplate">
#Html.Raw(#ToolbarTemplate().ToHtmlString().Replace("#", "\\#").Replace("</scr", "<\\/scr"))
</script>
JavaScript:
<script>
//Here you define the ID of your grid
var grid = $("#grid").data("kendoGrid");
//Here you get the local settings for your case
var options = localStorage["settings"];
//To verify if there is anything stored
if (options) {
//To parse the result
var parsedOptions = JSON.parse(options);
//To display the toolbar
parsedOptions.toolbar = [
{ template: $("#toolbarTemplate").html() }
];
//To set the stored changes
grid.setOptions(parsedOptions);
}
</script>
What is the trick?
You need to get code generated the first time before saving the state (you can get it with inspect element).
And add it to the ToolbarTemplate(), after that the toolbar is going to be stored too.
Also, in the above link you can read more about headers if you want to stored them too, it will be a similar code.
The code that I showed it's fully tested and it's working 100% of cases.
If you a doubt of why this is happening, as far as I know it's related to the fact that the Toolbar is created on the server side while the states are done on the client side.
Related
I was writing some code to map random colors to cells in row.
const COLORS = ['blue', 'green', 'orange', 'red', 'purple', 'yellow'];
const createRandomColors = () => {
const randomColors = [];
for (let i = 0; i < COLORS.length; i++) {
const randomColor = COLORS[Math.floor(Math.random() * COLORS.length)];
randomColors.push(randomColor);
}
return randomColors;
}
const App = () => {
const row = useMemo(createRandomColors, []);
console.log(row);
const cells = useMemo(() => row.map((cell, cellIndex) =>
<div key={cellIndex} style={{ backgroundColor: cell }}>{cellIndex}</div>
), [row]);
cells.forEach(cell => console.log(cell.props.style.backgroundColor));
return (
<div className="app">
<div className="row">
{cells}
</div>
</div>
);
};
export default App;
The problem is that after rendering div elements they have completely different inline style background-color that was specified when mapping divs.
Please see CodeSandBox and take a look at console log and real results rendered.
Why is this happening?
The reason this appears wonky is related to using <StrictMode> in your index.html file. If you remove <StrictMode> you'll see your code works the way you expect. But don't do that, you really do have a bug.
React wants functional components to be idempotent, meaning they do not have side effects. To help you catch side-effects, React will call your code twice back to back when it renders. see strict mode By doing this, it helps uncover subtle issues like the one you're currently experiencing.
One solution is to create the random colors once using useEffect(). Another is to generate the colors outside the functional component.
UPDATE
Please mark the answer as 'accepted' if it solves your issue. You are correct. useMemo will save the computation so it will not be re-computed unless dependencies change. However, react is purposely calling your code twice (in debug mode only) to help you catch unintentional side effects in your classes or hooks. When using strict mode, it's as if you have two of the component instead of one. i.e.
/* StrictMode in debug */
<StrictMode>
<App/>
</StrictMode>
/* ... be like this: */
<>
<App/>
<App/>
</>
If you (temporarily) remove the <StrictMode> tag you'll see your code works as expected. And if you add code that causes your component to render again (e.g. a click counter) your useMemo should prevent the cells from being regenerated each render.
Add a console log to print every time createRandomColors() is called. Since your code is being called twice, you should see the debug log appear twice, but you don't. Why not? React surpasses the console.log the 2nd time it calls your code.
At the top of your code (line 3) add const log = console.log, then replace everywhere you use console.log with just log and you'll have the full picture of what's occurring.
Keep experimenting. We've all been here.
I am trying to get Kendo Grid data which is hydrated from client side to a MVC controller method. My view contains several single fields like name, date of birth etc and tabular field which I hooked with a Kendo Grid. Since its a new operation I have no data in the grid ( and other fields) and user enters them from client side.
I have no idea how to proceed on this. Ideally I would like to get this data to a list in my viewmodal. So that when the user hits save, I have all other data and the grid data coming into a controller method.
I am able to successfully bind a list with kendo grid and display it. I have very little experience on JavaScript and Kendo and web programming.
If any of you can point me to the right direction, sample code would be greatly appreciated.
$("#departmet").kendoGrid({
dataSource: dataSource,
height: 250,
scrollable: true,
sortable: true,
filterable: true,
pageable: {
input: true,
numeric: false
},
columns: [
"DepartmentName",
"SubDivision"
]
});
From experience I know their documentation is not easy to navigate. It seems there is the documentation and then the API. The API is usually what you will always want to find. What you will need is the information from here https://docs.telerik.com/kendo-ui/api/javascript/ui/grid. If I understand the question correctly. There are several ways you can achieve posting. You could make use of editor templates. Click the Open in Dojo to get an idea how it looks.
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/editable.template
With this you do not have to worry about modifying the data via javascript. Assuming your grid is surrounded with a form element it will get posted when submitted. Note paging is not accounted for here. Also, this method by default can auto post after each edit. If you don't want this behavior then you will have to have advanced knowledge of the API.....Correction on that last statement. The API is different when dealing with the data all on the client side. Click the Open in Dojo to see it all on the client side. If you are not wanting to use editor templates and want to manage the data editing yourself then you need to use the grid methods provided.
Once you have your grid created. To access the data source of the grid you will need to get the dataSource.
$('#departmet').data('kendoGrid').dataSource;
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource
If you need to use a different data source(or change it) you can use the setDataSource method below(grid function).
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/setdatasource
To add to the data source use the add function to add a new object.
$('#departmet').data('kendoGrid').dataSource.add({ id: 2, name: 'name'});
https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/add
It is important with kendo to ALWAYS use the methods provided to change the data source so that the proper events can fire to update the UI accordingly. This includes if you need to set a property on a specific data item. In that case you need to use the set method on the item itself.
After you are done modifying your data. Within javascript get the data and either create DOM elements within a form
//JQuery sudo code example
var data = $("#departmet").data("kendoGrid").dataSource.data();
var dataLen = data.length;
var myForm = $('#my-form'); //Already within DOM
for (var i = 0; i < dataLen; i++) {
var item = data[i];
var idEl = $('<input type="hidden" name="userData[' + i + '].id" />');
idEl.val(item.id);
var nameEl = $('<input type="hidden" name="userData[' + i + '].name" />');
nameEl.val(item.name);
myForm.append(idEl);
myForm.append(nameEl);
}
myForm.submit();
This assumes your controller function(??) on the backend is expecting an array of objects with the property name of userData.
Alternatively, you can post it via ajax. For example, the ajax jquery function. Passing your data as the data of the ajax call.
http://api.jquery.com/jquery.ajax/
Don't want to ramble. Let me know if you need more help.
SO won't let me comment yet so have to add another answer. You will not need to define the data source within the .NET code when dealing with client only data. Just use this.
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
)
If you will have data coming from the backend then you need to use the generic-less constructor and pass in the object else keep what you have.
Html.Kendo().Grid(Model.MyList)
However, if you are preprocessing some client data on the screen that you want to initialize then you will need to do this on ready. Don't worry about the schema part of the data source. It already knows this when you used the .NET MVC wrapper because you gave it the schema(type) via the generic or the parameter provided.
var initialDS= new kendo.data.DataSource({
data: [
{ ActionName: "Some Name", ActionType: "Some Type" }
]
});
$(document).ready(function () {
$('#docworkflow').data('kendoGrid').setDataSource(initialDS);
});
As I mentioned in the other answer. Use the data source functions for adding additional data to the data source. No need to setDataSource each time you want to add. Just
//Assuming you have 2 inputs on the screen the user is entering info into
var nameEntry = $('#action-name').val();
var typeEntry = $('#action-type').val();
$('#docworkflow').data('kendoGrid').dataSource.add({ ActionName: nameEntry , ActionType: typeEntry });
So after some efforts I come up with. But I don't know where to specify the
data in the html code. Is it possible this way?
#(Html.Kendo().Grid <DockData.Action> ()
.Name("docworkflow")
.Columns(columns =>
{
columns.Bound(e => e.ActionName);
columns.Bound(e => e.ActionType);
}).DataSource( **How do I load a script variable here***)
//This script variable should be fed to the above code.
This variable is populatedwhen the user adds data from the UI which works fine.
var dataSource = new kendo.data.DataSource({
data: result,
schema: {
model: {
fields: {
ActionName: { type: "string" },
ActionType: { type: "string" }
}
}
},
pageSize: 20
});
I have a very long document - 40000 words - I would like to display in a styled manner, like html.
I need to display it with headers, paragraphs and bold styling.
I am building an Angular app. I tried loading the converted document as a local html, but it takes a very long time.
For instance, I tried this:
var html = this.http.get("../data.html").map(ref => {
console.log(html);
} );
Are there any other ways I can load this text? Maybe break it up into smaller chunks somehow?
Based on what you've provided with no other context:
You need to subscribe to the Observable otherwise, nothing will ever happen since Observable execution is lazy:
var html = this.http.get("../data.html")
.map(ref => {
console.log(html);
return ref;
})
.subscribe(ref => ...);
Also, you're using console.log(html) in your map, but html does not exist in the context of map so you would need to do something like:
var html = this.http.get("../data.html")
.map(ref => {
console.log(ref); // Does this log appear and what does it contain?
return ref;
})
.subscribe(ref => ...);
Finally, var html is an Observable not HTML so I'd probably rename this to something a bit more descriptive if you're passing it around and subscribing to the response:
const data$ = this.http.get("../data.html")
.map(ref => {
console.log(ref);
return ref;
});
// ... do other stuff
data$.subscribe(ref => ...);
Or if not passed chain it and subscribe which indicates the Observeable has completed:
this.http.get("../data.html")
.map(ref => {
console.log(ref);
return ref;
}).subscribe(ref => ...);
If this doesn't help answer the question it's because you haven't provided enough information, and I'd suggest answering:
In the second example what does console.log(ref) output?
Include more code that provides more context like do you use subscribe already and what does the data you're using look like?
Make an example in StackBlitz that replicates the issue. Just click Angular and you get a pre-made Angular application you can drop your code into and then people can hack directly on the issue. Takes tops 5 seconds to setup
I have a Kendo MVC grid that I am creating with the Html.Kendo().Grid helper. When the PopUp editor window opens, I want to catch the event and run a bit of javascript. When I configure a normal kendo window with .Events, the events fire properly and my function runs. However, when I code the .Events property on the .Editable.Window of the grid, the events do not fire.
#(Html.Kendo().Grid<FooRecord>()
.Name("cFooGrid")
.Columns(c =>
{
c.Bound(f => f.Foo);
c.Bound(f => f.Bar);
c.Bound(f => f.Bas);
c.Command(a => a.Edit());
})
.Editable(e => e
.Mode(GridEditMode.PopUp)
.Window(w => w.Events(v => v.Open("OnEditStart").Activate(#<text>function () {console.log("EditWindow.Activate")}</text>)))
)
.ToolBar(t =>
{
t.Create();
})
.DataSource(ds => ds
.Ajax()
.Create(r => r.Action("UpdateIndex", "Home"))
.Read(r => r.Action("IndexList", "Home"))
.Update(u => u.Action("UpdateIndex", "Home"))
.Model( m => {
m.Id(f => f.Foo);
})
)
)
When I review the generated code in Chrome's developer tools, the window is generated without the Activate or Open features:
jQuery(function(){jQuery("#cFooGrid").kendoGrid({"columns":[{"title":"Foo Key","field":"Foo","encoded":true,"editor":null},{"title":"Bar Field","field":"Bar","encoded":true,"editor":null},{"title":"Bas Value","field":"Bas","encoded":true,"editor":null},{"command":[{"name":"edit","buttonType":"ImageAndText","text":"Edit"}]}],"scrollable":false,"editable":{"confirmation":"Are you sure you want to delete this record?","confirmDelete":"Delete","cancelDelete":"Cancel","mode":"popup","template":"\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"Foo\"\u003eFoo Key\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"k-textbox\" id=\"Foo\" name=\"Foo\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Foo\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"Bar\"\u003eBar Field\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-maxlength=\"The field Bar Field must be a string or array type with a maximum length of \u0026\\#39;20\u0026\\#39;.\" data-val-maxlength-max=\"20\" id=\"Bar\" name=\"Bar\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Bar\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"Bas\"\u003eBas Value\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-required=\"The Bas Value field is required.\" id=\"Bas\" name=\"Bas\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Bas\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e","window":{"title":"Edit","modal":true,"draggable":true,"resizable":false},"create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Add new record"}]},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Home/IndexList"},"prefix":"","update":{"url":"/Home/UpdateIndex"},"create":{"url":"/Home/UpdateIndex"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"Foo","fields":{"Foo":{"type":"string"},"Bar":{"type":"string"},"Bas":{"type":"string"}}}}}});});
Or, more specifically:
"window":{"title":"Edit","modal":true,"draggable":true,"resizable":false}
I would expect that the window would be generated with Activate: and Open: parameters, but they don't show up. Can anyone give me a pointer as to whether this just isn't supported or I am doing something wrong?
Edit:
So in order to capture the events as above, there are two steps:
Add this to the grid definition (remove the Window .Events)
.Events(e => e.Edit("OnEditStart"))
Then add a javascript function like this to the page.
function OnEditStart(pEvent) {
var editWindow = pEvent.container.data('kendoWindow');
editWindow.bind('activate', function () {
console.log('Edit start event fired');
});
}
NOTE: There does not appear to be any way to capture the open event since this event is fired on the window before the edit event on the grid.
The "events" of the kendo grid popup are not honoured/serialized (at least not the last time I tested this back in 2014) and so you should use the grid's Edit event to control the "Pop Up" window events
So within your grid add this:
.Events(event => event.Edit("onEdit"))
.//other grid settings here.
Then add a javascript function like this:
function onEdit(e) {
//get window object
var kendoWindow = e.container.data("kendoWindow");
kendoWindow.setOptions({
title: "I have a custom Title"
//do stuff in here
});
}
Then you can apply what ever functions you want to the window via javascript.
I do something similar to this to resize the pop up editor so it takes up 80% of the screen size regardless of the display/device.
If you have something more specific you are after then I will update my answer accordingly.
edit: If you want you can refer to this post from Telerik's own forums which is what I used when I first encountered this issue back in mid 2014.
Kendo Pop Up Editor not firing off applied events
It feels like i've lost a lot of time looking for this and still haven't found anything that works (well, that works properly). I have a set of nested grids for a user requirement, each one drills down into the next one etc and all that is working fine. It's handled using client templates which do an ajax call when they get expanded, and then displays the data.
The problem I have is that if there are no results for one of the expansions, Kendo just shows the child grid header and nothing else. When I connect to the DataBound event (on the grid, .Events(e => e.DataBound("myJavaScriptFunctionName")) the this is not the Kendo Grid, and if I pass the name of the child kendo grid (which is unique by using the key in #=#) it gives me 0 items in my data source.
I'm not sure if this is because it does an ajax post back, and then OnDataBound fires before it comes back?
I just need to show a "No Items Found" message to make the user experience better when there is no data (this really only happens at the lowest level)
Enough with words, here is some example code:
<script id="SecondToLastTemplate" type="text/kendo-tmpl">
#(Html.Kendo().Grid<CustomerViewModel>()
.Name("SumGrid_#=ResultYear#_#=ResultQuarter#_#=ResultMonth#_#=ResultWeekStart#_#=ResultDate#_#=Region#")
.Columns(column =>
{
column.Bound(x => x.CustomerName).Width("23%");
column.Bound(x => x.CustomerSummaryItem1).Width("14%");
column.Bound(x => x.CustomerSummaryItem2).Width("14%");
column.Bound(x => x.CustomerSummaryItem3).Width("14%");
})
.DataSource(dataBinding => dataBinding
.Ajax()
.PageSize(500)
.Read(read => read.Action("GetCustomerSummaryItems", Constants.Controller_ReportController, new
{
ResultYear = "#=ResultYear#"
,ResultQuarter = "#=ResultQuarter#"
,ResultMonth = "#=ResultMonth#"
,ResultWeekStart = "#=ResultWeekStart#"
,ResultDate = "#=ResultDate#"
,Region = "#=Region#"
}))
)
.Scrollable(scrolling => scrolling.Enabled(false))
.Sortable()
.Filterable(filtering => filtering.Enabled(true))
.ClientDetailTemplateId("LastTemplate")
.Pageable(paging => paging.Enabled(false))
.ToClientTemplate()
)
</script>
<script id="LastTemplate" type="text/kendo-tmpl">
#(Html.Kendo().Grid<CustomerDetailsViewModel>()
.Name("SumGrid_#=ResultYear#_#=ResultQuarter#_#=ResultMonth#_#=ResultWeekStart#_#=ResultDate#_#=Region#_#=CustomerName#")
.Columns(column =>
{
column.Bound(x => x.CustomerDetails1).Width("23%");
column.Bound(x => x.CustomerDetails2).Width("20%");
column.Bound(x => x.CustomerDetails3).Width("35%");
column.Bound(x => x.CustomerDetails4).Width("14%");
})
.DataSource(dataBinding => dataBinding
.Ajax()
.PageSize(500)
.Read(read => read.Action("GetCustomerDetails", Constants.Controller_ReportController, new
{
ResultYear = "#=ResultYear#"
,ResultQuarter = "#=ResultQuarter#"
,ResultMonth = "#=ResultMonth#"
,ResultWeekStart = "#=ResultWeekStart#"
,ResultDate = "#=ResultDate#"
,Region = "#=Region#"
,CustomerName = "#=CustomerName#"
}))
)
.Events(e => e.DataBound("onDataBound"))
.Scrollable(scrolling => scrolling.Enabled(false))
.Sortable()
.Filterable(filtering => filtering.Enabled(true))
.Pageable(paging => paging.Enabled(false))
.ToClientTemplate()
)
</script>
OnDataBound i've tried a few things, including the answer from this thread (Display a message within the Kendo grid when it's empty) with no luck. That one specifically always tells me I have 0 items in my data source (originally it was undefined, then I passed the grid name and still no luck).
Does anyone have a nice way to just say "No Items to display" while using the Fluent API with nested grids? I feel like i'm missing something simple here.
Thank you!
I figured these out:
Since I was using an ajax post back, the grid items weren't always available when the DataBound event was being called for some reason (it feels like they should be, since it's DataBound, but it wasn't)
I wrapped my no-results query in a setTimeout of 500ms so as to catch it, anything less and I would go back to the original error. I also modified the .find(... call to remove k-grid-header since that class wasn't outputting on my grid, and the colgroup was directly under the k-grid on the table.
function DisplayNoResultsFound(e) {
var self = e;
setTimeout(function (item) {
var grid = self;
var dataSource = grid.data('kendoGrid').dataSource;
var colCount = grid.find('colgroup > col').length;
var noResultsMessage = '#Resources.Global.NoResultsFound';
// If there are no results place an indicator row
if (dataSource._view.length == 0) {
grid.find('tbody')
.append('<tr class="kendo-data-row"><td colspan="' + colCount + '" style="text-align:center"><b>' + noResultsMessage + '</b></td></tr>');
}
}, 500); //Need to delay for ajax postback
}
This code is called by passing the jQuery grid item from the Databound Event:
.Events(e => e.DataBound(DisplayNoResultsFound($('\\#SumGrid_#=ResultYear#_#=ResultQuarter#_#=ResultMonth#_#=ResultWeekStart#_#=ResultDate#_#=Region#_#=CustomerName#'))")
Hope this helps someone else in the future!