Develop Reference

Widget z-index modification

I am having issue in displaying a widget inside a modal on ASP.NET MVC platform. Currently, the widget is showing at the back of my modal.
#Html.TextBoxFor(Function(model) model.Clinic, New With {.Style = "width:300px", .id = "txtClinic"})
Widget
$.widget('custom.mcautocomplete', $.ui.autocomplete, {
_create: function () {
this._super();
this.widget().menu("option", "items", "> :not(.ui-widget-header)");
},
_renderMenu: function (ul, items) {
var self = this,
thead;
if (this.options.showHeader) {
table = $('<div class="ui-widget-header" style="width:100%"></div>');
$.each(this.options.columns, function (index, item) {
table.append('<span style="padding:0 4px;float:left;width:' + item.width + ';">' + item.name + '</span>');
});
table.append('<div style="clear: both;"></div>');
ul.append(table);
}
$.each(items, function (index, item) {
self._renderItem(ul, item);
});
},
_renderItem: function (ul, item) {
var t = '',
result = '';
var term = this.term;
$.each(this.options.columns, function (index, column) {
var value = item[column.valueField ? column.valueField : index];
t += '<span style="padding:0px 4px;float:left;width:' + column.width + ';height:13px;">' + value + '</span>'
});
var $a = '<a class="mcacAnchor">' + t + '<div style="clear: both;"></div></a>';
result = $('<li style="border-bottom: solid 1px #cccccc"></li>')
.data('ui-autocomplete-item', item)
.append($a)
.appendTo(ul);
return result;
}
});
Ajax
$("#txtClinic").mcautocomplete({
showHeader: true,
columns: [{
name: 'Code',
width: '120px',
valueField: 'ClinicCode'
}, {
name: 'Clinic Name',
width: '370px',
valueField: 'Clinic'
}
],
minLength: 3,
source: function (request, response) {
$.ajax({
cache: false,
url: '/User/GetClinicAllDetails',
type: "POST",
dataType: "json",
data: { query: request.term },
success: function (data) {
response($.map(data, function (item) {
return {
ClinicCode: item.ClinicCode,
Clinic: item.Clinic
}
}));
},
error: function (response) {
swal("", response.message, "error");
}
});
}
});
All the codes are listed in my Modal View, any ideas what could went wrong?

For anyone who is having the same issue as me.
Simply add the following line to the widget portion:
$(".ui-autocomplete.ui-front.ui-menu.ui-widget.ui-widget-content").addClass("zindex9999");
In your style:
.zindex9999{z-index:9999 !important;}
The reason of doing so is because when a modal is opened, the position is set to absolute and it neglect all the existing div, by setting z-index to 9999, it actually overwrites the absolute index as the absolute index is around 9998 (I'm not sure)

Auto-complete select multiple tags in asp.net

Anyone can tell me how can i use tokenizing in auto-complete for multiple selection, I am make you sure that, i want only with asp.net web from web service
My Code:
$(function () {
// Web servcice javascript code for City
$("[id*=ctl00_ContentMain_TextBoxSkills]").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/WebServices/WebServiceSkills.asmx/GetAutoCompleteData")%>',
data: "{ 'username': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
if (data.d.length > 0) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
};
}))
} else {
response([{ label: 'No results found.', val: -1 }]);
}
}
});
},
select: function (e, u) {
if (u.item.val == -1) {
return false;
}
}
});
});
I want to use a web service to fetch data from database and show on front-end for multiple selection
Web Service:
DataTable dt = userRegistrationHelper.GetSkillsList(username);
DataRow[] rows = null;
rows = dt.Select(string.Format("SkillName = {0}", username));
string[] result = new string[rows.Length];
for (int i = 0; i <= rows.Length - 1; i++)
{
result[i] = rows[i]["SkillName"].ToString();
}
return result;

Autocomplete with multiple words or values with comma separated
$(function () {
$("[id*=ctl00_ContentMain_TextBoxSkills]").autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: '<%=ResolveUrl("~/WebServices/WebServiceSkills.asmx/GetAutoCompleteData")%>',
data: "{'username':'" + extractLast(request.term) + "'}",
dataType: "json",
success: function(data) {
response(data.d);
},
error: function(result) {
alert("Error");
}
});
},
focus: function() {
// prevent value inserted on focus
return false;
},
select: function(event, ui) {
var terms = split(this.value);
// remove the current input
terms.pop();
// add the selected item
terms.push(ui.item.value);
// add placeholder to get the comma-and-space at the end
terms.push("");
this.value = terms.join(", ");
return false;
}
});
$("[id*=ctl00_ContentMain_TextBoxSkills]").bind("keydown", function(event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).data("autocomplete").menu.active) {
event.preventDefault();
}
})
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
});

asp.net jquery trigger c# function on click at modal form

I am trying to get data from modal form to parent form but i couldnt make it out. I am creating jquery modal form with webusercontrol and showing data in gridview. I want to get selected rows and add it on grid in my parent form.
I am creating this with this code my dialog form
function dialogAc(ID1) {
$.ajax({
type: 'POST',
url: '<%= ResolveUrl("/faturaIrsaliye/FaturaKaydet.aspx/abc") %>',
data: "{ID1:'" + ID1 + "' }",
dataType: 'json',
async: true,
cache: false,
contentType: 'application/json; charset=utf-8',
success: function (msg) {
$("#IrsaliyeDetay").append(msg.d);
},
failure: function (msg) {
alert("Error");
}
});
ID11 = ID1;
$("#dialog-form").dialog("open");
}
and this is my method to create.
[WebMethod]
public static string abc(String ID1)
{
string sonuc = "";
Page p = new Page();
UserControl u = (UserControl)p.LoadControl("~/faturaIrsaliye/WebUserControl1.ascx");
WebUserControl1 kk = (u as WebUserControl1);
kk.irsaliyeBaslikID = ID1.toInt();
p.Controls.Add(u);
StringWriter sw = new StringWriter();
HttpContext.Current.Server.Execute(p, sw, false);
sonuc = sw.ToString();
sw.Close();
return sonuc;
}
everythings is fine until now.
This last code is not triggers my other method. I am getting 404 not found error.
$(function () {
$("#dialog-form").dialog({
autoOpen: false,
height: 500,
width: 800,
modal: true,
buttons: [{
text: "Select",
click: function () {
$.ajax({
type: 'POST',
url: '<%= ResolveUrl("/faturaIrsaliye/WebUserControl1.ascx/abc") %>',
data: "{}",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (result) {
$('#sonuc').html(result.d);
alert("clicked");
},
error: function (response) {
alert(response.status + ' ' + response.statusText);
}
});
},
}, {
text: "Close",
click: function () {
$(this).dialog('close');
//window.location.reload(true);
return false;
}
}
]
});
});

ResolveUrl requires a relative URL so something like
ResolveUrl("~/faturaIrsaliye/WebUserControl1.ascx/abc")

JSON returned from ASP.NET does not bind with Kendo grid

