Questions on UI for ASP.NET MVC Forum

2 questions

0 answers

185 views

Create new and Delete operations do not work on my jQuery Grid.

I have API hosted on asp net core, through Swagger and Postman it works just fine, but when I try to access it through Jquery Grid of Kendo it only reads data but doesn't add nor delete.

Can you tell me what am I doing wrong here?

My .NET Controllers:

[HttpDelete]
public async Task<ActionResult> Delete(Guid id)
{
await _mediator.Send(new DeleteProductCommand.Command { Id = id });
return NoContent();
}

[HttpPost]
[ProducesResponseType(StatusCodes.Status200OK)]
public async Task<ActionResult<ProductResponse>> Create([FromBody] CreateProductCommand command) => await _mediator.Send(command);

My Jquery Grid

<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://localhost:44393/api",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Product",
dataType: "json"
},
create: {
url: crudServiceBaseUrl + "/Product/Create",
contentType: "application/json; charset=utf-8",
dataType: "json",
type: "POST"
},
destroy: {
url: crudServiceBaseUrl + "/Product/Delete",
type: "DELETE",
contentType: 'application/json; charset=utf-8',
dataType: 'json'
},
parameterMap: function (options, operation) {
if (operation !== "read" && options) {
return kendo.stringify(options);
}
}

},

batch: true,
pageSize: 20,
schema: {
model: {
id: "id",
fields: {
id: { editable: false, nullable: false },
productName: { type: "string", editable: true },
productSKU: { type: "string", editable: true },
productType: { type: "string", editable: true },
}
}
}
});

$("#grid").kendoGrid({
dataSource: dataSource,
columnMenu: {
filterable: false
},

height: 680,
editable: "inline",
pageable: true,
sortable: true,
navigatable: true,
resizable: true,
reorderable: true,
groupable: true,
filterable: true,
dataBound: onDataBound,
toolbar: ["excel", "pdf", "create", "search", "save", "delete"],
columns: [{
selectable: true,
width: 75,
attributes: {
"class": "checkbox-align",
},
headerAttributes: {
"class": "checkbox-align",
}
}, {
field: "productName",
title: "Product Name",
template: "productName",
width: 300
}, {
field: "productSKU",
title: "productSKU",
width: 105
}, {
field: "productType",
title: "productType",
width: 130,
}, {
field: "id",
title: "id",
width: 105
},
{ command: "destroy", title: "Action", width: 120 }],
});
});

function onDataBound(e) {

} ;

</script>

BottomNavigation

Button

FloatingActionButton

General Discussions

Grid

TextBox

asked on 23 Nov 2021

1 answer

118 views

How to use keydown event on multiple controls grab all the values to form a folder path on a label?

Hi guys,

I have a kendo window which I have controls inside the window.

The idea is to keydown what the user enters to the folderName label which creates and shows the user the name of the folder that will be created in the network drive.

see attached screen shot

so far i have this code below. But the logic is not yet correct

    function formatStringfoldername(UploadedDT) {
        debugger;
        


        var MineName = $("#SFolder").val();
        var scan_PersonsScan = $("#scan_PersonsScan").data("kendoMultiSelect").dataItems();
        var SiteCode = $("#SiteCode").data("kendoMultiColumnComboBox").dataItem();
        var descriptionMineName = SiteCode.MineName;
        var scan_EquipmentDetails = $("#scan_EquipmentDetails").data("kendoMultiSelect").dataItems();
        var scan_Projects = $("#scan_Projects").data("kendoMultiSelect").dataItems();
      
        if (descriptionMineName ==="") {
          //  var result = "N:\\Backup\\" + UploadedDT + " " + descriptionMineName;
        }
        if (MineName === "") {
       //     var result = "N:\\Backup\\" + UploadedDT + " " + descriptionMineName + " " + MineName;
        }
        else if (scan_Projects.length > 0) {
           
            $("#FolderPathstructurechange").text(`N:\\Backup\\  ${UploadedDT}   ${MineName}  ${scan_PersonsScan[0].Initials}  ${scan_Projects[0].Project.Project1}`);
        }
        else if (scan_EquipmentDetails.length > 0)
        {
            $("#FolderPathstructurechange").text(`N:\\Backup\\  ${UploadedDT}   ${MineName}  ${scan_PersonsScan[0].Initials}  ${scan_Projects[0].Project.Project1}`);
        }
       

       
       
        //var result = "N:\\Backup\\" + UploadedDT + " " + scan_PersonsScan[0].Initials + MineName;
      //  $("#FolderPathstructurechange").text($.validator.format("N:\\Backup\\" + " {0} , I'm {1} years old", [UploadedDT, "23"]));
    }

function change() {
        debugger;
        var DateScanned = $("#DateScanned").data("kendoDatePicker");
        $("#DateScanned").attr("disabled", "disabled");
        var value = DateScanned.value();
        var UploadedDT = kendo.toString(value, "yyyy-MM-dd");

        formatStringfoldername(UploadedDT);
       
    }

  @(Html.Kendo().DatePicker().Name("DateScanned") 
                                                       .Events(e =>
                                                                    {
                                                                        e.Change("change");
                                                                    }).Format("dd/MM/yyyy").ToClientTemplate())

     <div class="row">

                            @Html.Label("Short Folder Description:")
                            <div class="row mt-3">

                            </div>
                            @Html.Kendo().TextBox().Name("SFolder").HtmlAttributes(new { onInput = "formatStringfoldername();" }).ToClientTemplate()
                        </div>