PDA

View Full Version : [CLOSED] Razor - ComponentColumn as Over Editor - Set default value for combo box column



MTSI
Nov 30, 2012, 10:21 AM
Hi,

I am facing some issues while implementing below mentioned scenario.

Scenario:

1. In Editable grid Component column I am having combo box component. In that I want to select one item as default while adding rows in that grid. Grid component column Editable mode is OverOnly (true).

Issue:

1. While adding rows that combo box store load method was not triggered. So items are not populated. If I mouse over that particular row means then only store load method got triggered otherwise it won't trigger. So due to this issue I am not able to select default value for that combo box.

Below I mentioned the code sample.




public class JobWitnesses
{
public string Name { get; set; }
public int Id { get; set; }
}




public AjaxStoreResult GetWitnessesByJobId()
{
try
{
List<JobWitnesses> _list = new List<JobWitnesses>();

for (int i = 0; i < 100; i++)
{
_list.Add(new JobWitnesses
{
Id = i,
Name = string.Format("{0}_{1}", "Witness Name", i.ToString())
});
}

var list = from rec in _list
select new
{
Id = rec.Id,
Name = rec.Name
};
int total = list.ToList().Count();
return new AjaxStoreResult(list.ToList(), total);

}
catch
{

}

return new AjaxStoreResult();
}




@using Ext.Net.MVC
@using Ext.Net
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var departmentRenderer = function (value) {
var comboName = "";
if (App.comboBoxStore != undefined && App.comboBoxStore.data != undefined
&& App.comboBoxStore.data.items.length > 0) {
$(App.comboBoxStore.data.items).each(function (i) {
if (App.comboBoxStore.data.items[i].data.Id == value) {
comboName = App.comboBoxStore.data.items[i].data.Name;
}
});
}
return comboName;
};
var submitValue = function () {
try {

var destination = App.editorfieldMapping;
var buf = [];
buf.push(App.CustomerBillingStore.createModel({
Id: 6,
JobWitnessesID: 6
}));

destination.store.add(buf);

} catch (e) {
alert(e.message);
}
};
function comboSelect() {
try {
} catch (e) {
alert(e.message);
}
}
</script>
</head>
<body>
@{
var objc = new object[]
{
};
}
@Html.X().ResourceManager()
@(
Html.X().GridPanel()
.ID("editorfieldMapping")
.TopBar(gridtopbor =>
{
gridtopbor.Add(
Html.X().Toolbar()
.ID("grdtoolbar")
.Margins("0 0 4 0")
.Items(gridtoolbatitems =>
{
gridtoolbatitems.Add(
Html.X().Button()
.ID("exportexcel")
.Listeners(listen => { listen.Click.Handler = "submitValue();"; })
.Text("Add")
.Icon(Ext.Net.Icon.Add)
);
})
);
})
.Store(storeitem =>
{
storeitem.Add(
Html.X().Store()
.ID("CustomerBillingStore")
.PageSize(1000)
.AutoLoad(true)
.DataSource(objc)
.Model(model => model.Add(Html.X().Model()
.IDProperty("Id")
.Fields(fields =>
{
fields.Add(Html.X().ModelField().Name("Id"));
fields.Add(Html.X().ModelField().Name("JobWitnessesID").Type(Ext.Net.ModelFieldType.Int));
})
))
);
})
.ColumnModel(columnmodel =>
{
columnmodel.Columns.Add(Html.X().Column()
.Text("Job ID")
.Sortable(true)
.Width(50)
.DataIndex("Id")
.Groupable(false)
);
columnmodel.Columns.Add(
Html.X().ComponentColumn()
.ID("jobwitnessid")
.Text("Combo Box")
.DataIndex("JobWitnessesID")
.OverOnly(true)
.Editor(true)
.Sortable(false)
.Draggable(false)
.MenuDisabled(true)
.PinEvents(new string[] { "expand" })
.UnpinEvents(new string[] { "collapse" })
.Renderer(new Renderer
{
Fn = "departmentRenderer"
})
.Flex(1)
.Component(extcomp =>
{
extcomp.Add(
Html.X().ComboBox()
.ID("comboItems")
.Editable(false)
.DisplayField("Name")
.ValueField("Id")
.QueryMode(DataLoadMode.Local)
.Store(storeitem =>
{
storeitem.Add(
Html.X().Store()
.ID("comboBoxStore")
.AutoLoad(true)
.Proxy(comboproxy =>
{
comboproxy.Add(
Html.X().AjaxProxy()
.Url(Url.Content("~/AjaxData/GetWitnessesByJobId/"))
.Reader(comboreader =>
{
comboreader.Add(
Html.X().JsonReader()
.Root("data")
);
})
);
})
.Model(model => model.Add(Html.X().Model()
.IDProperty("Id")
.Fields(fields =>
{
fields.Add(Html.X().ModelField().Name("Id"));
fields.Add(Html.X().ModelField().Name("Name"));
})
))
);
})
);
})
);
})
)
</body>
</html>



Thanks in advance.

Daniil
Nov 30, 2012, 1:08 PM
Hi @MTSI,

I would try this ComponentColumn's Bind listener.

cmp.getStore().on('load', function () { cmp.setValue('default value'); });

MTSI
Nov 30, 2012, 1:41 PM
Hi @MTSI,

I would try this ComponentColumn's Bind listener.

cmp.getStore().on('load', function () { cmp.setValue('default value'); });

Thanks for your reply.

