Is there anyone who can assist me with ZingGrid? I am looking for a sample project to understand how to make API calls using ZingGrid.
Is there anyone who can assist me with ZingGrid? I am looking for a sample project to understand how to make API calls using ZingGrid.
After investing a considerable amount of time, I managed to explore the built-in functionalities of ZingGrid API for performing CRUD operations. While extracting information from the documentation was relatively smooth, I faced challenges in customizing the API according to my specific needs.
When I mention silly or strict aspects, it's not to discredit the excellence of ZingGrid API. Rather, certain behaviors like automatically displaying a delete button when selecting rows with a "type="select"" column seemed unnecessary. Despite potential workarounds like adding custom functions to the "onselect" method, such features raised questions about customization opportunities.
Although I reached out to ZingGrid developers seeking clarification, their primary focus appeared to be directing me towards purchasing a support package containing license verification links, which left me puzzled. This prompted me to explore alternatives within our budget constraints that aligned better with our requirements.
In my pursuit of exploring viable solutions, I leveraged the free version's methods and events along with fetch requests and XmlHttpRequest API to handle data retrieval and transmission tasks.
// Obtain reference to ZingGrid table element
const zgRefTableA = document.querySelector("zing-grid#zgRefTableA");
// Bind function to executeOnload() method
zgRefTableA.executeOnLoad(function() {
// Retrieve grid data
zgRefTableA.addEventListener('row:click', function(e) {
const data = e.detail.ZGData.data; // row data
fnFetch(data.url, "PUT", data);
});
});
fnFetch(action /* string url path */, method /* string http request method */,
data /* object form data */, timesOut = 45000 /* int timeout in milliseconds */) {
// Headers configuration
const pHeader = {
method: method,
body: JSON.stringify(data),
headers: {
"X-Requested-With": "XMLHttpRequest",
"Accept": "application/json",
'Content-Type': 'application/json',
"X-CSRF-Token": document.querySelector('input[name="guest_csrf_token"]').value
}
};
// Timeout handling
const timeouts = new Promise(function(resolve, reject) {
setTimeout(resolve, timesOut, {timeout: true});
});
// Perform Fetch operation
return Promise.race([
fetch(action, pHeader), timeouts
])
.then(response => {
if ( response.timeout !== undefined && response.timeout ) {
throw new Error('timeout');
} else if( response.ok ) {
return response.json();
} else {
throw new Error(`${response.status} ${response.statusText}`);
}
})
.then(data => {
// Handle data ...
})
.catch(err => {
// Handle error ...
});
}
I also successfully integrated the free version of ZingGrid with Laravel backend, offering an enriching experience.
The example above focuses solely on using fetch to transmit data, but one could further explore strategies like populating forms before data transfer or utilizing ZingGrid's intrinsic attributes such as editor-controls, editor, or the tag zg-dialog.
Below is the jquery code I am working with: $.ajax({ type: "POST", url: "Ajax/getTableRecord", data:{ i : id, t: 'mylist'}, dataType: 'json', success: function(data){ alert(data); ...
Below is my code snippet where I check for the correct req.path and display specific text. However, I now need to show a 404 not found error message. I attempted placing it inside the for loop condition with break;, but it's not quite working as expe ...
Managing a dashboard website with multiple div elements can be quite tedious, especially when daily updates are required. Manually editing the HTML code is inefficient and time-consuming. Each div contains a ul element where new li items need to be added ...
My journey into iOS application development began with HTML5 and PhoneGap. I'm now curious about how security is maintained in such scenarios. Without the ability to run PHP code on iOS applications, REST APIs are often employed to communicate with se ...
Trying to combine two JSON arrays into one without duplicates based on date. The jQuery extend() function isn't doing the trick, so looking for an alternative solution that avoids nested $.each statements due to potential large dataset size... [ ...
I usually have a global ajax load animation that runs during every ajax call. However, there are certain cases where I need to disable this effect. How can I achieve that? This is the code for the global animation : $(document).ajaxStart(function(){ $ ...
Hello, I am currently delving into JavaScript for a project I'm working on and have encountered a question regarding the following snippet of code. function randomArr(){}; randomArr.prototype = new Array(); randomArr.prototype.getRandomValue = funct ...
Currently, I am in the process of creating a small program for a website where I intend for certain blocks to expand almost to the size of the window when clicked on to reveal text. Unfortunately, using checkboxes seems to cause all boxes to grow, and with ...
Currently, I am working with BootstrapVue and would like to provide a brief overview of my code: I have a v-for loop with inputs that can be dynamically created using a b-button named "addElement". Additionally, I have the option to select an item from a ...
I'm currently working with a basic datatable that displays JSON data obtained from an API. I have customized my table so that each row includes a button. When this button is clicked, it triggers an Ajax request to a specific URL corresponding to the v ...
I am currently in the process of integrating Stencil and Storybook within the same project. While following this setup guide and this one, I encountered a step that requires publishing the component library to NPM, which is not my desired approach. In my ...
I need help with adding a prefix to an input field value using Jquery. I want the input field value to be submitted as "Referrer Email: {email address}" where the {email address} part will be dynamic. The snippet below is what I found, but I'm having ...
I need a more efficient and robust way to conditionally render a component based on the route in React Router. Instead of relying on a <Switch>/<Route> setup, I want to be able to define paths to hide in an array or similar data structure. My c ...
I am currently developing a website with a specific purpose of managing inactive Tableau workbooks. By logging into the site, users will be able to view their old workbooks and determine which ones to retain. This will be achieved by collecting simple tex ...
In my application, there are 3 tabs set up as follows: <li ng-class="{ active: isActive('#one')}"><a data-toggle="tab" class="tab-txt-color" href="#one" ng-click="selectTab('fruits') ...
My Panel component is equipped with an overflow-x: scroll; feature for horizontal scrolling. Given the large amount of data it contains, I am looking for a way to enable horizontal scrolling within the panel. What is the best approach to achieve this? Is ...
As part of a project, I am required to design a view where a drop-down menu is positioned at the bottom of a parent div. You can see an example here: http://jsfiddle.net/Gruck/6owhaa63/. The "move to" item expands to show more options, similar to the mocku ...
Unique responsive design featuring a bold red column on the left and a sleek blue column on the right. The red column contains a striking black element with margin-top:30px As the website is resized, causing the blue column to shift below the red column, ...
Alright, let's talk about a situation where we have a draggable HTML div element: <div id="server" draggable="true" ondragstart="return dragStart(event)">Server</div> and also a target div: <div id="target1" ondragenter="return dragE ...
I am trying to create expandable boxes that can open onclick and close again by clicking on the X. The issue I'm facing is that the close jQuery function isn't working. However, my main concern is how to optimize the code so it doesn't becom ...