This is a migrated thread and some comments may be shown as answers.

All grid actions (checkbox, hover, scrolling, editing) are slowed to extreme on large dataset

7 Answers 2049 Views

Grid

This is a migrated thread and some comments may be shown as answers.

n/a asked on 31 Mar 2020, 10:46 PM

I'm using Kendo UI for jQuery.

All my grids render with 20 columns at the least, and although I have set multiple choices for pagesizes available, it's likely that for most of the time when people use my application, they'll be dealing with grid data with all of the rows rendered at the same time (>4000).

Problem is, when all the rows are rendered, the grid is slowed and lagged beyond use; hover states are not matching between fixed and column rows (which I had to write a separate script for), scrolling is lagging or at times impossible, checkboxes take good 3 seconds before it's checked, 5 seconds to uncheck it, etc. Not only does it render so slow that my entire browser freezes, after it renders it basically prevents me from doing anything else within my website.

I tried scrollable (virtual, endless), server scrolling, server paging, changing databinding & databound functions, but nothing seems to resolve the speed issue. From what I just checked it takes 4 seconds to resize itself after I changed the browser size. The essentials of my grid relies on displaying large amounts of data to be able to manipulate them, and this lagging is practically rendering my pages unusuable. I'm wondering if this issue could be fixed by Telerik. Thanks in advance.

7 Answers, 1 is accepted

answered on 03 Apr 2020, 11:46 PM

First of all, here's my script

Unfortunately duplicating exact same grid I use results in too much of time consumption, so I just pasted my script dealing with kendo grid initialization. It's worth noting that I also use libraries like Bootstrap for popovers and modals, custom jQuery functions to append elements, etc (little emphasis on etc.).

I understand paginating is a good practice performance wise, but the project we're working on deals with the efficiency of viewing all rows of data at once, to be able to view and modify specific columns. I've also implemented importing custom filters in accordance with kendo's filter(), so the data size would be lower than total number of items. But again, it's crucial for my project to render many data at once.

I did prior research before asking, trying many workarounds like I previously stated, but the issue won't resolve. At the moment this is a top-priority blocking issue at our end... Every functionalities literally are disabled as soon as the grid even attempts at loading more than 100 items.

answered on 07 Apr 2020, 02:23 PM

Hi,

I want to start by saying that the grid in the provided code does have paging enabled and I do not see anything in the configuration that migh cause a performance panalty. Can you please remove the logic inside the dataBound event handler and check if this improves the performance?

As for a grid without paging 5k rows did seem to slow it down as this is a lot of HTML to render. Moreover when performing operations like reordering columns having an performance penalty is expected as the HTML of the cells is swapped, meaning that 10k cells swap places. If the grid should have a big number of items I would recommend either using virtualization or enabling paging.

Regards,
Angel Petrov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

answered on 08 Apr 2020, 01:19 AM

Hi,

I understand the relative increase in load time in response to custom script addition, both in and out of the dataBound function, which is why I tried removing all of my custom scripts and rendering purely kendo built-in functionalities (locked column, search, columnmenu filter, etc.). While the script removal did indeed speed up the performance slightly, the grid still has performance issues when rendering >250 data.

I apologize if the enabled paging confused you; I moved the paging element outside of the grid, with pagesize options of 50, 100, 250, 500, and all. With that being said, the performance issue is centered around points I previously raised on my original post:

1. "It's likely that for most of the time when people use my application, they'll be dealing with grid data with all of the rows rendered at the same time". I understand that even 1000 elements rendered at the same time, even if I was talking about 1000 rows of simple <p> tag, will likely to have performance issues. But I should at least be able to browse my data when rendering around 500 rows without any issue, especially from a library I paid for. At this point my browser almost freezes for good 5 seconds when rendering 200 rows. How would I know this? I tested the performance on a wide variety of parameters: removing databound, removing my script, adding back the databound functions, deleting some of my script, etc.

2. The performance issue still exists after removing most of the scripts. After removing the script, it takes on average 11083 ms to load the grid with 500 rows of data.

3. "I tried scrollable (virtual, endless), server scrolling, server paging, changing databinding & databound functions, but nothing seems to resolve the speed issue."

Like I said before this is a blocking issue for our project, and good amount of time is already spent on this forum alone. Am I correct in understanding that Telerik can't help with this?

answered on 09 Apr 2020, 03:17 PM

Hello,

It seems that there is something additional that is causing the performance penalty. 200 rows should not take 5 seconds. Can you please open a formal support ticket and attach a sample which we can debug there?

I have tested the grid bound to 2000 items by modifying this demo. The generation of the data plus with the data-binding altoghether took arround 1.5 secods. Additionally I did not experience any problems when scrolling or etc. Here you can see a video from my results.

In order to isolate the problem I suggest you disable the grid functionalities one by one and check whether this has any effect. Additionally you can check which part of the JavaScript logic is taking most of the time by using the browrser developers tool.

Regards,
Angel Petrov
Progress Telerik

answered on 09 Apr 2020, 05:48 PM

Hello,

Here's my full cshtml file for the page :
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous">
</script>
<script>
var timerStart = Date.now();
</script>
<div id="loading">
<div class="loader">Loading...</div>
</div>
@Html.Partial("_LeftMenuPartial")
<main class="main main-content">
<section class="main-content-body">

<div class="main-content-body-header">
<p class="page-title">Restock inventory</p>
<div class="action-bar-items">
<button type="button" class="btn btn-sm btn-print">
Print
</button>

<button type="button" class="btn btn-sm btn-export">
Export
</button>

</div>
</div>
<div class="board">
<nav class="board-header">
<div class="nav nav-tabs navbar-collapse" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-all_products-tab" data-toggle="tab"
href="#nav-all_products" role="tab" aria-controls="nav-all_products"
aria-selected="true">
All
products
</a>

<a class="nav-item nav-link" id="nav-my_products-tab" data-toggle="tab" href="#nav-all_products"
role="tab" aria-controls="nav-my_products" aria-selected="false">My products</a>
</div>
<button id="more-nav-tabs" class="nav-item nav-link"><i class="fal fa-ellipsis-h"></i></button>
<div class="hidden-links hidden"></div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-all_productss" role="tabpanel"
aria-labelledby="nav-all_products-tab">
<div class="inventory-board" id="example">
<div id="grid"></div>
</div>
</div>
</div>
</div>
</section>
<div id="filter-list">
<div class="filter-list-header">
<h3 class="filter-list-name">Set your preferences</h3>
<a class="btn-close" id="filter-list-close" href="#"></a>
</div>
<div id="accordion">
<div class="card">
<div class="card-header" id="preference-heading">
<button class="btn btn-link" data-toggle="collapse" data-target="#advancedSearchCollapse" aria-expanded="true" aria-controls="advancedSearchCollapse">
Advanced Search
<span data-indicate="collapse"><i class="far fa-angle-down"></i></span>
</button>
</div>
<div id="advancedSearchCollapse" class="collapse" aria-labelledby="advanced search collapse" data-parent="#accordion">
<div class="card-body">
<div class="filter-list-preference">
<div class="filter-list-preference-heading">
<p class="filter-list-preference-text">Products must match: </p>
<form class="filter-list-preference-operator">
<input type="radio" id="and" name="operator" value="and">
<label for="and">all conditions</label>
<input type="radio" id="or" name="operator" value="or">
<label for="or">any conditions</label>
</form>
</div>

<div class="filter-list-preference-main" data-index="1">
<div class="filter-list-preference-filter-container">

<div class="filter-list-preference-filter-value">
<select class="selectpicker" data-type="preference-field">
<option selected="selected" style="color: #999">Select a field</option>
</select>
<select class="selectpicker" data-type="preference-operator">
<option select="selected" style="color: #999">is equal to</option> +
<option style="color: #999">is not equal to</option> +
<option style="color: #999">is greater than</option> +
<option style="color: #999">is less than</option> +
<option style="color: #999">starts with</option> +
<option style="color: #999">ends with</option> +
<option style="color: #999">contains</option> +
<option style="color: #999">does not contain</option> +
<option style="color: #999">Yes</option> +
<option style="color: #999">No</option> +
</select>

</div>
<select class="selectpicker" data-type="preference-value">
</select>
</div>
<div class="filter-list-preference-delete-container">
<button class="btn btn-secondary" data-type="filter-list-preference-delete"><i class="fal fa-trash-alt"></i></button>
</div>
</div>
</div>
<div class="filter-list-preference-add-container">
<button id="preference-add" type="button" class="btn btn-secondary">Add another condition</button>
</div>
</div>
</div>
</div>

<div class="card">
<div class="card-header" id="column-display-heading">
<button class="btn btn-link" data-toggle="collapse" data-target="#columnDisplayCollapse" aria-expanded="true" aria-controls="columnDisplayCollapse">
Column display
<span data-indicate="collapse"><i class="far fa-angle-down"></i></span>
</button>
</div>
<div id="columnDisplayCollapse" class="collapse" aria-labelledby="column display collapse" data-parent="#accordion">
<div class="card-body">
<div class="filter-list-body">
<ul class="options">
<li class="filter-list-body-title">Product Info</li>
<li>
<input type="checkbox" id="status" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="status">Amazon listing status* (Req.)</label>
</li>
<li>
<input type="checkbox" id="image" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="image">Amazon thumbnail image</label>
</li>
<li>
<input type="checkbox" id="fulfilled_by" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="fulfilled_by">Amazon fulfilled by</label>
</li>
<li>
<input type="checkbox" id="sku" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="sku">SKU</label>
</li>
<li>
<input type="checkbox" id="barcode" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="barcode">Barcode</label>
</li>
<li>
<input type="checkbox" id="asin" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="asin">ASIN* (Req.)</label>
</li>
<li>
<input type="checkbox" id="msku" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="msku">MSKU</label>
</li>
<li>
<input type="checkbox" id="fnsku" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="fnsku">FNSKU</label>
</li>
<li>
<input type="checkbox" id="product_title" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="product_title">Amazon product name (Rcmd.)</label>
</li>
<li>
<input type="checkbox" id="brand" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="brand">Brand</label>
</li>
<li>
<input type="checkbox" id="device" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="device">Device</label>
</li>
<li>
<input type="checkbox" id="product" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="product">Product</label>
</li>
<li>
<input type="checkbox" id="product_type" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="product_type">Product Type</label>
</li>
<li>
<input type="checkbox" id="variation" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="variation">Variation</label>
</li>
<li class="filter-list-body-title">Supplier info</li>
<li>
<input type="checkbox" id="co" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="co">Country of origin</label>
</li>
<li>
<input type="checkbox" id="lt" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="lt">Supplier lead time</label>
</li>
<li>
<input type="checkbox" id="duty" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="duty">Duty percentage</label>
</li>
<li class="filter-list-body-title">Product status</li>
<li>
<input type="checkbox" id="po" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="po">PO status (Rcmd.)</label>
</li>
<li>
<input type="checkbox" id="dc" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="dc">DC status</label>
</li>
<li class="filter-list-body-title">Product sales</li>
<li>
<input type="checkbox" id="sales" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="sales">Sales (Rcmd.)</label>
</li>
<li>
<input type="checkbox" id="sales_rank" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="sales_rank">Sales rank (Rcmd.)</label>
</li>
<li class="filter-list-body-title">Product inventory</li>
<li>
<input type="checkbox" id="sq_inv" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="sq_inv">SQ inventory (Rcmd.)</label>
</li>
<li>
<input type="checkbox" id="fba_inv" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="fba_inv">FBA inventory - Display total only (Rcmd.)</label>
</li>
<li>
<ul style=" list-style-type: none">
<li>
<input type="checkbox" id="available" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="available">Available</label>
</li>
<li>
<input type="checkbox" id="inbound_shipped" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="inbound_shipped">Inbound</label>
</li>
<li>
<input type="checkbox" id="reserved" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="reserved">Reserved</label>
</li>
<li>
<input type="checkbox" id="unfulfillable" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="unfulfillable">Unfulfillable</label>
</li>
</ul>
</li>
<li class="filter-list-body-title">Order progress info</li>
<li>
<input type="checkbox" id="sq_order_progress" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="sq_order_progress">Order in Progress - Display total only (Rcmd.)</label>
</li>
<li>
<ul style=" list-style-type: none">

<li>
<input type="checkbox" id="pending_order" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="pending_order">Pending Order</label>
</li>
<li>
<input type="checkbox" id="inbound" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="inbound">Inbound</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="days_of_supply" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="days_of_supply">Days of Supply* (Rcmd.)</label>
</li>
<li>
<input type="checkbox" id="po_qty" checked="checked" class="k-checkbox">
<label class="k-checkbox-label" for="po_qty">PO QTY</label>
</li>
</ul>
</div>
</div>
</div>
</div>