Unfortunately your solution was not working. Please read it below mentioned scenario's. It would be better if you reproduce the same issue in my sample which one I provided to you.

Scenario:

1. In Editable grid Component column I am having combo box component. In that I want to select one item as default while adding rows in that grid. Grid component column Editable mode is OverOnly (true).

Issue:

1. While adding rows that combo box store load method was not triggered. So items are not populated. If I mouse over that particular row means then only store load method got triggered otherwise it won't trigger. So due to this issue I am not able to select default value for that combo box.

Thanks in advance.

Daniil
Nov 30, 2012, 3:39 PM
Please clarify when do you need to set a default value for a ComboBox? Before its Store loading?

MTSI
Dec 01, 2012, 5:51 AM
Please clarify when do you need to set a default value for a ComboBox? Before its Store loading?

In below mentioned scenario I need to set default value.

1. While adding a new row in Grid by using Add New button. (In my sample I tried but unable to achieve this)

Thanks in advance.

Daniil
Dec 03, 2012, 6:34 AM
Please try this code in the Bind listener.

cmp.getStore().load();
cmp.getStore().on('load', function () { cmp.setValue('default value'); });

MTSI
Dec 03, 2012, 8:17 AM
Please try this code in the Bind listener.

cmp.getStore().load();
cmp.getStore().on('load', function () { cmp.setValue('default value'); });

Hi,

Thanks for your reply.
I applied this code but still it is not working. Your self apply this code in that sample which one shared with you.

Thanks in advance.

Daniil
Dec 03, 2012, 10:43 AM
Well, I launched the example that you provided and see the default value in the ComboBox when I move the mouse over a just added row.

I tested with the latest sources from the trunk. (I had to replace AjaxStoreResult with StoreResult. It has been renamed.)

Please clarify are you facing another behavior?

MTSI
Dec 03, 2012, 12:38 PM
Well, I launched the example that you provided and see the default value in the ComboBox when I move the mouse over a just added row.

I tested with the latest sources from the trunk. (I had to replace AjaxStoreResult with StoreResult. It has been renamed.)

Please clarify are you facing another behaviour?

Thanks for your reply.

The same behaviour only I too facing. So I want without doing mouse over to added column, the value should be visible. This is what I am expecting from your end.

Thanks in advance.

Daniil
Dec 03, 2012, 2:26 PM
Well, there is no ComboBox before you move the mouse over the row. So, its Store doesn't load any data until the ComboBox is rendered.

You can define the Store outside the ComboBox referring it using the ComboBox's StoreID property.

This idea is demonstrated here:
http://examples2.ext.net/#/GridPanel/Data_Presentation/Editor_Field_Mapping/

MTSI
Dec 04, 2012, 9:58 AM
Well, there is no ComboBox before you move the mouse over the row. So, its Store doesn't load any data until the ComboBox is rendered.

You can define the Store outside the ComboBox referring it using the ComboBox's StoreID property.

This idea is demonstrated here:
http://examples2.ext.net/#/GridPanel/Data_Presentation/Editor_Field_Mapping/

Hi,

Thanks for your reply. The example your shared it is not razor engine. I am not sure how it could be achievable in Razor view engine. It would be better if you can provide some code samples for razor view engine ( 1. How to render a store outside? 2 . How to bind the store into combo box which one place in side the gird component column not in ordinary combo box).

It would be better if you update the code in my sample and make it workable.

Thanks in advance.

Daniil
Dec 04, 2012, 12:20 PM
Your code will require cleaning-up before I can post it here.

So, here is an example which demonstrating what I meant.

Example View

<!DOCTYPE html>

<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
@Html.X().ResourceManager()

@(Html.X().Store()
.ID("Store1")
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("text"),
Html.X().ModelField().Name("value")
)
)
.Proxy(proxy =>
proxy.Add(Html.X().AjaxProxy()
.Reader(Html.X().JsonReader().Root("data"))
.Url(Url.Action("GetData"))
)
)
)

@Html.X().ComboBox().StoreID("Store1")
</body>
</html>


Example Action

public ActionResult GetData()
{
return this.Store(new object[]
{
new
{
text = "Item 1",
value = "1"
},
new
{
text = "Item 2",
value = "2"
},
}
);
}

MTSI
Dec 05, 2012, 6:42 AM
Your code will require cleaning-up before I can post it here.

So, here is an example which demonstrating what I meant.

Example View

<!DOCTYPE html>

<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
@Html.X().ResourceManager()

@(Html.X().Store()
.ID("Store1")
.Model(Html.X().Model()
.Fields(
Html.X().ModelField().Name("text"),
Html.X().ModelField().Name("value")
)
)
.Proxy(proxy =>
proxy.Add(Html.X().AjaxProxy()
.Reader(Html.X().JsonReader().Root("data"))
.Url(Url.Action("GetData"))
)
)
)

@Html.X().ComboBox().StoreID("Store1")
</body>
</html>


Example Action

public ActionResult GetData()
{
return this.Store(new object[]
{
new
{
text = "Item 1",
value = "1"
},
new
{
text = "Item 2",
value = "2"
},
}
);
}

Hi,

Thanks for your reply. Unfortunately your sample code was not wokring. I am getting this exception
Error executing child request for handler 'Ext.Net.SelfRenderingPage'.

thanks in advance.

Daniil
Dec 05, 2012, 6:55 AM
There is no error for me.

Could you update from the trunk and retest?
http://svn.ext.net/premium/trunk/