I'm trying to destroy the kendo-grid each time my component is destroy.
I found out here a way to do it but requires jquery that I don't use:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
grid.destroy();
</script>
Any one knows how to do it in angular 6 and typescript?
Thank you
Related
I am using react-bootstrap-table2, to make tables, I have encounter an issue i.e
I want o have a checkbox inside my table, so I am following This, mention in the documentation, but I am getting unexpected result.
My code
For selecting the row
const selectRow = {
mode: 'checkbox',
clickToSelect: true,
classes: 'selection-row',
};
Table rendering
<BootstrapTable
keyField="id"
data={tableData[0].rowsData}
columns={tableData[0].columnsData}
selectRow={selectRow}
/>
I Think issue is coming because of my data, as it is nested one And I am rendering it, but I am not able to resolve it.
My data
let tableData = [
{
rowsData: [
{
fname: "john",
lname: "smith"
},
{
fname: "steve",
lname: "warn"
},
{
fname: "michel",
lname: "clark"
}
],
columnsData: [
{
dataField: "fname",
text: "First name",
sort: true
},
{
dataField: "lname",
text: "last Name",
sort: true
}
]
}
];
Here is my code sandbox link This
You're telling keyField="id" yet each of your rowsData has no id. Give each of them an id and it should work.
I am working on an offer letter template that will replace/modify Dynamic Data Points like Name, Address, Role, Salary, etc based on the candidate selected from a list of candidates. There is a fixed syntax for a dynamic data points i.e they will be enclosed within <<>>, for example :
Welcome to the family, <<Name>>
You will be paid <<Salary>> for the duration of your employment.
In other words, these few data points will change by selecting the candidate we want to offer the job and the rest of the template will remain the same. Here is a demo to help you understand.
This is a dummy array I have created with 1 template, In the real-world app, I can have many templates with different clauseNames, so I am looking for a permanent fix.
.ts file, Template List :
[{
templateId: 1,
templateName: "Offer",
clauses: [
{
clauseName: "Introduction",
clauseId: 1,
texts: [
{
text: "Hello <<Name>>, Welcome to the Machine",
textId: 1,
}]
},
{
clauseName: "Address",
clauseId: 2,
texts: [
{
text: "<<Address>>",
textId: 2,
}]
},
{
clauseName: "Date Of Joining",
clauseId: 3,
texts: [
{
text: "You can join us on <<DateOfJoining>>",
textId: 3,
}]
},
]
}]
and here is the candidate list,
candidateList = [
{ name: "Simba", address: "Some Random Cave" },
{ name: "Doe John", address: "line 4, binary avenue, Mobo" },
{ name: "B Rabbit", address: "8 mile road, Detroit" },
{ name: "Peter Griffin", address: "Spooner Street" },
{ name: "Speedy Gonzales", address: "401, hole 34, Slyvester Cat Road" },
{ name: "Morty", address: "Time Machine XYZ" },
{ name: "Brock", address: "pokeball 420, Medic center" },
]
You can use regular expressions to replace those placeholders such as:
var result = text.text.replace(/\<\<(.*?)\>\>/g, function(match, token) {
return candidate[token.toLowerCase()];
});
One way to incorporate this to your display is by creating a property that returns the formatted text.
I have updated your stackblitz here.
Take a look at this demo
I have modified the logic in below method:
showTeplate(name,address,doj) {
this.clauseList = [];
for (let a of this.templateList) {
if (a.clauses != null) {
for (let cl of a.clauses) {
const tempObj = JSON.parse(JSON.stringify(cl));
tempObj.texts.forEach(textObj => {
textObj.text = textObj.text.replace("<<Name>>",name);
textObj.text = textObj.text.replace("<<Address>>",address);
textObj.text = textObj.text.replace("<<DateOfJoining>>",doj);
})
this.clauseList.push(tempObj)
}
}
}
console.log("Clause list", this.clauseList)
}
I want to display my json data with sliding feature. Here is the design of what i want to do. I saw carousel is for sliding images but i don't know how to achieve this one. Any help would be great.
And here is sample code.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.myDatas = [{
Paramnames: "Travel Material",
options: [{
name: "Newspaper"
},
{
name: "Magazine"
},
{
name: "Book"
}
]
},
{
Paramnames: "Safety & Security",
options: [{
name: "Health"
},
{
name: "Private Policy"
},
{
name: "Flight Disruption"
}
]
}
];
});
<div ng-app="myApp" ng-controller="myCtrl">
<div class="col-sm-3" ng-repeat="myData in myDatas">
<p class="m-t-xs font-bold"><strong>{{myData.Paramnames}} </strong></p>
<div class="col-sm-8" ng-repeat="myOptions in myData.options">
<p class="m-t-xs font-bold">{{myOptions.name}}
</p>
</div>
</div>
</div>
I finally found an answer for my question. I thought it might help i used angular-slick directive its so cool. http://vasyabigi.github.io/angular-slick/
I want to catch 'dataBound' event in jQuery.
Requirement is such as that when databound event is fired in kendo-ui ,
I have to add some custom logic to DOM.
See for example Telerik API and events demo.
You need to configure the databound event, then add your logic to the javascript function.
<div id="grid"></div>
<script>
function dataBound(e) {
var grid = e.sender;
// Do your custom logic
}
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
dataBound: "dataBound"
});
</script>
give a JSON data like this
{ name: { firstname: 'First Name', lastname: 'Last Name' } }
How can I load this data into ExtJS form field?
First Name: [ First Name ]
Last Name: [ Last Name ]
UPDATE:
after using this technique I arrived at second challenge when post my change back to the server Ext generate json in this format
{ "firstname": "New first name", "lastname": "New last name"}
// instead of
{ "name": { "firstname": "...", "lastname": "..."} }
is it expected behavior or is there anyway I can tell Ext to serialize the object back to the nest form, regards.
P.S: my Edit.js taking from Ext MVC application guide http://localhost/extjs/docs/index.html#!/guide/application_architecture
I suggest you map this into two separate fields in your model definition:
Ext.define("Person", {
extend: "Ext.data.Model",
fields: [
{name: "firstname", mapping: "name.firstname"},
{name: "lastname", mapping: "name.lastname"}
]
});