I have a Kendo Grid where I bind it dynamically to a JSON object.
In the generateColumns function, I want to call the getKendoColor function. However, I need to pass the column cell value. In the code below I forced in 'RED' to show how it should work.
How do I pass in the column value to this getKendoColor function?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid" style="width:1000px;"></div>
<script>
var isDateField =[];
var isTaskField =[];
$.ajax({
url: "http://www.mocky.io/v2/59c4dd1e4000005400b25ba7",
dataType: "jsonp",
success: function(result) {
generateGrid(result);
}
});
function generateGrid(response) {
var model = generateModel(response);
var columns = generateColumns(response);
var grid = $("#grid").kendoGrid({
dataSource: {
transport:{
read: function(options){
options.success(response.Table);
}
},
pageSize: 5,
schema: {
model: model
}
},
columns: columns,
pageable: true,
editable:false
});
}
function generateColumns(response) {
var columnNames = response["columns"];
return columnNames.map(function (name) {
if (isTaskField[name]) {
return { field: name, template: '#= getKendoColor("RED") #', format: (isDateField[name] ? "{0:D}" : "") };
}
else
return { field: name, format: (isDateField[name] ? "{0:D}" : "") };
})
}
function generateModel(response) {
var sampleDataItem = response["Table"][0];
var model = {};
var fields = {};
for (var property in sampleDataItem) {
var itemValue = sampleDataItem[property];
if (property.indexOf("ID") !== -1) {
model["id"] = property;
}
var propType = typeof sampleDataItem[property];
if (propType === "number") {
fields[property] = {
type: "number",
validation: {
required: true
}
};
if (model.id === property) {
fields[property].editable = false;
fields[property].validation.required = false;
}
} else if (propType === "boolean") {
fields[property] = {
type: "boolean"
};
} else if (propType === "string") {
var parsedDate = kendo.parseDate(sampleDataItem[property]);
if (parsedDate) {
fields[property] = {
type: "date",
validation: {
required: true
}
};
isDateField[property] = true;
} else {
fields[property] = {
validation: {
required: true
}
};
if ((property !== "Entity") && (property !== "Period") && (property !== "Level"))
{
isTaskField[property] = true;
}
}
} else {
fields[property] = {
validation: {
required: true
}
};
}
}
model.fields = fields;
return model;
}
function getKendoColor(OverallStatus) {
OverallStatus = OverallStatus.toUpperCase();
//alert(OverallStatus);
var htmlRed = kendo.format('<div class="text-center"><div style="color:red"> <i class="fa fa-circle fa-lg"></i> </div> </div>');
var htmlGreen = kendo.format('<div class="text-center"><div style="color:green"> <i class="fa fa-circle fa-lg"></i> </div> </div>');
var htmlOrange = kendo.format('<div class="text-center"><div style="color:orange"> <i class="fa fa-circle fa-lg"></i> </div> </div>');
var htmlYellow = kendo.format('<div class="text-center"><div style="color:yellow"> <i class="fa fa-circle fa-lg"></i> </div> </div>');
switch (OverallStatus) {
case "RED":
return htmlRed;
case "GREEN":
return htmlGreen;
case "ORANGE":
return htmlOrange;
case "YELLOW":
return htmlYellow;
case "CREATED":
return htmlRed;
case "APPROVED":
return htmlGreen;
}
}
</script>
</body>
</html>
https://dojo.telerik.com/AgALaK/2
You can set the template itself as a function and in your case, a slight change to getKendoColor will do the trick:
function getColumnTemplate(dataItem) {
var OverallStatus = dataItem.OverallStatus.toUpperCase();
//All the rest of your getKendoColor function
return someHTML;
}
Then just use this function as the template.
return columnNames.map(function (name) {
if (isTaskField[name]) {
return { field: name, template: getColumnTemplate, format: (isDateField[name] ? "{0:D}" : "") };
}
else
return { field: name, format: (isDateField[name] ? "{0:D}" : "") };
})
Related
I'm working on autocomplete JQuery function to populate student names in the text box. I've utilized every related JQuery library to make the autocomplete function work. When i press F12, it always throws an error which is "autocomplete is not a function". Below is my code that I'm running.
StudentBatch.cshtml
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="form-group">
<div class="col-md-12">
#Html.EditorFor(model => model.StudentName, new { id = "StudentName" })
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
alert("This is autocomplete function");
});
$(document).ready(function () {
$("#StudentName").autocomplete({
//autocomplete: {
// delay: 0,
// minLength: 1,
source: function (request, response) {
$.ajax({
url: "/Student/Create",
type: "POST",
dataType: "json",
data: { Prefix: request.term },
success: function (data) {
try {
response($.map(data, function (item) {
return { label: item.StudentName, value: item.StudentName };
}))
} catch (err) { }
}
})
},
messages: {
noResults: "jhh", results: "jhjh"
}
});
});
</script>
StudentController.cs
[HttpPost]
public JsonResult Create(string Prefix)
{
CreateUser user = new CreateUser();
string stdid = "fae30ef0-08b2-4490-a389-3c8eb0a7cc53";
var StudentList = user.GetAllUsers().ToList().Where(u => u.FirstName == Prefix && u.usertypeid == stdid).ToString();
return Json(StudentList, JsonRequestBehavior.AllowGet);
}
I have created similar demo which you are creating.
Model
public class CreateUser
{
public string StudentName { get; set; }
public string StudentId { get; set; }
}
Controller
public class StudentController : Controller
{
// GET: Student
public ActionResult Create()
{
return View();
}
[HttpPost]
public JsonResult Create(string prefix)
{
List<CreateUser> studentList = new List<Models.CreateUser>()
{
new CreateUser { StudentId = "1" , StudentName = "Student1"},
new CreateUser { StudentId = "2" , StudentName = "Student2"},
new CreateUser { StudentId = "3" , StudentName = "Student3"},
new CreateUser { StudentId = "4" , StudentName = "Student4"},
new CreateUser { StudentId = "5" , StudentName = "Student5"},
new CreateUser { StudentId = "6" , StudentName = "Student6"},
new CreateUser { StudentId = "7" , StudentName = "Student7"},
};
var searchlist = (from student in studentList
where student.StudentName.Contains(prefix)
select student).ToList();
return Json(searchlist, JsonRequestBehavior.AllowGet);
}
}
View
#model WebApplication6.Models.CreateUser
#{
Layout = null;
}
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css" rel="Stylesheet" type="text/css" />
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
.ui-autocomplete-input {
width: 300px;
}
</style>
<div class="form-group">
<div class="col-md-12">
#Html.EditorFor(model => model.StudentName, new { id = "StudentName" })
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#StudentName").autocomplete({
//autocomplete: {
// delay: 0,
// minLength: 1,
source: function (request, response)
{
$.ajax({
url: "/Student/Create",
type: "POST",
dataType: "json",
data: { prefix: request.term },
success: function(data) {
try {
response($.map(data,
function (item)
{
return { label: item.StudentName, value: item.StudentName };
}));
} catch (err) {
}
}
});
},
messages:
{
noResults: "jhh", results: "jhjh"
}
});
});
</script>
Output
I try to automate the CMS using robot framework, I got the XPath using firepath, I'm able to locate the element in Firefox, if I refresh the page, I couldn't locate the same XPath,I thought XPath got changed, but I got the same XPath when I try to get after page refresh,
IN SHORT again:
1) Got the Xpath, say "A"
2) Refresh the page
3) try to locate the element using "A".but it shows no element found
4) Get the new XPath, say "B"
5) Both A and B are same if I try now with A it works,
I need to automate this scenario, Thanks for your time.
I tried Frame too.
Note:
Every time after refresh element gets hidden until the click operation takes place.
<document>
<html style="height: 100%; overflow: hidden;">
<head>
**xpath**<body id="m_bodyElem" class="Gecko Gecko54 ENUS cms-bootstrap ui-layout-container" style="position: relative; height: 100%; overflow: hidden; margin: 0px; padding: 0px; border: medium none;">
<form id="aspnetForm" method="post" action="./CMSAdministration.aspx">
<div class="aspNetHidden">**xpath**
***
</document>
AFTER DOM ACTIVATION
<document>
<html>
<head>
<body id="m_bodyElem" class="Gecko Gecko54 ENUS cms-bootstrap">
<form id="aspnetForm" method="post" action="./UIPage.aspx?elementguid=a5568855-b030-47ff-801a-d524618a2ca7&displaytitle=false" onsubmit="if (window.Loader) { window.Loader.submitForm(1000, false); }; return true;">
<div class="aspNetHidden">
<script type="text/javascript"> //<![CDATA[ var theForm = document.forms['aspnetForm']; if (!theForm) { theForm = document.aspnetForm; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]> </script>
<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZBvGXq_vBGigUCFpfznup-OhZmSOTsQXuUy4Gn5GLidTPeGZMHkjMcSO21b0MZpf4w2&t=636160552680000000" type="text/javascript"/>
<script type="text/javascript"> //<![CDATA[ function CloseDialog(refreshPage) { // Check that the document content has not been changed without saving. Stop closing the dialog when user decides to save the content. if (window.CheckChanges && !CheckChanges()) { return false; } if (typeof(refreshPage) === "undefined") { refreshPage = true; } try { // IE9 fix - wopener doesn't have to be available if(refreshPage && window.wopener && window.wopener.RefreshWOpener) { wopener.RefreshWOpener(window); } } catch(err) {} var canClose = true; if (window.onCloseDialog) { canClose = window.onCloseDialog(); } if (canClose) { if(top.closeDialog && (top != window)) { setTimeout(function(){ if(top && top.closeDialog && (top != window)){ top.closeDialog(window) } }, 1); } else { top.close(); } } return false; } //]]> </script>
<script type="text/javascript"> //<![CDATA[ function GetTop(){ if(top.getTop) { return top.getTop(window); } else { return top; } } //]]> </script>
<script src="/CMSPages/GetResource.ashx?scriptfile=%2fCMSScripts%2fUI%2fUIPage.js" type="text/javascript"/>
<script type="text/javascript"> //<![CDATA[ function ToggleDiv(label){ var div = $cmsj(label).parent(); var image = div.find('.ToggleImage'); var hiddenField = image.next(); var affectedElements = div.find('.editing-form-category-caption').next(); if(hiddenField.val() == 'True') { div.removeClass('Collapsed'); hiddenField.val('False') image.attr('src', '/CMSPages/GetResource.ashx?image=%5bImages.zip%5d%2fCMSModules%2fCMS_PortalEngine%2fWebpartProperties%2fminus.png'); affectedElements.show(); } else { div.addClass('Collapsed'); hiddenField.val('True'); image.attr('src', '/CMSPages/GetResource.ashx?image=%5bImages.zip%5d%2fCMSModules%2fCMS_PortalEngine%2fWebpartProperties%2fplus.png'); affectedElements.hide(); } } //]]> </script>
<script type="text/javascript"> //<![CDATA[ function modalDialog(url, name, width, height, otherParams, noWopener, forceModal, forceNewWindow, setTitle) { // Header and footer is greater than before, increase window size accordingly if (typeof(height) === "number") { height += 66; } // Set default parameter values if (setTitle == undefined) { setTitle = true; } if (forceModal == undefined) { forceModal = true; } if (otherParams == undefined) { otherParams = 'toolbar=no,directories=no,menubar=no,modal=yes,dependent=yes,resizable=yes'; } var advanced = false; try { advanced = window.top.AdvancedModalDialogs; } catch (err) { } if (advanced && !forceNewWindow) { window.top.advancedModal(url, name, width, height, otherParams, noWopener, forceModal, setTitle, this); } else { var dHeight = height; var dWidth = width; if (width.toString().indexOf('%') != -1) { dWidth = Math.round(screen.width * parseInt(width, 10) / 100); } if (height.toString().indexOf('%') != -1) { dHeight = Math.round(screen.height * parseInt(height, 10) / 100); } var oWindow = window.open(url, name, 'width=' + dWidth + ',height=' + dHeight + ',' + otherParams); if (oWindow) { oWindow.opener = this; oWindow.focus(); } } } //]]> </script>
<script type="text/javascript"> //<![CDATA[ var applicationUrl = '/'; var imagesUrl = '/CMSPages/GetResource.ashx?image=%5bImages.zip%5d%2f'; var isRTL = false; //]]> </script>
<script src="/CMSPages/GetResource.ashx?scriptfile=%7e%2fCMSScripts%2fBootstrap%2fbootstrap.min.js" type="text/javascript"/>
<script src="/CMSPages/GetResource.ashx?scriptfile=%7e%2fCMSScripts%2fBootstrap%2fbootstrap.custom.js" type="text/javascript"/>
<script src="/CMSPages/GetResource.ashx?scriptfile=%7e%2fCMSScripts%2fControls%2fcontextmenu.js" type="text/javascript"/>
<script type="text/javascript"> //<![CDATA[ menuSettings['cg0_motheractions'] = { activecss : 'unigrid-action-menuactive', inactivecss : '', activecssoffset : 0, button : 'Both', vertical : 'Bottom', offsetx : 0, offsety : 0, horizontal : 'Left', dynamic : false, mouseover : false, level : 0, rtl : false, up : false }; CM_Init('cg0_motheractions'); function ContextMenuAsyncCloser_cg0_motheractions(sender, args) { HideContextMenu('cg0_motheractions',true); } RegisterAsyncCloser(ContextMenuAsyncCloser_cg0_motheractions); //]]> </script>
<script type="text/javascript"> //<![CDATA[ function ContextExportObject(definition, backup) { var query = ''; if (backup) { query += '&backup=true'; } modalDialog(applicationUrl + 'CMSModules/ImportExport/Pages/ExportObject.aspx?objectType=' + escape(definition[0]) + '&objectId=' + definition[1] + query, 'ExportObject', 750, 230); } function ContextRestoreObject(definition, backup) { var query = '&ug=UG_m_c_plc_lt_ctl01_ST_UI_Listing_gridElem'; if (backup) { query += '&backup=true'; } modalDialog(applicationUrl + 'CMSModules/ImportExport/Pages/RestoreObject.aspx?objectType=' + escape(definition[0]) + '&objectId=' + definition[1] + query, 'RestoreObject', 750, 400); } function ContextCloneObject(definition) { modalDialog(applicationUrl + 'CMSModules/Objects/Dialogs/CloneObjectDialog.aspx?objectType=' + escape(definition[0]) + '&objectId=' + definition[1], 'CloneObject', 750, 470); } //]]> </script>
<script type="text/javascript"> //<![CDATA[ menuSettings['cg0_mActions'] = { activecss : 'unigrid-menu-panel', inactivecss : 'unigrid-menu-panel', activecssoffset : 0, button : 'Both', vertical : 'Bottom', offsetx : 0, offsety : 0, horizontal : 'Left', dynamic : false, mouseover : false, level : 0, rtl : false, up : false }; CM_Init('cg0_mActions'); function ContextMenuAsyncCloser_cg0_mActions(sender, args) { HideContextMenu('cg0_mActions',true); } RegisterAsyncCloser(ContextMenuAsyncCloser_cg0_mActions); //]]> </script>
<script src="/CMSPages/GetResource.ashx?scriptfile=%7e%2fCMSScripts%2fjquery%2fjquery-dialog.js" type="text/javascript"/>
<script src="/ScriptResource.axd?d=x6wALODbMJK5e0eRC_p1LReXSSMeIyuHkoW0S0JbeJThyUVM1Ht4tiF1s3IQMCFhPQK_xpltR2WGldkDgz-jn22orun3s0371LlvE1PAZKjo6kObtvOl-fuKz6i7Aya00&t=7c776dc1" type="text/javascript"/>
<script src="/ScriptResource.axd?d=P5lTttoqSeZXoYRLQMIScL2FKbXixpOQbTl1EIUzR5PmuwyrWWddMW5IgYL1QiI9_cn_1H5B6OyKNQvmWuhRMgoFqxMQlu84DtMU2tQiSt_N7pheWxn0ZjjBaQY6SWz90&t=7c776dc1" type="text/javascript"/>
<script type="text/javascript"> //<![CDATA[ var CMS = CMS || {}; CMS.Application = { "applicationName": "PIM", "imagesUrl": "/CMSPages/GetResource.ashx?image=%5bImages.zip%5d%2f", "isDebuggingEnabled": false, "contexthelp": { "contextHelp": { "application": { "description": null, "helpTopics": [] }, "helpTopics": [] }, "suppressContextHelp": false }, "applicationUrl": "/", "isDialog": false, "isRTL": "false" }; //]]> </script>
<div class="aspNetHidden">
<script type="text/javascript"> //<![CDATA[ Sys.WebForms.PageRequestManager._initialize('m$manScript', 'aspnetForm', ['tm$c$plc$lt$ctl00$HeaderActions$headerElem$pnlUp','','tm$c$plc$lt$ctl01$ST_UI_Listing$gridElem$a$pnlUpdate','','tm$c$ctxM','','tm$pM$pMP','','tm$c$plc$lt$ctl01$MessagesPlaceholder$plcMess$pMP','','tm$c$plc$lt$ctl01$ST_UI_Listing$gridElem$plcMess$pMP',''], [], [], 90, 'm'); //]]> </script>
<div id="m_pnlBody" class="PageBody">
<div id="m_pM_pMP"/>
<div id="m_c_m"/>
<div id="m_c_ctxM">
<div id="UIHeader" class="UIHeader">
<div id="m_c_plc_lt_ctl00_HeaderActions_headerElem_pnlUp">
<div id="m_c_plc_lt_ctl00_HeaderActions_headerElem_pnlActions" class="header-actions-container">
<button id="m_c_plc_lt_ctl00_HeaderActions_headerElem_headerElem_HA_0" class="btn btn-primary" type="button" name="m$c$plc$lt$ctl00$HeaderActions$headerElem$headerElem_HA_0" value="New Product Type" onclick="window.open('/CMSModules/AdminControls/Pages/UIPage.aspx?elementguid=6e43429b-1086-4669-8130-9ee24ebb1d21&displaytitle=false','_self'); return false;__doPostBack('m$c$plc$lt$ctl00$HeaderActions$headerElem$headerElem_HA_0','')">New Product Type</button>
</div>
<div id="m_c_plc_lt_ctl00_HeaderActions_headerElem_pnlAdditionalControls" class="dont-check-changes "/>
</div>
<div id="m_c_plc_lt_ctl00_HeaderActions_HeaderActions_zone_PageTitle_pnlHeader" class="PageHeader SimpleHeader">
<div id="CMSHeaderDiv" class="CMSHeaderDiv"/>
<div id="CKToolbar" class="CKToolbar"/>
</div>
<div id="UIContent" class="UIContent scroll-area" style="height: auto; top: 56px; bottom: 0px;">
</div>
<script type="text/javascript"> //<![CDATA[ (function() {var fn = function() {$get("m_manScript_HiddenField").value = '';Sys.Application.remove_init(fn);};Sys.Application.add_init(fn);})();//]]> </script>
<script type="text/javascript"> //<![CDATA[ document.pageLoaded = true; //]]> </script>
<script type="text/javascript"> //<![CDATA[ cmsrequire(['CMS/UniGrid'], function(module) { new module({ "id": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem", "uniqueId": "m$c$plc$lt$ctl01$ST_UI_Listing$gridElem", "hdnCmdNameId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_hidCmdName", "hdnCmdArgId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_hidCmdArg", "hdnSelHashId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_hidSelectionHash", "hdnSelId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_hidSelection", "gridId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_v", "resetSelection": false, "allowSorting": false }); }); //]]> </script>
<script type="text/javascript"> //<![CDATA[ cmsrequire(['CMS/AdvancedExport'], function(module) { new module({ "id": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_a", "uniqueId": "m$c$plc$lt$ctl01$ST_UI_Listing$gridElem$a", "unigridId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem", "hdnParamId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_a_hdnParameter", "btnFullPostbackUniqueId": "m$c$plc$lt$ctl01$ST_UI_Listing$gridElem$a$btnFullPostback", "chlColumnsId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_a_chlColumns", "hdnDefaultSelectionId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_a_hdnDefaultSelection", "revRecordsId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_a_revRecords", "cvColumnsId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_a_cvColumns", "mdlAdvancedExportId": "m_c_plc_lt_ctl01_ST_UI_Listing_gridElem_a_mdlAdvancedExport", "fixHeight": false, "alertMessage": null }); }); //]]> </script>
The button I need to interact is
//button[#id='m_c_plc_lt_ctl00_HeaderActions_headerElem_headerElem_HA_0']
I want to display remove and Edit Icon in order summary section in checkout page, I have tried below changes:
/magento_demo/vendor/magento/module-checkout/view/frontend/web/template/summary/item/details.html
I have added Edit / Delete links like this:
<div class="primary">
<a data-bind="attr: {href: getConfigUrl($parent.item_id),title: $t('Edit item')}" class="action edit">
<span data-bind="i18n: 'Edit'"></span>
</a>
</div>
<div class="secondary">
<a href="#" data-bind="attr: {'data-post': getDataPost($parent.item_id),title: $t('Delete item')}" class="action delete">
<span data-bind="i18n: 'Remove'"></span>
</a>
</div>
In
/magento_demo/vendor/magento/module-checkout/view/frontend/web/js/view/summary/item/details.js
I have done below changes:
define(
[
'uiComponent',
'mage/url',
'Magento_Customer/js/customer-data',
'jquery',
'ko',
'underscore',
'sidebar',
'mage/translate'
],
function (Component,url,customerData,$,ko, _) {
"use strict";
return Component.extend({
defaults: {
template: 'Magento_Checkout/summary/item/details'
},
getValue: function(quoteItem) {
var itemId = elem.data('cart-item'),
itemQty = elem.data('item-qty');
return quoteItem.name;
},
getDataPost: function(itemId) {
console.log(itemId);
var itemsData = window.checkoutConfig.quoteItemData;
var obj = {};
var obj = {
data: {}
};
itemsData.forEach(function (item) {
if(item.item_id == itemId) {
var mainlinkUrl = url.build('checkout/cart/delete/');
var baseUrl = url.build('checkout/cart/');
console.log(mainlinkUrl);
obj.action = mainlinkUrl;
obj.data.id= item.item_id;
obj.data.uenc = btoa(baseUrl);
}
});
return JSON.stringify(obj);
},
getConfigUrl: function(itemId) {
var itemsData = window.checkoutConfig.quoteItemData;
var configUrl = null;
var mainlinkUrl = url.build('checkout/cart/configure');
var linkUrl;
itemsData.forEach(function (item) {
var itm_id = item.item_id;
var product_id = item.product.entity_id;
if(item.item_id == itemId) {
linkUrl = mainlinkUrl+"/id/"+itm_id+"/product_id/"+product_id;
}
});
if(linkUrl != null) {
return linkUrl;
}
else {
return '';
}
}
});
}
);
But when I click on delete button, it just redirecting to cart page but not deleting product, what can be the issue here.
I wanted to filter UnitPrice and ProductID. This is the sample, you want more using the jsfiddle link. Check this jsfiddle for more detail & work my program in that
//change event
$("#category").keyup(function () {
var selecteditem = $('#category').val();
var kgrid = $("#grid").data("kendoGrid");
selecteditem = selecteditem.toUpperCase();
var selectedArray = selecteditem.split(" ");
if (selecteditem) {
});
var orfilter = { logic: "or", filters: [] };
var andfilter = { logic: "and", filters: [] };
$.each(selectedArray, function (i, v) {
if (v.trim() == "") {
}
else {
$.each(selectedArray, function (i, v1) {
if (v1.trim() == "") {
}
else {
orfilter.filters.push({ field: "ProductName", operator: "contains", value:v1 },
{ field: "QuantityPerUnit", operator: "contains", value:v1});
andfilter.filters.push(orfilter);
orfilter = { logic: "or", filters: [] };
}
});
}
});
kgrid.dataSource.filter(andfilter);
}
else {
kgrid.dataSource.filter({});
}
});
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.2.624/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/jszip.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.2.624/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 230px" />
<input id="reset" type="button" value="Reset" />
<input id="reset1" type="button" value="ORLOGIC" />
</div>
</div>
<script>
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
pageSize: 7,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
sortable: true,
pageable: true,
columns: [
{
field: "ProductID",
width: 100
},
{
field: "ProductName",
title: "Product Name"
},
{
field: "UnitPrice",
title: "Unit Price",
width: 100
},
{
field: "QuantityPerUnit",
title: "Quantity Per Unit"
}
]
});
//change event
$("#category").keyup(function () {
var selecteditem = $('#category').val();
var kgrid = $("#grid").data("kendoGrid");
var gridListFilter = { filters: [] };
var gridDataSource = kgrid.dataSource;
gridListFilter.logic = "or"; // a different logic 'and' can be selected
gridListFilter.filters.push({ field: "ProductID", operator: "eq", value: parseInt(selecteditem) });
gridListFilter.filters.push({ field: "UnitPrice", operator: "eq", value: parseInt(selecteditem) });
gridDataSource.filter(gridListFilter);
gridDataSource.read();
});
$('#reset').click(function () {
//not working yet
$('#category').val('');
$("#grid").data("kendoGrid").dataSource.filter([]);
});
//Or LOGIC HERE... DOESN'T WORK
$('#reset1').click(function () {
$("#grid").data("kendoGrid").dataSource.filter({
logic: "or",
filters: [
{
field: "ProductName",
operator: "eq",
value: "Chang"
},
{
field: "QuantityPerUnit",
operator: "contains",
value: "box"
}
]
});
});
});
</script>
</body>
</html>
Let me know if any concern.
I am trying to get data from controller to view using ajax but not successfull. Following is my code this is working fine but not getting data. Please help and correct me if i missed something in my code.
Following is my code.
#model MvcAppLearn.Models.Student
<!DOCTYPE html>
<html lang="en">
<head>
<title>This is tile</title>
</head>
<body>
#using (Html.BeginForm("Index", "popup", FormMethod.Get, new { id = "myform" }))
{
<p>
Find by name: #Html.TextBox("SearchString")
<button id="model-opener">Open dialog</button>
</p>
<div id="dialog-model" title="This is title">
<p>
#Html.TextBoxFor(item => item.FirstName, new { id = "ffirst" })<br />
#Html.TextBoxFor(item => item.LastName, new { id = "llast" })<br />
</p>
</div>
}
</body>
</html>
#section script
{
<script>
$(function () {
$("#dialog-model").dialog({
autoOpen: false,
height: 300,
width: 340,
model: true,
show: {
effect: "shake",
duration: 100
},
});
$("#model-opener").click(function (e) {
e.preventDefault();
var txtFirstName = $('#ffirst');
var txtLastName = $('#llast');
var txtSearch = $('#SearchString');
$.ajax({
url: '/popup/Index',
type: 'GET',
data: {
StudentId: txtSearch.val()
},
success: function (data) {
txtFirstName.val(data.FirstName); //HERE IS THE PROBLEM IN GETTING VALUE
txtLastName.val(data.LastName); //HERE IS THE PROBLEM IN GETTING VALUE
$("#dialog-model").dialog("open");
},
error: function () {
alert("Oh noes");
}
});
});
});
</script>
}
Below is my controller
public ActionResult Index(int? StudentId)
{
if (StudentId == null)
{
StudentId = 2;
return View();
}
using (var db = new StdContext())
{
Student std = new Student();
std = db.Students.Where(m => m.StudentId == StudentId).Single();
return View(std);
}
}
You're not returning data, you're returning a view:
return View(std);
If you just want to return the data of the Student object to be consumed by JavaScript code then you probably just want to return it as JSON data:
return Json(std);