<div class="card">
<div class="card-header" id="preference-heading">
<button class="btn btn-link" data-toggle="collapse" data-target="#statusCollapse" aria-expanded="true" aria-controls="statusCollapse">
Status
<span data-indicate="collapse"><i class="far fa-angle-down"></i></span>
</button>
</div>
<div id="statusCollapse" class="collapse" aria-labelledby="status filter collapse" data-parent="#accordion">
<div class="card-body">
<div class="sidebar-status-filter">
<div id="filter-status-sidebar"><p class="filter-name">Listing Status</p><form></form></div>
<div id="filter-fulfilledBy-sidebar"><p class="filter-name">Fulfilled by</p><form></form></div>
</div>
</div>
</div>
</div>

</div>

<div class="filter-list-footer">
<button class="btn btn-secondary" id="filter-list-save">Save</button>
</div>
</div>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Bookmark</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<label for="query">Search</label>
<input type="text" class="form-control" name="query">
<div style="margin-top: 1.5rem" class="dropdown-divider"></div>
<label for="title">Title</label>
<input type="text" class="form-control" name="title">
</div>
<div class="modal-footer">
<button id="bookmark-save" type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="advancedSearch" tabindex="-1" role="dialog" aria-labelledby="advanced search" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Advanced Search</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="advanced-search-container">
<div class="advanced-search-heading">
<p class="advanced-search-text">Products must match: </p>
<form class="advanced-search-operator">
<input type="radio" id="and-search" name="operator" value="and">
<label for="and-search">all conditions</label>
<input type="radio" id="or-search" name="operator" value="or">
<label for="or-search">any conditions</label>
</form>
</div>
<div class="advanced-search-item" data-index="1">
<select class="advanced-search-select" data-type="search-field">
<option select="selected" style="color: #999">Select a field</option>
</select>
<select class="advanced-search-select" data-type="search-operator">
<option select="selected" style="color: #999">is equal to</option>
<option style="color: #999">is not equal to</option>
<option style="color: #999">is greater than</option>
<option style="color: #999">is less than</option>
<option style="color: #999">starts with</option>
<option style="color: #999">ends with</option>
<option style="color: #999">contains</option>
<option style="color: #999">does not contain</option>
<option style="color: #999">Yes</option>
<option style="color: #999">No</option>
</select>
<select class="advanced-search-select" data-type="search-value">
<option select="selected" style="color: #999">Select a field</option>
</select>
<button class="btn btn-secondary" data-type="search-delete">
<i class="fal fa-trash-alt" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="advanced-search-add-container">
<button id="advanced-search-add" type="button" class="btn btn-secondary">Add another condition</button>
</div>
</div>
<div class="modal-footer">
<button id="advanced-search-save" type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="deleteBookmark" tabindex="-1" role="dialog" aria-labelledby="bookmark delete" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Delete <span id="current-bookmark"></span></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete this bookmark?
</div>
<div class="modal-footer">
<button id="deleteBookmarkConfirm" type="button" class="btn btn-danger">Yes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>

</main>

<script src="../../Scripts/inventory.grid.js"></script>
<script>
var counter = 0;
var myData =[@Html.Raw(ViewBag.Restock)];

function createGrid () {
var element = $("#grid").kendoGrid({
toolbar: [
"search"
],
excel: {
fileName: "new_data.xlsx",
proxyURL: "https://demos.telerik.com/kendo-ui/service/export",
},
dataSource: {
data: myData,
pageSize: 100,
schema: {
model: {
id: "sku",
fields: {
"status": { editable: false },
"image": { editable: false },
"fulfilled_by": { editable: false },
"sku": { editable: false },
"barcode": { editable: false },
"asin": { editable: false },
"msku": { editable: false },
"fnsku": { editable: false },
"product_title": { editable: false },
"brand": { editable: false },
"device": { editable: false },
"product": { editable: false },
"product_type": { editable: false },
"variation": { editable: false },
"po": { editable: false },
"dc": { editable: false },
"co": { editable: false },
"duty": { editable: false },
"lt": { type: "number", editable: false },
"sales": { editable: false },
"sales_rank": { editable: false },
"fba_inv": { editable: false },
"available": { editable: false },
"inbound": { editable: false },
"unfulfillable": { editable: false },
"reserved": { editable: false },
"sq_inv": { editable: false },
"sq_order_progress": { editable: false },
"inbound": { editable: false },
"pending_order": { editable: false },
"days_of_supply": { editable: false },
"fba_avg_sales": { editable: false },
"action": { field: "action", type: "number", defaultValue: 1 },
"rcmd_order_date": { editable: false},
"rcmd_order_qty": { editable: false , type :"number"}
}
},
}
},
save: function (e) {
if (e.values.hasOwnProperty("days_to_last") || e.values.hasOwnProperty("po_qty")) {
var dateSpan = e.container.closest("TR").find(".dateSpan");
var totalSpan = e.container.closest("TR").find(".totalSpan");
var fbaDayDpSpan = e.container.closest("TR").find(".fbaDayDpSpan");

var result = new Date();
if(e.values.hasOwnProperty("days_to_last")) {
result.setDate(result.getDate() + (Math.round(parseFloat(e.model.days_of_supply)) - e.values.days_to_last));
dateSpan.html(getFormattedDate(result));
totalSpan.html( Math.round(parseFloat(e.values.days_to_last * e.model.fba_avg_sales - e.model.available)) );
}
else if(e.values.hasOwnProperty("days_to_last") && e.values.hasOwnProperty("po_qty")) {
var newDp = Math.round( parseFloat((parseFloat(e.model.available) + parseFloat(e.values.po_qty)) / e.model.fba_avg_sales) );
fbaDayDpSpan.html(newDp);
result.setDate(result.getDate() + (Math.round(parseFloat(newDp)) - e.values.days_to_last));
dateSpan.html(getFormattedDate(result));
totalSpan.html(Math.round(parseFloat(e.values.days_to_last * e.mode.fba_avg_sales - e.model.available - e.values.po_qty)));
}
else if(e.values.hasOwnProperty("po_qty")) {
var newDp = Math.round(parseFloat((parseFloat(e.model.available) + parseFloat(e.values.po_qty)) / e.model.fba_avg_sales));
console.log(newDp);
console.log(parseFloat(e.model.available));
console.log(parseFloat(e.values.po_qty));
console.log(e.model.fba_avg_sales);
console.log(e.model.days_to_last);
fbaDayDpSpan.html(newDp);
result.setDate(result.getDate() + (Math.round(parseFloat(newDp)) - e.model.days_to_last));
dateSpan.html(getFormattedDate(result));
totalSpan.html(Math.round(parseFloat(e.model.days_to_last * e.model.fba_avg_sales - e.model.available - e.values.po_qty)));
console.log(Math.round(parseFloat(e.model.days_to_last * e.model.fba_avg_sales - e.model.available - e.values.po_qty)));

}
}
},
sortable: true,
columnMenuInit: function (e) {
e.container.find('.k-columns-item').remove()
},
scrollable: true,
columnMenu: true,
reorderable: true,
resizable: true,
editable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
change: onChange,
dataBound: function(e) {
$('#loading-small').css({
"opacity": "0",
"z-index": "-20"
})
$('.product-title').tooltip();
$('.stranded-reason').tooltip();

$('[data-toggle="popover"]').popover({
html: true,
trigger: 'focus'
});
$('.far.fa-angle-down.icon-margin-left').on('click', function(e) {
$(this).focus();
});
$('.far.fa-angle-down.icon-margin-none').on('click', function(e) {
$(this).focus();
});
var $trs = $('.k-grid tbody tr');
var gridtimer;
$trs.hover(
function (e) {
var i = $(this).index() +1;
gridtimer = setTimeout(function() {
$trs.filter(':nth-child(' +i + ')').addClass('hover');
}, 250);
},
function (e) {
clearTimeout(gridtimer);
var i = $(this).index() +1;
$trs.filter(':nth-child(' +i + ')').removeClass('hover');
}
);
var $thrs = $('.k-grid .k-grid-header th');
$thrs.each(function() {
if($(this).attr("data-role") == "columnmenu") {
// $(this).find('label').text('');
return;
}
$(this).attr({
"data-toggle": "tooltip",
"data-placement": "top",
"title": $(this).text()
});
$(this).tooltip();
});
var page_size = this.dataSource._pageSize;
var total_size = this.dataSource._total;
var view_size = this.dataSource._view.length;
$('.k-pager-sizes.k-label').html('Showing ' +
(
page_size > total_size ?
total_size :
(page_size > view_size ? view_size : page_size)
) + ' of ' + total_size + ' items');
},
dataBinding: function(e) {

var $this = this;
var $a = $('.k-pager-info.k-label');
if(counter == 0) {
$a.replaceWith('<span class="page-route-container">' +
'<form class="page-route">' +
'<p>Page</p>' +
'<input class="form-control" id="pagenum" type="text" value="' + this.dataSource._page + '" />' +
'<p>of '+ Math.ceil(this.dataSource._total / this.dataSource._pageSize) +'</p>' +
'<input class="btn btn-pageNum" type="submit" value="Go" />' +
'</form></span>'
);
counter++;
} else {
$('#currentPageSize').text(this.dataSource._pageSize);
$('.page-route-container').html('<form class="page-route">' +
'<p>Page</p>' +
'<input class="form-control" id="pagenum" type="text" value="' + this.dataSource._page + '" />' +
'<p>of '+ Math.ceil(this.dataSource._total / this.dataSource._pageSize) +'</p>' +
'<input class="btn btn-pageNum" type="submit" value="Go" />' +
'</form>');
}

$('.page-route').submit(function (e) {
var pagenum = $('#pagenum').val();
$this.dataSource.page(pagenum);
});
},
pageable: {
pageSizes: [10, 25, 50, 75, 100, "all"],
refresh: false,
buttonCount: 5
},
navigatable: true,

columns: [
// Basic Product Info
{
selectable: true,
width: "50px",
field: "checkbox",
attributes: {"class": "k-checkbox-column"},
sortable: false,
locked: true,
filterable: false
},
{
field: "status",
title: "Status",
width: "80px",
attributes: {
"class": "status"
},
filterable: {
multi: true
}
},
{
field: "image",
title: "Image",
width: "90px",
template: "#=imagePlaceholder(image)#"
},
{
field: "fulfilled_by",
title: "Fulfilled by",
width: "130px"
},
{
field: "sku",
title: "SKU",
width: "100px"
},
{
field: "barcode",
title: "Barcode",
width: "120px"
},
{
field: "asin",
title: "ASIN",
locked: true,
width: "100px"
},
{
field: "msku",
title: "MSKU",
width: "110px"
},
{
field: "fnsku",
title: "FNSKU",
width: "110px"
},
{
field: "product_title",
title: "Product Title",
width: "240px",
template: "<a class='product-title' data-toggle='tooltip' data-placement='bottom' title='#=product_title#'>#=product_title#</a>"
},
{
field: "brand",
title: "Brand",
width: "110px"
},
{
field: "device",
title: "Device",
width: "180px",
template: "<div class='device'>#=device#</div>"
},
{
field: "product",
title: "Product",
width: "150px"
},
{
field: "product_type",
title: "Product Type",
width: "150px"
},
{
field: "variation",
title: "Variation",
width: "110px"
},
{
field: "po",
title: "PO Status",
width: "150px",
},
{
field: "dc",
title: "DC Status",
template: "<div class='dc'>#=dc#</div>",
width: "90px"
},
{
field: "co",
title: "CO",
width: "70px"
},
{
field: "duty",
title: "Duty",
width: "90px"
},
{
field: "lt",
title: "LT",
width: "100px",
template: "#=nullDays(lt)# days"
},
// End Basic Product Info

// Restock Inventory Columns
{
field: "sales",
title: "Sales",
width: "100px",
attributes: {
"class": "sales"
},
template: "$#=sales# <i tabindex='0' class='far fa-angle-down icon-margin-left' data-container='body' data-toggle='popover' data-placement='bottom'" +
" data-trigger='focus' data-content='#=appendSalesInfo($(this), data.sales, data.orders, data.sales_fourteen, data.orders_fourteen, " +
"data.sales_thirty, data.orders_thirty)#'></i>"
},
{
field: "sales_rank",
title: "Sales Rank",
width: "100px",
attributes: {
"class": "sales-rank"
},
//template: "<div>#=sales_rank#<i onclick='appendSalesRankInfo($(this), #=data.cell_and_accessories#, #=data.cell_phone_basic#)' class='far fa-angle-down icon-margin-left'></i></div>"
template: "#=sales_rank# <i tabindex='0' class='far fa-angle-down icon-margin-left' data-container='body' data-toggle='popover' data-placement='bottom'" +
" data-trigger='focus' data-content='#=appendSalesRankInfo($(this), data.cell_and_accessories, data.cell_phone_basic" +
")#'></i>"
},
{
field: "fba_inv",
title: "FBA Inv.",
width: "110px",
attributes: {
"class": "fba-inv"
},
template: "#=fba_inv# " +
"<i tabindex='0' class='far fa-angle-down icon-margin-left' data-container='body' data-toggle='popover' data-placement='bottom'" +
" data-trigger='focus' data-content='#=appendFBAInfo($(this), data.available, data.inbound, data.reserved, data.unfulfillable, data.researching, data.fba_inv"+
")#' class='far fa-angle-down icon-margin-left'></i>"
},
{
field: "available",
title: "Available",
width: "110px",
attributes: {
"class": "available"
}
//template: "#=available# " +
// "<i tabindex='0' class='far fa-angle-down icon-margin-left' data-container='body' data-toggle='popover' data-placement='bottom'" +
// " data-trigger='focus' data-content='#=appendAvailableInfo($(this)"+
// ")#' class='far fa-angle-down icon-margin-left'></i>"
},
{
field: "inbound_shipped",
title: "Inbound",
width: "90px",
},
{
field: "unfulfillable",
title: "Unfulfillable",
width: "110px",
attributes: {
"class": "unfulfillable"
},
template: "#=unfulfillable# " +
"<i tabindex='0' class='far fa-angle-down icon-margin-left' data-container='body' data-toggle='popover' data-placement='bottom'" +
" data-trigger='focus' data-content='#=appendUnfulfillableInfo($(this)"+
")#' class='far fa-angle-down icon-margin-left'></i>"
},
{
field: "reserved",
title: "Reserved",
width: "110px",
attributes: {
"class": "reserved"
},
template: "#=reserved# " +
"<i tabindex='0' class='far fa-angle-down icon-margin-left' data-container='body' data-toggle='popover' data-placement='bottom'" +
" data-trigger='focus' data-content='#=appendReservedInfo($(this), data.available, data.inbound, data.reserved, data.unfulfillable, data.researching, data.total"+
")#' class='far fa-angle-down icon-margin-left'></i>"
},
{
field: "sq_inv",
title: "SQ Inv",
width: "110px",
},
{
field: "sq_order_progress",
title: "SQ Order progress",
width: "110px",
attributes: {
"class": "sq-order-progress"
},
template: "#=sq_order_progress# " +
"<i tabindex='0' class='far fa-angle-down icon-margin-left' data-container='body' data-toggle='popover' data-placement='bottom'" +
" data-trigger='focus' data-content='#=appendSQOrderProgressInfo($(this)"+
")#' class='far fa-angle-down icon-margin-left'></i>"
},
{
field: "inbound",
title: "Inbound (Shipped)",
width: "110px"
},
{
field: "pending_order",
title: "Pending Order",
width: "110px"
},
{
field: "fba_avg_sales",
title: "7 day Avg Sales",
width: "110px"
},
{
field: "days_of_supply",
title: "Days of Supply",
template: "<span class='fbaDayDpSpan'> #= days_of_supply # </span>",
width: "110px"
},
{
field: "rcmd_order_date",
title: "Rcmd. Date",
//format: "{0:mm/dd/yy}",
template: "<span class='dateSpan'>#= isNull(rcmd_order_date) # </span>",
width: "130px",
sortable:
{
compare: function (a, b, desc) {
var aVal = a.rcmd_order_date === null ? null : Date.parse(a.rcmd_order_date);
var bVal = b.rcmd_order_date === null ? null : Date.parse(b.rcmd_order_date);
if (aVal == bVal) {
return 0;
} if (aVal === null) {
return desc ? -1 : 1;
} if (bVal === null) {
return desc ? 1 : -1;
}
if (aVal < bVal) {
return -1;
} else if (aVal > bVal) {
return 1;
}
}
}
},
{
field: "rcmd_order_qty",
title: "Rcmd. QTY",
template: "<span class='totalSpan'>#= isNull(rcmd_order_qty) # </span>",
width: "110px",
sortable:
{
compare: function (a, b, desc) {
var aVal = a.rcmd_order_qty === null ? null : parseInt(a.rcmd_order_qty);
var bVal = b.rcmd_order_qty === null ? null : parseInt(b.rcmd_order_qty);
if (aVal == bVal) {
return 0;
} if (aVal === null) {
return desc ? -1 : 1;
} if (bVal === null) {
return desc ? 1 : -1;
}
if (aVal < bVal) {
return -1;
} else if (aVal > bVal) {
return 1;
}
}
}
},
{
field: "po_qty",
title: "PO Qty",
width: "120px",
attributes: {"class": "po-qty"},
// template: "<input style='width: 75px' type='text' class='k-textbox' name='po_qty' title='po_qty' data-bind='value:po_qty'>"
template: "<span class='po-qty-val'> #=isNumber(po_qty)#</span>"
},
{
field: "days_to_last",
title: "Custom DP",
width: "120px",
attributes: {"class": "days-to-last"},
template: "<span class='days-to-last-val'> #=isNumber(days_to_last)#</span>"
//template: "<span class='days_to_last'>#=days_to_last#</span>"
},
]

}).getKendoGrid();
return element;
}

