Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Light
Dark
System
Ask  Question

MVC core datatablejs ajax server side


Dear team,

please note that we facing an issue with metronic version 8 (.net core version) with datatablejs ajax server side example,
the issue is the dropdownlist inside the datatablejs is not working at all and once we click on it it's not open or working at all (and it's working only on your documentation parts and we take the same code and put it on our js and its not working at all)

* we refer for this demo steps
(https://preview.keenthemes.com/html/metronic/docs/general/datatables/server-side)

* and this one its not open and not working

{
 targets: -1,
 data: null,
 orderable: false,
 className: "text-end",
 render: function (data, type, row) {
 return `
 <a href="#%22%20class=%22btn%20btn-light%20btn-active-light-primary%20btn-sm%22%20data-kt-menu-trigger=%22click%22%20data-kt-menu-placement=%22bottom-end%22%20data-kt-menu-flip=%22top-end" target="_blank">
 Actions
 <span class="svg-icon svg-icon-5 m-0">
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 <polygon points="0 0 24 0 24 24 0 24"></polygon>
 <path d="M6.70710678,15.7071068 C6.31658249,16.0976311 5.68341751,16.0976311 5.29289322,15.7071068 C4.90236893,15.3165825 4.90236893,14.6834175 5.29289322,14.2928932 L11.2928932,8.29289322 C11.6714722,7.91431428 12.2810586,7.90106866 12.6757246,8.26284586 L18.6757246,13.7628459 C19.0828436,14.1360383 19.1103465,14.7686056 18.7371541,15.1757246 C18.3639617,15.5828436 17.7313944,15.6103465 17.3242754,15.2371541 L12.0300757,10.3841378 L6.70710678,15.7071068 Z" fill="currentColor" fill-rule="nonzero" transform="translate(12.000003, 11.999999) rotate(-180.000000) translate(-12.000003, -11.999999)"></path>
 </g>
 </svg>
 </span>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-docs-table-filter=%22edit_row" target="_blank">
 Edit
 </a>
 </div>
 <!--end::Menu item-->

 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-docs-table-filter=%22delete_row" target="_blank">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 `;
 },
 }


G
Guest 1 year ago
Datatables HTML Asp.Net Core
3 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Lauris Stepanovs Author1 year ago

Hi,

Do you have any errors in your browser console?

Make sure that you included "datatables" vendor and your js file on your page view.

KTTheme.addVendor("datatables");
KTTheme.addJavascriptFile("js/widgets.bundle.js");


Regards,
Lauris Stepanovs,
Keenthemes Support Team


G
Guest 1 year ago

Dear Lauris,

Thank you for your reply and for your support.

Actually, I already added both scripts to the main layout, and the droplist not working.

I guess the problem is with the responsive option in the datatable, I tried to set this property to false and it was working, but we need the datatable to be responsive on the server side.

This is my jquery datatable (for your reference)

////////////////////////////////////////////////////////////////////////
var table;
$(document).ready(function () {
 table = $("#tblCars").DataTable({
 processing: true, // for show progress bar
 serverSide: true, // for process server side
 pageLength: 10,
 responsive: true,
 order: [],
 buttons: [
 "print",
 "excelHtml5"
 ],
 ajax: {
 url: "/Cars/LoadDataCarsForPricingList",
 method: "POST"
 },
 columns: [
 {
 data: "createdDate", title: "Entry Date",
 "render": function (value) {
 if (value === null) return "";
 return moment(value).format("DD/MM/YYYY");
 }
 },
 { data: "carMakerName", title: "Maker" },
 { data: "carModelName", title: "Model" },
 { data: "carGradeName", title: "Grade" },
 { data: "carGradeFuel", title: "Fuel" },
 { data: "plateNo", title: "plate" },
 { data: "totalCylinder", title: "Cylinder" },
 { data: "totalkilo", title: "total kilo" },
 { data: "exteriorColor", title: "exterior Color" },
 { data: "insideColor", title: "inside Color" },
 { data: "fabricType", title: "fabric" },
 { data: "sellingType", title: "Type" },
 { data: "showRoomPrice", title: "Price" },
 { data: "showRoomFinalPrice", title: "FinalPrice" },
 { data: "carOptions", title: "Options", width: 150 },
 { data: "carRemarks", title: "Remarks", width: 150 },
 { data: "companyName", title: "company Name" },
 { data: "additionsPrice", title: "additions Price" },
 { data: "createdBy", title: "created By" },
 {
 data: "pK_CarDetailsId"
 },
 ],
 columnDefs: [

 {
 targets: -1,
 data: null,
 orderable: false,
 className: "text-end",
 render: function (data, type, row) {
 return `
 <a href="#%22%20class=%22btn%20btn-light%20btn-active-light-primary%20btn-sm%22%20data-kt-menu-trigger=%22click%22%20data-kt-menu-placement=%22bottom-end%22%20data-kt-menu-flip=%22top-end" target="_blank">
 Actions
 <span class="svg-icon svg-icon-5 m-0">
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
 <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
 <polygon points="0 0 24 0 24 24 0 24"></polygon>
 <path d="M6.70710678,15.7071068 C6.31658249,16.0976311 5.68341751,16.0976311 5.29289322,15.7071068 C4.90236893,15.3165825 4.90236893,14.6834175 5.29289322,14.2928932 L11.2928932,8.29289322 C11.6714722,7.91431428 12.2810586,7.90106866 12.6757246,8.26284586 L18.6757246,13.7628459 C19.0828436,14.1360383 19.1103465,14.7686056 18.7371541,15.1757246 C18.3639617,15.5828436 17.7313944,15.6103465 17.3242754,15.2371541 L12.0300757,10.3841378 L6.70710678,15.7071068 Z" fill="currentColor" fill-rule="nonzero" transform="translate(12.000003, 11.999999) rotate(-180.000000) translate(-12.000003, -11.999999)"></path>
 </g>
 </svg>
 </span>
 </a>
 <!--begin::Menu-->
 <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4" data-kt-menu="true">
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-docs-table-filter=%22edit_row" target="_blank">
 Edit
 </a>
 </div>
 <!--end::Menu item-->

 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-docs-table-filter=%22delete_row" target="_blank">
 Delete
 </a>
 </div>
 <!--end::Menu item-->
 </div>
 <!--end::Menu-->
 `;
 },
 }
 ],
 // Set rows IDs
 rowId: function (a) {
 return a.pK_CarDetailsId;
 },
 "createdRow": function (row, data, dataIndex) {
 const carSold = data["isSold"];
 if (carSold) {
 $(row).css("background-color", "#f5837d");
 }
 },
 "language": {
 search: "search",
 searchPlaceholder: "",
 "emptyTable": "No Data To Display"
 }
 })
});


user
Lauris Stepanovs Author1 year ago

Hi,

Sorry for the late reply.

We checked an example in the latest asp.net-core version and it should work fine. The only problem you might face is with hostUrl variable which is not included by default.

You should set hostUrl in Starterkit/Views/Layout/Master.cshtml.

<script>var hostUrl = "/assets";</script>


The menus are initialized globally in file js/components/menu.js, if you didn't modify anything in our codebase then an edit menu should be working as well.

Do other menu instances work in your version?

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(