JavaScript/jQuery Lookup - PHP Service
DevExtreme provides the DevExtreme-PHP-Data extension that implements data processing on a PHP server according to the protocol the Lookup uses. To access the server from the client, configure the CustomStore as described in the Custom Sources article or use the createStore method. This method is a part of the DevExtreme.AspNet.Data extension. The following code shows how to use this method.
jQuery
JavaScript
$(function() {
const serviceUrl = "http://url/to/my/service.php";
$("#lookupContainer").dxLookup({
dataSource: DevExpress.data.AspNet.createStore({
key: "ID",
loadUrl: serviceUrl
}),
// ...
})
});Angular
HTML
TypeScript
<dx-lookup ...
[dataSource]="store">
</dx-lookup>
import { DxLookupModule } from "devextreme-angular";
import CustomStore from "devextreme/data/custom_store";
import { createStore } from "devextreme-aspnet-data-nojquery";
// ...
export class AppComponent {
store: CustomStore;
constructor() {
const serviceUrl = "http://url/to/my/service.php";
this.store = createStore({
key: "ID",
loadUrl: serviceUrl
})
}
}
@NgModule({
imports: [
// ...
DxLookupModule
],
// ...
})Vue
<template>
<DxLookup ...
:data-source="store"
/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxLookup } from 'devextreme-vue/lookup';
import { createStore } from "devextreme-aspnet-data-nojquery";
const serviceUrl = "http://url/to/my/service.php";
export default {
components: {
DxLookup
},
data() {
return {
store: createStore({
key: "ID",
loadUrl: serviceUrl
})
};
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { Lookup } from 'devextreme-react/lookup';
import { createStore } from "devextreme-aspnet-data-nojquery";
const serviceUrl = "http://url/to/my/service.php";
class App extends React.Component {
constructor(props) {
super(props);
this.store = createStore({
key: "ID",
loadUrl: serviceUrl
});
}
render() {
return (
<Lookup ...
dataSource={this.store}
/>
);
}
}
export default App;
Select one or more answers