// Start of Everything
$(document).ready(function () {
console.log("Time until DOMready: ", Date.now()-timerStart);

$('.btn-export').click(function (e) {
var grid = $('#grid').data('kendoGrid');
grid.saveAsExcel();
})

// Initialize Grid
var grid = createGrid();

// $('#grid .k-grid-content').append('<div id="loading-small"><div class="loader">Loading...</div></div>');
$('th[data-field="rcmd_order_date"]').trigger('click');

// Preset Column Filtering
var preFilterColumns = [@Html.Raw(ViewBag.filter)];
var checkboxArr = $('.filter-list-body .options li input[type=checkbox]');

for(var i = 0; i < preFilterColumns.length; i++) {
grid.hideColumn(preFilterColumns[i]);
}
checkboxArr.map(function() {
var $this = $(this).context.id;
for(var i = 0; i < preFilterColumns.length; i++) {
if($this == null) return;
else if($this == preFilterColumns[i]) {
$(this).trigger('click');
}
}
});

// Remove Built-in Kendo Function from Toolbar
var el = document.querySelector('.k-header.k-grid-toolbar'),
elClone = el.cloneNode(true);

el.parentNode.replaceChild(elClone, el);

// Input Placeholder
$('.k-textbox.k-grid-search').addClass("input-group")
.find('input').addClass('form-control').attr("placeholder", "Search ASIN, SKU, Product title");

// Remove Kendo Search Icon
$('.k-textbox.k-grid-search')
.find('.k-input-icon').remove();

// Append Bottons : Filter, Reference, Favorite
$('.k-textbox.k-grid-search').append('<div class="input-group-append" id="button-addon4">' +
'<button class="btn btn-outline-secondary" id="bookmark" data-toggle="modal" data-target="#exampleModalCenter" type="button"><i class="far fa-star"></i></button>' +
'<button class="btn btn-outline-secondary" id="advanced-search" data-toggle="modal" data-target="#advancedSearch" type="button">Advanced Search</button>' +
'<div class="btn-group">' +
'<button class="btn btn-outline-secondary dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">Status</button>' +
'<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="filter-container">' +
'<div id="filter-status-container"><p class="filter-name">Listing Status</p><form></form></div>' +
'<div id="filter-fulfilledBy-container"><p class="filter-name">Fulfilled by</p><form></form></div>' +
'</div>' +
'</div>' +
'<div class="btn-group">' +
'<button class="btn btn-secondary dropdown-toggle" type="button" id="action-dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" disabled>' +
'Action on <span id="item-selected">0</span> selected' +
'</button>' +
'<div class="dropdown-menu" aria-labelledby="action-dropdown">' +
'<a class="dropdown-item" href="#">Create shipping plan</a>' +
'<a class="dropdown-item" href="#">Show recommendation</a>' +
'<a class="dropdown-item" href="#">Hide recommendation</a>' +
'</div>' +
'</div>' +
'</div>'
);
$('.k-header.k-grid-toolbar').append(
'<div class="btn-group">' +
'<button class="btn btn-outline-secondary dropdown-toggle" id="pageSizeDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" type="button">' +
'<span id="currentPageSize">25</span> ' +
'<span class="items-per-page">items per page</span>' +
'</button>' +
'<div class="dropdown-menu" aria-labelledby="page size dropdown" id="pagesize-dropdown">' +
'<a class="dropdown-item" href="#" data-page-index="1">' +
'<strong>25</strong> items' +
'</a>'+
'<a class="dropdown-item" href="#" data-page-index="2">' +
'<strong>50</strong> items' +
'</a>'+
'<a class="dropdown-item" href="#" data-page-index="3">' +
'<strong>100</strong> items' +
'</a>'+
'<a class="dropdown-item" href="#" data-page-index="4">' +
'<strong>250</strong> items' +
'</a>'+
'<a class="dropdown-item" href="#" data-page-index="5">' +
'<strong>500</strong> items' +
'</a>'+
'<a class="dropdown-item" href="#" data-page-index="6">' +
'<strong>All</strong> items' +
'</a>'+
'</div>' +
'</div>' +
'<button class="btn btn-outline-secondary" id="reference-toggle" type="button"><i class="far fa-edit"></i> Reference</button>' +
'<button class="btn btn-outline-secondary" id="reference-toggle-minimized" type="button"><i class="fal fa-cog"></i></button>' +
'<button class="btn btn-outline-secondary" id="bookmark-delete" data-toggle="modal" data-target="#deleteBookmark" type="button" disabled="true"><i class="fal fa-trash-alt"></i></button>'
)

// Kendo Column Menu Show-on-Hover
$('.k-header').hover(
function () {
$(this).find('.k-header-column-menu').css({ "opacity": "1" , "padding": "0.75rem 0.75rem 0.75rem 0", "background-color": "unset"});

}, function () {
$(this).find('.k-header-column-menu').css({ "opacity": "0" });
}
);

$(window).resize(function() {
var toolbar_width = $('#grid .k-header.k-grid-toolbar').width();

var $advancedSearch = $('#advanced-search'),
$status = $('#dropdownMenuButton').parent(),
$reference = $('#reference-toggle'),
$referenceMinimized = $('#reference-toggle-minimized');

var $advancedSearchSidebar = $('#advancedSearchCollapse').parent(),
$statusFilterSidebar = $('#statusCollapse').parent();

$advancedSearchSidebar.css("display", "none");
$statusFilterSidebar.css("display", "none");
$referenceMinimized.css("display", "none");
$advancedSearch.css("display", "inline-block");
$status.css("display", "inline-block");
$reference.css("display", "inline-block");
$('.items-per-page').css("display", "inline-block");
if(toolbar_width < 720) {
$('.items-per-page').css("display", "none");
}
if(toolbar_width < 540) {
$advancedSearchSidebar.css("display", "flex");
$statusFilterSidebar.css("display", "flex");
$referenceMinimized.css("display", "inline-block");
$advancedSearch.css("display", "none");
$status.css("display", "none");
$reference.css("display", "none");
}
})

$('#pagesize-dropdown .dropdown-item').on('click', function(e) {
e.preventDefault();
var pagesize = $(this).find("strong").text();
var gridData = $('#grid').data('kendoGrid');
switch(pagesize) {
case 'All':
grid.dataSource.pageSize(grid.dataSource.total());
break;
default:
grid.dataSource.pageSize(pagesize);
break;
}
});

// Filter Container Components
var statusData = ["All"], fulfilledByData = ["All"];
var data = $('#grid').data("kendoGrid").dataSource._data;

for (var i = 0; i < data.length; i++) {
if (!statusData.includes(data[i]["status"]) && data[i]["status"] !== undefined && data[i]["status"] !== null) {
statusData.push(data[i]["status"]);
}
if (!fulfilledByData.includes(data[i]["fulfilled_by"]) && data[i]["fulfilled_by"] !== undefined && data[i]["fulfilled_by"] !== null) {
fulfilledByData.push(data[i]["fulfilled_by"]);
}
}
var columnData = $('#grid').data("kendoGrid").columns;
var fieldData = [];
for(var i = 0; i < columnData.length; i++) {
if(columnData[i].title !== undefined && columnData[i].title !== 'Image') {
$('[data-type="preference-field"]').append('<option>' + columnData[i].title + '</option>');
$('[data-type="search-field"]').append('<option>' + columnData[i].title + '</option>');
fieldData.push(columnData[i].field);
}
}
$('[data-type="filter-list-preference-delete"]').on('click', function(e) {
e.preventDefault();
var index = $(this).parent().parent().attr('data-index');
$('.filter-list-preference-main[data-index="'+index+'"]').remove();
$('.advanced-search-item[data-index="'+index+'"]').remove();
$('.filter-list-preference-main').each(function(i) {
$(this).attr("data-index", i + 1);
})
$('.advanced-search-item').each(function(i) {
$(this).attr("data-index", i + 1);
})
});
$('[data-type="search-delete"]').on('click', function(e) {
e.preventDefault();
var index = $(this).parent().attr('data-index');
$('.filter-list-preference-main[data-index="'+index+'"]').remove();
$('.advanced-search-item[data-index="'+index+'"]').remove();
$('.filter-list-preference-main').each(function(i) {
$(this).attr("data-index", i + 1);
})
$('.advanced-search-item').each(function(i) {
$(this).attr("data-index", i + 1);
})
});
$('[data-type="preference-field"]').on('change', function(e) {
var $current = $(this).parent().parent().parent();
var name = e.target.value.toString();
var corres_field;
for(var i = 0; i < columnData.length; i++) {
if(columnData[i].title == name) {
corres_field = columnData[i].field;
}
}
switch(corres_field) {
case 'asin':
case 'sku':
case 'barcode':
case 'msku':
case 'fnsku':
case 'product_title':
$current.find('[data-type="preference-value"]').replaceWith('<input type="text" class="form-control" data-type="preference-value">');
$current.find('[data-type="preference-value"]').on('keyup', function(e) {$(this).attr("value", e.target.value)});
break;
case 'status':
case 'fulfilled_by':
case 'brand':
case 'product':
case 'product_type':
case 'device':
case 'variation':
case 'co':
var nameValueArray = [];
for(var i = 0; i < data.length; i++) {
if(!nameValueArray.includes(data[i][corres_field]) && data[i][corres_field] !== undefined && data[i][corres_field] !== null && data[i][corres_field] !== '') {
nameValueArray.push(data[i][corres_field]);
}
}
$current.find('[data-type="preference-value"]').replaceWith('<select class="selectpicker" data-type="preference-value"></select>');
for(var i = 0; i < nameValueArray.length; i++) {
$current.find('[data-type="preference-value"]').append("<option>" + nameValueArray[i] + "</option>");
}
break;
case 'sales':
case 'sales_rank':
}
});

$('[data-type="search-field"]').on('change', function(e) {
var $searchcurrent = $(this).parent();
var name = e.target.value.toString();
var corres_field;
for(var i = 0; i < columnData.length; i++) {
if(columnData[i].title == name) {
corres_field = columnData[i].field;
}
}
switch(corres_field) {
case 'asin':
case 'sku':
case 'barcode':
case 'msku':
case 'fnsku':
case 'product_title':
$searchcurrent.find('[data-type="search-value"]').replaceWith('<input type="text" class="form-control" data-type="search-value">');
$searchcurrent.find('[data-type="search-value"]').on('keyup', function(e) {$(this).attr("value", e.target.value)});
break;
case 'status':
case 'fulfilled_by':
case 'brand':
case 'product':
case 'product_type':
case 'device':
case 'variation':
case 'co':
var nameValueArray = [];
for(var i = 0; i < data.length; i++) {
if(!nameValueArray.includes(data[i][corres_field]) && data[i][corres_field] !== undefined && data[i][corres_field] !== null && data[i][corres_field] !== '') {
nameValueArray.push(data[i][corres_field]);
}
}
$searchcurrent.find('[data-type="search-value"]').replaceWith('<select class="advanced-search-select" data-type="search-value"></select>');
for(var i = 0; i < nameValueArray.length; i++) {
$searchcurrent.find('[data-type="search-value"]').append("<option>" + nameValueArray[i] + "</option>");
}
break;
case 'sales':
case 'sales_rank':
}
});

$('#preference-add').on('click', function(e) {
e.preventDefault();
var index = $('.filter-list-preference-main').length + 1;
$('.filter-list-preference').append(
'<div class="filter-list-preference-main" data-index="'+index+'">' +
'<div class="filter-list-preference-filter-container">' +
'<div class="filter-list-preference-filter-value">' +
'<select class="selectpicker" data-type="preference-field">' +
'<option selected="selected" style="color: #999">Select a field</option>' +
'</select> ' +
'<select class="selectpicker" data-type="preference-operator">' +
'<option select="selected" style="color: #999">is equal to</option>' +
'<option style="color: #999">is not equal to</option>' +
'<option style="color: #999">is greater than</option>' +
'<option style="color: #999">is less than</option>' +
'<option style="color: #999">starts with</option>' +
'<option style="color: #999">ends with</option>' +
'<option style="color: #999">contains</option>' +
'<option style="color: #999">does not contain</option>' +
'<option style="color: #999">Yes</option>' +
'<option style="color: #999">No</option>' +
'</select> ' +
'</div>' +
'<select class="selectpicker" data-type="preference-value">' +
'</select> ' +
'</div>' +
'<div class="filter-list-preference-delete-container">' +
'<button class="btn btn-secondary" data-type="filter-list-preference-delete"><i class="fal fa-trash-alt"></i></button>' +
'</div>' +
'</div>'
);
var $current = $('.filter-list-preference .filter-list-preference-main[data-index="'+index+'"]');
for(var i = 0; i < columnData.length; i++) {
if(columnData[i].title !== undefined && columnData[i].title !== 'Image') {
$current.find('[data-type="preference-field"]').append('<option>' + columnData[i].title + '</option>');
}
}
$current.find('[data-type="filter-list-preference-delete"]').on('click', function(e) {
e.preventDefault();
var index = $(this).parent().parent().attr('data-index');
$('.filter-list-preference-main[data-index="'+index+'"').remove();
$('.advanced-search-item[data-index="'+index+'"]').remove();
$('.filter-list-preference-main').each(function(i) {
$(this).attr("data-index", i + 1);
})
$('.advanced-search-item').each(function(i) {
$(this).attr("data-index", i + 1);
})
});
$current.find('.selectpicker:first-child').on('change', function(e) {
var name = e.target.value.toString();
var corres_field;
for(var i = 0; i < columnData.length; i++) {
if(columnData[i].title == name) {
corres_field = columnData[i].field;
}
}
switch(corres_field) {
case 'asin':
case 'sku':
case 'barcode':
case 'msku':
case 'fnsku':
case 'product_title':
$current.find('[data-type="preference-value"]').replaceWith('<input type="text" class="form-control" data-type="preference-value">');
$current.find('[data-type="preference-value"]').on('keyup', function(e) {$(this).attr("value", e.target.value)});
break;
case 'status':
case 'fulfilled_by':
case 'brand':
case 'product':
case 'product_type':
case 'device':
case 'variation':
case 'co':
var nameValueArray = [];
for(var i = 0; i < data.length; i++) {
if(!nameValueArray.includes(data[i][corres_field]) && data[i][corres_field] !== undefined && data[i][corres_field] !== null && data[i][corres_field] !== '') {
nameValueArray.push(data[i][corres_field]);
}
}
$current.find('[data-type="preference-value"]').replaceWith('<select class="selectpicker" data-type="preference-value"></select>');
for(var i = 0; i < nameValueArray.length; i++) {
$current.find('[data-type="preference-value"]').append("<option>" + nameValueArray[i] + "</option>");
}
break;
case 'sales':
case 'sales_rank':
}
});
})
$('#advanced-search-add').on('click', function(e) {
e.preventDefault();
var index = $('.advanced-search-item').length + 1;
$('.advanced-search-container').append(
'<div class="advanced-search-item" data-index="'+index+'">' +
'<select class="advanced-search-select" data-type="search-field">' +
'<option select="selected" style="color: #999">Select a field</option>' +
'</select>' +
'<select class="advanced-search-select" data-type="search-operator">' +
'<option select="selected" style="color: #999">is equal to</option>' +
'<option style="color: #999">is not equal to</option>' +
'<option style="color: #999">is greater than</option>' +
'<option style="color: #999">is less than</option>' +
'<option style="color: #999">starts with</option>' +
'<option style="color: #999">ends with</option>' +
'<option style="color: #999">contains</option>' +
'<option style="color: #999">does not contain</option>' +
'<option style="color: #999">Yes</option>' +
'<option style="color: #999">No</option>' +
'</select>' +
'<select class="advanced-search-select" data-type="search-value">' +
'<option select="selected" style="color: #999">Select a field</option>' +
'</select>' +
'<button class="btn btn-secondary" data-type="search-delete">' +
'<i class="fal fa-trash-alt" aria-hidden="true"></i>' +
'</button>' +
'</div>'
);
var $searchcurrent = $('.advanced-search-container .advanced-search-item[data-index="'+index+'"]');
for(var i = 0; i < columnData.length; i++) {
if(columnData[i].title !== undefined && columnData[i].title !== 'Image') {
$searchcurrent.find('[data-type="search-field"]').append('<option>' + columnData[i].title + '</option>');
}
}
$searchcurrent.find('[data-type="search-delete"]').on('click', function(e) {
e.preventDefault();
var index = $(this).parent().attr('data-index');
$('.filter-list-preference-main[data-index="'+index+'"]').remove();
$('.advanced-search-item[data-index="'+index+'"]').remove();
$('.filter-list-preference-main').each(function(i) {
$(this).attr("data-index", i + 1);
})
$('.advanced-search-item').each(function(i) {
$(this).attr("data-index", i + 1);
})
});
$searchcurrent.find('.advanced-search-select:first-child').on('change', function(e) {
var name = e.target.value.toString();
var corres_field;
for(var i = 0; i < columnData.length; i++) {
if(columnData[i].title == name) {
corres_field = columnData[i].field;
}
}
switch(corres_field) {
case 'asin':
case 'sku':
case 'barcode':
case 'msku':
case 'fnsku':
case 'product_title':
$searchcurrent.find('[data-type="search-value"]').replaceWith('<input type="text" class="form-control" data-type="search-value">');
$searchcurrent.find('[data-type="search-value"]').on('keyup', function(e) {$(this).attr("value", e.target.value)});
break;
case 'status':
case 'fulfilled_by':
case 'brand':
case 'product':
case 'product_type':
case 'device':
case 'variation':
case 'co':
var nameValueArray = [];
for(var i = 0; i < data.length; i++) {
if(!nameValueArray.includes(data[i][corres_field]) && data[i][corres_field] !== undefined && data[i][corres_field] !== null && data[i][corres_field] !== '') {
nameValueArray.push(data[i][corres_field]);
}
}
$searchcurrent.find('[data-type="search-value"]').replaceWith('<select class="advanced-search-select" data-type="search-value"></select>');
for(var i = 0; i < nameValueArray.length; i++) {
$searchcurrent.find('[data-type="search-value"]').append("<option>" + nameValueArray[i] + "</option>");
}
break;
case 'sales':
case 'sales_rank':
}
});
})

// Initial Preference Filter
var dataSource = $('#grid').data('kendoGrid').dataSource;
var preference;
var preference_data = {
logic: "and",
filters: []
}
// var preference_data = {
// logic: "and",
// filters: JSON.parse(preference)
// }
var status_preset, fulfilled_by_preset;
preference_data.filters.map(function(item) {
if(item.field === 'status') {
status_preset = item.value;
} if(item.field === 'fulfilled_by') {
fulfilled_by_preset = item.value;
}
})
dataSource.filter(preference_data);
if(preference_data.logic === "and") {
$('.advanced-search-operator input[id="and-search"]').trigger('click');
$('.filter-list-preference-operator input[id="and"]').trigger('click');
} else {
$('.advanced-search-operator input[id="or-search"]').trigger('click');
$('.filter-list-preference-operator input[id="or"]').trigger('click');
}

$('#accordion .card .card-header button[data-toggle="collapse"]').on('click', function() {
$('#accordion .card .card-header button[data-toggle="collapse"]').find('[data-indicate="collapse"]').css("transform", "rotate(0deg)");
if($(this).parent().parent().find('.collapse').hasClass('show')) {
$(this).find('[data-indicate="collapse"]').css("transform", "rotate(0deg)");
return;
}
$(this).find('[data-indicate="collapse"]').css("transform", "rotate(180deg)");
})

for(var i = 0; i < preference_data.filters.length; i++) {
var field;
for(var j = 0; j < columnData.length; j++) {
if(columnData[j].field == preference_data.filters[i].field) {
field = columnData[j].title;
}
}

var operator;
switch(preference_data.filters[i].operator) {
case 'eq':
operator = 'is equal to';
break;
case 'neq':
operator = 'is not equal to';
break;
case 'contains':
operator = 'contains';
break;
}
var value = preference_data.filters[i].value;

var $current = $('.filter-list-preference .filter-list-preference-main[data-index="1"]');
var $searchcurrent = $('.advanced-search-container .advanced-search-item[data-index="1"]');
if(i == 0) {
$current.find('[data-type="preference-field"]').val(field).change();
$current.find('[data-type="preference-operator"]').val(operator).change();
$current.find('[data-type="preference-value"]').val(value).change();

$searchcurrent.find('[data-type="search-field"]').val(field).change();
$searchcurrent.find('[data-type="search-operator"]').val(operator).change();
$searchcurrent.find('[data-type="search-value"]').val(value).change();
} else {
var index = i + 1;
$('.filter-list-preference').append(
'<div class="filter-list-preference-main" data-index="'+index+'">' +
'<div class="filter-list-preference-filter-container">' +
'<div class="filter-list-preference-filter-value">' +
'<select class="selectpicker" data-type="preference-field">' +
'<option selected="selected" style="color: #999">Select a field</option>' +
'</select> ' +
'<select class="selectpicker" data-type="preference-operator">' +
'<option select="selected" style="color: #999">is equal to</option>' +
'<option style="color: #999">is not equal to</option>' +
'<option style="color: #999">is greater than</option>' +
'<option style="color: #999">is less than</option>' +
'<option style="color: #999">starts with</option>' +
'<option style="color: #999">ends with</option>' +
'<option style="color: #999">contains</option>' +
'<option style="color: #999">does not contain</option>' +
'<option style="color: #999">Yes</option>' +
'<option style="color: #999">No</option>' +
'</select> ' +
'</div>' +
'<select class="selectpicker" data-type="preference-value">' +
'</select> ' +
'</div>' +
'<div class="filter-list-preference-delete-container">' +
'<button class="btn btn-secondary" data-type="filter-list-preference-delete"><i class="fal fa-trash-alt"></i></button>' +
'</div>' +
'</div>'
);
$('.advanced-search-container').append(
'<div class="advanced-search-item" data-index="'+index+'">' +
'<select class="advanced-search-select" data-type="search-field">' +
'<option select="selected" style="color: #999">Select a field</option>' +
'</select>' +
'<select class="advanced-search-select" data-type="search-operator">' +
'<option select="selected" style="color: #999">is equal to</option>' +
'<option style="color: #999">is not equal to</option>' +
'<option style="color: #999">is greater than</option>' +
'<option style="color: #999">is less than</option>' +
'<option style="color: #999">starts with</option>' +
'<option style="color: #999">ends with</option>' +
'<option style="color: #999">contains</option>' +
'<option style="color: #999">does not contain</option>' +
'<option style="color: #999">Yes</option>' +
'<option style="color: #999">No</option>' +
'</select>' +
'<select class="advanced-search-select" data-type="search-value">' +
'<option select="selected" style="color: #999">Select a field</option>' +
'</select>' +
'<button class="btn btn-secondary" data-type="search-delete">' +
'<i class="fal fa-trash-alt" aria-hidden="true"></i>' +
'</button>' +
'</div>'
);
$current = $('.filter-list-preference .filter-list-preference-main[data-index="'+index+'"]');
$searchcurrent = $('.advanced-search-container .advanced-search-item[data-index="'+index+'"]');
for(var a = 0; a < columnData.length; a++) {
if(columnData[a].title !== undefined && columnData[a].title !== 'Image') {
$current.find('[data-type="preference-field"]').append('<option>' + columnData[a].title + '</option>');
$searchcurrent.find('[data-type="search-field"]').append('<option>' + columnData[a].title + '</option>');
}
}
$current.find('.filter-list-preference-delete-container [data-type="filter-list-preference-delete"]').on('click', function(e) {
e.preventDefault();
var index = $(this).parent().parent().attr('data-index');
$('.filter-list-preference-main[data-index="'+index+'"]').remove();
$('.advanced-search-item[data-index="'+index+'"]').remove();
$('.filter-list-preference-main').each(function(i) {
$(this).attr("data-index", i + 1);
});
$('.advanced-search-item').each(function(i) {
$(this).attr("data-index", i + 1);
})
});
$searchcurrent.find('[data-type="search-delete"]').on('click', function(e) {
e.preventDefault();
var index = $(this).parent().attr('data-index');
$('.filter-list-preference-main[data-index="'+index+'"]').remove();
$('.advanced-search-item[data-index="'+index+'"]').remove();
$('.filter-list-preference-main').each(function(i) {
$(this).attr("data-index", i + 1);
})
$('.advanced-search-item').each(function(i) {
$(this).attr("data-index", i + 1);
})
});

$current.find('[data-type="preference-field"]').on('change', function(e) {
var name = e.target.value.toString();
var corres_field;
for(var i = 0; i < columnData.length; i++) {
if(columnData[i].title == name) {
corres_field = columnData[i].field;
}
}
switch(corres_field) {
case 'asin':
case 'sku':
case 'barcode':
case 'msku':
case 'fnsku':
case 'product_title':
$(this).parent().parent().find('[data-type="preference-value"]').replaceWith('<input type="text" class="form-control" data-type="preference-value">');
$(this).parent().parent().find('[data-type="preference-value"]').on('keyup', function(e) {$(this).attr("value", e.target.value)});
break;
case 'status':
case 'fulfilled_by':
case 'brand':
case 'product':
case 'product_type':
case 'device':
case 'variation':
case 'co':
var nameValueArray = [];
for(var i = 0; i < data.length; i++) {
if(!nameValueArray.includes(data[i][corres_field]) && data[i][corres_field] !== undefined && data[i][corres_field] !== null && data[i][corres_field] !== '') {
nameValueArray.push(data[i][corres_field]);
}
}
$(this).parent().parent().find('[data-type="preference-value"]').replaceWith('<select class="selectpicker" data-type="preference-value"></select>');
for(var i = 0; i < nameValueArray.length; i++) {
$(this).parent().parent().find('[data-type="preference-value"]').append("<option>" + nameValueArray[i] + "</option>");
}
break;
}
});
$current.find('[data-type="preference-field"]').val(field).change();
$current.find('[data-type="preference-operator"]').val(operator).change();
$current.find('[data-type="preference-value"]').val(value).change();
$searchcurrent.find('.advanced-search-select:first-child').on('change', function(e) {
var name = e.target.value.toString();
var corres_field;
for(var i = 0; i < columnData.length; i++) {
if(columnData[i].title == name) {
corres_field = columnData[i].field;
}
}
switch(corres_field) {
case 'asin':
case 'sku':
case 'barcode':
case 'msku':
case 'fnsku':
case 'product_title':
$(this).parent().find('[data-type="search-value"]').replaceWith('<input type="text" class="form-control" data-type="search-value">');
$(this).parent().find('[data-type="search-value"]').on('keyup', function(e) {$(this).attr("value", e.target.value)});
break;
case 'status':
case 'fulfilled_by':
case 'brand':
case 'product':
case 'product_type':
case 'device':
case 'variation':
case 'co':
var nameValueArray = [];
for(var i = 0; i < data.length; i++) {
if(!nameValueArray.includes(data[i][corres_field]) && data[i][corres_field] !== undefined && data[i][corres_field] !== null && data[i][corres_field] !== '') {
nameValueArray.push(data[i][corres_field]);
}
}
$(this).parent().find('[data-type="search-value"]').replaceWith('<select class="advanced-search-select" data-type="search-value"></select>');
for(var i = 0; i < nameValueArray.length; i++) {
$(this).parent().find('[data-type="search-value"]').append("<option>" + nameValueArray[i] + "</option>");
}
break;
case 'sales':
case 'sales_rank':
}
});

$searchcurrent.find('[data-type="search-field"]').val(field).change();
$searchcurrent.find('[data-type="search-operator"]').val(operator).change();
$searchcurrent.find('[data-type="search-value"]').val(value).change();
}
}
// status_preset, fulfilled_by_preset;
// Push to Each Form
$('#filter-status-container form').append(statusData.map(function (val, i) {
if(status_preset === undefined) {
if(val !== '' && val == 'All') {
return '<input type="radio" class="radio" name="statusFilter" value="' + val + '" checked/>' +
'<label for="statusFilter">' + val + '</label>';
} else if(val !== '' && val != 'All') {
return '<input type="radio" class="radio" name="statusFilter" value="' + val + '"/>' +
'<label for="statusFilter">' + val + '</label>';
}
}
if(val !== '' && val == 'All') {
return '<input type="radio" class="radio" name="statusFilter" value="' + val + '"/>' +
'<label for="statusFilter">' + val + '</label>';
} else if(val !== '' && val != 'All') {
if(val === status_preset) {
return '<input type="radio" class="radio" name="statusFilter" value="' + val + '" checked/>' +
'<label for="statusFilter">' + val + '</label>';
}
return '<input type="radio" class="radio" name="statusFilter" value="' + val + '"/>' +
'<label for="statusFilter">' + val + '</label>';
}

}));
$('#filter-status-sidebar form').append(statusData.map(function (val, i) {
if(status_preset === undefined) {
if(val !== '' && val == 'All') {
return '<input type="radio" class="radio" name="statusFilter" value="' + val + '" checked/>' +
'<label for="statusFilter">' + val + '</label>';
} else if(val !== '' && val != 'All') {
return '<input type="radio" class="radio" name="statusFilter" value="' + val + '"/>' +
'<label for="statusFilter">' + val + '</label>';
}
}
if(val !== '' && val == 'All') {
return '<input type="radio" class="radio" name="statusFilter" value="' + val + '"/>' +
'<label for="statusFilter">' + val + '</label>';
} else if(val !== '' && val != 'All') {
if(val === status_preset) {
return '<input type="radio" class="radio" name="statusFilter" value="' + val + '" checked/>' +
'<label for="statusFilter">' + val + '</label>';
}
return '<input type="radio" class="radio" name="statusFilter" value="' + val + '"/>' +
'<label for="statusFilter">' + val + '</label>';
}

}));
$('#filter-fulfilledBy-container form').append(fulfilledByData.map(function (val, i) {
if(fulfilled_by_preset === undefined) {
if(val !== '' && val == 'All') {
return '<input type="radio" class="radio" name="fulfilledByFilter" value="' + val + '" checked/>' +
'<label for="fulfilledByFilter">' + val + '</label>';
} else if(val !== '' && val != 'All') {
return '<input type="radio" class="radio" name="fulfilledByFilter" value="' + val + '"/>' +
'<label for="fulfilledByFilter">' + val + '</label>';
}
}
if(val !== '' && val == 'All') {
return '<input type="radio" class="radio" name="fulfilledByFilter" value="' + val + '" checked/>' +
'<label for="fulfilledByFilter">' + val + '</label>';
} else if(val !== '' && val != 'All') {
if(val === fulfilled_by_preset) {
return '<input type="radio" class="radio" name="fulfilledByFilter" value="' + val + '" checked/>' +
'<label for="fulfilledByFilter">' + val + '</label>';
}
return '<input type="radio" class="radio" name="fulfilledByFilter" value="' + val + '"/>' +
'<label for="fulfilledByFilter">' + val + '</label>';
}
}));
$('#filter-fulfilledBy-sidebar form').append(fulfilledByData.map(function (val, i) {
if(fulfilled_by_preset === undefined) {
if(val !== '' && val == 'All') {
return '<input type="radio" class="radio" name="fulfilledByFilter" value="' + val + '" checked/>' +
'<label for="fulfilledByFilter">' + val + '</label>';
} else if(val !== '' && val != 'All') {
return '<input type="radio" class="radio" name="fulfilledByFilter" value="' + val + '"/>' +
'<label for="fulfilledByFilter">' + val + '</label>';
}
}
if(val !== '' && val == 'All') {
return '<input type="radio" class="radio" name="fulfilledByFilter" value="' + val + '" checked/>' +
'<label for="fulfilledByFilter">' + val + '</label>';
} else if(val !== '' && val != 'All') {
if(val === fulfilled_by_preset) {
return '<input type="radio" class="radio" name="fulfilledByFilter" value="' + val + '" checked/>' +
'<label for="fulfilledByFilter">' + val + '</label>';
}
return '<input type="radio" class="radio" name="fulfilledByFilter" value="' + val + '"/>' +
'<label for="fulfilledByFilter">' + val + '</label>';
}
}));
$('#filter-status-container').on('change', function (e) {
e.preventDefault();

var newFilter;
if (e.target.checked && e.target.value === 'All') {
var index;
for(var i = 0; i < preference_data.filters.length; i++) {
if(preference_data.filters[i].field == 'status') {
index = i;
}
}
if(index !== undefined) {
preference_data.filters.splice(index, 1);
}
} else if (e.target.checked && e.target.value !== 'All') {
newFilter = { field: "status", operator: "eq", value: e.target.value };
var index;
for(var i = 0; i < preference_data.filters.length; i++) {
if(preference_data.filters[i].field == 'status') {
index = i;
}
}
if(index !== undefined) {
preference_data.filters.splice(index, 1);
}
preference_data.filters.push(newFilter);
}
var in_preference;
$('.filter-list-preference-main .filter-list-preference-filter-container [data-type="preference-field"]').each(function(item) {
if($(this).val() === "Status") {
in_preference = $(this).parent().parent().attr('data-index');
}
})
in_preference === undefined ? '' : $('.filter-list-preference-main[data-index="'+in_preference+'"]').remove();
in_preference === undefined ? '' : $('.advanced-search-item[data-index="'+in_preference+'"]').remove();
$('.filter-list-preference-main').each(function(i) {
$(this).attr("data-index", i + 1);
})
$('.advanced-search-item').each(function(i) {
$(this).attr("data-index", i + 1);
})
dataSource.filter(preference_data);

});
$('#filter-fulfilledBy-container').on('change', function (e) {
e.preventDefault();

var newFilter;
if (e.target.checked && e.target.value === 'All') {
var index;
for(var i = 0; i < preference_data.filters.length; i++) {
if(preference_data.filters[i].field == 'fulfilled_by') {
index = i;
}
}
if(index !== undefined) {
preference_data.filters.splice(index, 1);
}
} else if (e.target.checked && e.target.value !== 'All') {
newFilter = { field: "fulfilled_by", operator: "eq", value: e.target.value };
var index;
for(var i = 0; i < preference_data.filters.length; i++) {
if(preference_data.filters[i].field == 'fulfilled_by') {
index = i;
}
}
if(index !== undefined) {
preference_data.filters.splice(index, 1);
}
preference_data.filters.push(newFilter);
}
var in_preference;
$('.filter-list-preference-main .filter-list-preference-filter-container [data-type="preference-field"]').each(function(item) {
if($(this).val() === "Fulfilled by") {
in_preference = $(this).parent().parent().attr('data-index');
}
})
in_preference === undefined ? '' : $('.filter-list-preference-main[data-index="'+in_preference+'"]').remove();
in_preference === undefined ? '' : $('.advanced-search-item[data-index="'+in_preference+'"]').remove();
$('.filter-list-preference-main').each(function(i) {
$(this).attr("data-index", i + 1);
})
$('.advanced-search-item').each(function(i) {
$(this).attr("data-index", i + 1);
})
dataSource.filter(preference_data);
});
$('#filter-status-sidebar').on('change', function (e) {
e.preventDefault();

var newFilter;
if (e.target.checked && e.target.value === 'All') {
var index;
for(var i = 0; i < preference_data.filters.length; i++) {
if(preference_data.filters[i].field == 'status') {
index = i;
}
}
if(index !== undefined) {
preference_data.filters.splice(index, 1);
}
} else if (e.target.checked && e.target.value !== 'All') {
newFilter = { field: "status", operator: "eq", value: e.target.value };
var index;
for(var i = 0; i < preference_data.filters.length; i++) {
if(preference_data.filters[i].field == 'status') {
index = i;
}
}
if(index !== undefined) {
preference_data.filters.splice(index, 1);
}
preference_data.filters.push(newFilter);
}
var in_preference;
$('.filter-list-preference-main .filter-list-preference-filter-container [data-type="preference-field"]').each(function(item) {
if($(this).val() === "Status") {
in_preference = $(this).parent().parent().attr('data-index');
}
})
in_preference === undefined ? '' : $('.filter-list-preference-main[data-index="'+in_preference+'"]').remove();
in_preference === undefined ? '' : $('.advanced-search-item[data-index="'+in_preference+'"]').remove();
$('.filter-list-preference-main').each(function(i) {
$(this).attr("data-index", i + 1);
})
$('.advanced-search-item').each(function(i) {
$(this).attr("data-index", i + 1);
})
dataSource.filter(preference_data);

});
$('#filter-fulfilledBy-sidebar').on('change', function (e) {
e.preventDefault();

var newFilter;
if (e.target.checked && e.target.value === 'All') {
var index;
for(var i = 0; i < preference_data.filters.length; i++) {
if(preference_data.filters[i].field == 'fulfilled_by') {
index = i;
}
}
if(index !== undefined) {
preference_data.filters.splice(index, 1);
}
} else if (e.target.checked && e.target.value !== 'All') {
newFilter = { field: "fulfilled_by", operator: "eq", value: e.target.value };
var index;
for(var i = 0; i < preference_data.filters.length; i++) {
if(preference_data.filters[i].field == 'fulfilled_by') {
index = i;
}
}
if(index !== undefined) {
preference_data.filters.splice(index, 1);
}
preference_data.filters.push(newFilter);
}
var in_preference;
$('.filter-list-preference-main .filter-list-preference-filter-container [data-type="preference-field"]').each(function(item) {
if($(this).val() === "Fulfilled by") {
in_preference = $(this).parent().parent().attr('data-index');
}
})
in_preference === undefined ? '' : $('.filter-list-preference-main[data-index="'+in_preference+'"]').remove();
in_preference === undefined ? '' : $('.advanced-search-item[data-index="'+in_preference+'"]').remove();
$('.filter-list-preference-main').each(function(i) {
$(this).attr("data-index", i + 1);
})
$('.advanced-search-item').each(function(i) {
$(this).attr("data-index", i + 1);
})
dataSource.filter(preference_data);
});
// Toggle Reference Menu
$('#reference-toggle').on('click', function (e) {
e.preventDefault();

$('#filter-list').toggleClass('show');
});
$('#reference-toggle-minimized').on('click', function(e) {
e.preventDefault();
$('#filter-list').toggleClass('show');
})

// Close Filter List
$('#filter-list-close').on('click', function (e) {
e.preventDefault();

$('#filter-list').removeClass('show');
});

$('#filter-list-save').on('click', function(e) {
// Save current column displays
var filterOutArray = [];
var x = "";
$('.filter-list-body .options li input[type="checkbox"]').each(function() {
if(!$(this).is(':checked')) {
filterOutArray.push($(this).context.id);
x += "'" + $(this).context.id + "', ";
}
});

$.getJSON('@Url.Action("SavePreference", "AjaxHelper")', { filter: x , board : "restock" }, function (data) {
if (data.result)
valueToReturn = true;
else
valueToReturn = false;
});

var preference_operator;
$('.filter-list-preference-operator input[type="radio"]').each(function(e) {
if($(this).is(":checked")) {
preference_operator = $(this).attr("id");
}
})

preference_data.filters = [];
$('.filter-list-preference .filter-list-preference-main .filter-list-preference-filter-container').each(function(index) {
var data_index = $(this).parent().attr("data-index");
var $field = $(this).find('.filter-list-preference-filter-value [data-type="preference-field"]');
var $operator = $(this).find('.filter-list-preference-filter-value [data-type="preference-operator"]');
var $value = $(this).find('[data-type="preference-value"]');

var $search = $('.advanced-search-item[data-index="'+data_index+'"]');
var $searchfield = $search.find('[data-type="search-field"]');
var $searchoperator = $search.find('[data-type="search-operator"]');
var $searchvalue = $search.find('[data-type="search-value"]');

if($value.val() === null || $value.val() === undefined || $value.val() === '') {
$(this).parent().remove();
$search.remove();
return;
}

if($search.length === 0) {
$('.advanced-search-container').append(
'<div class="advanced-search-item" data-index="'+data_index+'">' +
'<select class="advanced-search-select" data-type="search-field">' +
'<option select="selected" style="color: #999">Select a field</option>' +
'</select>' +
'<select class="advanced-search-select" data-type="search-operator">' +
'<option select="selected" style="color: #999">is equal to</option>' +
'<option style="color: #999">is not equal to</option>' +
'<option style="color: #999">is greater than</option>' +
'<option style="color: #999">is less than</option>' +
'<option style="color: #999">starts with</option>' +
'<option style="color: #999">ends with</option>' +
'<option style="color: #999">contains</option>' +
'<option style="color: #999">does not contain</option>' +
'<option style="color: #999">Yes</option>' +
'<option style="color: #999">No</option>' +
'</select>' +
'<select class="advanced-search-select" data-type="search-value">' +
'<option select="selected" style="color: #999">Select a field</option>' +
'</select>' +
'<button class="btn btn-secondary" data-type="search-delete">' +
'<i class="fal fa-trash-alt" aria-hidden="true"></i>' +
'</button>' +
'</div>'
);
var $searchcurrent = $('.advanced-search-container .advanced-search-item[data-index="'+data_index+'"]');
for(var a = 0; a < columnData.length; a++) {
if(columnData[a].title !== undefined && columnData[a].title !== 'Image') {
$searchcurrent.find('[data-type="search-field"]').append('<option>' + columnData[a].title + '</option>');
}
}
$searchcurrent.find('[data-type="search-delete"]').on('click', function(e) {
e.preventDefault();
var index = $(this).parent().attr('data-index');
$('.filter-list-preference-main[data-index="'+index+'"]').remove();
$('.advanced-search-item[data-index="'+index+'"]').remove();
$('.filter-list-preference-main').each(function(i) {
$(this).attr("data-index", i + 1);
})
$('.advanced-search-item').each(function(i) {
$(this).attr("data-index", i + 1);
})
});
$searchcurrent.find('[data-type="search-field"]').on('change', function(e) {
var name = e.target.value.toString();
var corres_field;
for(var i = 0; i < columnData.length; i++) {
if(columnData[i].title == name) {
corres_field = columnData[i].field;
}
}
switch(corres_field) {
case 'asin':
case 'sku':
case 'barcode':
case 'msku':
case 'fnsku':
case 'product_title':
$searchcurrent.find('[data-type="search-value"]').replaceWith('<input type="text" class="form-control" data-type="search-value">');
$searchcurrent.find('[data-type="search-value"]').on('keyup', function(e) {$(this).attr("value", e.target.value)});
break;
case 'status':
case 'fulfilled_by':
case 'brand':
case 'product':
case 'product_type':
case 'device':
case 'variation':
case 'co':
var nameValueArray = [];
for(var i = 0; i < data.length; i++) {
if(!nameValueArray.includes(data[i][corres_field]) && data[i][corres_field] !== undefined && data[i][corres_field] !== null && data[i][corres_field] !== '') {
nameValueArray.push(data[i][corres_field]);
}
}
$searchcurrent.find('[data-type="search-value"]').replaceWith('<select class="advanced-search-select" data-type="search-value"></select>');
for(var i = 0; i < nameValueArray.length; i++) {
$searchcurrent.find('[data-type="search-value"]').append("<option>" + nameValueArray[i] + "</option>");
}
break;
case 'sales':
case 'sales_rank':
}
});
$searchcurrent.find('[data-type="search-field"]').val($field.val()).change();
$searchcurrent.find('[data-type="search-operator"]').val($operator.val()).change();
$searchcurrent.find('[data-type="search-value"]').val($value.val()).change();
} else {
$searchfield.val($field.val());
$searchoperator.val($operator.val());
$searchvalue.val($value.val());
}
preference_data.logic = preference_operator;
$('.advanced-search-operator input[type="radio"]').each(function() {
var operator = $(this).attr("id").split('-')[0];
if(operator == preference_operator) {
$(this).trigger('click');
}
})

var op;
switch($operator.val()) {
case 'is equal to':
op = 'eq';
break;
case 'is not equal to':
op = 'neq';
break;
case 'contains':
op = 'contains';
break;
}

var corres_field;
for(var i = 0; i < columnData.length; i++) {
if(columnData[i].title == $field.val()) {
corres_field = columnData[i].field;
}
}

var filter = {
field: corres_field,
operator: op,
value: $value.val()
}
var index;
for(var i = 0; i < preference_data.filters.length; i++) {
if(preference_data.filters[i].field == corres_field) {
index = i;
}
}
if(index !== undefined) {
preference_data.filters.splice(index, 1);
}
preference_data.filters.push(filter);
});
dataSource.filter(preference_data);

// format: "[{...}, {...}]"
var preference = JSON.stringify(preference_data).replace(/\\"/g, '"');
// format: "{...}, {...}"
// var preference = JSON.stringify(preference_data.filters).replace(/\\"/g, '"');

$('#filter-list').removeClass('show');
});
$('#advanced-search-save').on('click', function(e) {
e.preventDefault();

var preference_operator;
$('.advanced-search-operator input[type="radio"]').each(function(e) {
if($(this).is(":checked")) {
preference_operator = $(this).attr("id").split('-')[0];
}
})

preference_data.filters = [];
$('.advanced-search-container .advanced-search-item').each(function(index) {
var data_index = $(this).attr("data-index");
var $field = $(this).find('[data-type="search-field"]');
var $operator = $(this).find('[data-type="search-operator"]');
var $value = $(this).find('[data-type="search-value"]');

var $preference = $('.filter-list-preference .filter-list-preference-main[data-index="'+data_index+'"]');
var $preferencefield = $preference.find('[data-type="preference-field"]');
var $preferenceoperator = $preference.find('[data-type="preference-operator"]');
var $preferencevalue = $preference.find('[data-type="preference-value"]');

if($value.val() === null || $value.val() === undefined || $value.val() === '' || $value.val() == 'Select a field') {

$(this).remove();
$preference.remove();
return;
}

if($preference.length === 0) {
$('.filter-list-preference').append(
'<div class="filter-list-preference-main" data-index="'+data_index+'">' +
'<div class="filter-list-preference-filter-container">' +
'<div class="filter-list-preference-filter-value">' +
'<select class="selectpicker" data-type="preference-field">' +
'<option selected="selected" style="color: #999">Select a field</option>' +
'</select> ' +
'<select class="selectpicker" data-type="preference-operator">' +
'<option select="selected" style="color: #999">is equal to</option>' +
'<option style="color: #999">is not equal to</option>' +
'<option style="color: #999">is greater than</option>' +
'<option style="color: #999">is less than</option>' +
'<option style="color: #999">starts with</option>' +
'<option style="color: #999">ends with</option>' +
'<option style="color: #999">contains</option>' +
'<option style="color: #999">does not contain</option>' +
'<option style="color: #999">Yes</option>' +
'<option style="color: #999">No</option>' +
'</select> ' +
'</div>' +
'<select class="selectpicker" data-type="preference-value">' +
'</select> ' +
'</div>' +
'<div class="filter-list-preference-delete-container">' +
'<button class="btn btn-secondary" data-type="filter-list-preference-delete"><i class="fal fa-trash-alt"></i></button>' +
'</div>' +
'</div>'
);
var $current = $('.filter-list-preference .filter-list-preference-main[data-index="'+data_index+'"]');
for(var a = 0; a < columnData.length; a++) {
if(columnData[a].title !== undefined && columnData[a].title !== 'Image') {
$current.find('[data-type="preference-field"]').append('<option>' + columnData[a].title + '</option>');
}
}
$current.find('.filter-list-preference-delete-container [data-type="filter-list-preference-delete"]').on('click', function(e) {
e.preventDefault();
var index = $(this).parent().parent().attr('data-index');
$('.filter-list-preference-main[data-index="'+index+'"]').remove();
$('.advanced-search-item[data-index="'+index+'"]').remove();
$('.filter-list-preference-main').each(function(i) {
$(this).attr("data-index", i + 1);
});
$('.advanced-search-item').each(function(i) {
$(this).attr("data-index", i + 1);
})
});
$current.find('[data-type="preference-field"]').on('change', function(e) {
var name = e.target.value.toString();
var corres_field;
for(var i = 0; i < columnData.length; i++) {
if(columnData[i].title == name) {
corres_field = columnData[i].field;
}
}
switch(corres_field) {
case 'asin':
case 'sku':
case 'barcode':
case 'msku':
case 'fnsku':
case 'product_title':
$current.find('[data-type="preference-value"]').replaceWith('<input type="text" class="form-control" data-type="preference-value">');
$current.find('[data-type="preference-value"]').on('keyup', function(e) {$(this).attr("value", e.target.value)});
break;
case 'status':
case 'fulfilled_by':
case 'brand':
case 'product':
case 'product_type':
case 'device':
case 'variation':
case 'co':
var nameValueArray = [];
for(var i = 0; i < data.length; i++) {
if(!nameValueArray.includes(data[i][corres_field]) && data[i][corres_field] !== undefined && data[i][corres_field] !== null && data[i][corres_field] !== '') {
nameValueArray.push(data[i][corres_field]);
}
}
$current.find('[data-type="preference-value"]').replaceWith('<select class="selectpicker" data-type="preference-value"></select>');
for(var i = 0; i < nameValueArray.length; i++) {
$current.find('[data-type="preference-value"]').append("<option>" + nameValueArray[i] + "</option>");
}
break;
}
});

$current.find('[data-type="preference-field"]').val($field.val()).change();
$current.find('[data-type="preference-operator"]').val($operator.val()).change();
$current.find('[data-type="preference-value"]').attr("value", $value.val()).change();
} else {
$preferencefield.val($field.val());
$preferenceoperator.val($operator.val());
$preferencevalue.val($value.val());
}

preference_data.logic = preference_operator;
$('.filter-list-preference-operator input[type="radio"]').each(function() {
var operator = $(this).attr("id");
if(operator == preference_operator) {
$(this).trigger('click');
}
})

var op;
switch($operator.val()) {
case 'is equal to':
op = 'eq';
break;
case 'is not equal to':
op = 'neq';
break;
case 'contains':
op = 'contains';
break;
}

var corres_field;
for(var i = 0; i < columnData.length; i++) {
if(columnData[i].title == $field.val()) {
corres_field = columnData[i].field;
}
}

var filter = {
field: corres_field,
operator: op,
value: $value.val()
}
var index;
for(var i = 0; i < preference_data.filters.length; i++) {
if(preference_data.filters[i].field == corres_field) {
index = i;
}
}
if(index !== undefined) {
preference_data.filters.splice(index, 1);
}

preference_data.filters.push(filter);
});
dataSource.filter(preference_data);

var preference = JSON.stringify(preference_data).replace(/\\"/g, '"');
console.log(preference);
$(this).parent().find('button[data-dismiss="modal"]').trigger('click');
})

// Bind Checkbox
$('.k-checkbox').click(checkBoxChange);
var delayTimer;
$('.k-header.k-grid-toolbar .k-textbox.k-grid-search input.k-input').bind('keyup', async function(e) {
var $this = $(this);
var grid = $('#grid').data("kendoGrid");
clearTimeout(delayTimer);
delayTimer = await setTimeout(function() {
grid.dataSource.query({
page: 1,
pageSize: grid.dataSource.pageSize(),
filter: {
logic: "or",
filters: [{
field: "asin",
operator: "contains",
value: $this.val()
}, {
field: "sku",
operator: "contains",
value: $this.val()
}, {
field: "product_title",
operator: "contains",
value: $this.val()
}]
}
});

kendo.ui.progress($("#grid"), false);
}, 750);
});
$('.k-header.k-grid-toolbar .k-textbox.k-grid-search input.k-input').bind('change paste', function(e) {
var $this = $(this);
var grid = $('#grid').data("kendoGrid");
grid.dataSource.query({
page: 1,
pageSize: grid.dataSource.pageSize(),
filter: {
logic: "or",
filters: [{
field: "asin",
operator: "contains",
value: $this.val()
}, {
field: "sku",
operator: "contains",
value: $this.val()
}, {
field: "product_title",
operator: "contains",
value: $this.val()
}]
}
});
kendo.ui.progress($("#grid"), false);
});

$('.board-header .nav-tabs .nav-item.nav-link').on('click', function() {
var $this = $(this);
var $input = $('.k-header.k-grid-toolbar .k-textbox.k-grid-search input.k-input');
kendo.ui.progress($("#grid"), true);
if($this.attr('id') == "nav-all_products-tab") {
$input.val('').trigger('change');
$('#bookmark-delete').attr("disabled", true);
} else if($this.attr('id') == 'nav-my_products-tab') {
// Changes for future my products
$('#bookmark-delete').attr("disabled", true);
} else {
$input.val($this.attr('id')).trigger('change');
$('#bookmark-delete').removeAttr("disabled");
}
})

// Priority Navigation
var $nav = $('.board-header');
var $btn = $('#more-nav-tabs');
var $vlinks = $('.nav.nav-tabs.navbar-collapse');
var $hlinks = $('.hidden-links');

var numOfItems = 0;
var totalSpace = 0;
var breakWidths = [];

$vlinks.children().outerWidth(function(i, w) {
totalSpace += w;
numOfItems += 1;
breakWidths.push(totalSpace);
});
$hlinks.children().outerWidth(function(i, w) {
numOfItems += 1;
});

var availableSpace, numOfVisibleItems, requiredSpace;

function check() {
availableSpace = $vlinks.width() - 10;
numOfVisibleItems = $vlinks.children().length;
requiredSpace = breakWidths[numOfVisibleItems - 1];

if(requiredSpace > availableSpace) {
$vlinks.children().last().prependTo($hlinks);
numOfVisibleItems -= 1;
check();

} else if (availableSpace > breakWidths[numOfVisibleItems]) {
$hlinks.children().first().appendTo($vlinks);
numOfVisibleItems += 1;
check();
}

$btn.attr("count", numOfItems - numOfVisibleItems);
if(numOfVisibleItems === numOfItems) {
$btn.addClass('hidden');
} else $btn.removeClass('hidden');
}

$btn.on('click', function() {
$hlinks.toggleClass('hidden');
});
check();

// Initial Bookmark Import
var bookmark_array = [@Html.Raw(ViewBag.bookmark)];
bookmark_array.map(function(item) {
var query_value = item.query;
var title_value = item.title;

$('.nav.nav-tabs.navbar-collapse')
.append('<a class="nav-item nav-link" id="'+ query_value +'" data-toggle="tab" role="tab" href="#nav-all_products" aria-controls="nav-'+query_value+'" aria-selected="false">'+title_value+'</a>');
$('.nav-item.nav-link[id="'+query_value+'"]').on('click', function() {
var $this = $(this);
var $input = $('.k-header.k-grid-toolbar .k-textbox.k-grid-search input.k-input');
if($this.attr('id') == "nav-all_products-tab") {
$input.val('').trigger('change');
$('#bookmark-delete').attr("disabled", true);
} else if($this.attr('id') == 'nav-my_products-tab') {
$('#bookmark-delete').attr("disabled", true);
// Changes for future my products
} else {
$input.val($this.attr('id')).trigger('change');
$('#bookmark-delete').removeAttr("disabled");
}
})
numOfItems = 0;
totalSpace = 0;
breakWidths = [];
$vlinks.children().outerWidth(function(i, w) {
totalSpace += w;
numOfItems += 1;
breakWidths.push(totalSpace);
});
$hlinks.children().outerWidth(function(i, w) {
numOfItems += 1;
});
check();
})

$('#bookmark').on('click', function(e) {
e.preventDefault();
var input_query = $('.k-header.k-grid-toolbar .k-textbox.k-grid-search input.k-input').val();

$('input[name="query"]').val(input_query);
$('input[name="title"]').val('');
});

$('#bookmark-save').on('click', function(e) {
e.preventDefault();

var query_value = $('input[name="query"]').val();
var title_value = $('input[name="title"]').val();

$('.nav.nav-tabs.navbar-collapse')
.append('<a class="nav-item nav-link" id="'+ query_value +'" data-toggle="tab" role="tab" href="#nav-all_products" aria-controls="nav-'+query_value+'" aria-selected="false">'+title_value+'</a>');
$('.nav-item.nav-link[id="'+query_value+'"]').on('click', function() {
var $this = $(this);
var $input = $('.k-header.k-grid-toolbar .k-textbox.k-grid-search input.k-input');
if($this.attr('id') == "nav-all_products-tab") {
$input.val('').trigger('change');
$('#bookmark-delete').attr("disabled", true);
} else if($this.attr('id') == 'nav-my_products-tab') {
// Changes for future my products
$('#bookmark-delete').attr("disabled", true);
} else {
$input.val($this.attr('id')).trigger('change');
$('#bookmark-delete').removeAttr("disabled");
}
})
numOfItems = 0;
totalSpace = 0;
breakWidths = [];
$vlinks.children().outerWidth(function(i, w) {
totalSpace += w;
numOfItems += 1;
breakWidths.push(totalSpace);
});
$hlinks.children().outerWidth(function(i, w) {
numOfItems += 1;
});
check();

var bookmark_value = {
query: query_value,
title: title_value
}
bookmark_array.push(bookmark_value);
console.log(bookmark_array)
var bookmark = JSON.stringify(bookmark_array).slice(1, -1);

$.getJSON('@Url.Action("SavePreference", "AjaxHelper")', { filter: bookmark , board : "restock_bookmark" }, function (data) {
if (data.result)
valueToReturn = true;
else
valueToReturn = false;
});
$('button[data-dismiss="modal"]').trigger('click');
});

$('#bookmark-delete').on('click', function(e) {
$('#current-bookmark').html($('.board-header .nav-tabs a.nav-item.nav-link.active').text());
})
$('#deleteBookmarkConfirm').on('click', function(e) {
var $currentBoard = $('.board-header .nav-tabs a.nav-item.nav-link.active');
if($currentBoard.attr("id") === "nav-all_products-tab") {
return;
}
$('.board-header .nav-tabs a.nav-item.nav-link.active').remove();
$('#nav-all_products-tab').addClass('active');
$('.k-input.form-control').val('').trigger('change');
$('#bookmark-delete').attr("disabled", true);
$(this).parent().find('button[data-dismiss="modal"]').click();
})

$(window).resize(function() {
check();
});

var left = false;
var right = false;
var wind = $(window).width();
$(window).on('resize', function(e) {
var direction = wind > $(window).width() ? true : false;
wind = $(window).width();
if(direction && !left) {
if($(this).width() < 767.98) {
$('.sidebar').addClass('minimized');
$('.nav-link.main-menu').each(function() {
$(this).attr("aria-expanded", "false");
});
if($("nav.sidebar").hasClass("minimized")) {
$('#btn-minimize').attr("menu-title", "maximize");
$('#btn-minimize span').text('Maximize');
} else {
$('#btn-minimize').attr("menu-title", "minimize");
$('#btn-minimize span').text('Minimize');
}
left = true;
right = false;
}
}
if(!direction && !right) {
if($(this).width() > 767.98) {
if($('nav.sidebar').hasClass('minimized') == false) {
$('#sidebar-menu-inventory').trigger('click');
}
left = false;
right = true;
}
}
});

// Sidebar Hover Delay
var timer;
var delay = 750;
$('.sidebar.nav').hover(function() {
if($(this).hasClass('minimized')) {
timer = setTimeout(function() {
$('.sidebar.nav.minimized').addClass('hover');
}, delay);
}
}, function() {
var isExpanded = false;
$('.nav-link.main-menu').each(function() {
if($(this).attr("aria-expanded") == "true") {
isExpanded = true;
}
});
if(isExpanded) {
timer = setTimeout(function() {
$('.sidebar.nav.minimized').removeClass('hover');
if($('.sidebar.nav').hasClass('minimized')) {
$('.sub-menu-list.collapse').each(function() {
$(this).removeClass('show');
});
}
clearTimeout(timer);
}, 500);
} else {
timer = setTimeout(function() {
$('.sidebar.nav.minimized').removeClass('hover');
clearTimeout(timer);
}, 250);
}
});

// Hover Product Title
$('.product-title').tooltip();
$('[data-toggle="popover"]').popover({
html: true,
trigger: 'focus'
});
$('.far.fa-angle-down.icon-margin-left').on('click', function(e) {
$(this).focus();
});
$('.far.fa-angle-down.icon-margin-none').on('click', function(e) {
$(this).focus();
});

});
function getFormattedDate(date) {
let year = date.getFullYear().toString().substr(-2);
let month = (1 + date.getMonth()).toString().padStart(2, '0');
let day = date.getDate().toString().padStart(2, '0');
return month + '/' + day + '/' + year;
}
$(function() {$('#grid .k-header-column-menu').eq(0).remove();})
$(window).load(function() {
console.log("Time until everything loaded: ", Date.now()-timerStart);
})
</script>

<style>
.po-qty {
padding: 0 .3em !important;
}
.po-qty .po-qty-val {
min-height: 1.75em;
background: 0 0;
margin-top: 0;
margin-bottom: 0;
padding: 0;
width: 75px;
line-height: 1.65rem;
text-indent: 0.571em;
border: 1px solid #c5c5c5;
font-size: 0.75rem;
border-radius: 4px;
display: inline-block;
vertical-align: middle;
position: relative;
white-space: nowrap;
overflow: hidden;
cursor: text;
}
.po-qty:hover .po-qty-val {
background-color: #fff;
}
.po-qty input[type="text"] {
width: 75px;
}
.days-to-last {
padding: 0 .3em !important;
}
.days-to-last .days-to-last-val {
min-height: 1.75em;
background: 0 0;
margin-top: 0;
margin-bottom: 0;
padding: 0;
width: 75px;
line-height: 1.65rem;
text-indent: 0.571em;
border: 1px solid #c5c5c5;
font-size: 0.75rem;
border-radius: 4px;
display: inline-block;
vertical-align: middle;
position: relative;
white-space: nowrap;
overflow: hidden;
cursor: text;
}
.days-to-last:hover .days-to-last-val {
background-color: #fff;
}
.days-to-last input[type="text"] {
width: 75px;
}
.k-grid-content-locked table tbody tr td:last-child {
background-image: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%);
background-position: right;
background-repeat: no-repeat;
background-size: 4px 100%;
}
.board .tab-content .tab-pane .inventory-board #grid .k-grid-content-locked {
height: calc(100vh - 348px) !important;
overflow-x: scroll;
z-index: 1;
border: none;
}
.gradient-span {
position: absolute;
width: 2px;
height: 100%;
right: 0;
background: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%);
}

