Home Laravel + KendoUI - MultiSelect add new Item and store to Database
Reply: 0

Laravel + KendoUI - MultiSelect add new Item and store to Database

user3606
1#
user3606 Published in April 26, 2018, 1:47 pm

I am looking, how can i "POST" the new value to Laravel controller so i can store the it to the database for future use, please.

<script id="noDataTemplate" type="text/x-kendo-tmpl">
    <div>
        No data found. Do you want to add new item - '#: instance.input.val() #' ?
    </div>
    <br />
    <button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.input.val() #')">Add new item</button>
</script>

The add new value script/action (it's adding the value on the dropdown list (static) without issues)

<script>
    function addNew(widgetId, value) {
        var widget = $("#" + widgetId).getKendoMultiSelect();
        var dataSource = widget.dataSource;

        if (confirm("Are you sure?")) {
            dataSource.add({
                IssueID: 0,
                IssueName: value
            });

            dataSource.one("requestEnd", function(args) {
                if (args.type !== "create") {
                    return;
                }

                var newValue = args.response[0].IssueID;

                dataSource.one("sync", function() {
                    widget.value(widget.value().concat([newValue]));
                });
            });

            dataSource.sync();
        }
    }
</script>

The multiselect/kendoui script

<script>
    $(document).ready(function() {
        var crudServiceBaseUrl = "/api/incident/issue";
        var dataSource = new kendo.data.DataSource({
            batch: true,
            transport: {
                read:  {
                    url: crudServiceBaseUrl + "/telephony",
                    dataType: "json"
                },
                create: {
                    url: crudServiceBaseUrl + "/telephony/create",
                    dataType: "json"
                },
                parameterMap: function(options, operation) {
                    if (operation !== "read" && options.models) {
                        return {models: kendo.stringify(options.models)};
                    }
                }
            },
            schema: {
                model: {
                    id: "IssueName",
                    fields: {
                        IssueID: { type: "number" },
                        IssueName: { type: "string" }
                    }
                }
            }
        });

        $("#telephonyissues").kendoMultiSelect({
            filter: "startswith",
            dataTextField: "IssueName",
            dataValueField: "IssueName",
            dataSource: dataSource,
            noDataTemplate: $("#noDataTemplate").html()
        });
    });
</script>

Here is the controller to store the data

public function storetelephony(Request $request)
{
    $id = $request['IssueId'];
    $name = $request['IssueName'];
    $category = $request['CategoryName'];

    $issue = new api_incident_issue();
    $issue->id = $request['IssueId'];
    $issue->IssueName = $request['IssueName'];
    $issue->CategoryName = $request['CategoryName'];
    $issue->save();  
}

and here is the configured routes at the web.php

Route::get('/api/incident/issue/telephony', 'ApiIncidentIssueController@indextelephony')->name('api_incident_issue_telephony');

Route::post('/api/incident/issue/telephony/create', 'ApiIncidentIssueController@storetelephony')->name('api_incident_request_telephony');
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.535686 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO