Exploring the possibilities of utilizing a Kendo grid within an ASP.NET Web API

I am currently using the open source edition of Kendo Web with the Kendo UI Web on ASP.NET MVC 4. My Kendo grid contains the following JavaScript code:

<script>
   $(document).ready(function () {
       $("#grid").kendoGrid({
           dataSource: {
               type: "odata",
               serverSorting: true,
               serverFiltering: true,
               serverPaging: true,
               transport: {
                   read: {
                       url: "api/Usermanage",
                       dataType: "json",
                       contentType: "application/json"
                   },
                   create: {
                       url: "/api/Usermanage",
                       dataType: "json",
                       type: "POST"
                   },
                   update: {
                       url: function (UserModel) {
                           return "/api/articles/" + UserModel.ID
                       },
                       dataType: "json",
                       type: "PUT"
                   },
                   destroy: {
                       url: function (UserModel) {
                           return "/api/Usermanage/" + UserModel.ID
                       },
                       dataType: "json",
                       contentType: "application/json",
                       type: "DELETE"
                   },
                   parameterMap: function(options, operation) {
                       if (operation !== "read" && options.models) {
                           return {models: kendo.stringify(options.models)};
                       }
                   }
               },
               schema: {
                   data: function (response) {
                       if (response.value !== undefined)
                           return response.value;
                       else {
                           delete response["odata.metadata"];
                           return response;
                       }
                   },
                   total: function (response) {
                       return response['odata.count'];
                   },
                   model: {
                       fields: {
                           ID:"ID",
                           ID: { editable: false },
                           Name: { type: "string", editable: true, nullable: false, validation: { required: true } },
                           Roles: { type: "string" }
                       }
                   }
               }
           },
           height: 430,
           scrollable: {
               virtual: true
           },
           toolbar: ["create"],
           editable: "popup",
           sortable: true,
           columns: [
               { field: "Name", title: "UserName", width: 110 },
               { field: "Roles", title: "Role", width: 160 },
               { command: ["edit", "destroy"], title: " ", width: "160px" }
           ]
       });
   });
</script>         

The method in the API controller is as follows:

// DELETE api/usermanage/5
public void Delete(int id)
{
    var name = db.UserProfiles.Find(id);
    Membership.DeleteUser(name.UserName,true);
}

However, I am facing an issue with this implementation. Can someone please guide me on what I might be doing wrong?

Answer №1

Your command links are currently directing to the url: "/api/Usermanage/"

To ensure specificity based on the controller action, the correct url should be:

url: function (UserModel) {
   return "/api/Usermanage/Delete/" + UserModel.ID
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Master the art of sending multiple asynchronous requests simultaneously with suspense in Vue 3

Utilizing <Suspense>, I am handling multiple requests in my child component using the await keyword: await store.dispatch("product/getProduct", route.params.id).then(res => productData.value = res); await store.dispatch("product/get ...

How can I display a calendar with a complete month view using ng-repeat?

I was trying to replicate a table similar to the one shown in this image: (disregard the styling). I am struggling with how to properly format the data to create a similar table in HTML. $scope.toddlers = [ { "name": "a", "day": 1, "total": 3 }, { ...

Ways to output a string array from a JSON object containing additional attributes

On the client side, I have received a JSON object from a REST service. This object contains multiple attributes, one of which is a String array. I need guidance on how to display this array using embedded AngularJS code in HTML. Here is my JSON object: [ ...

Error: Unable to encode data into JSON format encountered while using Firebase serverless functions

I am currently working on deploying an API for my application. However, when using the following code snippet, I encountered an unhandled error stating "Error: Data cannot be encoded in JSON." const functions = require("firebase-functions"); const axios = ...

Attempting to use insertAdjacentHTML on a null property results in an error

I keep encountering the same error repeatedly... Can someone please explain what's going wrong here and provide a hint? Error script.js:20 Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null at renderHTML (script.js:20) a ...

The element 'stripe-pricing-table' is not a recognized property of the 'JSX.IntrinsicElements' type

I am currently trying to incorporate a pricing table using information from the Stripe documentation found at this link. However, during the process, I encountered an issue stating: "Property 'stripe-pricing-table' does not exist on type &ap ...

transferring a LatLng variable from one function to initialize Google Maps

I have a database in firebase that stores latitude and longitude values which I retrieve as the variable coords. function getCoords() { var place_data= firebase.database().ref("/place/name"); place_data.once('value').then(function(snaps ...

Tips for displaying a jQuery error message when a key is pressed

I am working with a textarea that has a word count limit of 500. I need to display an error message below the textarea if the word count exceeds 500. I have successfully calculated the word count, but I am unsure how to display the error message and preve ...

Installing external Javascript libraries on Parse cloud code can be done by following these steps

Currently, I have integrated these JavaScript libraries into my Parse cloud code. var request = require('request'); var fs = require('fs'); var Twit = require('twit'); However, the code refuses to compile if these libraries ...

Ways to take an item out of your shopping cart

Do you have any ideas on how to handle cart redirection in JavaScript? My specific request involves a cart with a function that removes products. What approach should I take to redirect to the main page if the cart becomes empty? Here is the delete produc ...

Preserve object properties while allowing for changes to be made without affecting

I am in need of transferring specific properties from one object to another while ensuring that the original object remains mutable. Here is the original object: var sourceObject = { "key1": "value1", "key2": "value2 ...

Determine whether a WebElement contains a particular content within the :after pseudo class

After locating my element in Selenium, I've come across an interesting challenge. IWebElement icon = box.FindElement(By.ClassName("box-icon")); Sometimes, this element (icon) has a content set as follows: &:after { content: $icon-specia ...

Is there anything else I should attempt in order to fix this npm start error?

I have been troubleshooting this issue by researching other stack overflow posts, but I continue to encounter the same error message repeatedly. My goal is to execute a Javascript program that incorporates ReactJS. Initially, everything was functioning sm ...

Provide the option to assign values on select options in order to choose specific JSON data

When working with JSON data from an API, I am creating a dynamic select element. The goal is to change some content (text and image src) based on the option selected from this select element. I have successfully populated the select options with names usi ...

changing font size on a mobile-friendly site using javascript

Currently, I am designing a responsive webpage utilizing Bootstrap framework. Situated in the center of the screen is a text that reads: <p id="entershop" ><a class=no-deco href="shop.html">enter shop</a></p> Within the Bootstra ...

Is there a way to use fetch() to automatically redirect a user after logging in?

I'm currently working on a node.js application using express, and I am in the process of creating a login form for my users. I want to include a Javascript file that utilizes fetch() to send a POST request to my API for user authentication. However, I ...

Closing an Angular Modal Service from External Elements - Learn the Techniques

This is the official angular-modal-service Github page. If you're looking for some examples, check out the angular-modal-service examples here. For my current project, I am working on developing a "Custom Modal" without relying on Bootstrap. Here&ap ...

AngularJS application is throwing an error indicating provider $q is not recognized

Could someone please advise on what might be the issue with my code snippet below: var app = angular.module('app', [ 'angular-cache', 'angular-loading-bar', 'ngAnimate', 'ngCookies', &a ...

What is the best way to make tooltips track a specific data point they are connected to in D3?

I am working with a figure created using D3 that includes tooltips appearing near a data point when hovered over and can be pinned by clicking on the point. I have implemented the functionality to change the plotted values for the points by clicking on spe ...

The reliability of next router events can sometimes be called into question as they do not always function consistently

I've been working on creating a loading screen for my Next.js project. The issue I'm facing is that sometimes the loading message stays on the screen and doesn't go away even after the page has loaded. I suspect this may be due to the state ...