.board .tab-content .tab-pane .inventory-board #grid .k-grid-content.k-auto-scrollable {
height: calc(100vh - 348px);
overflow-x: scroll;
}
.k-textbox > input {
font-size: 0.75rem;
}
.k-input, .k-multiselect-wrap, .k-textbox > input, input.k-textbox, input.k-textbox:hover, textarea.k-textbox, textarea.k-textbox:hover {
padding: 0;
}
.k-grid-header .k-grid-header-locked {
border: none;
background-image: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%);
background-position: right;
background-size: 4px 100%;
background-repeat: no-repeat;
}
.k-grid-header th.k-header > .k-link {
font-size: 0.75rem;
font-weight: 500;
padding: 0.75rem 0;
min-height: 19px;
}

.k-grid td {
border: none;
font-size: 0.75rem;
font-weight: 300;
}

.input-group:after {
content: none !important;
}

.device {
position: relative;
max-height: calc(0.75rem * 3);
overflow: hidden;
min-width: 100px;
}

.device::after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: calc(0.75rem);
}

@@supports (-webkit-line-clamp: 2) {
.device {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.device::after {
display: none;
}
}

.dc {
position: relative;
max-height: calc(0.75rem * 3);
overflow: hidden;
min-width: 100px;
}

.dc::after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: calc(0.75rem);
}

