Add Default Search and Arrow in Jquery Grid

Add Default Search and Arrow in Jquery Grid

I have a jQuery Grid that I ma using in My MVC page, it will sort Grid when I click on any Header. What I need is to have a default Sort by FullName when Grid Loan. Not sure where I have to Identify the Default Sort. Also I need to have arrow by each header so it shows up Arrow ot Down Arrow if the next Sort would be Asc Or Dec, not sure ho to add that.

This is my Grid code:

I have a jQuery Grid that I ma using in My MVC page, it will sort Grid when I click on any Header. What I need is to have a default Sort by FullName when Grid Loan. Not sure where I have to Identify the Default Sort. Also I need to have arrow by each header so it shows up Arrow ot Down Arrow if the next Sort would be Asc Or Dec, not sure ho to add that.

This is my Grid code:

(function ($) { $.fn.CFCGrid = function (options) { // Initialzing default options. var settings = $.extend({ // Define defaults values here width: "auto", data: [], enableSort: true, gridSelector: null, clickedCellID: '', clickedCellOrder: 'asc', gridButton: { enable: false, buttons: [{ text: "Edit", clickHandle: function (arg) { } }, { text: "DELTE", clickHandle: function (arg) { } }] } }, options); var isFunction = function (functionToCheck) { var getType = {}; return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]'; }; settings.gridSelector = $(this); if (settings.enableSort == true) { $(this).on('click', 'th', function () { var id = $(this).attr('id'); var asc = ''; // switch the order, true if not set if (id != settings.clickedCellID) { settings.clickedCellID = id; settings.clickedCellOrder = 'asc'; } else { if (settings.clickedCellOrder === false) { settings.clickedCellOrder = true; } else { settings.clickedCellOrder = 'asc'; } } var cells = $(settings.gridSelector).find("th"); settings.data = sortResults(id, settings.clickedCellOrder, settings.data); buildHtmlTable(settings.gridSelector, settings.data); }); }

This is where I call the Grid:


var gridButtonConfig = { enable: true, buttons: getButtons }; result.headerColumns = ["Email", "FullName", "Organization", "Department", "Access", "CreateDate", "Status", "Actions"]; result.headerLables = ["User Name / Email ", "Full Name", "Organization", "Department", "Access", "Created Date", "Status", "Actions"]; $("#Grid").CFCGrid({ data: result, width: "99%", enableSort: true, gridButton: gridButtonConfig });