I can successfully make the AJAX call to my web method using the following code and web method return the JSON which is pasted below:
My Web Method
[WebMethod]
public static string GetJson()
{
string query = "SELECT top 10 cast(ClientUID as varchar) ClientUID FROM <tablename>";
SqlCommand cmd = new SqlCommand(query);
// Populate the DataSet.
DataSet data = GetData(cmd);
// return the Customers table as JSON.
DataTable dt = data.Tables[0];
var returnJSON = (from p in dt.AsEnumerable()
select new
{
ClientUID = p.Field<string>("ClientUID")
}).ToList();
var serializer = new JavaScriptSerializer();
string json = serializer.Serialize(returnJSON);
return json;
}
JSON returned by web method:
[{"ClientUID":"1"},{"ClientUID":"2"},{"ClientUID":"3"},{"ClientUID":"4"},{"ClientUID":"5"},{"ClientUID":"6"},{"ClientUID":"7"},{"ClientUID":"8"},{"ClientUID":"9"},{"ClientUID":"10"}]
Call to web method using AJAX
<script type="text/javascript">
$(document).ready(function() {
$.ajax(
{
type: "POST",
url: "ServeClientCalls.aspx/GetJson",
data: {},
contentType: "application/json;charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function(msg) {
//checking the content return from the above web method
$("#msg").html(msg.d);
//Binding to kendo Grid
$("#grid").kendoGrid({
dataSource: {
data: msg.d,
schema: {
model: {
fields: {
ClientUID: { type: "string" }
}
}
},
pageSize: 20
},
height: 430,
filterable: true,
sortable: true,
pageable: true,
columns: [
{ field: "ClientUID" }
]
});
},
error: function(x, e) {
$("#msg").html(x.responseText);
}
});
});
</script>
Problem : My grid does not bind and only headers are displayed whereas when I use the code in this manner mentioned below it is working
<script type="text/javascript">
$(document).ready(function() {
$.ajax(
{
type: "POST",
url: "ServeClientCalls.aspx/GetJson",
data: {},
contentType: "application/json;charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function(msg) {
//checking the content return from the above web method
$("#msg").html(msg.d);
**var p = [{ ClientUID: 1 }, { ClientUID: 2 }, { ClientUID: 3 }, { ClientUID: 4 }, { ClientUID: 5 }, { ClientUID: 6 }
, { ClientUID: 7 }, { ClientUID: 8 }
, { ClientUID: 9 }, { ClientUID: 10}];**
//Binding to kendo Grid
$("#grid").kendoGrid({
dataSource: {
**data: p,**
schema: {
model: {
fields: {
ClientUID: { type: "string" }
}
}
},
pageSize: 20
},
height: 430,
filterable: true,
sortable: true,
pageable: true,
columns: [
{ field: "ClientUID" }
]
});
},
error: function(x, e) {
$("#msg").html(x.responseText);
}
});
});
</script>

Use data: "d", under schema section. That should work.

Inline edit in Kendo UI grid?

The cancel button still exists and the update button never changes back to edit in Kendo UI grid after the ajax call to server?! I guess I have to notify the grid that the update has done, but how ?
<div id="mykendoGrid">
<script>
$(document).ready(function () {
var MydataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
$.ajax({
url: "/_layouts/AjaxCallHandler/Handler.ashx",
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
//data: options.data,
success: function (data) {
//ko.mapping.fromJS(data, self.seats);
options.success(data);
}
});
},
update: function (options) {
$.ajax(
{
type: 'POST',
url: "/_layouts/AjaxCallHandler/Handler.ashx",
data: { 'currency': ko.mapping.toJSON(options.data) },
success: function (response)
{
// do nothing
alert("Successfully Saved.");
},
error: function (repsonse) {
alert("Manage: UpdateReportName -> Ajax Error!");
}
});
return;
}
//parameterMap: function (data, operation) {
// if (operation !== "read") {
// return JSON.stringify({ currency: data })
// //return ko.mapping.fromJS(data, self.seats);
// }
//}
},
batch: false,
pageSize: 10,
schema: {
//data: 'd',
model:
{
id: "ID",
fields:
{
ID: { editable: false, nullable: false },
DisplayName: { editable: true },
Code: { editable: true }
}
}
}
})
$("#mykendoGrid").kendoGrid({
dataSource: MydataSource,
pageable: true,
toolbar: ["create"],
columns: [{ field: "ID", title: "ID" }, { field: "DisplayName", title: "Display Name" }, { field: "Code", title: "Code" }, { command: ["edit"], title: " ", width: "250px" }],
editable: "inline",
scrollable: true
});
});
</script>
</div>

You need to call options.success();
update: function (options) {
$.ajax(
{
type: 'POST',
url: "/_layouts/AjaxCallHandler/Handler.ashx",
data: { 'currency': ko.mapping.toJSON(options.data) },
success: function (response)
{
// do nothing
alert("Successfully Saved.");
options.success();
//or
//options.success(reponse);
},
error: function (response) {
alert("Manage: UpdateReportName -> Ajax Error!");
options.error();
//or
//options.error(reponse);
}
});
return;
}

You need to call yourGrid.saveChanges(); from your JavaScript. This will iterate through each row actioning the necessary create, update and destroy commands for your grids datasource and all your edits will be saved.