@@supports (-webkit-line-clamp: 2) {
.dc {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.dc::after {
display: none;
}
}
.product-title-container {
position: relative;
overflow: visible !important;
}

.product-title {
position: relative;
max-height: calc(0.75rem * 3);
overflow: hidden;
min-width: 100px;
max-width: 250px;
font-size: 0.75rem;
line-height: 1rem;
}

.product-title::after {
content: "";
text-align: right;
position: absolute;
bottom: 0;
right: 0;
width: 50%;
height: calc(0.75rem);
}

@@supports (-webkit-line-clamp: 2) {
.product-title {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.product-title::after {
display: none;
}
}
.sales {
min-width: 100px;
white-space: nowrap;
}

.icon-margin-left {
margin-left: 10px;
cursor: pointer;
}

.k-pager-wrap.k-grid-pager.k-widget.k-floatwrap {
position: sticky;
bottom: 0;
}

.page-route-container {
text-align: right;
order: 9;
justify-content: flex-end;
position: absolute;
right: 0;
display: flex;
align-items: center;
margin: 0 1em;
left: 0;
box-sizing: content-box;
color: #313131;
white-space: normal;
cursor: default;
}
@@media only screen and (max-width: 1024px) {
.page-route-container {
display: none;
}
}

.page-route-container .page-route {
display: flex;
flex-direction: row;
align-items: center;
}

.page-route-container .page-route p, .k-pager-wrap.k-grid-pager.k-widget.k-floatwrap .k-pager-info.k-label .page-route p span {
font-size: 10pt;
}

.page-route-container .page-route input[type="text"].form-control {
font-size: 10pt;
height: unset;
width: 1.75rem;
margin: 0 0.5rem;
text-align: right;
}

.page-route-container .page-route .btn.btn-pageNum {
background-color: #323b44;
color: #fff;
font-size: 10pt;
padding: .375rem .75rem;
margin-left: 0.5rem;
}

.page-route-container .page-route .btn.btn-pageNum:hover {
/* Hover effect */
}

.page-route-container .page-route p, .k-pager-wrap.k-grid-pager.k-widget.k-floatwrap .k-pager-sizes.k-label {
font-size: 10pt;
z-index: 2;
}

#dropdownMenuButton {
border-radius: 0;
}

#filter-container {
min-height: 10rem;
padding: 1rem;
}

#filter-container div {
margin-top: 1rem;
}

#filter-container div:first-child {
margin-top: 0;
}

#filter-container div .filter-name {
color: rgba(0,0,0,.5);
font-size: 0.75rem;
font-weight: bold;
line-height: 1.5rem;
}

#filter-container div:first-child .filter-name {
margin-top: 0;
}

#filter-container div form {
display: grid;
grid-template-columns: 1fr 8fr;
font-size: 0.75rem;
line-height: 1.5rem;
font-weight: normal;
color: #000;
}

#filter-container div form input {
align-self: center;
}

#filter-container div form label {
height: 1.5rem;
margin: 0;
}

.hidden-links {
position: absolute;
right: 0;
top: 85%;
z-index: 15;
box-shadow: -1px 3px 6px -3px rgb(100, 100, 100);
}

.hidden-links a {
color: #a9b2c0;
text-align: right;
padding: 1rem 1.25rem;
background-color: #fff;
}

.hidden-links a:hover {
color: #333;
}

.hidden-links.hidden {
display: none;
}

#more-nav-tabs {
border-radius: 0.5rem;
background-color: #ffffff;
position: absolute;
right: 0;
top: 0;
color: #a9b2c0;
border: none;
display: inline-block;
padding: 1rem 1.25rem;
}

#more-nav-tabs:hover {
color: #333;
}

#more-nav-tabs.hidden {
display: none;
}

main .main-content-body-header .action-bar-items button.btn {
font-size: 10pt;
}

main .main-content-body-header .action-bar-items button.btn:disabled {
border-color: transparent;
}

main .main-content-body-header .action-bar-items button.btn span {
font-size: 10pt;
}

.fbaDayDpSpan, .dateSpan, .totalSpan {
font-size: 0.75rem;
}
.image {
width: auto;
height: 40px;
}
.image-container {
width: 40px;
height: 40px;
background: #fff;
text-align: center;
flex-shrink: 0;
}
.image-icon {
color: #A9B2C0;
font-size: 25px;
width: 40px;
height: 40px;
display: flex !important;
align-items: center;
justify-content: center;
background-size: auto 40px;
background-position: center center;
background-repeat: no-repeat;
background-color: #fff;
}
.hover-popup {
position: absolute;
top: 25%;
left: 100%;
background-color: #ffffff;
min-width: 250px;
z-index: 10;
padding: 0.5rem 1rem;
border: 2px solid #cccccc;
border-radius: 5px;
top: 25%;
}
.tooltip.show {
opacity: 1 !important;
filter: alpha(opacity=100);
}
.tooltip > .tooltip-inner {
width: auto;
padding: 0.5rem 1rem;
background: #ffffff;
border: solid thin #CED4DA;
font-size: 0.75rem !important;
text-align: left;
color: #000000;
z-index: 20;
opacity: 1 !important;
}
.bs-tooltip-auto[x-placement^=bottom] .arrow::before, .bs-tooltip-bottom .arrow::before {
border-bottom-color: #CED4DA !important;
opacity: 1;
border-top-color: #ffffff !important;
}

.bs-tooltip-auto[x-placement^=top] .arrow::before, .bs-tooltip-top .arrow::before {
border-top-color: #CED4DA !important;
opacity: 1;
border-bottom-color: #ffffff !important;
}

.bs-tooltip-auto[x-placement^=left] .arrow::before, .bs-tooltip-left .arrow::before {
border-left-color: #ffffff !important;
}

.bs-tooltip-auto[x-placement^=right] .arrow::before, .bs-tooltip-right .arrow::before {
border-right-color: #ffffff !important;
}
.bs-tooltip-bottom .arrow::after {
content: "";
position: absolute;
bottom: 0;
border-width: 0 0.4rem 0.4rem;
transform: translateY(1px);
border-color: transparent;
border-style: solid;
opacity: 1 !important;
border-bottom-color: #fff;
}
.bs-tooltip-top .arrow::after {
content: "";
position: absolute;
top: 0;
border-width: 0.4rem 0.4rem 0;
transform: translateY(-1px);
border-color: transparent;
border-style: solid;
opacity: 1 !important;
border-top-color: #fff;
}
.icon-bookmark {
color: #f6ca4d;
}
.k-checkbox-column {
padding-top: 0.75rem !important;
}

.k-checkbox-column input.k-checkbox[type="checkbox"] {
margin-left: 0.2rem;
}
.k-grid-content table tbody tr.hover, .k-grid-content-locked table tbody tr.hover {
background-color: #C7C7C7;
}

#example .k-grid-toolbar .btn#reference-toggle-minimized {
display: none;
}
table[role="grid"] {
min-width: 100%;
}
</style>

and here's a link to video files visualizing the performance issue : https://imgur.com/a/kGjbbiv
Some points you might want to consider:
1. The scripts (jquery) are there in response to kendo grid's default event script removing customized eventlisteners ,which I have assigned, everytime it re-renders. It's the minimum amount of functionalities we should keep for our project.
2. The only other library we use is Bootstrap; maybe FontAwesome, if that matters.
If the performance issue can be resolved only via pagination or virtualization, our next step unfortunately is probably going to be requesting for refund. Would you be able to assist me on that?

answered on 13 Apr 2020, 03:05 PM

Hi,

I still do not see anything disturbing in the page configuration. From the videos it seems that a jQuery error is present but it is not sure that it is related to the problem. In order for us to further assist you I have opened a formal support ticket in your account. Please check the information provided there so we could move forward towards resolving the problem.

Regards,
Angel Petrov
Progress Telerik